Daily Cocoda - 航空チケット予約アプリ制作

Rio Azuma
UI, Web Designer

Overview

Date : 2019年10月
Time : 1日
Type : practice
Tools : figma
Challenge : 航空チケットの予約サービスの航空チケット検索画面、日付選択画面、航空チケット詳細画面の制作

Process

1. リサーチ
※長くなるので、最後に記載しました


2. コンセプトメイキング


◼︎ステートメント
旅行可能な日程を範囲で指定すると、最適な航空チケットを提案してくれる予約サービス

◼︎ペルソナ/ユーザーの特徴
・時間に融通が利く人（旅行日時の選択において）
・効率主義

◼︎ニーズ、達成したい目標
・『2月頃にベネツィアに旅行に行きたい』という大まかな旅行計画がある
・具体的な日程への拘りは薄いので、日程の範囲を広く指定して、他の要素から最適なチケットを予約したい
・旅行先での時間は無駄な時間を作らないように効率的に使いたいので、中途半端な時間に到着したくない、到着時間には拘りがある

◼︎ユースケース
・学生同士の卒業旅行
・自由に有給休暇が取れる社会人や家族の旅行

◼︎解決できるペイン
航空チケットを予約する際に、詳細な日時指定をしなければ、検索できない点

◼︎サービスの価値
旅行可能な日程を範囲で指定して、各個人にとって最適なチケットを予約できる
└時間、チケットの価格、乗り換え回数、航空会社、時間、往路or片道

◼︎コア機能
・日程を大まかな範囲で指定して、航空チケットを検索できる
・現地に到着したい時間を指定して、航空チケットを検索できる

◼︎デザインの方向性
・男女共に利用できるような中性的なデザイン




3.行動、操作のシナリオの作成

◼︎行動ストーリー
2019年末にベネツィアへ家族で旅行に行くことになった。
「2月くらいがいいかな」と話してはいるものの、みんな日時に融通が利くので、「日程よりも、他の条件から良い航空チケットを取りたいね」と話している。
「2月が厳しければ、3月でも1月でもいいよね」「6泊くらいがいいなとは思っているけど、5泊でも7泊でも多少の前後は構わないよね」「往復でまとめて予約できたら便利だけど、往復で良いのがなければ片道ずつ購入したいね」「でも、到着時間は希望通りの時間が良いよね、向こうに夜遅くに到着するような、中途半端な時間の飛行機だと嫌だよね」という感じで話している。
他の予約アプリは、初めに日時の詳細を指定しなければ、比較することがでいきい。そのため、2月の適当な日時を仮入力して検索して調べていた。
しかし、このアプリを使えば、日程は大まかな範囲から決めることができ、チケットの価格や、乗り継ぎ回数、航空会社、時間、往路か片道かの選択などの要素から、自分にとって最適な航空チケットを予約できる。
また、現地に到着したい時間からチケットを購入することができるので、自分で時差を計算して逆算する必要がなくて便利。


◼︎操作シナリオ
出発地点、到着地点を空港から選択する
日程を大まかな範囲から選択する
人数を指定する
現地に到着したい時間を指定する
何泊するか指定する
検索した後に、複数の要素（航空会社、乗り換え回数、座席クラス、その他の設備など）で絞り込みできる
並び替えもできる（価格が安い順、所要時間が短い順、乗り継ぎ回数が少ない順）
検索した後は、簡単に条件変更ができる



2. ワイヤーフレーム


3.ビジュアル制作


 Research 

◼︎TOP画面


◼︎航空チケット検索画面


◼︎日付選択画面


◼︎航空チケット検索結果


◼︎航空チケット詳細画面

◼︎Trip Adviser
【評価4.3 / 1万人】
世界最大の旅行プラットフォーム
食べログの海外版みたいなイメージで、レストランだけでなくホテルや航空券なども予約できる
レビュー機能あり

◼︎トラベルコ
【評価4.6 / 2.5万人】
国内最大級の旅行比較サービス
wifiも予約できる
デザインが見やすい分かりやすい
接続が毎回遅い

◼︎TRAVEL now
【評価4.0 / 4.6万人】
格安航空券の後払い予約アプリ
デザインやマイクロアニメーションが半端ない
さすがBANK社、CASHのアプリにデザインの雰囲気が似てる

◼︎Sky ticket
【評価4.6 / 11万人】
格安航空券、ホテル予約サイト
UIは良いが、戻るボタンが分かりにくい

◼︎Expedia
【評価4.5 / 11万人】
ホテル・航空券やダイナミックパッケージ等の、旅行に関するオンライン予約サービス
デザインは質素だがシンプルで良い場合もある
他の航空券予約アプリよりサクサク動く
航空券検索後のUIは見にくすぎて参考にならない

◼︎skyscanner
【不明】
起動後すぐに日付選択に入るの斬新
UIなども独特
チェックボックスの代わりに、スイッチを多用している
→どっちが良いのだろう？