Wanderlust Wall - 旅の夢をビジュアル化する願望ボード
概要
🌍 Wanderlust Wall
行きたい場所をカードにして自由に配置し、ルートで繋げる旅行願望ボード。
✨ 主な機能
📍 フリーキャンバス配置
カードをドラッグ&ドロップで自由に配置。旅のイメージを視覚的に整理できます。
🧵 Route Connector（コネクティング・ドッツ）
カード同士を糸のような曲線で接続。「点」を「線」にして旅のルートを可視化します。
✈️ 移動手段スタイル（5種類）
- ✈️ 飛行機: 青い点線（流れるアニメーション）
- 🚃 電車: 緑の短い点線
- 🚗 車: オレンジの実線
- 🚶 徒歩: 紫の細かい点線
- 🚢 船: シアンの破線（流れるアニメーション）
🎨 背景テーマ（6種類）
旅の雰囲気に合わせて背景を変更できます。
- ミニマル: クリーンな白
- 空: 青空グラデーション
- 夕焼け: オレンジ〜ピンク
- 星空: 夜の深い青紫（ダークモード）
- 地図: 方眼紙風パターン
- 紙: セピア調のノート風
🎬 デモモード
ヨーロッパ周遊7日間（パリ→ブリュッセル→アムステルダム→ケルン→チューリッヒ→ミラノ→ニース）のサンプルを表示。使い方をすぐに理解できます。
💡 革新性
単なる「行きたい場所リスト」ではなく、旅のルート（文脈）を視覚的に整理できる点が特徴。マインドマップのような堅苦しさを排除し、コルクボードに糸を張るようなアナログで情緒的な体験を提供します。
🎯 制約条件
- ⏱ 制作時間: 1時間（実際は機能追加で延長）
- 🖱 必須要素: ドラッグ&ドロップ
- 💾 ストレージ: LocalStorageのみ
📱 こだわりポイント
- スマホ最適化: タッチ操作、片手で使えるUI
- アナログ感: 糸のような曲線、移動手段アイコン
- 直感的操作: ダブルタップで接続、ホバーで削除
- レスポンシブ: PC・タブレット・スマホ完全対応
リンク
制作時間
2.5時間
学んだこと・振り返り
学んだこと・振り返り
🔄 ツール選択の重要性
Manusで何時間も格闘していた問題が、GenSparkに移行したら30分で解決。AIツールによって得意分野が全く異なることを痛感しました。
- Manus: ドキュメント・ノート系が得意だが、複雑なコーディングは苦手？
- GenSpark: 静的サイト構築に特化しており、HTML/CSS/JSの実装が得意
今後は最初から用途に合ったツールを選ぶことが重要だと学びました。
💡 アイデアの具体化プロセス
「旅の願望ボード」という漠然としたアイデアから、以下の機能を段階的に追加していきました：
1. 基本: カードの自由配置
2. 革新: Route Connector（線で繋ぐ）
3. 拡張: 移動手段スタイル（飛行機/電車/車/徒歩/船）
4. 完成: 背景テーマ、デモモード
この段階的アプローチにより、コアな価値を見失わずに機能を拡張できました。
🎨 デザインの試行錯誤
最初のグラスモーフィズム＋グラデーション背景は派手すぎたため、Manusで使っていた参考画像を元にクリーンなデザインへリニューアル。「見た目の美しさ」と「使いやすさ」のバランスが重要だと実感しました。
📱 スマホ最適化の重要性
「スマホでも使いやすく」というリクエストに対し、以下の工夫をしてくれました：
- タッチイベント対応（`touchstart`, `touchmove`, `touchend`）
- 片手で届くボタン配置
- ダブルタップで接続モード開始
- ボトムシート風のUI
結果として、PC以上にスマホでの操作が快適になりました。
🚀 完成度の高さ
当初の「1時間・100行制限」という厳しい条件を緩和したことで、以下を実現：
- 8つの機能（配置、接続、画像、色、背景、ズーム、デモ、クリア）
- 6種類の背景テーマ
- 5種類の移動手段スタイル
- レスポンシブ対応
- LocalStorage永続化
「制約にこだわりすぎない」ことの大切さを学びました。
初回プロンプト（計画）
チャレンジ生成ツールで作成した最初の計画です
メインAIツールの評価
GenSpark
良かった点
**Manusからの移行でスムーズに実装完了** Manusで何度もエラーに遭遇して諦めかけていましたが、GenSparkに移行したところ驚くほどスムーズに実装できました。 - **エラーハンドリングが優秀**: 100行制限など厳しい制約条件でも、適切にコードを圧縮・最適化してくれた - **段階的な機能追加に対応**: Route Connector、背景テーマ、移動手段スタイルなど、後から追加した機能も一貫性を保って実装 - **レスポンシブ対応が的確**: スマホでの使いやすさを重視した結果、タッチ操作も完璧に動作 - **デモデータの提案**: ヨーロッパ周遊7日間というリアルなサンプルを自動生成してくれた - **CSS設計が秀逸**: グラスモーフィズム、アニメーション、6種類の背景テーマなど、デザイン性の高い実装
改善してほしい点
**特に大きな不満はなし** 強いて言えば、最初のデザインが少し派手すぎたため、参考画像を元にリニューアルを依頼した点くらい。その際も即座に対応してくれたので問題なし。
総合コメント
**Manusで挫折 → GenSparkで即完成** Manusでは同じ機能を何度も実装し直してもエラーが続き、時間だけが過ぎていく状況でした。GenSparkに切り替えた途端、1時間程度で基本機能が完成し、その後の拡張もスムーズ。 特に印象的だったのは、「動くプロダクトを作る」という目標を最優先してくれた点。最初は100行制限を守ろうとしていましたが、「制約を緩和しても動くものを」と提案したら、すぐに方針転換してくれました。 結果として、当初の構想以上の機能（Route Connector、背景テーマ、移動手段スタイル、デモモード）を実装でき、大満足です。