よか旅
概要
余暇を大切にしたい人に向けた、AIが旅の行き先を提案するアプリです。 出発地、目的県、やりたいことを選択すると、AIが提案するスポットを経路付きで表示します。 バックエンドのデプロイとして、フリープランを利用しているため、初回アクセス時は、実行まで時間がかかります。 有料APIを使用しており、使用状況によっては、現在はプランの生成が出来ない可能性があります。
開発に至った経緯
GMOインターネットグループ株式会社のサマーインターンで4人のチームメンバーと作り上げました。 私は、主にフロントエンド領域を対応し、汎用コンポーネント、情報入力画面、スポット表示画面の実装、その他画面のスタイル修正、コードレビューなどを行いました。
開発人数・開発期間
4人で、 5日間
使用言語など
工夫した点
UI デザイン
ロゴを基調として、統一した温かみのあるデザインにしました。
入力フォーム
出発地を入力する際、出発県を選択すると、その県の全ての市町村を返してくれるAPIを叩き、市町村を選べるようにしました。 また、都道府県や市を選択させるとなると、多くの選択肢の中から選ぶことになり、UX的に問題があると思ったため、入力補完付きのinputタグである、AutoCompleteを使用して、選択も入力も可能にしました。 入力させる際、意図しない値が入ることを想定し、厳密なバリデーションを実装しました。
旅先生成
ChatGPTで生成した旅先は、試行錯誤したプロンプトによってある程度決まった形式で出力できるようにしました。
旅先の保存
AIで生成した旅先で気になったものを保存できるようにしました。 また、保存した旅先の中で実際に行った県は、別枠で保存し、githubの草をイメージした日本地図でどの県に高頻度で行っているのかを確認することが出来るようにしました。
レスポンシブ対応
アプリの仕様から、パソコンだけではなく、様々なアプリからアクセスされることが予想できたため、レスポンシブ対応し、どのようなデバイスからアクセスしても、快適に扱えるようにしました。
pwa
webブラウザ上ではもちろん、パソコンやスマホにもインストールできるようにしました。