ECサイトのWEBデザインまとめ。売れるショップの特徴やレイアウトのコツとは
ECサイトのデザイン担当者であれば、誰しもが「売れるデザインにしたい」「おしゃれでトレンド感のあるデザインにしてユーザーの目を引きたい」と考えることでしょう。
しかし、具体的にWEBデザインをはじめてみると、情報の配置やデザインのポイントがわからず、苦戦している方も多いのではないでしょうか。
本記事では、そんな方に向けて、売れるECサイトの設計のコツや、具体的な設計のポイント、参考事例を紹介します。
「売れるECサイト」のデザインの考え方
売れるデザインを目指すのであれば、ユーザーにとって使いやすく、親和性が高いデザインでなければなりません。では、具体的にどのようなポイントに気をつければよいのかを解説します。
UI / UX（見やすいこと / 使いやすいこと）を考慮する
UIとは、「User Interface（ユーザーインターフェイス）」の略で、ユーザーとの接点を指す言葉です。具体的には、ECサイトに含まれる画像や動画、バナーやテキスト、全体のレイアウトなどを指します。
UXとは、「User Experience（ユーザーエクスペリエンス）」の略で、ユーザーがECサイトを閲覧したり、ECサイトを通じて商品を購入したりした結果、得られる体験を指します。たとえば、ECサイトのデザインがおしゃれで美しいと感じた、商品がすぐに届き便利だったなどの体験がUXにあたります。
UIやUXが不十分なサイトでは、以下のような問題が生じます。
- ユーザーがECサイトに訪れてもすぐに離脱されてしまう
- 回遊率や滞在時間が伸びない
- 商品の購入につながらない
- 購入後の顧客満足度が低くリピートにつながらない
売れるECサイトをデザインする際、UIとUXは無視できない重要なポイントです。課題の解決方法は後述していますので、ぜひ最後までご覧くださいね。
ターゲットに合わせる
WEBデザインを設計する際、すべての出発点はターゲットとなるユーザーにあります。ユーザーを無視してどんなにおしゃれなサイトを制作しても、商品が売れることはないでしょう。
ターゲットを考える際、年齢や性別、職業、家族構成などを考えることは非常に大切ですが、それだけでは不十分です。大切なのは「ユーザーのお困りごとはなにか」「ユーザーはどんな体験を求めて自社の商品を購入するのか」といった視点です。
たとえば、グルテンフリーのお菓子を販売する場合、「アレルギーのある子どもにも安心して食べされられるおやつを求めている子育て中のママ」と、「ダイエットと美容に気を遣っている20～30代の独身女性」とでは、ECサイトのデザインは異なるものになるはずです。
誰に、どんな目的で商品を買ってもらいたいのかをよく考えた上で、WEBデザインを設計するとよいでしょう。
トレンドを押さえる
ECサイトのWEBデザインにはトレンドがあり、これを押さえることも大切です。
WEBデザインに関わる技術は日々進化しており、それがトレンドに反映されることも少なくありません。「数年前のデザインを真似したら、古いと言われた」なんてこともあるので、積極的な情報のキャッチアップをしましょう。
ただし、必ずしも最新のWEBデザインが売れるデザインとは限らないので、その点には注意が必要です。
WEBデザインは外部委託するのもアリ◎
ここまで解説したとおり、売れるECサイトのデザインには、ターゲットに刺さる設計や最新技術の獲得など、幅広い知見やスキルが必要になります。もし社内リソースだけで売れるECサイトのデザインが難しいならば、外部委託するのも賢い選択です。
その際に大切なのは、自社にとって適切な委託先を見つけられるかどうかです。WEB制作会社は二人三脚でビジネスを推し進めるパートナーですが、信頼できる制作会社を見つけることは簡単ではありません。
ECのミカタでは、優良なWEB制作会社を複数社選定し、最終的なマッチングに至るまでプロのコンシェルジュが無料サポートするサービスをご提供しています。
もし信頼できるWEB制作会社がいない方は、ぜひマッチングサービスをご利用くださいね。
売れるFV（ファーストビュー）デザインのポイント
ユーザーをECサイトに滞在させるために非常に重要な、FV（ファーストビュー）について解説します。FVとは、PCやスマホでECサイトにアクセスした際に、スクロールなしで最初に閲覧できる範囲のことを指します。
ECサイトに訪問したユーザーは、アクセスしてからわずか3秒でそのサイトに滞在するか否かを判断するといわれています。もし、自社のECサイトの直帰率が高いのであれば、FVに課題があるかもしれません。
FVをデザインする際のポイントを以下に紹介しますので、ぜひ参考にしてください。
1）サイズを考慮する
まずはFVを表示できる適切なサイズを把握しましょう。いくらページを作り込んでも、適正サイズから逸脱してしまっていては、FVとして表示することができません。
デバイスによってサイズが異なる点も注意すべきポイントです。
＜パソコンの場合＞
幅1,000px～1,200px、高さ550px～650px
＜スマホの場合＞
幅350px～365px、高さ600px～650px
パソコンとスマホのどちらを優先するかは商材やターゲットユーザーによって異なりますが、現在は、スマホユーザー比率の多いECサイトが多いのではないでしょうか。
パソコンとスマホを別立てでECサイトを構築する手法もありますが、運用面を考慮するとレスポンシブデザインを採用するのがおすすめです。レスポンシブデザインについては、次章で解説します。
2）必要な情報を厳選する
FVを設計する際には、情報を厳選する必要があります。つい、より多くの情報を載せたくなってしまうものですが、FVの情報量が多いとユーザーはすぐに離脱してしまいます。
そのため、FVに掲載する情報は最も大切な情報のみに厳選しましょう。サービス内容が直感的に理解できる画像・動画やキャッチコピーを掲載し、ユーザーに「このECサイトは私のためのECサイトだ」と思わせることが大切です。
FVに含まれないけれど大切な情報に関しては、適切にリンクを貼りましょう。その際は、ボタンやバナーをわかりやすく設置し、ユーザーを迷わせない工夫をする必要があります。
また、広告を掲載する際はメイン広告のみとし、それ以外はページ下部に設置したりすぐ消せる仕様にすると無駄がありません。ユーザーにサイト閲覧の邪魔になると感じさせてしまうと、その時点で離脱されてしまうので注意しましょう。
3）常に変化させる
FVは常に変化させ、ユーザーを飽きさせないことが大切です。セールなどのキャンペーン情報や新商品情報、季節商品情報など、適宜情報を入れ替えましょう。
ページそのものを変更するのが大変な場合は、バナーを変更するだけでも有効です。常に新しい情報が得られることによって、ユーザーは「このサイトには定期的に訪問したい」と考えるようになります。
参考：訴求力の高いファーストビューのデザイン例
FV設計の参考に、世界最大規模のECサイトである「アマゾン」のECサイトを紹介します。
まず最上部には検索窓がわかりやすく設置されています。購入目的がはっきりしており、今すぐ欲しい商品情報を検索したいユーザーを逃さないつくりになっています。
その下にはスライダーバナーでセール情報やおすすめ情報が次々に表示され、ユーザーの滞在時間を延ばす工夫がされています。
さらに、スライダーバナーの下にはタイムセールや特集情報へのリンクがわかりやすく設置されています。明確な購買目的がないユーザーであっても購入意欲を刺激されることでしょう。
どんなデバイスであっても効率よくFV情報が提示される「アマゾン」の仕様は、非常に訴求力が高いものになっています。ぜひ自社のFV設計の参考にしてくださいね。
売れる商品ページデザインのポイント
商品ページ（商品紹介ページ）をデザインする際に大切なことについて解説します。
1）直感的に操作できる設計にする
ECサイトのWEBデザインにおいて、購入導線がわかりやすいことは重視すべきポイントです。
一般的にユーザーはトップページにアクセスしたあと、商品ページ、カート、決済画面の順に商品購入を進めます。この導線が分かりにくかったり、ページが重く遷移に時間がかかったりすると、ユーザーの離脱につながります。
購入ボタンのデザインも大切です。目立つ大きさにする、立体的にする、影をつけるなど、ユーザーが購入ボタンを見失うことがないように工夫しましょう。
なお、複数の研究や実験で青色や緑色の購入ボタンがコンバージョン率を高めるとの結果が出ていますので、購入ボタンの色に迷った際は青色や緑色をおすすめします。
2）商品の使用シーンをイメージできる商品画像にする
商品画像は使用シーンをイメージしやすいものにしましょう。
アパレルであれば、ほかの商品とコーディネートした着用画像を掲載することで、どんなコーディネートが楽しめるのかがイメージしやすくなります。また、キッチン用品などの生活雑貨であれば、実際に料理をしているシーンを掲載するとよいでしょう。
商品単体の画像は、使用シーンのイメージがわきづらく、商品のサイズ感や質感も伝わりにくくなってしまいます。使用シーンをリアルに訴求できる画像を掲載することによって、実物を手に取れないというECサイトの弱点を補うことが可能です。
使用シーンがわかる画像を使うデメリットとしては、1つの画像のなかに複数個の商品が含まれる場合、どの商品が販売対象商品なのかがわかりづらくなってしまう点です。
販売対象商品を中央に配置する、商品名を画像内に記載する、画像をスワイプすれば次の画像で販売対象商品単体を閲覧できるようにするなど、この点においても直感的にユーザーが販売対象商品を識別できるような工夫が必要です。
3）動画の掲載も有効
ECサイト内に動画が掲載できるのであれば、積極的に活用しましょう。前述のアパレル商品であれば、実際にスタッフが着用している様子を動画でみせることで、より着用感をイメージしやすくなります。
すべての商品で動画を掲載するのが大変であれば、売れ筋商品や売り出したい商品に限って掲載してもよいでしょう。画像でも動画でも、いかに具体的に使用シーンをイメージさせるかが購入率に大きく影響することを覚えておきましょう。
4）どんなデバイスでもわかりやすいデザインにする
特段の理由がなければ、ECサイト構築にはレスポンシブデザインを採用するとメリットが大きいです。
レスポンシブデザインとは、どんなデバイス（スマホ、パソコン、タブレットなど）であっても、ユーザーが使用するデバイスのサイズに合わせてWEBサイトのレイアウトを自動で最適化するデザインの仕様を指します。
取り扱い商品やターゲットにもよりますが、ほとんどのECサイトではスマホユーザーの比率のほうが高まっています。したがって、PCサイトをどんなに美しく作り込んでも、スマホの画面でうまく表示できなければ売上にはつながりません。
レスポンシブデザインを採用すれば、どんな端末でも同一の内容で表現が可能になります。また、作業工数も別立てでサイトを作るより減らすことができます。
実際にレスポンシブデザインでECサイトを構築する際には、利用者の多いスマホのデザインを起点にしつつ、複数のデバイスで見栄えを確認する作業を怠らないようにしましょう。
参考：売れる商品ページのデザイン例
商品ページのデザインの参考に、北欧関連雑貨の販売で有名な「北欧、暮らしの道具店」のECサイトを紹介します。
食器の商品ページでは、かならずテーブルコーディネートされて実際に料理が盛り付けられた画像が使われています。また、テキストは単なる商品説明にとどまらず、読みものとして使用シーンをイメージさせる工夫がされています。
購入ボタンの色はオレンジ色が採用されており、前述したセオリーとは異なりますが、白と明るいグレーを基調としたECサイトの雰囲気を損なわないデザインとなっています。
テンプレートを使っても売れるデザインは作れる？
あらかじめデザインや機能が用意されている、ECサイト向けのテンプレートを使ってECサイトを構築する方法もあります。
テンプレートを使うメリットは以下のとおりです。
- 初心者でもデザイン性の高いECサイトが構築できる
- 制作に時間がかからない
- 機能やデザインにこだわらなければコストが抑えられる
また、デメリットは以下のとおりです。
- デザイン面でほかのECサイトとの差別化が難しい
- 機能面での自由度が低い
とくにスキルや知識が不足している段階でECサイトを立ち上げるならば、テンプレートは有力な選択肢の1つとなります。
しかし、すべての条件を満たすテンプレートに出会うのは至難の業です。可能であれば、ECサイトの制作目的に合ったWEBデザインを設計したほうが、長い目で見たときに売上への貢献度は大きくなるでしょう。
【一覧】ECサイトの売れるデザインの参考サイト
ここまで解説した内容をふまえて、優れたECサイトを3つ紹介します。
1）トレンドのミニマムデザインでシンプルを追求
「Apple」のECサイトは必要最低限の情報のみを効率よく載せた、シンプルなデザインが魅力です。ミニマムデザインはここ数年のトレンドですが、情報に過不足がないよう綿密に設計する必要があり、意外と難易度が高いデザインです。
2）最新の3D技術で使用シーンを細部まで表現
北欧家具大手の「IKEA」のECサイトでは、最新の3D技術を導入しています。ECサイト上で自室を再現し、購入予定の家具を置くことで、実際に購入した際のイメージを細部までイメージすることが可能です。
3）こだわりの商品ページでユーザーを魅了
「GUCCI」のECサイトは商品ページのクオリティの高さが特徴です。商品をあらゆる角度から、動画と画像を織り交ぜて確認することができ、まるで手に取って商品を吟味しているかのような臨場感を味わうことができます。
売れるECサイトのデザインは専門の事業者に作ってもらおう
以上、売れるECサイトのWEBデザインのポイントを解説しました。
ECサイトのWEBデザインはブランディングやマーケティングにも大きく影響し、ECサイトの売上全体を左右する重要な役割を担います。テンプレートなどで簡単に作ることも可能ですが、より強力にユーザーの囲い込みを狙うのならば、独自性の高いWEBサイトを作れるに越したことはありません。
社内リソースが不十分な場合は、ECサイト専門のWEB制作会社に委託するのが賢い選択です。ただし、WEB制作会社はその会社によって得手不得手がありますので、優良な会社を慎重に選ぶ必要があります。
委託先の選定に時間をかけすぎることなく、また失敗することのないように、ぜひECのミカタの無料マッチングサービスをご検討ください。優良な制作会社を複数社ご紹介し、マッチング成立までコンシェルジュによるサポートをご提供しています。
専門性が高い分野はプロに外注し、コスパよくECサイト運営を進めていきましょう。
記者プロフィール
ECのミカタ マーケティング部
ECのミカタマーケティング部です。日々、EC事業者様に役立つノウハウやサービスを模索
しております。こんな、いいサービスがあるよ！などの情報がありましたら
ぜひ、ご連絡下さい！
