MIHO YAMAMOTO Portfolio

APP, WEB制作

軽井沢旅行チェックリスト＆スケジュールアプリ

https://v0-karuizawa-checklist-app.vercel.app/

最新の生成AI（v0）を開発パートナーとして全面的に活用し、企画・ディレクションからデプロイ（公開）までをスピード重視で一気通貫して制作した、軽井沢旅行特化型の多機能Webアプリケーションです。
ターゲット

・軽井沢への旅行・観光を予定している方（特に高原の気候に不慣れな方）

・家族や友人と旅行の計画や持ち物をラクラク共有したい方

・旅行のたびに毎回新しく持ち物リストを作るのが面倒な方

・スマホで見やすく、直感的にサクサク操作できる旅行しおりが欲しい方
概要

プログラムコード（Next.js / Tailwind CSS）自体の記述はAIのパワーを最大限に引き出しつつ、制作者自身が「ユーザーの課題解決（軽井沢特有の気候への対策や、LINEでの手軽な共有）」に集中してプロンプト（指示文）を細かくコントロールすることで、ハイクオリティな機能の実装とバグのない堅牢なシステムを短期間で実現しました。

通常の持ち物管理だけでなく、気温の変化が激しい高原ならではの「軽井沢モード」や、行きたい場所を自由にカスタマイズできる「観光ナビ機能」を搭載。さらに、作成した旅のしおりをそのまま友人にLINEで共有できる、実用性を重視したモダンな仕様となっています。

🌲 ワンクリック「軽井沢モード」

ONにすると、防寒着や雨具など、高原の旅に必須の持ち物アイテムが自動的にリストへ追加されます。同時に、画面が軽井沢の自然をイメージした爽やかなグリーンベースのデザインへと美しく切り替わります。

📂 複数リストの保存・呼び出し・複製

「2026年夏の軽井沢」「家族旅行」など、複数の旅行リストを名前をつけて保存可能。過去のリストを複製して新しいリストを作ることもできます。データはLocalStorageを活用し、ブラウザを閉じても自動保存されます。

🗺️ カスタム編集付き「軽井沢観光ナビ」

画面下部に固定されたナビメニューから、主要観光地の公式ページへ1タップでアクセス。さらに、ユーザーが自分で好きなスポット名とURLを入力して、オリジナルのナビゲーションリストを自由に追加・削除できます。

💬 爆速LINE共有機能（データ連動）

「LINEで友達に送る」ボタンを押すだけで、現在の持ち物やスケジュールデータをURLに埋め込んで送信可能。受け取った友達の画面でも、全く同じリスト構造やスケジュールが一瞬で再現されます（※プライバシーに配慮し、チェック状態は全解除されて届く親切設計）。

【開発の背景とこだわり】

旅行の準備を楽しく、そして快適にすることを目指して制作しました。特にこだわったのは「圧倒的な使いやすさ（UX）」と「実用性」です。
単なるメモアプリで終わらせず、一緒に行くメンバーに一発で計画を共有できるLINE連携や、現地の最新情報にすぐアクセスできるナビ機能を1つの画面に集約し、旅行中の「これ1つで完結する安心感」を追求しました。

【技術的な挑戦・工夫】

コンポーネントのクリーンな状態管理
複数リストの切り替えやカスタムカテゴリの追加、LocalStorageへの自動保存を実装するにあたり、Next.jsのサーバーサイドレンダリング（SSR）による初期表示のズレ（Hydration Error）が起きないよう、useEffectなどを活用して安全にフロントエンド側でデータを復元・同期する堅牢なロジックを組み込みました。

実用的なデータ共有ロジック
データベースを使わないサーバーレスな設計でありながら、旅行データをURLパラメータへ安全にエンコードして引き渡す仕組みを自作しました。これにより、ユーザーはログイン不要で、LINEを通じて手軽にデータの受け渡しができる「手軽さ」と「機能性」を両立させています。

レスポンシブUI/UXの追求
旅行前や旅行中の「スマホでの利用」を第一に考え、Tailwind CSSを用いて、片手でもスムーズにチェックや操作ができる完全レスポンシブなUIを構築しました。
制作期間

2日間（生成AIを活用した超高速プロトタイピング開発）
使用技術
- GitHub
- v0
- Cursor
GitHub

GitHubへ