ECサイトのデザインを「サイトをきれいに作ること」と考える企業は少なくありません。
しかし、お客様がECサイトに来る目的は、商品を見つけ、仕様と価格を確認し、注文することです。
どこか一つの手順でつまずくと、画面がどれだけきれいでも注文は離れていきます。
この記事では、お客様の購入までの流れに沿って、ECサイトのデザインで押さえたい7つのポイントを整理します。あわせて、仕様が複雑な商品や見積が必要な商品の設計方法も説明します。
要点
- ECサイトのデザインの目的は、お客様が商品を見つけ、迷わず注文を終えられることです。
- デザインの前に、販売方法を決めます。直接決済か、見積依頼か、両方か。
- 決済の入力項目はできるだけ減らします。多くのサイトは8項目で足ります。
- 仕様が複雑な商品は、営業が聞いていた質問を、ページ上の選択ステップに置き換えます。
- 一般的な小売ならプラットフォームのテーマで十分です。購入の流れが特殊な場合にオーダーメイドのデザインを検討します。
ECサイトのデザインは、一般的なサイトのデザインと何が違う？
コーポレートサイトの役割は、会社を紹介して信頼を築き、最後に問い合わせにつなげることです。
ECサイトには、そこに取引の流れが加わります。お客様は商品を探し、仕様を比べ、カートに入れて、支払いを終える必要があります。
そのため、ECサイトのデザインでは、ブランドの見た目だけでなく、取引の一つひとつの手順に気を配る必要があります。
| 項目 | コーポレートサイト | ECサイト |
|---|---|---|
| 主な目的 | 会社紹介、問い合わせの獲得 | 購入または見積依頼を完了してもらう |
| 主なページ | トップ、会社概要、サービス、事例 | カテゴリページ、商品ページ、カート、決済ページ |
| デザインの重点 | 情報のわかりやすさ、信頼 | 探しやすい、比べやすい、注文しやすい |
| 評価の指標 | 問い合わせ数 | 注文数、コンバージョン率、カゴ落ち率 |
情報の階層、ブランドの見た目、CTAなど、すべてのサイトに共通するデザインの原則は、企業サイトのデザインの記事で解説しています。この記事ではECサイト特有の部分だけを扱います。
あわせて読む：企業サイトのデザイン：企画、構成、設計のポイント
デザインの前に、商品の売り方を決める
同じECサイトでも、お菓子を売る店と、オーダーメイドの団体服を売る店では、ページの作りが大きく変わります。
着手する前に次の4つの質問に答えておくと、デザインの方向性がはっきりします。
お客様は直接決済する？それとも先に見積を依頼する？
規格品なら、そのままカートに入れて決済できます。
数量、素材、納期の確認が必要な商品は、お客様に見積依頼を送ってもらい、営業が金額を回答する流れが向いています。
二つの流れでは、商品ページのボタン、フォーム、その後のページがすべて変わるため、デザインの前に決めておきます。
商品は規格品？それとも多仕様やオーダーメイド？
仕様が少ない商品なら、わかりやすい商品写真と購入ボタンで十分です。
仕様が多い商品は、仕様を選ぶ順番、価格の変わり方、選び間違えたときの知らせ方を先に設計します。
お客様は主にスマートフォン？それともパソコン？
すでにサイトがある場合は、Google Analyticsで訪問者のデバイスの割合を確認できます。
スマートフォンが中心のサイトなら、商品ページ、カート、決済をスマートフォンの画面から設計します。
企業の購買担当者はパソコンで仕様を比べることが多いため、パソコン版では多くの仕様をわかりやすく見せる必要があります。
主な顧客は一般消費者？それとも企業？
一般消費者は、すばやく注文できることとお得な情報を重視します。
企業のお客様には、会員専用価格、大口注文、請求書の発行などの流れが必要になることがあります。
これらの機能の計画方法は、ECサイトの機能の記事を参考にしてください。
ECサイトのデザインで押さえたい7つのポイント
ここからは、お客様がサイトに来てから支払いを終えるまでの順番に沿って、ページごとのポイントを整理します。
1. トップページ：入口をすぐに見つけられるようにする
トップページの役割は、お客様を目的のカテゴリや商品へ案内することです。
ファーストビューには、次の内容を置くことをおすすめします。
- ブランドが主に何を売っているかを一文で
- 主要な商品カテゴリへの入口
- 開催中のキャンペーンや新商品
- 検索ボックス
スライドショーの枚数が多すぎると、後半の画像はほとんど見られません。重要なキャンペーン情報は、固定の枠に置きましょう。
2. ナビゲーションとカテゴリ：お客様の探し方に合わせる
カテゴリ名には、社内の型番ではなく、お客様になじみのある言葉を使います。
たとえばお客様が探しているのが「クラスTシャツ」なら、カテゴリ名を「綿Tシャツシリーズ」だけにしないようにします。
カテゴリの階層も深くしすぎず、2〜3回のクリックで商品にたどり着けるようにします。
Googleは、メニューからカテゴリページへ、カテゴリページからすべての商品ページへリンクすることを推奨しています。カテゴリページから一部の商品にしかリンクしていないと、Googleがその商品を見つけられない場合があります。
3. 商品一覧ページ：比べ方に合った絞り込みと並べ替え
商品が増えると、お客様には絞り込みと並べ替えが必要になります。
絞り込みの条件は商品の特性に合わせます。たとえば衣類ならサイズと色、印刷物ならサイズと用紙です。
商品カードには、少なくとも商品写真、商品名、価格を載せます。見積が必要な商品には「仕様によりお見積」と表示し、価格の書き忘れと思われないようにします。
4. 商品ページのデザイン：仕様、価格、判断材料を一か所に
商品ページは、お客様が買うかどうかを決める場所です。商品ページのデザインでは、購入前の主な疑問に答える必要があります。
| 項目 | お客様が知りたいこと |
|---|---|
| 商品写真 | 実物の見た目、細部、サイズ感 |
| 商品名と価格 | いくらか、割引はあるか |
| 仕様の選択 | どのサイズ、色、素材があるか |
| 購入ボタン | カートに入れるか、見積依頼を送るか |
| 配送と支払い | いつ発送か、送料はいくらか、どう支払えるか |
| 商品説明 | 用途、素材、お手入れ方法 |
| レビューや事例 | ほかの人は買ってどう感じたか |
仕様を切り替えたら、価格と商品写真も同時に更新します。
そうすれば、お客様が決済の段階になって、思っていた価格と違うと気づくことがありません。
5. カートと決済：入力項目と想定外の費用を減らす
決済は、注文が最も離れやすい手順です。
Baymard Instituteによる米国のオンライン買い物客の調査では、17%の人が、決済の手順が長すぎる、または複雑すぎるという理由で注文をやめた経験があると答えています。
Baymardは、大規模なECサイトが決済のデザインを改善すると、コンバージョン率が平均35.26%上がると推計しています。
さらにBaymardの調査は、決済の体験を左右するのは手順の数ではなく、主に入力項目の数だと指摘しています。
多くのサイトの決済に必要な入力項目は8つですが、2024年の平均は11でした。
カートと決済の流れは、次の点で確認できます。
- カートに商品、仕様、数量、小計が表示され、その場で変更できる
- 送料や手数料は決済の前に表示し、最後の手順で初めて出さない
- ゲスト購入を用意し、会員登録を強制しない
- 住所や請求書などの入力項目は、必要なものだけに絞る
- お客様がよく使う支払い方法を先に表示する
6. スマートフォン版：主な操作を片手でできるように
スマートフォンの画面は小さいため、主な操作は片手で完了できるようにします。
- ボタンは十分な大きさにし、間隔をあけて押し間違いを防ぐ
- 「カートに入れる」や「見積依頼を送る」ボタンを画面下部に固定する
- 仕様の選択肢は横スクロールしなくても全部見えるようにする
- 電話番号や数量の入力欄では数字キーボードを表示する
ECサイトのWebデザインでは、一般的にレスポンシブデザインを採用し、一つのサイトがスマートフォンとパソコンの画面に自動で合わせられるようにします。
あわせて読む：レスポンシブデザイン（RWD）とは？利点、欠点、SEO
7. 信頼につながる情報：送料、返品・交換、支払い方法、連絡先
初めて訪れるお客様は、まずその店が信頼できるかを確かめます。
次の情報は見つけやすい場所に置き、できれば商品ページで要点を確認できるようにします。
- 送料と送料無料になる条件
- 発送とお届けまでの日数
- 返品・交換の規定
- 支払い方法
- 会社名、事業者番号、連絡先
- お客様のレビューや導入事例
仕様が複雑な商品や見積が必要な商品は、ECサイトをどう設計する？
ECサイトのデザインに関するアドバイスの多くは、お客様が「商品を選び、カートに入れて、支払う」だけで取引が終わることを前提にしています。
しかし、団体服や印刷物のような商品は、数量、素材、加工方法によって価格が変わり、確認してからでないと見積を出せないものもあります。
こうしたサイトのデザインで大切なのは、営業がこれまで電話で確認していた質問を、ページ上の選択ステップに置き換えることです。
ここでは、TimTechの3つの事例で説明します。
仕様は一度に全部見せず、順番に選んでもらう
仕様が多いときに、すべての選択肢を一度に並べると、お客様はどこから選べばよいかわからなくなります。
お客様が決める順番に並べるのが効果的です。たとえばスタイル、色、サイズと数量の順に選んでもらいます。
哈摩學服は、クラスTシャツ、学科のユニフォーム、サークルのウェアなどの団体服を手がけ、スタイル、ブランド、色、サイズの異なる商品をそろえています。
TimTechは哈摩學服のために多仕様の商品構成をつくり、お客様が一つの商品ページで必要な仕様を順番に確認できるようにしました。
サイトの公開後、見積依頼ごとのやり取りが3〜4往復減り、店舗側は一度でお客様の要望を把握できるようになりました。
仕様に応じて価格をリアルタイムで計算する
印刷物の価格は、用紙、サイズ、加工など多くの条件で決まるため、これまでは営業が一件ずつ見積を出していました。
玖愛印（9i-in）の管理画面では、用紙の素材、サイズ、特殊加工ごとに価格のルールを設定できます。
お客様はサイト上で仕様を選び終えると、すぐに見積金額を確認できます。
価格がすぐに表示されるので、お客様は営業の返信を待たずに、仕様ごとの価格差を自分で比べられます。
9i-inはサイトの公開以来、新規のお客様が5,000人を超えました。
直接決済できない商品は、見積依頼の流れにする
数量、納期、オーダーメイドの内容を確認してからでないと見積を出せない商品では、「カートに入れて、そのまま支払う」流れは合いません。
ECサイトでは、購入ボタンを「見積依頼を送る」に置き換えられます。お客様が仕様を選んで依頼を送り、営業が見積を回答します。
哈摩學服のサイトはこの設計です。お客様が見積依頼を送ると、システムがLINEで担当者に自動で知らせ、その後のやり取りにすぐつなげられます。
見積依頼には、お客様が選んだ仕様と数量を含めます。そうすれば、営業が最初から聞き直す必要がありません。
デザインデータをブラウザで完成できるようにする
印刷物やオーダーメイド商品では、お客様がデザインソフトを持っていない、またはデータの形式が印刷の条件に合わない、という問題がよく起こります。
9i-inはオンラインエディターを導入し、専門のデザインソフトを使えないお客様でも、ブラウザで入稿データを完成できるようにしました。
飛捷數位印刷では、お客様がデータをアップロードし、素材と仕様を選んで、オンラインで支払えます。
大学周辺の論文印刷の需要に向けて、飛捷には背表紙エディターもあり、スタッフが正しい形式の論文表紙をすばやく作れるようにしています。
現在、飛捷のオンライン注文の割合は20%まで上がり、今も伸び続けています。
TimTechの企業間電子商取引は、仕様による価格計算、見積依頼、注文の流れに合わせて設計したソリューションです。
ECサイトのデザインでSEOと表示速度を両立するには？
ECサイトはページ数が多く、商品も頻繁に更新されるため、SEOと表示速度はデザインの段階からあわせて計画するのが理想です。
| 項目 | デザイン時に注意すること |
|---|---|
| 商品説明 | 商品ごとに独自の説明文を用意し、メーカーの文章をそのまま使わない |
| 絞り込みのURL | 条件の組み合わせで大量のURLが生まれるため、検索エンジンに登録させるものを先に決める |
| 商品の構造化データ | 検索結果に価格、在庫、評価が表示される可能性がある |
| 画像とレイアウト | 商品画像は圧縮し、サイズを固定して、読み込み中にレイアウトがずれないようにする |
絞り込みのURLを検索結果に出す必要がない場合、Googleはクロールをブロックして、サイトのリソースを節約することを推奨しています。
商品の構造化データの形式と項目は、Googleの商品の構造化データの説明を参考にしてください。
表示速度については、GoogleはCore Web Vitalsでユーザー体験を評価しています。
メインのコンテンツは2.5秒以内に表示し、操作への応答は200ミリ秒以内、レイアウトのずれのスコアは0.1未満に保つことが推奨されています。
テンプレート、プラットフォームのテーマ、オーダーメイドのどれを選ぶ？
ECサイト制作でよく使われるデザインの方法は3つあり、向いている企業が異なります。
| 方法 | 向いている企業 | 制約 |
|---|---|---|
| ECプラットフォームのテーマ（SHOPLINE、Shopifyなど） | 一般的な小売、早く公開したい | レイアウトと購入の流れがプラットフォームに制限される |
| ECサイトのテンプレート（WordPressなど） | サイトを管理できる人がいる | プラグインが多いと、更新や互換性を自分で管理する必要がある |
| オーダーメイドのデザイン | 仕様による価格計算、見積依頼、多言語、分配など特殊な流れ | 費用と期間がかかり、しっかりした計画が必要 |
お客様の購入の流れが一般的な小売と同じなら、プラットフォームのテーマで十分なことがほとんどです。デザインの予算は、商品写真と文章に優先して使いましょう。
購入の流れが特殊な場合に、オーダーメイドのデザインが必要になります。
たとえばNAPAピックルボールは、国内と海外の両方の市場で販売しており、サイトは繁体字中国語、簡体字中国語、英語に対応しています。
NAPAはKOLやコーチを通じた販促も行っており、サイトにはクーポンと分配の追跡機能があります。推奨者ごとの販売実績は管理画面で自動計算されます。
現在NAPAは多くのKOLと提携していますが、提携先が増えても、推奨者ごとの実績は引き続き管理画面で自動計算されています。
それぞれの方法の費用は、ECプラットフォームの費用比較とオンラインストアの費用を参考にしてください。外部に依頼すると決めたら、制作会社の選び方もあわせてご覧ください。
ECサイトのデザインに関するよくある質問
ECサイトのデザインの費用はいくら？テンプレートとオーダーメイドではどれくらい違う？▼
費用は主に、構築の方法、商品と仕様の数、機能と流れ、決済・物流やほかのシステムとの連携が必要かどうかで決まります。
プラットフォームのテーマを使う場合のデザイン費用は最も低くなりますが、プラットフォームの年額料金と取引関連の手数料が別にかかります。オーダーメイドのデザインは費用が高めで、流れが特殊な企業に向いています。
費用の詳細は、オンラインストアの費用はいくら？企業ECのコストを分ける6つの要因を参考にしてください。
SHOPLINEなどのプラットフォームをすでに使っています。別にデザインを依頼する必要はありますか？▼
必ずしも必要ではありません。プラットフォームのテーマには、トップページ、カテゴリ、商品ページ、決済などの基本的なページがすでに含まれており、一般的な小売なら十分なことがほとんどです。
ブランドのイメージを強めたい場合は、デザイナーにバナー、配色、トップページのレイアウトを調整してもらえます。ただし、プラットフォーム自体の購入の流れの制約は、デザインでは変えられないことがほとんどです。
よいECサイトのデザインとは、お客様が迷わず注文を終えられること
ECサイトのデザインの成果は、最終的に、お客様が商品を見つけ、価格を理解し、注文や見積依頼を終えられたかどうかに表れます。
まず商品の売り方を決め、お客様の購入までの流れに沿って、トップページから商品ページ、決済までを一つずつ確認しましょう。見た目の効果だけを追うより、ずっと成果につながります。
商品の仕様が複雑な場合、見積が必要な場合、または今のプラットフォームの流れが実際の受注方法に合わない場合は、無料相談をご利用ください。サイトの計画について、一緒に考えます。
