UI/UX 設計

実装状況サマリ（2026-04-11 時点）

画面	実装状況	備考
ログイン / 新規登録	✅ 実装済み	JWT 認証
ダッシュボード（ホーム）	✅ 実装済み	カウントダウン / マイル残高 / キャンペーン
マイル検索 + 地図	✅ 実装済み	空席カレンダー付きカード展開
イベント管理 - ホーム（旅のしおり）	✅ 実装済み	タイムライン表示
イベント管理 - マイル	✅ 実装済み	保安検査締切・サーチャージ対応
イベント管理 - ホテル	✅ 実装済み	ホテルカード一覧
イベント管理 - グルメ	✅ 実装済み	おすすめ + 保存したグルメ
イベント管理 - 予算	✅ 実装済み	recharts ドーナツチャート
グルメメインタブ	✅ 実装済み	地域別探索
グルメ詳細	✅ 実装済み	食べログ / Google レビュー表示
マイル残高管理	✅ 実装済み	ANA / JAL 別
設定画面	✅ 実装済み	iOS 風グループリスト
チュートリアル（5ステップ）	🚧 実装中	localStorage フラグで制御 / Step 1-5 UI 実装済み
PWA / プッシュ通知	📅 未着手	Phase 5 予定
国際線対応	📅 未着手	Phase 6 予定

凡例: ✅ 実装済み / 🚧 実装中 / 📅 未着手

デザイン方針

方針	詳細
モバイルファースト	スマホでの操作を最優先に設計
Apple HIG準拠	ミニマルで洗練されたUI（DESIGN.md参照）
PWA対応	ネイティブアプリに近い体験
日本語UI	将来的に多言語対応可能な構造
Tailwind CSS	ユーティリティファーストCSS

デザインシステム

プロジェクトルートの DESIGN.md にApple HIG + 旅行UIを融合した完全なデザインシステム（9セクション構成）を定義しています。このドキュメントは create-design スキルで生成されており、カラー・タイポグラフィ・余白・角丸・影・モーションの全トークンを網羅します。主要なデザイントークンは以下の通りです。

カラーパレット

トークン	値	用途
bg-base	`#FFFFFF`	メイン背景
bg-secondary	`#F5F5F7`	セクション背景
bg-tertiary	`#E8E8ED`	入力フィールド・セグメントコントロール背景
text-primary	`#1D1D1F`	見出し
text-secondary	`#6E6E73`	本文
accent	`#0071E3`	CTA・リンク・アクティブ状態
ana-blue	`#00288F`	ANAブランドカラー
jal-red	`#CC0000`	JALブランドカラー
success	`#34C759`	予約確定・空席あり
warning	`#FF9500`	レーティング・残りわずか
border	`rgba(0,0,0,0.08)`	カード・セクション境界

Stitch デザインカンプ

Stitch SDK（Google 提供のデザイン生成ツール）で作成した HTML モックアップが、開発期間中のビジュアルリファレンスとして stitch-output/ に格納されています。実装時はこれらのモックアップを React コンポーネントに落とし込みます（stitch-output/ は設計期限定の中間成果物）。

ファイル	画面
`10_event_dashboard.html`	イベント - ダッシュボード（旅のしおり）
`11_event_mile.html`	イベント - マイルタブ
`12_event_hotel.html`	イベント - ホテルタブ
`13_event_gourmet.html`	イベント - グルメタブ
`14_event_budget.html`	イベント - 予算タブ

画面アーキテクチャ

[Login / Register]
      │
      ▼
[Tutorial (5 steps)] ← 初回ログイン時のみ
  1. マイル登録（ANA/JAL残高）
  2. 位置情報許可（出発空港の推定）
  3. 旅行先選択（セグメントコントロールで国内/海外）
  4. カレンダー選択
  5. 仮登録（トリップ草案作成）
      │
      ▼
[Dashboard（ホーム）]
      ├── カウントダウンカード（次の旅行まで）
      ├── マイル残高サマリー
      └── 航空会社キャンペーン表示
      │
      ▼ （iOS風ボトムタブバー：blur背景, 5アイコン）
      │
      ├── [Search + Map]
      │      ├── 出発空港セレクタ（HND決め打ち解消）
      │      ├── 国内/海外セグメントコントロール（海外は「準備中」）
      │      ├── 目的地マーカー（Leaflet）
      │      ├── 空席カレンダー（日付タップ）
      │      └── 予約確認モーダル → ANA/JAL予約ページ（外部） + 仮登録（内部）
      │
      ├── [Event Manager] ← 5タブ
      │      ├── 旅のしおり（ダッシュボード）
      │      ├── マイル（保安検査締切時刻・サーチャージ表示）
      │      ├── ホテル
      │      ├── グルメ
      │      └── 予算
      │
      ├── [Gourmet (メイン)]
      │      ├── 地域別探索
      │      ├── 詳細（食べログ/Googleレビュー並列表示）
      │      ├── ブックマーク一覧
      │      └── ブックマーク → 旅行計画提案
      │
      └── [Settings] （iOS風グループリスト + トグルスイッチ）

セグメントコントロールパターン

Apple HIG 準拠のセグメントコントロールは以下の画面で共通利用しています。

画面	用途
Tutorial Step 3	旅行先の国内/海外切替
Search + Map	国内/海外切替（海外タブは Phase 3 で解禁）
Event Manager	5タブ（旅のしおり/マイル/ホテル/グルメ/予算）

共通スタイル: 背景 #E8E8ED / border-radius 8px / padding 4px / アクティブは白背景 + shadow 0 1px 3px rgba(0,0,0,0.08)。

予約インテント起動フロー

Search + Map 画面から ANA/JAL の実予約ページへ誘導しつつ、アプリ内には仮予約として trip を作成します。

空席カレンダー
      │ 日付タップ
      ▼
[予約確認モーダル]
  ├─ 便名 / 必要マイル / 残席表示
  ├─ [ANA/JAL 公式で予約] ボタン
  │       │ 新しいタブで airline 予約 URL を開く
  │       │ 同時に POST /api/v1/trips で仮登録
  │       ▼
  │    外部予約ページ（ユーザーが手動で予約確定）
  │
  └─ [後で] 閉じるのみ

仮登録された trip は Event Manager に「予約手続き中」ステータスで表示され、ユーザーは予約完了後に booking_status を booked に更新します。

画面構成

0. ログイン / 新規登録 ✅ 実装済み

ログイン画面

メール + パスワードによる JWT 認証。新規登録リンクからフォームがトグル切替します。未ログイン時はすべての保護ルートからこの画面にリダイレクトされます。

1. ダッシュボード（ホーム） ✅ 実装済み

ダッシュボード

次の旅行までのカウントダウン、ANA/JAL マイル残高、航空会社キャンペーン、ボトムタブ（ホーム / 検索 / グルメ / イベント / 設定）を表示します。

┌─────────────────────────────────────┐
│  MileTrek                    [👤]   │
├─────────────────────────────────────┤
│                                     │
│  ┌─────────────┐ ┌─────────────┐   │
│  │ ANA         │ │ JAL         │   │
│  │ 15,000 M    │ │ 22,000 M    │   │
│  │ 期限: 2025/3│ │ 期限: 2025/6│   │
│  └─────────────┘ └─────────────┘   │
│                                     │
│  おすすめ旅行先                      │
│  ┌──────┐ ┌──────┐ ┌──────┐       │
│  │ 福岡  │ │ 札幌  │ │ 沖縄  │       │
│  │7,500M │ │7,500M │ │9,000M │       │
│  └──────┘ └──────┘ └──────┘       │
│                                     │
│  カウントダウンカード                  │
│  ┌──────────────────────────┐       │
│  │ gradient背景, 角丸20px     │       │
│  │ 残り 14日 (56px bold)     │       │
│  │ 沖縄旅行まで              │       │
│  └──────────────────────────┘       │
│                                     │
├─────────────────────────────────────┤
│  [🏠] [🔍] [🗺️] [📅] [⚙️]         │
└─────────────────────────────────────┘

2. マイル検索 + 地図画面 ✅ 実装済み

検索画面

出発空港セレクタ、国内/海外セグメントコントロール、目的地マーカー付き Leaflet 地図、カード展開時に表示される空席カレンダーまでが実装済み。カレンダーの日付タップで予約確認モーダルが起動し、ANA/JAL 公式予約ページへ遷移しつつ trip を仮登録します。

┌─────────────────────────────────────┐
│  ← マイル検索                        │
├─────────────────────────────────────┤
│                                     │
│  出発空港: [羽田 (HND)        ▼]    │
│  航空会社: [ANA ○] [JAL ○] [両方●]  │
│  日程:     [2024/07/20] → [07/22]  │
│  人数:     [2名 ▼]                  │
│                                     │
│  [🔍 検索する]                       │
│                                     │
│  ┌──────────────────────────┐       │
│  │    [日本地図 Leaflet]      │       │
│  │    マーカーで目的地表示     │       │
│  └──────────────────────────┘       │
│                                     │
│  検索結果カード (border-radius 16px)  │
│                                     │
└─────────────────────────────────────┘

3. イベント管理画面（5タブ） ✅ 実装済み

タブ	スクリーンショット
ホーム（旅のしおり）
マイル
ホテル
グルメ
予算

Phase 2 で追加された包括的な旅行イベント管理画面です。上部のセグメントコントロールで5つのタブを切り替えます。現在はモックデータで各タブの UI を確認でき、データソースの実 API 化は Phase 3 で対応予定。

セグメントコントロール

┌──────────────────────────────────────────┐
│ [ダッシュボード] [マイル] [ホテル] [グルメ] [予算] │
└──────────────────────────────────────────┘
背景: #E8E8ED, border-radius 8px, padding 4px
アクティブ: white bg, shadow 0 1px 3px rgba(0,0,0,0.08)

Tab 1: ダッシュボード（旅のしおり）

旅行名・日程ヘッダー + 共有ボタン
ヒーロー写真（destination photo + overlay text）
縦タイムライン（日付ラベル + タイムラインドット #0071E3 + 接続線）
イベントカード: フライト ✈️、ホテル 🏨、レストラン 🍽️、アクティビティ 🏖️
SNSスクリーンショット映えするデザイン

Tab 2: マイル

フライト旅程カード（時系列順）
ルート表示: HND → OKA + 航空会社バッジ + 便名
マイルコスト: 28px weight 700
ステータスバッジ: 「予約済み」#34C759 / 「空席あり」#0071E3
保安検査締切時刻（出発時刻 -20分）を警告色で表示
燃油サーチャージ表示（国際線対応に備えたフィールド）
合計マイル + 残高サマリー

Tab 3: ホテル

ホテルカード（写真 aspect 16/10, border-radius 16px）
ホテル名 17px weight 600 + レーティング ★
チェックイン/アウト日時
料金 22px weight 600 + 合計金額
予約サイトバッジ + 確認リンク #0071E3
「+ ホテルを追加」dashed borderボタン

Tab 4: グルメ

「おすすめグルメ」セクション（スポンサード対応）
フード写真カード（square, border-radius 12px）
レストラン名、ジャンル、エリア、レーティング ★ #FF9500、価格帯
ブックマーク保存ボタン
「保存したグルメ」セクション（横スクロール）

Tab 5: 予算

リング/ドーナツチャート（recharts使用）
- マイル: #0071E3
- ホテル: #764ba2
- グルメ: #FF9500
- その他: #AEAEB2
合計金額: 28px weight 700（チャート中央）
内訳カード: 各カテゴリの小計
残りの予算バー: #34C759

4. チュートリアル（5ステップ） 🚧 実装中

初回ログイン時に全画面モーダルで表示されるオンボーディングフローです。スキップ不可のためストアドイベントとして完了状態を localStorage に保持します。

ステップ	画面	主な要素
1	マイル登録	ANA/JAL別 2つの入力フィールド + 進捗ドット
2	位置情報	Geolocation API 許可 → 最寄り空港を推定
3	旅行先選択	国内/海外セグメントコントロール + 目的地カード選択
4	カレンダー	月表示カレンダー + 日付範囲選択
5	仮登録	要約表示 → `POST /trips`（`status: draft`）

5. グルメメインタブ ✅ 実装済み

グルメ一覧グルメ詳細

ボトムタブから直接アクセスできるグルメ専用画面。Event Manager 内のグルメタブとは別に、旅行に紐付かない「グルメ探索」エントリーポイントを提供します。詳細ページでは食べログ / Google レビューを並列表示し、外部リンクから各サービスへ遷移できます。

セクション	内容
ヘッダー	「グルメを探す」+ 検索バー
地域チップ	横スクロール（北海道/関東/関西/九州など）
レストランカード	写真 + 店舗名 + ジャンル + ★レーティング + 価格帯
レーティング表示	食べログ優先、無ければ Google（両方ある場合は並列表示）
詳細ページ	ヒーロー画像 / 営業時間 / 電話 / 食べログ & Google 外部リンク / 近隣レストラン
ブックマーク	ハートアイコンで保存・解除

ブックマーク → 旅行計画提案 UX

ユーザーがブックマークしたレストランから、そのエリアへの旅行プランを逆提案します。

[ブックマーク一覧]
      │ レストランタップ
      ▼
[レストラン詳細]
      │ 「このお店に行く旅行を計画」ボタン
      ▼
エリア座標 → 最寄り空港に変換
      │
      ▼
Search + Map に遷移（目的地プリセット）
      │
      ▼
空席カレンダーから予約インテント

6. 設定画面 ✅ 実装済み

設定画面

iOS 風のグループリスト + トグルスイッチで構成されています。マイル残高編集・基本設定・アカウント管理（ログアウト含む）を提供します。

┌─────────────────────────────────────┐
│  ← 設定                             │
├─────────────────────────────────────┤
│  マイル残高                          │
│  ┌──────────────────────────┐       │
│  │ ANA: [15,000    ] マイル  │       │
│  │ JAL: [22,000    ] マイル  │       │
│  └──────────────────────────┘       │
│                                     │
│  基本設定                            │
│  ┌──────────────────────────┐       │
│  │ デフォルト出発空港   HND > │       │
│  │ 通知                  ◉  │       │
│  │ ダークモード          ○  │       │
│  └──────────────────────────┘       │
│                                     │
│  アカウント                          │
│  ┌──────────────────────────┐       │
│  │ プロフィール              >│       │
│  │ ログアウト                 │       │
│  └──────────────────────────┘       │
└─────────────────────────────────────┘
背景: #F5F5F7, セル: white, セパレータ: rgba(0,0,0,0.08)
トグル: アクティブ #34C759

7. マイル残高管理 ✅ 実装済み

マイル残高

ANA / JAL 別に所持マイルと有効期限を管理できる独立画面。設定画面との違いは、このマイル画面がマイル残高の編集に特化した単独タブとして提供され、ダッシュボード及び検索画面と連動する点です。

コンポーネント設計

共通コンポーネント

コンポーネント	用途
`Header`	ナビゲーションバー（blur背景）
`BottomNav`	モバイル下部タブ（blur背景, 5タブ）
`Card`	汎用カードUI（border-radius 16px, 影なし）
`SegmentedControl`	イベント画面内タブ切替
`Button`	ボタン（primary pill / secondary / ghost）
`Input`	テキスト入力（borderless, #E8E8ED背景）
`Badge`	バッジ（ステータス・ブランド）
`Modal`	モーダルダイアログ

機能コンポーネント

コンポーネント	用途
`MileBalance`	マイル残高カード（ANA/JALブランドカラー）
`SearchForm`	検索フォーム
`JapanMap`	日本地図（Leaflet）
`DestinationCard`	目的地カード
`TripTimeline`	旅のしおりタイムライン
`FlightCard`	フライト旅程カード
`HotelCard`	ホテル詳細カード
`GourmetCard`	グルメレコメンドカード
`BudgetChart`	予算ドーナツチャート（recharts）
`CountdownCard`	カウントダウンカード（gradient背景）

レスポンシブ設計

ブレークポイント	レイアウト
`< 640px` (sm)	モバイル: 1カラム、ボトムタブ固定、フルワイドカード
`640-1024px` (md)	タブレット: 2カラムグリッド、タブバー拡張
`> 1024px` (lg)	デスクトップ: サイドバーナビ + メイン

PWA設計

項目	設定
インストール	ホーム画面追加対応
オフラインキャッシュ	地図タイル、マイルチャート、静的アセット
バックグラウンド同期	旅行プランの同期
プッシュ通知	マイル有効期限アラート（Phase 3）

UI/UX 設計 ​

実装状況サマリ（2026-04-11 時点） ​

デザイン方針 ​

デザインシステム ​

カラーパレット ​

Stitch デザインカンプ ​

画面アーキテクチャ ​

セグメントコントロールパターン ​

予約インテント起動フロー ​

画面構成 ​

0. ログイン / 新規登録 ✅ 実装済み ​

1. ダッシュボード（ホーム） ✅ 実装済み ​

2. マイル検索 + 地図画面 ✅ 実装済み ​

3. イベント管理画面（5タブ） ✅ 実装済み ​

セグメントコントロール ​

Tab 1: ダッシュボード（旅のしおり） ​

Tab 2: マイル ​

Tab 3: ホテル ​

Tab 4: グルメ ​

Tab 5: 予算 ​

4. チュートリアル（5ステップ） 🚧 実装中 ​

5. グルメメインタブ ✅ 実装済み ​

ブックマーク → 旅行計画提案 UX ​

6. 設定画面 ✅ 実装済み ​

7. マイル残高管理 ✅ 実装済み ​

コンポーネント設計 ​

共通コンポーネント ​

機能コンポーネント ​

レスポンシブ設計 ​

PWA設計 ​