旅程と地図をひとつに
タイムラインと地図を同じ視線上で確認できる、モバイルファーストな導線を用意します。
プロジェクト初期セットアップ完了
モバイルで見やすい旅程アプリの土台を、すぐ開発できる形で用意しました。
App Router・Tailwind CSS・shadcn/ui Button・Wrangler 設定をまとめ、 ローカル開発と Cloudflare Pages 配信を始めやすい最小構成です。
開発コマンド
- ローカル開発
- npm run dev
- Cloudflare ビルド
- npm run cf:build
- Pages プレビュー
- npm run cf:dev
Cloudflare 配信前提
Next.js の静的出力と Wrangler 設定を組み合わせ、Pages へのデプロイ準備を整えます。
同行者にやさしい UI
375px 幅から見やすい余白と44px以上の操作領域を確保した基本レイアウトです。