ホテル予約アプリのデザイン:ホーム画面のリデザイン、ビフォーアフター

旅行アプリのホーム画面は、何かを尋ねる前に、まずどこかへ行きたいと思わせなければいけません。以下の初稿はその逆です。4項目のフォームで始まり、行き先はただの文字で並び、1つの価格が6行に散らばっています。修正版は機能をすべて残したまま、目に入る順番だけを変えています。

画面全体のビフォーアフター

新人の初稿

修正版

左の画面で最初に目に入るのは作業です。場所、チェックイン、チェックアウト、人数と続き、最後にグラデーションのボタンがあります。場所が出てくるのはフォームの後で、しかも灰色の文字ピルが5つあるだけ。右の画面では検索は1枚のカードにまとまり、画面の半分以上が場所や宿の写真になっています。

機能はすべて残っています。場所、日付、人数での検索も、行き先の閲覧も、ホテルの価格確認もできます。直したのは、手続きを1枚のコンパクトなカードにまとめ、旅行アプリを開く本来の理由に場所を返したことです。

修正1:スローガンをやめて、問いかける

Before

After

「世界を探索しよう、私たちと理想の宿を見つけよう!」とハートとベルのアイコンが並ぶものと、「次はどこへ?」とドット付きのベルが並ぶもの。

ホーム画面のスローガンは会社のために書かれています。問いかけはスマホを持つ人のために書かれていて、すぐ下の検索カードへ自然に導きます。「次はどこへ?」は友達が聞いてくることでもあり、旅行アプリにふさわしい口調です。

ハートはヘッダーから外れました。保存した場所にはすでに専用のタブがあるからです。ベルは残し、新しい情報があるときだけドットを付けます。値下げや予約の変更は、割り込む価値のある数少ない通知だからです。

修正2:検索カードは1つ、日付と人数はチップに

Before

After

縦に4つ並んだ入力欄(行き先、チェックイン、チェックアウト、人数)とオレンジのグラデーションボタン。対して、行き先の入力欄1つに「11月14日〜16日」「2名」のチップと丸い矢印ボタン。

4項目のフォームは、1つの場所も見ないうちにすべてを決めろと迫ります。アプリを開く人の多くはまだその気ではなく、眺めているだけです。画面の3分の1を占めるフォームは、彼らにとって壁でしかありません。

日付と人数は検索のたびにあまり変わらないので、修正版では妥当な初期値をチップで見せ、変えたいときにタップできるようにしました。入力が必要なのは行き先だけです。チェックインとチェックアウトは「11月14日〜16日」という1つのチップになりました。滞在を2つの別々の日付として考える人はいないからです。

修正3:名前ではなく場所を見せる

Before

After

「リスボン、京都、ケープタウン、バリ、パリ」が灰色の文字ピルで並ぶものと、名前の下に国名が付いたリスボンと京都の写真タイル、次のタイルが端からのぞくもの。

人は目で行き先を選びます。「京都」という言葉は読み手に場所を想像させますが、夕暮れの五重塔の写真なら想像を代わりにやってくれます。このセクションの仕事はまさにそれで、文字ピルにはできません。

右端で途切れているタイルはわざとです。矢印やドットがなくても行がスクロールすると伝わり、ひとスワイプでまだ見ぬ場所に出会えます。

修正4:1つの宿に価格は1つ

Before

After

-30%のバッジ付きの小さなサムネイル、星5つ、都市名、取り消し線付きの$320、1泊$224、「+$38の税金・手数料」、緑の特典2つ。対して、評価4.8、名前、「1泊$224」、「リスボン、無料キャンセル」が付いた大きな写真。

初稿のカードは価格を4通りで同時に見せています。元の価格、新しい価格、単位、追加料金。さらに写真上の割引バッジが5回目の主張をしています。読み手は、そのホテルが気に入るかを決める前に計算をしなければなりません。

修正版は数字1つと補足1つです。写真が大きいのは、宿を売るのは写真だからです。補足には最も不安を取り除く無料キャンセルを選び、描かれた5つの星は比較できる数字の評価に置き換えました。

細かな修正

• タブは5つではなく4つ。 探す、保存済み、旅行、プロフィール。ホームと探すを1つのタブ「探す」に統合しました。ホーム画面こそが探す場所だからです。
• 人が使う言葉に。 「ウィッシュリスト」は「保存済み」に、「予約」は「旅行」になりました。旅行者が実際に口にする言葉です。
• アクセントカラーは1つ。 初稿ではボタンにオレンジのグラデーション、特典に緑、割引に赤を使っていました。修正版はアクションに黒を使い、色は写真に任せています。
• 名前を短く。 「Grand Riviera Resort & Spa」はカード上で「Grand Riviera Resort」になり、価格の横で名前が1行に収まります。

自分の旅行アプリを点検しよう

Figmaファイルを入手

無料ファイルには、両方の画面がコンポーネントとして入っており、すべての修正がビフォーアフターのペアになっています。カラー変数とiOSのテキストスタイルも収録しています。

無料のFigmaファイル

ホテル予約のホーム画面、ビフォーアフター

両方の画面と、修正した各パーツをFigmaコンポーネントとして収録。無料、閲覧のみ。下書きに複製してお使いください。

Figmaで開く

FAQ

ホテル予約アプリのホーム画面は、最初に何を見せるべきですか?

短い問いかけ、検索欄1つ、場所の写真です。日付と人数は編集できるチップとして検索カードに置けるので、フォームより先に閲覧ができます。

アプリではホテルの価格をどう表示すべきですか?

1つの宿に明快な価格を1つ、無料キャンセルのような補足を1つ添えます。必須手数料がある場合は、見出しの価格に含めましょう。

旅行アプリは行き先を写真で見せるべきですか、文字ですか?

写真です。人は視覚的に場所を選びますし、画面の端で切れたタイルは、余計な操作部品なしに行がスクロールすることを伝えます。

予約アプリのタブはいくつがよいですか?

4つか5つです。同じ場所に通じるタブは統合し、「保存済み」や「旅行」のように旅行者が使う言葉で名付けましょう。

出典

• 両方の画面は自社制作で、Figmaで設計・計測しています。
• 写真はUnsplash経由で、Vali Sachadonig、Zion C、Asher Pardey、Roberto Nickson、Travis Chenによるものです。
• 不公正または欺瞞的な手数料に関するFTC規則。短期宿泊施設が対象で、2025年5月12日に発効。
• 最初は App Brainy でカルーセル投稿として公開されました。