ECサイトのデザインのコツを、ホーム、ナビゲーション、カテゴリ一覧、検索、商品ページ、モバイルなど買い物客が見るページ別に紹介。必要な要素と避けるべき失敗を解説します。
買い物客の考え方に沿ったわかりやすいナビゲーション、ページの表示速度、拡大できる大きな商品写真、「カートに追加」ボタン近くの価格と送料情報、見やすい口コミ、正常に機能するサイト内検索、ゲスト購入ができる短い購入手続きです。ストアの閲覧が最も多いスマートフォンから優先してデザインします。
買い物客が比較できるだけの商品数を掲載し、延々とページを移動させないようにします。多くのストアは1ページに24～48件を表示するか、「さらに表示」ボタンを使います。サイズ、色、価格、在庫など、購入者が選ぶ属性で適切に絞り込めることのほうが重要です。
商品名、メイン画像、価格、主なバリエーション（サイズ、色）、在庫状況、「カートに追加」ボタン、送料または配達日数の案内です。口コミがある場合は星評価と件数も表示します。
通常は不要です。自動で切り替わるスライダーは見られないことが多く、アクセシビリティや表示速度を損なう可能性があります。明確なメッセージと主なカテゴリへのリンクがある一つの力強いメイン画像のほうが効果的です。
優れたECサイトのデザインは、買い物客が3つのことをすばやく行えるようにします。適切な商品を見つけ、安心して購入し、手間なく支払うことです。具体的には、顧客の考えに合ったナビゲーション、モバイルでの高速表示、大きな商品写真、早めの価格と送料表示、見やすい口コミ、短い購入手続きです。
一般原則を並べるだけではなく、ページごとに買い物客の疑問が変わるため、ページ別に説明します。
ホームページには、何を誰に販売しているかを伝える時間が数秒しかありません。
含めるもの：
避けるもの：自動で切り替わるカルーセル、ページ表示前に出るポップアップ、モバイルの最初の表示を遅らせるメイン動画。
ここで多くの比較が行われます。
| 要素 | 推奨事項 |
|---|---|
| 商品カード | 商品画像の比率を統一し、名称、価格、評価を表示。ホバー時に2枚目の写真を表示 |
| 絞り込み | サイズ、色、価格、素材、在庫など実際の選択基準に合わせ、件数も表示 |
| 並び替え | 初期値は「おすすめ」または「人気順」。価格と新着順も選べるようにする |
| 在庫 | 販売終了商品を隠すか、明確に表示 |
| ページ送り | 「さらに表示」または番号付きページを使い、戻ったとき絞り込み条件を維持 |
| モバイル | 上方向に開くパネルで絞り込み、「34件を表示」などのボタンを置く |
よくある失敗は、商品を開いて戻ると絞り込みが消えることです。「戻る」ボタンを試してください。
検索する買い物客は購入意欲が高いことが多く、使いにくい検索欄は直接売上を逃します。
販売を決めてもらうのが商品ページの役割です。上から順に確認しましょう。
まず顧客にとっての利点を書き、その後に仕様を説明します。寸法、素材、手入れ方法は短い仕様表にまとめます。サイズガイドは別ページに移動させず、同じページのパネルで表示します。
商品名、画像、価格、在庫、口コミを含むProduct構造化データを追加し、検索結果に価格や評価を表示できるようにします。
購入手続きのデザインには専門的な検討が必要です。要点は、合計額を早く表示し、ゲスト購入を許可し、フォームを短くし、Apple PayやGoogle Payのような簡単決済を用意することです。購入手続きの最適化ガイドでは各段階を詳しく説明しています。
デザインは支払いボタンで終わりません。ほとんどの購入者が注文確認ページとメールをよく読みます。
ストア訪問の大半はスマートフォンです。まずモバイル版を設計、テストし、次にパソコン向けに広げます。
どちらも単なる技術要件ではなく、デザイン上の判断です。
速度：画像を圧縮してWebPまたはAVIFで配信し、レイアウトのずれを防ぐため幅と高さを指定します。外部アプリやスクリプトを減らし、Google PageSpeed InsightsでCore Web Vitalsを確認します。
アクセシビリティ：WCAG 2.2 AAを満たす色のコントラスト、商品画像の代替テキスト、ラベル付きフォーム欄、キーボードで操作できるメニューと絞り込み、原因を伝えるエラーメッセージを用意します。使いやすいストアは誰にとっても便利で、多くの地域ではアクセシビリティが法的にも期待されています。
新しく始める場合は、適切なレイアウトを土台にすると多くの判断を減らせます。テンプレートからストアデザインを探すか、チャットで店舗についてWe.Incに説明します。商品ページ、カート、購入手続きのあるオンラインストアが作成され、ホスティングとSSL込みで、ビジュアルまたはコードから調整できます。
無料で始める · クレジットカード不要