DailyUI Day68 Flight Search制作記｜モバイルUIの情報設計を学ぶ

【UIアウトプット】DailyUI #068_Flight Search

シルスプのブログにようこそ

66日目の課題は、Hotel or Vacation Rental Booking

１．課題

DailyUIのDay3課題は「Flight Search（航空券検索）」でした。
今回は日本人ユーザーを想定し、東京からマドリードへの国際線検索画面を
デザインしました。
航空券予約は情報が多く複雑になりがちですが、
いかにシンプルで迷わないUIを作れるかに挑戦しました。

ターゲットは日本人の国際線利用者で、スマートフォンから航空券を
検索・予約する20〜40代です。
デザインの方向性は「シンプルで迷わない情報設計」を最優先に考えました。

カラーはオレンジをアクセントカラーに選び、旅行への期待感を高めつつ、
行動を促すCTAボタンとして機能させました。
余白を多めに取ることで、各要素が呼吸できるレイアウトを心がけています。

最も重要なのは情報の優先順位付けです。
画面上部には国内線/国際線のタブ、
その下に「航空券」「特典航空券」「航空券+宿泊」の3オプションを配置し、
検索の方向性を明確にしました。

出発地と目的地は画面上部に大きく配置し、飛行機のアイコンで視覚的に
流れを表現しています。
往復/片道の選択、日付選択、乗客情報とクラス選択を段階的に配置し、
ユーザーの認知負荷を軽減しました。
デフォルト値は「1名、エコノミークラス」とし、
多くのユーザーがそのまま使える設定にしています。

メインカラーのオレンジはCTAボタンや選択中のタブに使用し、
視線を誘導します。
飛行機、カレンダー、人物アイコンを効果的に配置し、
テキストだけでは伝わりにくい情報を瞬時に認識させる工夫をしました。

「検索する」ボタンは画面下部にフルワイドで配置し、
視認性を高めると同時に誤タップを防ぎます。
各入力フィールドには十分な高さを確保し、
モバイルでのタップ操作を最適化しました。

各入力セクションをカード型デザインで区切り、
情報のまとまりを明確にしました。
「詳細設定」は折りたたみ式にし、初心者は基本情報だけで検索でき、
上級者は必要に応じて詳細オプションを開ける段階的な情報開示を
実現しています

DailyUI #068_Flight Search

DailyUI Day3を通じて、情報設計の重要性を改めて学びました。
ユーザーが何を求めているか、どの順番で情報を提示すべきか。
これらの問いに答えながらデザインすることで、使いやすさを追求できました。
次回の課題でも、ユーザー視点を忘れずに取り組んでいきます。

では、またねぇ～