新しくECサイトを立ち上げることになったものの「どのようなデザインで発注すればよいのか分からない」という人も多いのではないでしょうか。ECサイトのデザインは、売上にも影響するために、見た目の良さだけで決めるのではなく、ユーザーにとって分かりやすくて使いやすいデザインにする必要があります。
本記事では、ECサイトのデザインで迷っている人のために、ECサイトデザインの押さえておくべき3つのポイントを解説します。コンバージョンを高めるコツも紹介するので、ぜひご覧ください。
目次
ECサイトのデザインで押さえておくべき3つのポイント
ECサイトのデザインを決める際は見た目だけではなく、ユーザーの使い勝手も考慮しなければなりません。ECサイトのデザインを決める上で、押さえておきたい3つのポイントを解説します。
ポイント1. ユーザーの導線を考慮
ECサイトの最終的な目標は、ユーザーに商品を購入してもらうことです。そのためには、ユーザーがスムーズに商品を購入できるサイトを構築する必要があります。新規のユーザーが商品購入に至るまでの基本的な流れは以下の通りです。
- トップページもしくは商品ページにアクセス
- 商品をカートに追加
- 会員登録
- 決済方法の選択
- 注文を確定
商品購入までの操作が分かりにくいECサイトは、離脱率が高くなる傾向にあります。特に新規ユーザーの場合は、初回購入時には会員登録の手続きがあるので、登録手続きが煩雑だと購入に至らない可能性が少なくありません。ユーザーが戸惑ったり、ストレスを感じたりしない操作になるような導線を考慮してデザインを決定しましょう。
ポイント2. 回遊性を高める構造
ECサイトで効率的に商品を販売するには、ユーザーの離脱を抑えて、回遊性を高めることも重要です。ユーザーがECサイトへアクセスした際に表示される領域は、ファーストビューと呼ばれています。ユーザーはサイトにアクセスして数秒の間に、読む価値があるページかどうか判断するといわれています。ファーストビューでユーザーの関心を引けなければ、ページを読まずに離脱してしまうのです。
また、商品への関心が高いユーザーは、グレードの違う類似商品や関連商品など、ECサイト内のほかの商品もチェックしようとします。商品を探しにくいECサイトは、ユーザーが目的に商品にたどり着けずに、離脱してしまう恐れがあります。
商品をカテゴリーごとに分ける、レコメンドや表示中のページの階層を表示するパンくずリストを設置するなど、見たいページへ最小クリックで移動できるように、サイトの構造を整理しましょう。
ポイント3. コンバージョンにつながりやすいレイアウト
コンバージョンとは、ユーザーにサイト運営者が期待する行動を取ってもらうことです。ECサイトにおけるコンバージョンは、基本的には商品を購入してもらうことです。ユーザーの回遊率を高めても、商品を購入してもらえなければ、EC事業を軌道に乗せられません。
コンバージョン率（CVR）は、デザインに影響を受けやすい要素です。ユーザーが商品を気に入ったとしても、購入ボタンの場所が分かりにくければ、サイトから離脱されてしまう可能性があります。購入ボタンのレイアウトやデザインは、コンバージョン率を高める上で非常に重要です。
また、商品をカートに追加したものの、購入につながらないケースを「カゴ落ち」と呼びます。購入手続きの方法が分かりにくいとカゴ落ちが増加する原因になります。ユーザーの操作性を考慮して、決済ページのレイアウトを決めることも大切です。
ユーザーの使い勝手を高めるECサイトデザインの4つの条件
ECサイトのデザインは、ユーザー目線で決める必要があります。ユーザーの使い勝手を高めるデザインの条件を4つ紹介しましょう。
1. 商品がカテゴリーごとに整理されている
使い勝手の良いECサイトは、カテゴリーごとに商品が整理されています。商品をカテゴリーごとに整理しておけば、ユーザーは目的の商品ページへスムーズにたどり着けます。ECサイトにおけるカテゴリー分けの代表的なパターンを紹介しておきましょう。
| カテゴリー | カテゴリーの例 |
| 種類別 | ボトムス、ジャケット、インナーなど |
| 目的別 | キャンプ、バーベキュー、登山など |
| 価格帯別 | 5,000円～1万円、1万円台、2万円台、3万円以上など |
| 製造別 | メーカー名、ブランド名、産地など |
商品の種類が多い場合は、親カテゴリー、子カテゴリーといった具合に、カテゴリーを階層化すると良いでしょう。サイトによっては、商品別と目的別など、2種類のカテゴリー分けを同時に採用している場合もあります。
どのようなカテゴリーを設定するかは、ターゲットに合わせて決めなければなりません。Googleのキーワードプランナーなどのツールを利用して、どのようなキーワードでユーザーが商品を検索しているのか確認しましょう。
2. 行間や余白があると読みやすい
ページの読みやすさも重要です。画像や文章の間隔が近すぎると、読みづらいページになってしまいます。画像は適切に余白をとって、見やすく配置しましょう。また、画像自体のサイズも適切かどうか、PCとスマートフォンの両方でチェックしましょう。
文章も適切に行間をとって、文章の塊が大きくなり過ぎないよう注意する必要があります。文字数が多いなら、見出しを追加して段落を分けましょう。文字のサイズや太さ、フォントも読みにくくなっていないか確認することが大切です。
3. レスポンシブルデザインでスマートフォンに対応
スマートフォンの普及に伴って、スマートフォンからのアクセスが増加しています。そのため、2018年にGoogleはスマートフォンのサイトを基準にWebサイトを評価する方針を発表しています。
前述の方針は、モバイルファーストインデックスと呼ばれています。スマートフォンに最適化されたページの方が、検索結果の上位に表示されやすくなったのです。
以前はPC用のページとモバイル用のページを分けて、デバイスごとにページを用意する方法が一般的でした。近年では、画面サイズに応じてレイアウトが変化するレスポンシブデザインで、サイトを作成するケースが増えています。
PCとスマートフォンでページを分けてしまうと、検索エンジンからの評価も分散してしまいます。レスポンシブデザインであれば、1ページに評価を集められるために、SEOに有利にはたらくと考えられています。
4. 直感的に操作できるレイアウト
はじめてECサイトを訪れたユーザーでも、迷わず操作できるデザインを心がけることが重要です。ユーザーが直感的に操作できるように、ページ上のパーツを配置しましょう。例えば、購入ボタンはファーストビューの右に配置するなど、ユーザーの目につきやすい位置に配置しましょう。
ECサイトのレイアウトを決める際は、競合サイトを参考にすると良いでしょう。ECサイトは公開して完成というわけではありません。ユーザーの動向に合わせて、常に改善し続けてはじめて売れるECサイトへ成長します。競合サイトが採用しているレイアウトには、商品を効率的に売るためのヒントが詰まっているのです。
ECサイトのコンバージョンを高めるデザインの4つのコツ
どれほど多くのユーザーを集められたとしても、商品を購入してもらえなければ、広告費などの集客コストが無駄になってしまいます。ECサイトのコンバージョンを高めるデザインのコツを4つ紹介しましょう。
1. ユーザーの興味を引くキャッチコピーと画像
ファーストビュー次第で、ユーザーに商品ページを見てもらえるかどうかが決まります。ユーザーの興味を引けるキャッチコピーを考えましょう。キャッチコピーを決める際のポイントは以下の通りです。
- ターゲットを明確にする
- シンプルで覚えやすい
- 商品を購入するメリットが一目で分かる
キャッチコピーを決める前に、商品のターゲットを明確にしておきましょう。性別や年齢、課題など、ターゲットに合わせたキャッチコピーを考えることが重要です。ファーストビューに掲載する画像には、商品の使用場面や用途が伝わる画像を使用しましょう。
2. ユーザーが知りたい情報を記載する
商品ページには、ユーザーが商品を購入するか否かを判断するために必要な情報を記載しましょう。ファーストビューで商品に興味を持ってもらえたとしても、購入の判断に必要な情報が記載されていなければ、ユーザーは離脱してしまいます。商品ページに最低限記載しておきたい情報を紹介しておきましょう。
| 記載したい情報 | 具体例 |
| 商品の詳細 | 仕様、カラーバリエーション、メーカーなど |
| 価格 | 販売価格や送料など |
| 訴求ポイント | 手入れが簡単、耐久性が高いなど |
| 自社のECサイトで 購入するメリット | セール情報や割引情報など |
| 配送情報 | 商品到着までの期間、配送エリアなど |
上記の項目以外にも、ECサイトではレビューを掲載しているサイトも多いです。商品ページに記載する情報も、ターゲットに合わせて決めることが重要です。ターゲットが置かれている状況や課題をもとに、どのような情報を知りたがっているのかを推測しましょう。
特に新規ユーザーは、信頼できるECサイトかどうかを見極めようとするために、リピーターよりも購入のハードルは高い傾向にあります。情報をしっかり記載して、ユーザーの不安を取り除く必要があるのです。
3. クオリティの高い商品写真を使用
商品写真のクオリティも、ECサイトの売り上げに影響を与えます。クオリティの低い写真を使用してしまうと、商品を購入してもらえないだけではなく、ECサイト自体の評価を下げてしまう恐れもあります。商品写真は、イメージ写真とディティール写真の両方を用意しておきましょう。
- イメージ写真：商品を使用する場面を伝える写真
- ディティール写真：商品の品質を伝える写真
誰が、どこで、どのように使用するのかが伝わる商品写真を掲載しましょう。また、商品本来のイメージとはかけ離れてしまうほどの、過度な加工画像はクレームの原因になるので注意が必要です。
4. 購入ボタンを目立たせる
コンバージョンを高めるには、購入ボタンを目立たせる必要があります。購入ボタンを目立たせるためには、レイアウトはもちろん、ボタン自体の大きさや色も重要です。ECサイトの配色との兼ね合いにもよるため、一概にどの色が良いとは断言できません。しかし、ECサイトでは、赤やオレンジ、緑を使用するケースが多いようです。
配色以外にも、アニメーションで動きを付けて購入ボタンを目立たせることもできます。購入ボタンのデザインは、検証を繰り返しながら決める必要があります。もっともコンバージョンの高い色やレイアウトが見つかるまで、テストを継続しましょう。
ECサイト全体のデザインに統一感を持たせることも重要
ECサイト全体のデザインに、統一感を持たせましょう。商品ページごとに色合いやレイアウトが違っていると、ユーザーが違和感を抱いてしまいます。ページごとに操作方法が違えば、ユーザーを混乱させる原因になる恐れもあります。
また、デザインは、ブランディングの観点からも統一しておくのがおすすめです。ECサイトだけではなく、パッケージや梱包資材などのデザインも統一すれば、さらにブランディングを強化できます。ユーザーへ自社のイメージを適切に伝えるためにも、ECサイト全体のデザインを統一しましょう。
デザインの参考にしたいECサイト5選
ECサイトのデザインを決める前に、同業他社のサイトをチェックして大まかなイメージを決めておくと、デザイナーとの打ち合わせをスムーズに進められます。ランサーズに登録中のフリーランスが手掛けた事例の中から、デザインの参考になるECサイトを5つご紹介しましょう。
1. 蝶結び
蝶結びは、株式会社レトロスペクトが運営するフルーツギフト専門のECサイトです。「出産したママにフルーツギフトを」というコンセプトのもと、贈答用の高級フルーツを取り扱っています。
赤ちゃんや子どもの写真を使用するなど、サイトのコンセプトが伝わるデザインを採用しています。スマホ画面上でも、メニューやカートボタンを大きめに表示して、直感的に操作できるように配慮されています。
2. 梅園
梅園は昭和23年創業の和菓子の老舗、株式会社梅園菓子処が運営しているECサイトです。太宰府天満宮御用達の菓子店として知られています。
ユーザーのニーズを意識した構成になっており、法人顧客がスムーズに注文できるよう「法人様からのご注文について」というページも用意されています。老舗らしい和をイメージしたデザインを採用している点が特徴です。
3. kaguaroo
kaguarooは、福岡県で家具の小売店を経営する有限会社徳永家具が運営しているECサイトです。モール型のECサイトと差別化を図るために、商品写真を豊富に用意するなど、専門店としての商品の見せ方にこだわったおしゃれなデザインを採用しています。
4. ARIO.NYC
ARIO.NYCは、海外のおもしろい動画のライセンスをECサイト上で販売している会社です。ペットや子ども、ハプニングなど、視聴者の関心を集めやすいカテゴリーごとに動画を分類しています。動画そのものを掲載しているので、商品説明が少なくても商品の魅力をしっかり伝えられる構成になっています。
5. NABESTORE
NABESTOREは、鍋メーカーの関西軽金属工業株式会社が運営するECサイトです。共働きの女性をターゲットに、鍋やフライパン、キッチン用品などを販売しています。女性のデザイナーを起用して、女性目線での可愛らしさを意識したデザインでサイトを構築しています。
ターゲットに合わせたデザインでECサイトを構築しよう！
ECサイトのデザインは、売上を左右する重要な要素です。見た目の美しさももちろん大事ですが、もっとも重要な点はユーザーにとって使いやすいサイトであることです。
ECサイトのデザインは、ユーザー目線で決めなければなりません。しかし、ECサイト構築・運用の経験が少ない企業様にとっては、デザインを決める作業はハードルの高い業務でもあります。
ランサーズには、ECサイト構築の経験が豊富なフリーランスが多数登録しています。ECサイトのデザインをどのように決定すれば良いの分からない方は、お気軽にお問い合わせください。
