売上が上がるECサイトのデザインとは？トレンドや参考事例も！
本記事を閲覧頂きありがとうございます。 我々はECにおける総合的な売上向上サービスを展開しています。 楽天、Amazon、Yahoo!ショッピングの大手ECモールや自社サイトのご支援実績のもと、EC売上向上のノウハウをお届けします。
Contents
売上が上がるECサイトのデザインとは
ECサイトの売上を上げるには、見た目だけでなく売れるデザインを考えることが重要です。
ユーザー側の目線になり、使いやすく、欲しい商品がすぐ見つかるデザインを心掛けましょう。
全体的に情報が整理された、わかりやすいデザイン
ECサイトのデザインは、無駄な情報を省き、わかりやすくシンプルなデザインにしましょう。
例えばですが商品のカテゴリーを整理する等で、関連する項目をまとめると、ユーザーは商品を探しやすくなります。
例：大カテゴリー(Aブランド/Bブランド)→中カテゴリー(アウター/トップス/パンツ)→小カテゴリー(カットソー/パーカー)
また、情報の掲載方法にも気をつけましょう。
ページを移動するたびに情報の場所が変わると、ユーザーは困惑してしまいます。
なるべく規則的に配置することで、わかりやすくサイト内で回遊する時間が増加するのではないでしょうか。
PC、スマートフォンの両方で最適化されたデザイン
現在は、スマートフォンのユーザーが多く、総務省の情報通信白書(令和3年版)によると、下記のような利用率になっています。
パソコンよりスマートフォンでのインターネット利用率が多く、どちらでも見やすいレスポンシブデザインで作成することが必須となります。(レスポンシブデザイン=デバイスのウィンドウ幅に合わせて自動で切り替わるデザイン)
デザインは、スマートフォンを中心に
前述の通り、現在はスマートフォンの利用率がパソコンに比べて高い状況です。
そのため、以前はパソコンのデザインを考えてからスマートフォンを調整していく方法が主流でしたが、現在はスマートフォンのデザインを軸に検討し、パソコンを調整していく方法が主流になっています。
購入までの動線設計を重要視したデザイン
ECサイトの売上(購入率)を上げるには、購入までの動線設計が重要になります。
通常は、下記のような流れで購入まで至ります。
購入完了に至るまでのページ遷移で「ページの表示が遅い」「見たい情報ではないページが表示される」などの理由により、離脱しないよう対策することが重要になります。
ユーザーにできるだけ少ないページ数で購入まで誘導することが大事になります。
ファーストビューで興味を引く
ユーザーがサイトに訪れた際に、スクロールせずに最初に目に入る箇所をファーストビューと言います。
サイトアクセス時に3秒で離脱可否を決めていると言われているため、伝えたい情報やユーザーの目を引く情報を配置し、滞在率や回遊率の増加を目指しましょう。
直感的に操作ができる
商品ページから決済画面まで誘導するには、操作性がとても重要になります。
購入率が増加しなければ売上は増加しないため、直感的に購入まで辿り着けるような操作性を意識しましょう。
商品画像は、利用時をイメージ
商品画像は実際に使用した時を想像しやすい写真にすると、購入率増加につながります。
例えば、ファッションのECの場合は実際に着用した画像、家具や家電などは実際の利用シーンなどがおすすめです。
購入ボタンをクリックしやすく
購入ボタンを押しやすくすることも、操作性向上になります。
ボタン自体は大きく立体的にすることや、目立つカラーにするとクリックしやすくなります。
また、スマートフォンは画面が小さくなるため、横幅はなるべく大きく表示させたほうが効果的です。
ECサイトのUI/UXデザインについて
ECの売上を増加させるためには、優れた「UI」と「UX」が不可欠です。
そもそもUI/UXの意味や違いとは何か、解説いたします。
UI/UXとは？
UI(ユーザーインターフェイス)
ユーザーやサービス、商品との接点(視覚に入る全情報)のことです。
ECサイトでは、バナーやテキスト、レイアウト等のサイトを構成する要素のことになります。
UX(ユーザーエクスペリエンス)
ユーザーがサービス、商品を通して得ることができる体験のことです。
ECサイトでは、操作方法がすぐわかる、カスタマーサービスの対応が良い、ということまで感じる体験は全てUXになります。
UI/UXの違いについて
まとめて話されることが多いですが、前述の通り意味は異なります。
また、「優れたUI」と「優れたUX」は必ずしも同一ではありません。
操作性が良くても、コンテンツの質が悪いとユーザー体験はあまり良く無いです。
ユーザー目線に立ち、ストレスを感じさせないECサイトを目指しましょう。
ECサイトの売上を上げるUI/UXデザイン確認ポイント
前述したUI/UXの改善に向けて、確認ポイントを解説していきます。
商品画像の充実度
ECサイトでは、購入前に実際の商品を見ることができないため、商品画像を豊富に使用することが重要です。
実際に使用したシーンをイメージできる画像があると、購入する際の一押しになるのでは無いでしょうか。
情報の配置や整理
ユーザーがサイトを見る際に情報がきちんと整理されていると、とても見やすくなります。
似ている情報や関連している情報は、なるべくひとまとめにしましょう。
カテゴリー分けする際、トップス、パンツのように、同じジャンルの商品どうしをグループにすると商品を探しやすいのではないでしょうか。
ユーザーの操作性やECサイトの信頼性
ユーザーは購入に踏み切るまで、数々の不安や心配を感じます。
ECサイトでは信頼性がないと安心して購入できないため、価格や配送料の提示、返品や交換の記載など透明性を重視しましょう。
ECサイトの最新デザイントレンドとは？
ECサイトのデザインは技術の進歩に伴い、日々変化していくため移り変わりが早いです。
最新のトレンドでは、アクセスしてきたユーザーの興味を引くために動きの多いデザインがよく使われます。
しかし、必ずユーザー体験をよくするというわけではないので注意が必要です。
3Dで表現されたデザイン
近年、3Dアニメーションやグラフィックが注目されています。
ECサイトでも、WebGLが登場したことによりプラグインなどを使用せずに表示が可能になりました。
表現の幅を大きく広げることが可能なため、3Dを使用するサイトが増加しています。
パララックス・アニメーションを使用したデザイン
パララックス・アニメーションとは、スクロールと連動したアニメーションのことです。
遠くのものより近くのものがより速く動いて見える効果をパララックスといい、この効果を使ったアニメーションです。
主に下記3パターンがあります。
・スクロールに応じて要素が動くアニメーション
・セクションが重なるスクロールアニメーション
・スクロールとずれて要素がスクロールされるアニメーション
おしゃれなECサイトの業界別参考サイト
おしゃれなECサイトを業界別に集めました。
デザインは大事な要素になるため、ぜひ参考にしてください。
アパレル・ファッション市場
アパレルとファッションのECでは、実店舗で販売されてきた分がECで販売される動きになっています。
オムニチャネル化などによる実店舗との結合、商品やサイズをEC上でも伝わるような技術の向上、などで売上を拡大させています。
ユニクロ
幅広い客層や知名度を持つユニクロ。
サイズ感をわかりやすくするツールの導入や、実店舗とECの結合をうまく行い、ユーザーの不便な点を解消しているECサイトです。
アイテム数が多いですが、わかりやすく見せるところにも長けています。
美容・コスメ市場
アクセスの良い実店舗が多く、実際に試すことができる美容・コスメは、EC化に苦労した業界です。
その中でもECの売上を伸ばしている企業をご紹介します。
LUSH
カラフルな実店舗で楽しい雰囲気のあるLUSH。
ECサイトでもたくさんの写真や動画を使用して、実店舗の雰囲気を作り出し再現しています。
また、商品ごとにレビューが見れるため実際の声を見て使用時のイメージを考えることが可能なため、安心して購入ができるのではないでしょうか。
食品業界
流通や鮮度、利益率の低い点などから、ECには向かないのではないかと言われてきました。
実際に商品を見て選ぶことができない点や、鮮度をそのままに配達するコスト等々問題はありましたが、コロナウィルス感染症の流行以降、徐々に消費者に浸透していきECを利用するようになりました。
オイシックス・ラ・大地
定期販売や食材のセット販売が特徴で、安定した売上を得ています。
定期販売は、スケジュールを管理できるため、鮮度や流通をコントロールできます。
また、高価な有機野菜などを取り扱っているため、利益率も向上しています。
その他
ニトリ
消費者行動のショールーミングを活用し、ECサイトの売上を増加させたニトリ。
ショールーミングとは、店舗で商品を見てECサイトで商品を探して買う行動のことです。
防止する方法を考える企業が多い中、ニトリは実店舗とECを繋ぐことで売上を増加しました。
ビックカメラ
ECサイトの使いやすさや、商品の探しやすさにより、新規顧客が増加したビックカメラ。
カテゴリーの一覧などが大きく表示され、商品名を覚えていなくても商品ページまで辿り着ける点などもわかりやすく作られており、ECサイトの初心者でも利用しやすくなっています。
おすすめのECサイトデザインギャラリーサイト
たくさんのECサイトを見て参考にしたい場合は、ギャラリーサイトを見るのがおすすめです。
デザインの参考になる、おすすめのギャラリーサイトをご紹介します。
EC LIBRARY
「良質で参考になるECサイトを集めたギャラリーサイト」を紹介しています。
カテゴリーやテイスト、カラーで絞り込むことができます。
Choicely
「マーケターのためのマーケティング情報データベース」をキャッチコピーにしているChoicely。
綺麗なコンテンツやレイアウト、コミニケーション設計に優れたECサイトをまとめています。
BRIK GALLERY
国内最大規模のWebサイトリンク集、デザインギャラリーサイトを謳う、BRIK GALLERY。
サイトのタイプやジャンルなどを細かく絞り込めるため、作成予定のサイトにより近いものが見つかるのではないでしょうか。
まとめ
いかがでしたでしょうか。
ECサイトのデザインは、見た目だけでなくユーザーの利便性がとても大事になります。
さまざまなECサイトを参考にし、ユーザーの立場に立ってデザインや機能を導入していくことで、より良いECサイトを作成しましょう。
また、ECサイトのデザインについては下記記事でも説明しているので、参考にしてください。
株式会社Proteinum 代表取締役
一覧に戻る
