スニーカーアプリのデザイン:商品ページのリデザイン、ビフォー&アフター

買い物客がスニーカーのページを開くのは、3つの疑問に答えるためです。どんな見た目か、いくらか、自分のサイズはあるか。下の初稿には3つの答えがすべて載っているのに、買い物客に探させます。修正版は同じ商品、同じ価格のまま、答えを買い物客が尋ねる順に並べます。

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

新人の初稿

修正後

左では、買い物客は商品名より先に写真の上の小さな印を7つも目にします。右では、まず写真、次に名前と価格が来て、濃い色のボタンは購入するボタンだけです。

修正1:何も載っていない写真

修正前

修正後

写真の上にアイコン4つとバッジ3つ。対して、戻るボタンと保存ボタンだけ。

初稿は店の全部を商品の上に載せています。上には戻る、共有、保存、赤い「3」付きのカート。左下にはシューズのつま先の上に「New arrival」「-19%」「Free shipping」が積み重なっています。

修正版は写真の上に40 pxの丸ボタンを2つだけ残します。戻ると保存です。残りはあるべき場所に移しました。割引は価格の横、送料の表示は下部バーの合計の下、写真の枚数を示すドットは写真の下です。

使い回せるルール:商品写真は商品そのものです。靴を判断する助けにならないものは、別の場所に置きましょう。

修正2:まず名前、次に価格

修正前

修正後

数字の列に紛れた価格と、専用の行を持つ価格。

初稿はブランドを9 pxの灰色の大文字で表示し、商品名は2行に折り返し、その次に1行で「$129.00 | 4.8 (2,341 reviews) | 1.2k sold」と並べます。5つの数字が同じサイズで1行に並び、価格は探さないと見つかりません。

修正版は商品名に大きな文字の専用行を与えます。価格にも専用の行です。大きな「$129」、その横に取り消し線の入った旧価格「$159」、小さな「19% off」チップ。評価、レビュー、販売数はその下の控えめな行に置きます。それらは判断を支えるもので、判断するのは価格だからです。両方の画面で数字は同じです。129÷159は0.81なので、19% offは正しい表示です。

使い回せるルール:1行に数字がいくつも並ぶとき、買い物客が必要なのは1つだけです。それに専用の行とサイズを与えましょう。

確認したい価格のルール

取り消し線付きの価格には、地域によっては法的な側面があります。

修正3:選択中が分かるサイズ

修正前

修正後

小さなボックス8個と、状態が見えるチップのグリッド。

初稿のサイズボックスは41 x 32 pxで1列です。選択中の8.5は枠線が1 px濃いだけで、売り切れの9.5は在庫のあるサイズと同じ見た目です。3つの色のドットには名前がありません。

修正版は各サイズを44 pxのチップにして、4個ずつ2行にします。選択中は#111111で塗りつぶし、白い文字。売り切れは灰色地に取り消し線で、タップする前から買えないと分かります。色にはスウォッチの下に名前が付きます。Crimson、Black、Limeで、選択中にはリングが付きます。

44 pxという高さには意味があります。Appleのガイダンスではタップ領域は最低44 x 44ポイントで、8個並んだ32 pxのボックスは押し損ないやすいのです。

使い回せるルール:どの選択肢にも、選択可能、選択中、選択不可の3つの状態が見える必要があります。細い線ではなく、塗りで伝えましょう。

修正4:購入するための1本のバー

修正前

修正後

大文字ボタン2つとリンク。対して、価格とボタン1つ。

初稿は数量ステッパー、枠線付きの「ADD TO CART」、黒い「BUY NOW」、小さな「Add to Wishlist」リンクで終わります。ほぼ同じ重みのボタンが2つあると、買い物客は買い方を選ぶ羽目になり、しかもページと一緒にスクロールして消えてしまいます。

修正版は下部に留まる1本のバーで終わります。「$129」、その下に「Free shipping」、そして黒い「Add to Bag」ボタン1つ。ウィッシュリストは写真の上の保存ボタンです。タブバーも消えました。購入バーの下に5つのタブがあると競合するからです。

使い回せるルール:主なアクションにはボタンを1つ与え、価格をその隣に置きましょう。

細かな修正

• 左端を1本に。 初稿の余白は左14 px、右12 pxでした。修正版は両側20 pxです。
• 本物の文字スケール。 文字は9〜14 pxから、iOSの12〜22 ptのサイズになりました。
• 文頭のみ大文字。 大文字の「ADD TO CART」と「BUY NOW」は「Add to Bag」になりました。
• 控えめなリンク。 青い「Size Chart」は灰色の「Size guide」になりました。選択を助けるものであって、選択そのものではないからです。

自分の商品ページを点検する

FAQ

スニーカーの商品ページは最初に何を見せるべきですか?

写真です。その上には戻ると保存以外何も載せません。次に名前、そして専用の行に価格を置きます。

靴のサイズセレクターはどうデザインしますか?

各サイズを44 px以上のチップにし、選択中のものは濃い色で塗りつぶし、売り切れのサイズには取り消し線を入れます。選択中のサイズの細い枠線では薄すぎて読み取れません。

セール価格は商品ページでどう見せるべきですか?

現在価格を大きく、その横に取り消し線の入った旧価格、そして割引率を小さなチップで見せます。ここの両画面は$129、$159、19% offを使っています。どの旧価格を表示してよいかは、現地のルールを確認してください。

商品ページにAdd to CartとBuy Nowの両方は必要ですか?

メインのボタンは1つのほうが明快です。同じ重みのボタンが2つあると、買い物客は買うと決める前に買い方を選ばされます。

商品ページにタブバーは必要ですか?

この画面では不要です。ページの仕事は1つで、購入バーの下のタブバーはそれと競合します。

出典

• 両方の画面は自作で、Figmaでデザインし計測しました。商品名、ブランド、価格、レビューは架空のものです。
• 商品写真はPexelsよりAhimsa - OM。
• Apple Human Interface Guidelines: Typography:修正版の画面で使ったiOSの文字サイズについて。
• Apple Human Interface Guidelines: Accessibility:44 ptのタッチターゲットサイズについて。
• European Commission notice on the interpretation of Article 6a of Directive 98/6/EC:直前価格のルールについて。
• 最初は App Brainy でカルーセルとして公開しました。