ファッションストアアプリのデザイン:洋服ショップのホーム画面リデザイン、ビフォーアフター

ファッションストアアプリのホーム画面の仕事はひとつ。服を欲しいと思わせることです。下の最初のドラフトは割引を先頭に置いています。上部には赤いマーキーが流れ、その下に下線付きリンクが6つ並び、どの商品タイルも小さな写真の下にタグ、星、2つの価格、カラードット、ボタンを積み上げています。

改善版は機能をすべて残したまま、セールを服に語らせます。マーキーはオファーを2行で添えた全幅のデニム写真になり、ヘッダーはシンプルになり、各タイルは大きな3:4の写真と価格ひとつになります。

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

新人のドラフト

改善版

左は、すべてが同じ音量で叫んでいます。マーキーは赤、タグも赤、価格も赤、ボタンは黒。目の置き場がなく、服は画面上で一番小さい存在です。

右は順序が明快です。ブランド、行き先、ひとつのオファー、そして商品。写真は大きく、文字の数は少なく、赤はSaleという一語だけに残しました。

変更点を数値で比較

修正1:割引ではなく服を売る

ビフォー

アフター

白い大文字で「Summer sale、最大50%オフ、送料無料、コードSUMMER50」と書かれた細い全幅の赤いバーと、着用したデニムジャケットの全幅写真。その下に大きなセリフ体のThe Denim Editとグレーの「Up to 50% off」がある。

マーキーはバナーであり、人はバナーを飛ばすことを覚えています。このマーキーは10 pxで4つのメッセージ(季節、割引、送料無料、コード)を運んでいますが、どれも服を見せていません。ファッションアプリを開いた人が最初に見るのは警告ラベルです。

改善版はオファーに写真を与えました。写真は人が着た商品で、あごの下からクロップしてジャケットがフレームを満たし、角丸もグラデーションもなく端から端まで届きます。その下の2行がマーキーの仕事を担います。コレクション名は28 px、割引は14 pxの1行。コードと送料無料の約束は、ヒーローの先のページへ移しました。タップした人なら条件を読む準備ができているからです。

価格計算は正直なままです。$178の50%オフは$89で、ドラフトと同じ価格です。

再利用できるルール:売っているものを見せ、オファーはその下にプレーンテキストで名づける。写真にバナーでの説明が必要なら、もっと良い写真を選びましょう。

修正2:シンプルなヘッダーと現在地がわかるタブ

ビフォー

アフター

左揃えで、メニューアイコン、OLEAのワードマーク、検索、ハート、赤いバッジ付きのバッグが並ぶヘッダー。その下にWomen、Men、Kids、New、Brands、赤いSaleの下線付きリンク6つ。対して、左にメニューアイコン、中央に大きなOLEAワードマーク、小さな濃いバッジ付きのバッグがあるヘッダー。その下のテキストタブではWomenが下線付きで濃く、Saleは赤、残りはグレーで、右端からはみ出して続いている。

ドラフトでは、4つのアイコンとワードマークが364 pxの1行を奪い合い、その下の6つのリンクにはすべて下線があります。下線は「これが現在地」という意味なので、6つの下線は何も意味しません。選択状態がまったくないのです。

改善版は2つのことをします。ワードマークを読めるサイズで中央に移し、検索とハートはすでにタブバーにあるのでヘッダーのアイコンは2つに減らします。次にカテゴリから下線を外し、下線をひとつの意味に戻します。Womenは濃い色で下線付き、ほかはグレー、Saleは部門ではない唯一のカテゴリなので赤です。行は端からはみ出し、スクロールできることを伝えます。

再利用できるルール:下線は「現在地」を意味させ、色は旗が必要な項目に一度だけ使う。

修正3:写真ひとつ、価格ひとつ

ビフォー

アフター

3つの商品タイルの列。それぞれデニムジャケットを着た人の小さな縦長写真、赤いマイナス50%のタグ、ハート、9 pxの名前、評価付きの金色の星5つ、取り消し線の価格の隣に赤い価格、カラードット3つ、黒いADD TO CARTボタンがある。対して、ジャケット自体を写した大きなタイル2つ。写真の上にハートとプラス、その下に名前、価格ひとつ、カラースウォッチ3つがある。

ドラフトのタイルには9つの要素があります。写真、タグ、ハート、名前、星、評価、2つの価格、ドット、ボタン。幅117 pxでは、それぞれに数ピクセルしか割けず、写真が一番小さな部分です。顔がフレームを埋めて、商品はほとんど見えません。

改善版は4つだけ残します。写真、名前、価格、スウォッチ。

写真は169 x 225のきっちり3:4で角は四角、どれも服にクロップされているので、デニムの質感そのものが絵になります。ハートは写真の上に残します。Add to Cartは写真の角のプラスになり、すべてのタイルの下に黒いバーを置かなくても、機能はワンタップで届きます。星と2つ目の価格は、買う人がじっくり見ると決めた商品ページへ移しました。

3列ではなく2列にしたことで、各名前は13 pxで1行に収まり、タブバーは次の行のタイルの上に浮かぶので、スクロールが壁に当たることもありません。

再利用できるルール:一覧ページのタイルが答えるのは「好きか、いくらか」だけ。ほかはすべて、ひとつ深い階層に置く。

細かな修正

• すべての機能に手が届く。 Add to Cartは各写真のプラス、FilterとSortはスライダーアイコンの奥、検索は2番目のタブ、メニューは左上のまま、Brandsはカテゴリ行に残り、ほかの商品はスクロールの先にあります。
• 均等なマージン。 ドラフトは左14 px、右12 px。改善版は両側20、ブロック間10です。
• 白い地、ひとつのインク。 白地に黒い文字がUIの唯一の色です。残りは写真が担います。
• 服にクロップした写真。 各画像は大きめにしてクリッピングフレーム内でずらし、ジャケットが全体を満たします。写真には人も写っていますが、主役は服です。
• 落ち着いたタブバー。 ラベル付きで塗りとアウトラインが混在した5タブを、小さな浮かぶバーの4アイコンに置き換えました。
• 本物のタイプスケール。 文字はドラフトの8〜15 pxに対し、13〜28 pxです。

自分のストア画面を監査する

Figmaファイルを入手

無料ファイルには、新人のドラフト、改善した画面、そしてすべてのパーツがコンポーネントとして入っています。

無料のFigmaファイル

ファッションストアのホーム画面リデザイン、ビフォーアフター

両方の画面とすべてのパーツをFigmaコンポーネントで収録。無料、閲覧専用、複製して下書きに保存できます。

Figmaで開く

FAQ

ファッションストアアプリのホーム画面はどうデザインすべきですか?

商品の全幅写真を先頭に置き、オファーはその下に2行のテキストで入れます。続けてプレーンテキストのカテゴリ、そして大きな3:4の写真を使った2列のタイルを置き、各タイルの下には価格ひとつと数色のスウォッチを添えます。

洋服アプリの商品写真のサイズはどのくらいが適切ですか?

洋服には3:4の縦長比率が標準です。ここでは390 px幅の画面に1行2枚で、タイルは169 x 225 px、角は四角で、写真は服にクロップしています。

ファッションアプリにセールバナーは必要ですか?

商品を載せていないバナーは避けましょう。短いオファー行を添えた写真が同じ仕事をします。赤はSaleタブに残せば、画面を支配せずに割引を見つけやすくできます。

商品タイルにはどのくらいの情報を載せるべきですか?

一覧ページでは4つで十分です。写真、名前、価格、カラースウォッチ。評価、元の価格、サイズは商品ページに置き、Add to Cartは写真の上のプラスにできます。

ショッピングアプリのカテゴリナビはどう見せるべきですか?

テキストタブを使い、現在のものだけに下線を引き、残りはグレー、アクセントカラーはSaleだけにします。行は画面の端からはみ出させて、スクロールできることを見せましょう。

ストアアプリのタブバーには何を入れるべきですか?

4つのアイコンで十分です。ショップ、検索、保存、プロフィール。バッグは数が見えるヘッダーに残します。

出典

• 両方の画面は自作で、Figmaでデザインし計測しました。アプリのOLEA、その商品、価格は架空です。価格は両画面で一貫しています。$178の50%オフは$89、$118の50%オフは$59です。
• 参考にしたパターン:ZaraとSSENSEのファッションアプリ。白い地、シンプルなヘッダー、テキストタブ、全幅のヒーロー、角が四角い3:4のタイル。
• 写真はPexelsより。ヒーローはThomas Nguka、ジャケットのタイルはArturo A、Bleached TruckerはKristina Polianskaiaによるものです。アイコンはPhosphor(MIT)。
• 最初にApp Brainyでカルーセルとして公開しました。