コーヒーアプリのデザイン:注文ホーム画面のリデザイン、ビフォーアフター

コーヒーアプリを開く人がやりたいことは1つ。ドリンクを注文して、受け取ること。下の初稿には必要なものは全部載っています。ただし全部を一度に叫んでいます。長い店舗表示、ポイントを叫ぶバナー、8つのタブ、そして写真ごとの ADD ボタン。修正版は店もポイントもメニューも残したうえで、それぞれに静かな居場所をひとつだけ与えます。

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

新人の初稿

修正版

左では、挨拶、店舗表示、ポイントバナー、タブ列、ボタンのグリッドが全部同じ音量で迫ってきます。右では、ブロックごとに読むものは1つ、行ごとにアクションは1つです。

修正1:場所は一度だけ言う

ビフォー

アフター

枠に詰め込まれた店舗表示と、受け取りカードの比較。

初稿は店舗を1行に詰め込んでいます。「Downtown Store - 123 Main St (0.3 mi) - Open until 9PM」の54文字が、末尾にシェブロンのある枠の中に小さな文字で並びます。店名も住所も距離も営業時間も重みが同じなので、目は必要な1つの事実を探して行全体を読むはめになります。

修正版ではこの行を受け取りカードにします。タイトルは「Pickup at Downtown」、その下に「0.3 mi · Open until 9 pm」をグレーの1行で添え、右にブランドブルーの「Change」を本物のアクションとして置きます。住所はホーム画面には出しません。挨拶は大きな「Good morning, Leo」になり、感嘆符は消えました。

使い回せるルール:長い1行は、タイトル、詳細1つ、アクション1つに分けること。シェブロン付きの枠は、「Change」という言葉ほど「タップして」と明確には伝えません。

修正2:ポイントは進捗で見せる

ビフォー

アフター

叫ぶバナーと、進捗バーの比較。

初稿のバナーは青からバターイエローへフェードし、白い文字が最も読みにくい黄色の端に載っています。文言は「You have 1,250 points! Redeem now for FREE drinks!!!」。下の Redeem Now ピルは白地に淡い黄色の文字です。ポイントがあることは伝わりますが、何にどれだけ近いのかは分かりません。

修正版は濃い青のカード1枚です。上に「Rewards」と「1,250 points」、大きな行は「250 points to a free drink」。その下のバター色の進捗バーは83%、つまり1,500のうち1,250まで満ちていて、小さな行が無料ドリンクの場所を示します。見る人が目にするのは、いちばん面白い数字である「距離」です。

使い回せるルール:ポイント残高は数字、進捗は物語。まず物語を見せ、数字は脇に置くこと。

修正3:チップは4つ、選択は1つ

ビフォー

アフター

端からはみ出す8つのタブと、4つのチップの比較。

初稿のカテゴリは8つ。Coffee、Tea、Cold Drinks、Seasonal、Bakery、Breakfast、Merch、Gift Cards。右端からはみ出して「Merch」は「Mer」で切れ、ほかにもあると知るには横にスクロールするしかありません。選択中のタブは細い下線で示されるだけです。

修正版は4つのチップ、All、Coffee、Cold drinks、Bakery。All はカフェブルーで塗られ、ほかは白なので、選択中のものが一目で分かります。ほかのカテゴリはこの画面にはありません。実際のアプリなら Menu タブに置き、1タップで届くようにします。

使い回せるルール:フィルター行は画面に収まること。自分のリストを見せるのに横スクロールが要るなら、減らすこと。

修正4:1品につき1行

ビフォー

アフター

各カードの下にバター色ボタンが付くグリッドと、3行のリストの比較。

初稿は商品をカードのグリッドで見せます。大きな写真、名前、価格、そして大文字のバター色「ADD +」ボタン。タブの下は2行半のカードで埋まり、ボタンのバター色が写真ごとに繰り返され、「View Menu」リンクは白地に淡い黄色です。

修正版は、各商品を60 px の写真、名前、グレーの1行、価格、そして右端の丸い青の「+」1つからなる行にします。グリッドでは2枚半だった場所に、カード内で3行が収まり、各行のボタンは追加ボタンだけ。「Full menu」はブランドブルーです。

使い回せるルール:すべての商品が同じアクションを持つなら、そのアクションは小さく揃えること。そうすれば目は、名前と価格を1本の縁に沿って読み下ろせます。

細かな修正

• 左端を1本に。 初稿の余白は左14 px、右12 px。修正版は左右とも20 px、ブロック間は16 px。
• 本物の文字スケール。 文字は9〜18 px から、iOS の11〜28 pt に。
• タブは5つでなく4つ。 Home、Menu、Order、Rewards、Account は Home、Menu、Rewards、Account に。Order タブはバーから外れました。
• 4色のパレット。 カフェコバルト #2342A8、濃い青 #15276B、バター #F3C77A、クリーム #F5EFE4 が、グラデーションとグレーの背景に取って代わります。

自分の注文画面を点検する

FAQ

コーヒー注文アプリのホーム画面は、最初に何を見せるべき?

Change リンク付きの受け取り店舗カードが最初、次にリワードの進捗、その後にカテゴリと人気商品です。何を頼むかの前に、どこで注文するのかが見えているべきです。

ロイヤルティポイントのセクションはどうデザインする?

次の報酬までの距離を、進捗バーと「250 points to a free drink」のような平易な1行で見せ、残高は脇に置きます。

メニューのカテゴリタブはいくつが適切?

横スクロールなしで画面に収まる数、たいていは4つです。残りは Menu タブに置き、1タップで届くようにします。

メニューはグリッドとリストのどちらがよい?

注文にはリストの行のほうが向いています。名前と価格が1本の縁に揃い、各行に小さな追加ボタンが1つあれば足りるからです。グリッドは写真を眺める用途に向きます。

追加ボタンはどれくらいの大きさにすべき?

見える円が小さくても、タップ領域は少なくとも44×44ポイント。修正版の画面は1行につき丸い青のボタンを1つ使っています。

出典

• 2つの画面はどちらも自作で、Figma で設計・計測しました。店舗、その住所、価格、ポイントは架空です。
• メニューの写真は Pexels より。撮影: Duc Nguyen、Melissa Jansen van Rensburg、Marcelo Verfe、Juan Pablo Serrano、Skyler Ewing、Vinícius Vieira ft。
• Apple Human Interface Guidelines: Typography。修正版の画面で使った iOS の文字サイズの出典。
• Apple Human Interface Guidelines: Accessibility。44 pt のタッチターゲットサイズの出典。
• Kivetz, Urminsky and Zheng, The Goal-Gradient Hypothesis Resurrected、Journal of Marketing Research、2006年。ロイヤルティカードが埋まるほど客が頻繁に購入するという知見の出典。
• 最初は App Brainy でカルーセルとして公開しました。