Tabidea — Works | ともきちのエンジニア成長記

主なハイライト

旅行計画に特化したアプリ体験の設計
AI生成案の手動編集・再調整を前提としたUX
旅行前から旅行後までの一貫した体験設計

概要

Tabideaは、旅行先や日数、予算、同行者、旅行テーマなどの条件をもとに、AIが旅程案を提案する旅行計画アプリです。生成された旅程は完成品として押し付けるのではなく、ユーザーが手動で編集したり、チャット形式でAIに相談しながら一部を修正したりできるようにしています。

背景・経緯

旅行の本来の目的は現地での体験を楽しむことですが、実際には事前の調査や調整に多くの時間が割かれます。Tabideaでは、そうした面倒な調査や初期プラン作成をAIでアシストすることで、ユーザーが旅行前から楽しく計画し、実際の旅行体験に集中できる状態を目指しています。

解決した課題

ユーザーの課題

行きたい場所を探す、営業時間を確認する、移動時間を計算するなど、旅行計画における細かい作業の負担をAIで軽減し、ユーザーが「どこに行くか」「どう楽しむか」に集中できるようにすること。

技術的な課題

スポットの実在性、営業時間、エリアの距離感など、旅程としての精度を担保しつつ、人間が手軽に修正できる構造化されたデータ形式で提示すること。

運用・その他の課題

生成結果を継続的にスコアリング・評価し、プロンプトやUIへ反映していく改善サイクルを構築すること。

主な機能

AIによる旅程提案 : 旅行条件に応じたプラン生成
チャット形式での一部修正 : AIに相談しながら一部を再生成
旅行気分を高める待ち時間UX : Tips表示や進捗状況の可視化
生成品質の継続的改善 : 管理画面での評価・スコアリング基盤

担当・役割

企画・コンセプト設計
UI/UX設計
フロントエンド実装 (Next.js)
AI旅程生成機能・処理基盤の設計 (Cloud Run)
生成品質評価フローの設計と運用

技術スタック

Frontend

Next.js
TypeScript
Tailwind CSS

Backend / API

Netlify Functions
Cloud Run

Database / Auth

Supabase Auth
Supabase Database

Infrastructure / Hosting

Netlify
Cloud Run

Tooling

Lighthouse CI
Gemini API
OpenAI API
Google Maps API

システム構成

Next.jsで構築されたフロントエンドと、Cloud Run上の生成APIを分離。管理画面で生成結果をスコアリングし、評価・改善サイクルを回す仕組みを構築しています。

User
 ↓
Next.js App
 ↓
Generation API
 ↓
Gemini API / OpenAI API / Google Maps API
 ↓
Supabase
 ↓
Admin / Scoring / Quality Improvement

汎用チャットAIで済ませない旅行計画体験

AIの出力を単なる文章ではなく、手動編集や保存、再提案が可能な構造化された旅程データとして扱う体験を設計しました。

生成品質を改善し続ける仕組み

管理画面で生成結果をスコアリングし、悪い提案を確認・テストすることで、継続的にプロンプトやロジックを改善できるフローを構築しました。

正確性を意識した提案ロジック

Google Maps API等と連携し、スポットの実在性や営業時間、移動の妥当性を考慮した、実際に使いやすい旅程を目指しています。

UI/UX・デザインの工夫

生成待ち時間を旅行への期待感に変えるTips・進捗表示
ユーザーが自分の旅行に合わせて調整できる「余白」のある設計
モバイルでも扱いやすい旅程編集インターフェース

Lighthouse CIによる品質チェックの自動化
生成待ち時間中の体感速度を向上させるインタラクティブなUI
セマンティックHTMLと適切なARIA属性によるアクセシビリティ対応

セキュリティ・プライバシー

ユーザーの旅程データをDBに平文で保存しない設計（運営者からも閲覧不可）
機密情報を扱う実行環境の分離
データの最小化とプライバシーバイデザインの徹底

苦労した点・改善した点

課題

AI提案の正確性（スポット実在性や営業時間の整合性）の担保

解決策

AIの自由度を制御するプロンプト設計と、外部API連携による検証の強化

結果

実際に旅行で利用可能なレベルの正確な旅程提案の実現

課題

生成待ち時間によるユーザーの離脱

解決策

旅行気分を高めるTips表示や、詳細な進捗状況の可視化によるUX改善

結果

待ち時間を期待感に変え、離脱率の低い生成体験を構築

学び

AIアプリではプロンプトだけでなく入力設計とUX設計が出力品質に大きく影響する
AIの価値は生成すること自体だけでなく、その後のユーザーによる調整のしやすさにある
継続的な評価・改善サイクルがAIプロダクトの成長には不可欠

今後の展望

旅程の正確性と信頼性のさらなる向上
旅行中の状況変化に応じたリアルタイムな旅程調整機能
旅行後の振り返りから次の旅のインスピレーションを得る体験の拡充

リンク

サイト: https://tabide.ai
記事: /articles/tabidea-travel-tips-loading-ux/
関連ページ: ともきちの旅行日記
関連ページ: Globe Tabidea

AI旅行プランナーの生成の待ち時間に『旅のTips』を出すUXを考えた話