レンタカーアプリのデザイン:レンタカーのホーム画面を作り直す、ビフォーアフター

レンタカーアプリのホーム画面の仕事はひとつ、ユーザーを乗りたいクルマにたどり着かせることです。下の初稿には、ドライバーに必要なものがすべて揃っています。ただし、開くと5項目のフォームが現れ、何も指していないバナーが「25%オフ」と叫び、肝心のクルマは最後に100×60ピクセルで、スペックは8pxの文字で押し込まれています。

修正版は機能をすべて残したまま、クルマを先頭に置きます。参考にしたのはTuroのレイアウトで、白い背景、検索フィールドは1つ、写真の下に価格を置いた全幅のクルマカードです。以下の変更はどれもそのままコピーできます。

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

新人の初稿

修正版

左の画面では、クルマが画面上で一番小さい存在です。ドライバーが1台目を目にするまでに、5つのフォーム項目、チェックボックス、ボタン、バナー、3つのドロップダウンを通り抜けなければなりません。各クルマは100×60のサムネイルに8pxのスペックとBOOKボタンです。

右の画面は、ドライバーが決める順番どおりに読めます。どこで、どの種類を、どのクルマを。検索は48pxのフィールド1つ、クルマの写真は350×190、文字は初稿の8〜15pxに対して13〜18pxです。

変更点を数字で見る

修正1:フォームを1つのフィールドにたたむ

Before

After

受取場所、返却場所、受取日、返却日、「Change」リンク付きのドライバー年齢チェックボックス、オレンジの「Search Cars」ボタン、そして注意書き1行を備えた「Find a Rental Car」。対するのは角丸のフィールド1つ:虫眼鏡、「Pick up at SFO」、右端に「Nov 8 to 10」。

初稿は、クルマを1台も見せる前にフォームの入力を求めます。答えのほとんどはすでに分かっています。返却場所は受取場所と同じ、年齢は25歳以上、日付は今週末。それでもフォームはすべてを同じ重みで尋ねるので、ドライバーが決めるべき唯一のことが、触れもしない4項目と同じ扱いになってしまいます。

修正版は重要な2つの答え、どこでいつを残し、1つのフィールドに収めます。これはUberの行き先フィールドと同じパターンです。タップすると、返却場所、返却時刻、ドライバー年齢のシートが開くので、何も削っておらず、1タップ先に移しただけです。

使い回せるルール:デフォルトは見せて、変わる部分だけ尋ねる。

修正2:特典を実在するクルマに付ける

Before

After

オレンジの全幅バナー:「UP TO 25% OFF THIS WEEKEND!!!」、右に「*T&C apply」。対するのは縦長のクルマカード:写真に25%オフのタグ、Sport Coupe、2 seatsとAuto、1日$89と取り消し線入りの$119。

「最大25%オフ」と書いたバナーは、何が安いのかを言っていません。ドライバーはスクロールして、どのクルマが対象なのか当てずっぽうで探すことになります。3つの感嘆符と10pxの「T&C apply」は、特典というより警告に見えます。

修正版では、割引は対象のクルマに付いています。写真の小さなタグが25%オフを示し、価格行には1日$89と、その横に元の$119。$119の25%引きは$89.25なので数字は正直で、特典にようやく売るべきものができました。Turoも同じで、特典は上ではなく掲載物そのものに付いています。

使い回せるルール:特典には対象が必要。割引する物に付けること。

修正3:3つのドロップダウンを1行に置き換える

Before

After

「Type」「Price」「Seats」と書かれた、シェブロン付きの同じ大きさのドロップダウン3つ。対するのはピル型チップ1行:黒で選択された「All」、そして右端からはみ出す「Electric」「SUV」「Coupe」「Convertible」。

ドロップダウンはタップするまで選択肢を隠します。つまりドライバーはTypeを開かないと、ElectricやSUVやCoupeがあることを知れません。しかも3つ横並びにすると、PriceとSeatsが、実際によく使うフィルターであるクルマの種類と同じ重みになります。

チップならタップなしで選択肢が見えます。選択中のチップは黒で塗りつぶされ、行はスワイプでき、最後のチップが画面端で切れているので、まだあることが伝わります。PriceとSeatsは残してあり、検索フィールドのフィルターから開きます。

使い回せるルール:フィルターの値が5つ以下なら、見せる。メニューの奥に隠さない。

修正4:すべてのクルマに全幅の写真を

Before

After

「Popular Cars」の下に4行、それぞれ100×60の写真、名前、8pxのスペック行、価格、オレンジの「BOOK」ボタン。対するのは全幅カード2枚:ハート付きの350×190の写真、その下に名前と価格を1行、詳細を1行。

これこそが商品なのに、初稿は一番狭い場所しか与えていません。100×60ではクルマはただの色のかたまりです。スペック行には座席数、ギア、燃料、0-60加速、保険、評価が8pxで詰め込まれ、どれも読めない上に、すべてが価格と張り合っています。

修正版のカードは、角丸の350×190の写真をクルマに与え、名前と1日の価格を1行にまとめます。その下に13pxの詳細を1行、座席数とギアだけ。BOOKボタンはなくなりました。カード全体がボタンだからです。タップすればクルマ自身のページにスペックも評価もBookもあります。

使い回せるルール:商品リストは写真のリスト。写真、名前、価格以外はすべて1タップ奥へ。

細かな修正

• ブランドカラーは1色。 オレンジ(#FF5A1F)は25%オフのタグだけに使います。初稿ではバナー、検索ボタン、チェックボックス、Changeリンク、4つのBOOKボタン、アクティブなタブに使っていました。
• 余白を広く。 左14、右12をやめて左右とも20px、ブロック間は14。
• 落ち着いたヘッダー。 初稿ではハートとベルがロゴの横に並んでいました。修正版のヘッダーはベルだけを残し、ハートは「Saved」タブになりました。
• 浮いたタブバー。 4つのタブ(Explore、Trips、Saved、Profile)を62pxの浮いたバーに収め、3台目のクルマがその下を流れて、ページが続くことを伝えます。
• アイコンのスタイルは1つ。 初稿のタブバーでは塗りとアウトラインが混在していましたが、すべてアウトラインに統一しました。
• タスクに合った名前。 BookingsはTripsに、Searchは上部のフィールドになりました。
• コピーを削る。 「Car of the Week」と0-60の行はなくなりました。どちらもクルマ選びの助けにならないからです。

自分のレンタカーアプリを点検する

Figmaファイルを入手する

無料ファイルには、新人の初稿、修正版、そしてすべてのパーツがコンポーネントとして入っています。

無料のFigmaファイル

レンタカーのホーム画面リデザイン、ビフォーアフター

2つの画面と、すべてのパーツをFigmaコンポーネントで。無料、閲覧専用、ドラフトに複製してお使いください。

Figmaで開く

FAQ

レンタカーアプリのホーム画面はどうデザインすべきですか?

受取場所と日付の入った検索フィールド1つで始め、次に車種の1行、その後に写真の下に名前と価格を置いた全幅のクルマカードを並べます。返却場所、返却時刻、ドライバー年齢は、検索フィールドの1タップ奥に置きます。

レンタカーの検索には、フィールドがいくつ必要ですか?

最初の画面に必要な分だけ、つまりどこでといつ。返却場所、返却時刻、ドライバー年齢は通常デフォルトのままなので、検索フィールドから開くシートに入れておけます。

レンタカーの割引はどこに置くべきですか?

対象のクルマに。写真のタグと、新しい価格の横に取り消し線を付けた元の価格(たとえば$119と1日$89)があれば、何がいくら安いのかが伝わります。何も指していないバナーでは伝わりません。

車種はドロップダウンとチップのどちらがよいですか?

5つ前後ならチップです。スワイプできる1行なら、All、Electric、SUV、Coupe、Convertibleがタップなしで見え、画面端で切れたチップがまだあることを示します。

レンタカーアプリのクルマの写真はどれくらいの大きさにすべきですか?

カラムの全幅で、スマホなら350×190ピクセル前後。100×60のサムネイルではクルマが色のかたまりになり、ドライバーは判断できません。

出典

• 2つの画面はどちらも自作で、Figmaでデザインし寸法を測っています。アプリ名のTorque、価格、スペックは架空のもので、メーカーや車種名は出していません。レイアウトはTuroに倣っています:白い背景、検索フィールドは1つ、写真の下に価格を置いた全幅のクルマカード。1フィールド検索はUberの行き先フィールドに倣っています。
• $119の25%引きは$89.25で、1日$89と表示しています。
• アイコンはPhosphor(MIT)のものです。ステータスバーは、実測した実際のiPhoneのスクリーンショットから描き起こしました。
• 写真はPexelsから:Dextar Studio、Jae Park、miata7 MX-5、Furkan Ceylan、Can AGBULUT。
• 最初にApp Brainyでカルーセルとして公開しました。