プロジェクト概要

MileTrek とは

MileTrek は、ANA/JALのマイルを起点に日本国内の旅行計画を最適化するWebアプリケーションです。Apple HIG準拠のミニマルなデザインで、マイル検索からイベント管理、予算管理まで一貫した旅行体験を提供します。

主な機能

機能	詳細
5ステップ初回チュートリアル	マイル登録→位置情報→旅行先→カレンダー→仮登録
マイル検索 + 地図	所持マイルから行ける目的地を自動検索、Leaflet マーカー表示
出発空港セレクタ	デフォルト HND から任意の空港に変更可能
空席カレンダー	日付タップで予約確認モーダル、ANA/JAL 予約ページへ誘導
予約インテント	外部予約ページを開きつつアプリ内に仮登録
イベント管理	5タブ構成の包括的な旅行管理（旅のしおり・マイル・ホテル・グルメ・予算）
旅のしおり	タイムライン形式の旅程表示（SNS共有対応）
グルメメイン	地域別探索、食べログ/Google レビュー並列表示、ブックマーク
ブックマーク→旅行提案	保存レストランからエリアを逆引きし旅行計画を提案
予算管理	ドーナツチャートによる予算配分可視化
キャンペーン表示	ANA/JAL の最新キャンペーンをダッシュボードに表示

Phase 2 ハイライト

Phase 2 では Apple HIG に準拠した全面リデザインと、グルメ・予約インテントを含む大規模機能拡張を実施しました。

UI/UX

Apple HIG ミニマル全面リデザイン: DESIGN.md のデザイントークンに基づく全画面更新
iOS 風ボトムタブバー: blur 背景、5タブ構成
iOS 風設定画面: グループリスト + トグルスイッチ
セグメントコントロール: Tutorial / Search / Event で共通利用

新機能

5ステップ初回チュートリアル: 初回ログイン時のオンボーディング
検索+地図統合画面: 国内/海外切替（国際線は準備中）
空席カレンダー: flight_availability テーブル連携
予約インテント起動: ANA/JAL 公式予約ページを新タブで開き、同時にアプリ内に仮登録
グルメメインタブ: 地域別探索、食べログ/Google 両ソースのレーティング表示
ブックマーク → 旅行計画提案 UX: 保存レストランから旅行を逆提案
マイルタブの強化: 保安検査締切時刻・燃油サーチャージ表示
キャンペーン表示: ダッシュボードで ANA/JAL キャンペーンを閲覧

バックエンド

新規テーブル 5 種: flight_availability、hotels、restaurants、gourmet_bookmarks、campaigns
新規 API エンドポイント 9 種（検索空席・ホテル・グルメ一覧/詳細/ブックマーク・キャンペーン・出発空港）

解決する課題

課題	MileTrek の解決策
マイルの使い道がわからない	所持マイルから行ける目的地を自動検索
どの時期がお得かわからない	シーズン別の必要マイル数を可視化
宿泊費込みの総コストが見えない	マイル + 宿泊費の総合比較
目的地が決まっていない	お得度ランキングで旅行先をレコメンド
宿泊サイトを個別に比較するのが面倒	4社横断の一括検索
旅行中の予算管理が煩雑	カテゴリ別予算配分の可視化

対応サービス

航空マイル

ANA マイレージクラブ - 国内線特典航空券（L/R/Hシーズン）
JAL マイレージバンク - 国内線特典航空券（通常/ディスカウント）

宿泊予約サイト

楽天トラベル - 国内最大級の宿泊予約サイト
agoda - アジア圏に強い予約サイト
trip.com - 価格競争力の高い予約サイト
booking.com - 世界最大級の宿泊予約サイト

技術スタック

カテゴリ	技術
フロントエンド	React + Vite + Tailwind CSS
バックエンド	Express.js
データベース	SQLite
地図	Leaflet
チャート	recharts
デザインシステム	Apple HIG準拠（DESIGN.md）
デザインカンプ	Stitch SDK（15画面）
ドキュメント	VitePress

ユースケース

1. 所持マイルから旅行先を探す

入力: ANAマイル 15,000、出発: 羽田、日程: 2024年7月
  ↓
MileTrek が検索
  ↓
出力:
  - 札幌（新千歳）: 7,500マイル（L）、宿泊最安 ¥4,800/泊
  - 沖縄（那覇）: 9,000マイル（R）、宿泊最安 ¥5,200/泊
  - 福岡: 7,500マイル（L）、宿泊最安 ¥3,900/泊
  ...

2. 旅行イベントを管理する

イベント管理画面（5タブ）:
  - ダッシュボード: タイムライン形式で旅程を一覧表示
  - マイル: フライト旅程とマイル消費を管理
  - ホテル: 予約情報と料金比較
  - グルメ: 目的地のレストランレコメンド
  - 予算: カテゴリ別予算配分チャート

3. 特定目的地の最安プランを比較

入力: 目的地: 沖縄、日程: 8月10日〜12日
  ↓
フライト: ANA 9,000マイル vs JAL 7,500マイル
宿泊:
  - 楽天トラベル: ホテルA ¥8,900/泊
  - booking.com: ホテルA ¥8,200/泊
  - agoda: ホテルB ¥7,500/泊
  ...

参考プロジェクト

TREK - セルフホスト型の旅行プランナー。UI/UXの参考として活用。

項目	TREK	MileTrek
目的	汎用旅行プランナー	マイル最適化プランナー
対象	グローバル	日本国内（Phase 1）
特徴	リアルタイム共同編集	マイル起点の検索・レコメンド
宿泊	手動入力	4社API横断比較

プロジェクト概要 ​

MileTrek とは ​

主な機能 ​

Phase 2 ハイライト ​

UI/UX ​

新機能 ​

バックエンド ​

解決する課題 ​

対応サービス ​

航空マイル ​

宿泊予約サイト ​

技術スタック ​

ユースケース ​

1. 所持マイルから旅行先を探す ​

2. 旅行イベントを管理する ​

3. 特定目的地の最安プランを比較 ​

参考プロジェクト ​