売れるECデザインとは？基本から参考にしたいお洒落なサイト10点徹底紹介！【図表付き】

ECサイトのデザインは売上に直結します。
検索エンジンなどでやってきたユーザはそこで目にしたトップ画面のデザインが自分の好みに合わないとすぐに離脱してしまうと言われています。ではどのようなECサイトのデザインにすれば「売れるECサイト」になるのでしょうか?
一つの解決策としては売れているECサイトを参考にすることです。
参考にすることで売上を上げるための色々な気づきがあると思います。

今回の記事では、自社のECサイトが「売れるECサイト」になるためのデザインについて解説しています。

「ECサイトの離脱率が高くて困っている」
「サイトの商品ページまで見てくれるのだけど購入まで進む率が低い」
「もっと売上を上げたいがどうすればいいのか?」

といった問題や課題を抱えているECサイト担当者の方は必見の記事です！

増大のための施策のうちデザインに関わる部分について説明します。

　　・ターゲットユーザに合わせたデザイン

　　・ユーザの興味を引くファーストビュー

　　・理解しやすい操作性

　　・イメージしやすい商品画像

　　・スマホファースト

　　・回遊率が上がるデザイン

　　・高速な表示

　　・クロスセルの機能

　　・アップセルの機能

ターゲットユーザに合わせたデザイン

ターゲットとするユーザの属性に合わせたデザインがECサイトで表現できれば、ユーザへの好感度がアップしてショップに対して良いイメージを持ってもらうことが出来ます。

ユーザの興味を引くファーストビュー

ファーストビューはユーザがECサイトにアクセスした時に最初に表示されるスクロールなしで表示される画面です。
一般的にファーストビューですぐにサイトから離れてしまうユーザは70%以上と言われています。
ファーストビューで一人でも多くのユーザを引き留めるかが重要なポイントとなります。
ユーザの興味を引く情報の表示や一番伝えたい情報を表示させてECサイトを見る気にさせましょう。

理解しやすい操作性

操作性が理解しやすいものかどうかはユーザが購入まで進んでくれるかどうかに関わってきます。
少しでも分からないことや面倒な操作があるとユーザはその時点で購買行動を止めてしまいます。

イメージしやすい商品画像

ECサイトでは実店舗と違って、実際の商品を手に取って見たり試着したりすることが出来ません。
モデルが試着していたり、実際に使用しているシーンを画像にすることで、ユーザがイメージしやすくなり購買につながりやすくなります。

スマホファースト

以下のグラフにあるように2019年にスマートフォンで購入された比率は金額ベースで42.4%です。

※経済産業省 商務情報政策局 情報経済課「令和元年度 内外一体の経済成長戦略構築にかかる国際経済調査事業（電子商取引に関する市場調査）」より

若い人ではスマホは持っていてもPCを持たないことが多いです。
若い人をターゲットとしたECサイトではスマートフォンの比率はさらに上がるでしょうし、数年のうちに逆転するでしょう。
スマートフォンでの表示を優先してデザインを設計することが重要です。

回遊率が上がるデザイン

ユーザにECサイト内のページを複数見ていただき購入される確率を上げるように工夫をします。

例えばユーザが見ている商品に類似した商品や関連する商品をクリックしやすい位置に配置したりして回遊してもらうようにします。

高速な表示

ECサイトの高速な表示はSEOにも影響すると言われています。

また、ページの表示に3秒以上かかる場合は、40%のユーザが離脱するとも言われています。

参照：40% of people abandon a website that takes more than 3 seconds to load

クラウドサービスを利用していて遅いと感じた場合はサーバー側の性能を上げることは出来ませんので、画像を差し支えない範囲でリサイズしたりする工夫をします。

クロスセルの機能

ユーザが購入しようとしている商品に関連した別の商品を提案することにより、追加購入していただき客単価を上げることが出来ます。ユーザにとっても一緒に買うべきだった商品を買い忘れることがなくなりますので顧客満足度が高まります。

アップセルの機能

ユーザが購入しようとしている商品よりも上位の商品を提案して乗り換えてもらい、結果的に客単価をあげる方法です。

具体的にはロイヤリティの高い顧客を抽出して営業をかけていき1単価あたりの利益を上げていきます。

デザイン以外で訪問者数を増やす方法はこちらの記事で詳しく紹介しているので、興味のある方は是非ご覧ください！

▶︎合わせて読みたい

コンテンツマーケティングとは？基本説明からECサイトの成功事例まで【ECサイト担当者向け】

ECサイトのSEOとは？運用の基礎知識から具体的な方法まで徹底解説

どの広告が効果的？ECサイトが行うべき広告施策を徹底解説

具体的にオススメなサイトの紹介

成功しているECサイトのデザインを参考とすることは、自社のECサイトのイメージを膨らませたりデザインを制作するチームと想いを共有するのに大変有益です。

Championオンラインストア

ヘインズブランズジャパン株式会社が運営しているアパレルブランドのオンラインストアです。
ECサイトを開いたときに目に飛び込んでくるのが、カテゴリーメニュー下のカルーセルパネルに表示されるメッセージです。ショップが一番訴えたいメッセージが伝わってきます。
お気に入り機能により気になった商品をマーク付けできる工夫があります。

◼︎オススメポイント

カテゴリーメニューにマウスを載せるとサムネイルでさらに細分化されたカテゴリーが表示され、ユーザがすぐに目的とする商品へ飛べるようになっています。

LEVITATE ONLINE SHOP

株式会社システムデザインワークスが運営するスイスで誕生したランニングブランド「On」のオンラインストアです。

実際に手に取ることができないので、商品ページの写真はユーザが知りたい部分をアップで捉えたものを複数枚掲載しています。また、写真に添えられた説明文は的確な表現で記載されています。

◼︎オススメポイント

試着できないので、足サイズの測り方が丁寧に記載されています。
また、スタッフのデータも登録されていて自分と近いサイズの足型をプリントして合わせてみて各モデルの最適なサイズを知る参考にすることが出来ます。

ニッコー公式オンラインショップ

ニッコー株式会社が運営する、洋食器「ファインボーンチャイナ」のオンラインストアです。
商品ページでは関連商品も表示されますので、買い増しやさらに好みにあった商品を選択出来るようになっています。

◼︎オススメポイント

多数のアイテムを揃えているため、カップやボールといったカテゴリーを選択した一覧画面で、「価格の安い順」「価格の高い順」「人気順」での並び替えと、キーワードや在庫、価格帯といった条件での絞り込みも用意されています。

タカミ 化粧品公式通販

株式会社 タカミが運営するスキンケア商品のオンラインストアです。

商品の性質上、商品ページでは商品の特徴以外に使用方法を丁寧に説明した文章が掲載されています。

◼︎オススメポイント

また、スキンケアには複数の商品が必要なため「ご使用手順」に、

落とす→洗う→整える→うるおす→与える→保護する→守る

と7つの必要な商品カテゴリを掲載して追加購入を訴えています。

PRMAL

株式会社プライマルが運営しているジュエリーのオンラインストアです。

商品が多いのでカテゴリーでの検索とあわせて並び替えが用意されています。

「オススメ順」「価格の安い順」「価格の高い順」「新着順」が並び替えの項目としてあります。

◼︎オススメポイント

商品画像で特徴的なのは、ジュエリーということで以下の特徴があります。

　　・細部まで確認できるよう拡大可能
　　・3D画像が用意されていて見たい方向から確認可能
　　・動画も用意されている

Rinnai The Basic Built-in

リンナイ株式会社が運営する「The Basic Built-in」のオンラインストアです。

単一の商品ですが、製品のバリエーションがあることと工事や既存のコンロの引き取りなど選択肢が多岐にわたるためユーザが間違いなく指定できるような発注のための導線が作られています。
実店舗なら販売員が説明すべきところをFAQやショッピングガイドでくどくならない程度に丁寧に説明しています。

◼︎オススメポイント

従来なら実店舗でしか販売されないような商品も非接触型の販売が求められている世の中でオンラインストアで販売するための参考となるECサイトです。

土屋印店

土屋印店が運営している、印鑑のオンラインストアです。

商品のカテゴリーとしては「銀行印・認印」と「実印」の2つですが、バリエーションは「名前」「性別」「サイズ」「書体」「印材」の多岐に渡ります。ユーザーが選びやすいように「選び方ガイド」で説明しています。

また、商品ページでは選択式と空白を埋めさせることで、注文が完成するようになっています。

◼︎オススメポイント

トップページの印象的な写真と作品集を掲載することによって、職人の技術をアピールしています。

ARAS

石川樹脂工業株式会社が運営している、ガラスと樹脂を掛け合わせた新素材による食器のオンラインストアです。
印象的な写真でECサイトが構成されていて、商品のデザインの素晴らしさが伝わってくるサイトになっています。

◼︎オススメポイント

樹脂製の食器をハイエンドなレストランで使ってもらうための訴求を「Journal」でストーリー立てて行っています。

ていねい通販

株式会社 生活総合サービスが運営している、サプリや食品、スキンケアなどを販売しているオンラインストアです。

ターゲット層であるお母さんを意識した、優しいテイストのECサイトになっています。商品写真も家庭で利用されることを意識して撮影されています。各商品には定期コースも設けられていて、固定的なユーザとなるように考えられています。

◼︎オススメポイント

商品ページには使い方やレシピなど掲載されていて、ユーザにとってイメージしやすくなっています。

八百彦本店

株式会社八百彦本店が運営している、仕出し料理・お弁当のオンラインストアです。

カテゴリー分けも、「利用シーン」「サイドメニュー」「価格帯」「料理の種類」となっていてユーザの目的に応じて選びやすいものとなっています。商品ページには献立ごとの写真掲載と、合わせて発注したい料理が表示されますのでユーザ側にイメージが伝わりやすく、買い増しされやすくなっています。

◼︎オススメポイント

最初に目にするのが雅な画像と美味しそうな料理写真です。
ユーザに対してインパクトのあるメッセージが伝わります。

ギャラリーサイトの紹介

売れるECサイトデザインを探すにはギャラリーサイトがおすすめです。

ギャラリーサイトにはデザイン的に優れたサイトが多数登録されていて、様々な切り口で検索できるようになっています。

自分が目指しているイメージに近いサイトを探してデザインを研究することによって、自社のECサイトを優れたECサイトに作り上げることが出来ると思います。そこで、オススメのギャラリーサイトを3つご紹介します。

MUUUUU.ORG

クオリティの高い縦長サイトを集めたギャラリーサイトです。

2021年3月8日時点で4669サイトが登録されていて、そのうちECサイトは328サイトです。

業界別、デザインの傾向別、サイトの種類別、色味別でカテゴリー分けされています。

SANKOU!

Webデザイン制作の参考になる国内サイトを集めたギャラリーサイトです。

2021年3月8日時点で2311サイトが登録されていて、ECサイトは131サイトです。
別にスマホサイトも集められていて、271サイトが登録されていて、そのうちECサイトは15サイトです。
業界別、デザインの傾向別、サイトの種類別、色味別、使われている技術別でカテゴリー分けされています。

お気に入り機能があって後から見返すのに便利です。

I/O 3000

国内および海外のサイトからWeb制作の参考となるサイトを集めているギャラリーサイトです。

2021年3月8日時点で1453歳とが登録されていて、そのうちECサイトは181サイトです。

Categoriesでは主に業界別、Tagsでは主にサイトの種類別、Colorsでは色味別で表示できます。

デザインが得意な運用代行企業の紹介

ECサイトのデザインは様々なノウハウとスキルが必要なため、何も知識ない人が勉強しながら対応するというのは厳しいのでデザインが得意な外部の会社に任せるのがいいでしょう。
多くの会社がある中で4社紹介します。

ANVIE株式会社

弊社は2017年3月に設立された会社で、Shopifyの「公式パートナー」です。
Shopifyが元々備わっている高いデザイン性に加えて、弊社のデザイン力でクオリティの高いECサイトに仕上げます。

ECサイトの構築に加えて運用フォローまで行っているのでECサイトに関するお悩みは弊社にお任せ下さい！

meyco株式会社

2018年11月に設立された会社です。高度なデザイン技術とマーケティングに知見を持っており、企画・設計～マーケティング・サポートまで幅広く対応してくれる制作会社です。

株式会社Curious

2018年6月に設立された会社です。質の高いクリエイティブを生かしたソリューションを提供しています。

Web制作、ECサイト、動画などのクリエイティブを実績に持っています。

株式会社SAVVY

2014年9月に設立された会社です。コーポレートサイト、名刺、ロゴ、パンフレットなどの制作から、企業の魅力を引き立てるブランディングまで対応しています。ECサイト制作ではブランディング、ショップデザインの他に写真撮影・モデル撮影にも対応しています。

まとめ

ECサイトのデザインといっても、ターゲットユーザや商品によって様々です。

他社で成功しているデザインをそのまま自社に取り入れても同じように成功するとは限りません。

自社の商品特性やターゲットユーザの属性に合わせて、修正する必要があります。

どのように修正するかも、他社の成功しているECサイトのデザインにヒントが隠されているかもしれません。

今回の記事でご紹介したギャラリーサイトやオススメのサイトを研究して自社のECサイトの売上アップに成功してください。

この記事を見たけど、「どんなデザインが自社サイトに合っているかよくわからない...」「リソースが足りないからECデザイン代行したい！」という方はECサイト構築支援・運用支援を行っているANVIEにご相談ください！