植物ショップアプリのデザイン:ECホーム画面のリデザイン

植物ショップは、一番簡単な部分がすでに解決しています。商品の写真映えが良いのです。下の最初のドラフトには本物の植物と本物の写真がありますが、ごちゃごちゃしたヘッダー、3つのドロップダウンフィルター、長いケア情報のブロック、そして各カードの下に並ぶ7つの情報に埋もれています。改善版は機能をすべて残したまま、植物に余白を取り戻します。

画面全体のBeforeとAfter

新人のドラフト

改善版

左では、ユーザーは植物が1つ丸ごと見えるまでに、ヘッダー、フィルターバー、3文のアドバイス、山積みの商品情報を読み進めなければなりません。右では、短いブロック3つのすぐ後に最初の植物が現れ、各カードは価格付きの1株として完結し、緑は「タップできるもの」という1つの役目だけに使われています。

セールはどちらの画面にも残っています。ピレアは$24.99で$31.00に取り消し線、パーラーパームは$28.00で$35.00に取り消し線です。ショップ、価格、レビューは練習用の架空のものですが、植物は本物です。

修正1:ロゴ、検索、カート、それ以外はなし

Before

After

メニュー、ロゴ、小さなアイコン3つに対して、同じロゴと大きな丸いボタン2つ。

ドラフトのヘッダーには、メニュー、ロゴ、検索、ハート、カートが並んでいます。ハートはウィッシュリストで、改善版ではウィッシュリストに「保存済み」というタブを用意したので、ハートをヘッダーに置く必要はなくなりました。カートはそのまま残します。ストアの上部にあると誰もが期待するコントロールであり、バッジで中身の数が分かるからです。

残ったアイコンは大きくなりました。小さなアイコン4つの代わりに、44 pxのボタン2つです。スマホは片手で持つもので、大きなターゲットのほうが押しやすいのです。ロゴは両方の画面で同じワードマークです。ここが肝心で、ヘッダーはブランドの見た目を変えたのではなく、要素を引き算して直したのです。

バッジは赤からブランドの緑に変えました。赤い点は「問題がある」「急ぎだ」という意味です。商品の個数はそのどちらでもありません。

修正2:ドロップダウンではなく、見えるフィルター

Before

After

カテゴリ、価格、サイズが閉じたドロップダウンと並び替えリンクだったものが、室内、屋外、多肉植物、ペットに安全のチップになり、室内が選択されている。

ドロップダウンは選択肢を隠します。使うには、タップして、リストを読み、選び、リストがまた閉じます。ドロップダウンが3つあれば、画面上の植物が1つも変わらないうちにその往復を3回することになります。しかもそれは、フィルターの種類を示すだけで、中身までは見せません。

チップなら選択肢が最初から見えています。室内、屋外、多肉植物、ペットに安全は、植物を買う人が実際に抱く疑問です。1タップでそのうちの1つに答えが出て、緑の選択中チップが現在の状態を示します。4つのチップは350 pxの行に6 pxの余りを残して収まるので、切れることも、スクロールが必要になることもありません。

修正3:1株まるごと見えるカード

Before

After

写真、バッジ、ハート、2つの名前、価格、星、レビュー数、横幅いっぱいのボタンに対して、写真、短い名前、価格、丸いボタン1つ。

ドラフトのカードは、写真の下に7つを積み重ねています。植物の学名、通称、価格、元の価格、星、レビュー数、横幅いっぱいの「カートに追加」ボタンです。写真自体の上には割引バッジとハートが乗っています。これらすべてが、画面の半分の幅のカードに収まっているのです。

改善版は2行とボタン1つだけにしました。名前は短く(「Pilea」「Calathea」)、その下に価格を置き、セール中なら元の価格に取り消し線を引きます。幅広い「カートに追加」バーは丸いプラスボタンに置き換えました。商品カードのプラスは、ユーザーがすでに知っているパターンだからです。

写真も変えました。ドラフトのトリミングは植物を切っていて、鉢の位置もそろっていません。改善版では、すべての写真を植物全体がフレーム高さの約70%を占めるように中央でトリミングし、各鉢を同じライン上に置きました。すると、カードの並びが4枚の別々の絵ではなく、ひとつの列として読めます。

修正4:ケア情報を3つの要点に

Before

After

緑のボックスの3文のアドバイスに対して、ラベルと一言を添えた3つのアイコン。

ドラフトの内容は正しいのですが、ユーザーはそれを見つけるために3文を読まなければなりません。3つの要点は、水、光、そしてペットに安全かどうかで、どれも一言で言えます。週1回、間接光、安全。

改善版では、各要点にアイコン、小さなラベル、太字の一言を付けました。カード全体がひと目で読めます。「猫の近くに置いても大丈夫?」と探している植物好きは、読まなくても「ペット:安全」を見つけられます。

そのほかの小さな修正

• タブは5つではなく4つ。 ホーム、ショップ、保存済み、プロフィール。ウィッシュリストは「保存済み」になり、カートはタブバーからヘッダーへ移りました。
• 余白は1種類。 ドラフトは左14 px、右12 pxでした。改善版は両側20 px、ブロック間は12〜14 pxです。
• 写真にバッジなし。 赤い-20%と青いNEWのバッジ、すべての写真上のハートは消えました。取り消し線の価格が残っているので、セールは今も見えます。
• アクセントカラーは1色。 ドラフトの緑には赤と青のバッジが加わっていました。改善版はタップできるものすべてにブランドの緑#1F7A4Dを1色だけ使います。
• 本物のタイプスケール。 文字は8〜20 pxから、iOSの11〜20 ptのサイズになりました。
• 短いセクションタイトル。 「Popular Plants」は「Popular」になりました。画面がすでに植物の話だからです。

自分のショップアプリを点検しよう

Figmaファイルを入手

無料ファイルには、両方の画面をコンポーネントとして収録し、すべての修正をBefore/Afterのペアで、さらにカラー変数とiOSのテキストスタイルも入れています。

無料のFigmaファイル

植物ショップのホーム画面 Before/After

両方の画面と、修正した各パーツをFigmaコンポーネントとして収録。無料、閲覧専用、複製して自分のドラフトで使えます。

Figmaで開く

FAQ

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

ロゴ、検索、カートの短いヘッダー、その次にチップのフィルターと最初の商品です。ヒントやバナーなど商品以外のものはすべて小さく保ちましょう。

ショップアプリのフィルターはドロップダウンとチップのどちらがいいですか?

最もよく使われる少数のフィルターにはチップです。チップはタップしなくても選択肢が見え、選択中のものが現在の状態を示します。価格やサイズのような長いリストには、ドロップダウンやフィルターシートを残しましょう。

ショッピングアプリの商品カードには何を表示すべきですか?

商品全体が写った写真、名前、価格、追加ボタン1つです。評価や長い名前などの詳細は商品ページに置けます。

アプリでケア方法はどう見せますか?

アイコン付きの短い要点を、1つにつき一言で。たとえば「水やり:週1回」のように。長い文は、1タップ奥に置けます。

ショッピングアプリのタブはいくつにすべきですか?

4つか5つです。重複するものは、ユーザーがすでに見る場所にまとめましょう。たとえばカートはヘッダーに、ウィッシュリストは「保存済み」タブに。

出典

• 両方の画面は私たち自身のもので、Figmaで設計し計測しました。ショップ、価格、レビューは架空のものですが、植物の名前は本物です。
• 写真はPexelsより、Kulbir、Gül Işık、Kaboompics。
• Apple Human Interface Guidelines: Typography。改善版の画面で使ったiOSのテキストサイズの参照元。
• App Brainyでカルーセルとして最初に公開。