売上に関わるデザイン。売れるECサイトの特徴とは?

by GO RIDE

商品の売上に、大きく関わってくるデザイン。一体売れるECサイトとはどのようなことを考えてデザインに落とし込んでいるのでしょうか?


「オシャレなサイト=売れる」と思われる方も、もしかしたら多いのかもしれませんね。

実際はそうではありません。ビジュアルがおしゃれできれいだからといって、売れるとは限らないのです。


ECサイトの場合、サイトを制作する目的は、商品の「購入」です。そのゴールに向かって、膨大な情報をうまく整理しながら形にしていきます。


ユーザーの心理や行動などを考えて、ゴール(購入)まで誘導することができ、常にユーザー目線でデザインを検討する必要があります。


今回は、売れるECサイトの特徴について、デザイナー視点でご紹介します。

1.情報が整理されているサイトになっているか?


ECサイト及びWEBサイト上では、膨大な情報を得ることができます。

そのため、情報の配置はなるべくシンプルに。グループ化などをしてうまく整理し、ユーザーにわかりやすく伝えることが重要になっていきます。


情報の配置を見やすく、規則性を持たせる方法として、「デザインの4原則」を使用することがあります。

ec-design1

(1) 近接:同様の情報をグループ化し近づけまとめる
(2) 整列:要素の配置をそろえることによって統一
(3) 反復:同じ要素を繰り返すことで視認性や可読性もアップ
(4) 対比:コントラストによりはっきりとした違いを出すことで強調

もしかしたら、ECサイトだけではなく、WEBサイトのデザイン全体にも関わることかもしれませんが、デザインにはいくつか決まり事があり、そういった法則などを意識して制作することによって、まとまりが出てきたり、根拠にも繋がり、制作したデザインに説得力を持たせることができます。

 

さらに、たくさんの情報の中から、伝えたい順に、優先順位を決めることも重要です。優先順位によっては、強弱や配置などを意識して違いを明確化できると、情報が整理されて全体的に見やすいサイトになります。

 

うまく整理し、シンプルに情報をまとめることができると、ユーザーも迷いなく、商品を購入することができるデザインになります。

2.届けたいターゲットに購入したいと思えるサイトになっているか?


ECサイト内で、ユーザーは実際の商品を見ないで、購入することもあります。そのため、商品イメージをどう膨らませて、購入に繋げることができるかも重要です。


商品イメージを膨らませるといった点では、そのブランドの配色であったり、商品をイメージできる画像があるとより効果的です。


例えば、「高級感」といえば、どんな色が思い浮かびますか?

黒やゴールドなど、少し落ち着いた印象を与える色が、頭に浮かびますよね。


サイト内で伝えたい印象やキーワードは、ブランドイメージにも直結するので、デザインを考える前に、まずターゲットを明確化することによって、ミスマッチが起こりにくくなり、届けたい相手にしっかり商品の良さを伝えることができるため、年齢や性別などのペルソナは最初に考えておきたいポイントです。


売上を大きく左右するといっても過言ではないほど、配色の効果は絶大です。色については、こちらの記事でも紹介しているので、是非読んでみてください。


▼ECサイト内でクリックされやすいデザインとは?

https://goriderep.com/blogs/news/ec-creative


また、商品をイメージできる画像に関しては、世界観などを伝えるためにも、TOPページのメインビジュアル(メイン画像)は、スライドショーのセクションを用いることが多いです。


実際の商品を見ないで購入することもあるからこそ、商品の良さやブランドイメージ。また、コンセプトなどを伝えたいといった面でも、TOPページ内で、一番最初に訪れるページだからこそ、視覚的に伝えることができると、どんな商品を販売しているサイトなのかが、わかりやすくなります。

3.迷わず使えるユーザーファーストなサイトになっているか?


近年、ECサイト及びWEBサイトは、スマートフォンの普及により、パソコンからのアクセスに加えて、スマホからのアクセスも増加しています。


そのため、より購入までの動線をわかりやすくするための、工夫が必要です。

ec-design2

例えば、画面の一番上に、パンくずリストを設定し、サイトに訪れたユーザーが、今どこのページにいるかを視覚的にわかりやすくする機能があります。さらにパンくずリストのテキストに、該当ページをリンク設定して、クリックしたら、そのページに戻ることもできます。


また、リンク設定をしているテキストに下線があると、視覚的にリンクということがわかりやすくなるので、ユーザーにとっても迷わず、サイト内を回遊できるという点でも、効果的です。


別の例では、サイト内で良く見かける、「ハンバーガーメニュー」と呼ばれる機能があります。三本線のナビゲーションメニューで、クリックするとサイト内のメニューや情報が表示される仕組みです。なじみがない方からすると、このアイコンがリンクになっていることが、もしかしたらわからないユーザーもいるかもしれません。


例えば隠している情報が、サイト内のメニューの場合は、ハンバーガーメニューの下に、「menu」といった表記が書いてあった方が、視覚的にもこのアイコンはmenuのリンクであるということがわかります。


このmenuという表記を入れる入れないの基準としては、先ほど少し触れた届けたいターゲット層にもよります。


商品の内容を理解した上で購入できるサイトの構造になっているのかはもちろん、ユーザーが迷わず使える細かい配慮も、売上につながるサイトの特徴になります。

4.ECサイトのデザインは評価がつけやすい


一般的なWebサイトと比較すると、ECサイトのデザインは比較的評価がつけやすいデザインになります。


以下のような定量データを元に、デザインをアップデートしていくことが可能です。


  • クリック率/CTR(表示された回数のうち、ユーザーが「クリックした回数」の割合)
  • 転換率(アクセスユーザー数に対して、ご注文に至った「注文件数」の割合)

データを元に適切なデザイン改修を行い、回遊性やCVの向上に日々努めることも重要となります。

5.デザインの自由度を決定する重要なプラットフォーム選び


ECサイトを構築する場合、ASP、オープンソース、パッケージなど複数の選択肢があります。


多くの事業者様がプラットフォームには可能な限り自由度の高いデザイン、洗練されたデザインを求めるかと思います。


フルスクラッチでない場合はそれぞれのプラットフォームに特徴やメリットデメリットがあることを踏まえ、再現したいデザインの実現可能性を探る必要があります。


選定ステップがプラットフォームファーストの場合、選定したプラットフォームでのデザインの自由度は細かくチェックしましょう。


また、日々の更新や改修業務に社内のリソースを使うのか、インハウスデザイナーがいるのか、外部に委託するのかは事業者様によって異なります。


立ち上げすぐはトンマナの合った洗練されたデザインであったとしても、頻繁に改修を加えていくECの場合、更新を加えた場合にクオリティの差が出ないことも重要となります。


表層的なデザインのみならず、更新性の柔軟さも重視する必要があると言えるでしょう。

まとめ


いかがでしたでしょうか。


今回ご紹介した内容は一部ですが、GO RIDEでは上記の内容などを踏まえて、クリエイティブをご提案をしています。


さらに、当社の強みとして、Shopify公認。Shopify Plus Partnerに認定されています。

ECサイト(Shopify)に関するお悩みをワンストップで支援します。


具体的には、EC構築・運用保守(Sopify)、集客支援・広告運用(デジタルマーケティング)、・アプリ開発・システム連携、クリエイティブ制作等。

ECサイトの集客に課題がある、リニューアルを検討している、越境ECを検討しているなどの、事業者様におすすめです。


下記、GO RIDE お問い合わせページより、お気軽にご相談ください。

Rina

Rina

GO RIDE WEB Designer

GO RIDEのWEBデザイナー。前職では住宅業界にいたことから、インテリアやリノベーションされた住まいを雑誌やSNSで見ることが好きです。

この著者の記事一覧

EC構築から広告運用までワンストップで提供。

資料請求 お問い合わせ