【ECサイトデザインのコツ】8つのポイントと参考サイト10選

ECサイトを制作するにあたっては、デザインの出来が成果に大きく関わります。これからECショップを立ち上げたい方はもちろん、現在運営しているECサイトの売上が伸び悩んでいるという方は、デザインの重要性をよく知っておかなければなりません。そこで今回は、ECサイトデザインのポイントを解説します。また、実例として参考になるサイトもご紹介しますのでご期待ください！

この記事を読んだらわかること

・ECサイトのデザインで意識する5つのポイント
・参考にしたいおすすめECサイト10選

目次【表示】

WEBコンサルタントのご紹介

弊社は、上場企業も含め50社以上のECサイト制作に携わってきました。
ECサイトは、一から構築すると莫大な費用がかかってしまいますが、弊社はWordPressを使用し、最小限に費用を抑えたECサイトの構築が得意です。ECサイトの制作で費用が気になるという方は、お気軽にご相談ください！

ZERO式ECサイト制作はこちら

【項目別】ECサイトのデザインで意識する5つのポイント

ECサイトをデザインする場合には、押さえておくべき注意点があります。ここではECサイトデザインで重要な5つのポイントをご紹介し、わかりやすく解説していきます。ぜひ以下の点に注意してデザインを行ってみてくださいね。

・サイト構成
・トップページ
・商品ページ
・会社概要ページ
・商品発送ページ

サイト構成

まず重要なのは、自社・自店のECサイトがどんなタイプのサイトなのかを見極め、その認識を社内で共有しておくことです。サイトタイプによって最適なデザイン傾向は異なるので、ここを把握しておくことは大前提です。サイトのタイプとして挙げられる主な4タイプを以下の表にまとめました。あなたの会社のECサイトはどこに属するかチェックしてみてください。

・有名ブランドタイプ
認知度高いブランド製品中心のECサイト。ユーザーは指名で検索してくる。大量の商品を扱うため、デザインはシンプルで1つずつの商材にあまりスペースや文字数を取らないデザイン
・オリジナルタイプ
オリジナル製品が中心。さほど商品バリエーションがなく、広告や集客などにも注力する必要がある。1つずつの商品を丁寧に詳しく説明できるデザイン
・ニッチタイプ
買う頻度の低い商品、マニア向けの嗜好品、高価な物などを扱うECサイト。どのように認知してもらうのかも含めたデザインが必要となる
・総合タイプ
有名ブランドタイプとオリジナルタイプをミックスしたようなECサイト。総合的なカタログ通販に通じる型。豊富な商品をいかに見やすくするか、全体の統一感などがデザインの課題

有名ブランドタイプ	オリジナルタイプ	ニッチタイプ	総合タイプ
アパレル高級ブランド家電コスメ書籍・DVD など	健康食品直産品自然派コスメなど	専門的スポーツ用品雛人形・五月人形仏壇・仏具趣味嗜好品など	ノーブランド品・家具・アパレル・日用品など

オリジナルタイプと総合タイプは衝動買いするユーザーも多いことが想定されるため、ブランドイメージを打ち出すようなデザインよりも万人受けするデザインがベター。

サイト構成は情報を整理してツリーマップを作るとよい

ECサイトの構成は、必要な情報を過不足なく収めることを重視しなければなりません。また、ユーザーが欲しい情報を得やすく、買物しやすいデザインが何より大事です。まずはサイト全体を構成するページを洗い出し、さらに情報を系統立てて表現するために、階層を示すツリーマップを作りましょう。ツリーマップでカテゴリを分類してみれば。自ずと自社サイトの構成の概観が見えてきます。

トップページ

トップページはサイトの玄関口。商品はもちろん、企業やお店のイメージを表現する上で重要な部分です。しかし、ECサイトのトップページにはECサイトならではの注意点もあります。デザイン時には、次に挙げる3つのポイントを意識してください。

通常のレイアウトデザインを抑える

ランディングページなど、第一印象で読み進めるかどうかが決定されるタイプのサイトとは違い、ECサイトは商品を見にくるユーザーがほとんどなので、トップページでは通常のWebサイトのようなレイアウトを抑えて、必要最小限の要素を入れ込んでデザインするのがベストです。ECサイトのトップページにレイアウトすべき要素とは主に以下の通りです。

・ロゴ
・トップメニュー
・商品コンテンツ
・商品詳細情報
・問い合わせ・送料など

信頼させる情報を掲載する

ショッピングサイトにアクセスした時、ユーザーは商品を見たり選んだりすることを楽しみにしている反面、商品の配送方法・発送にかかる日数・送料・返品についてなど、買物で起こり得るトラブルや不安な事柄についても確実に知っておきたいと思っているのが普通です。トップページでは、このようなユーザーの不安を解消できる情報があることを示すレイアウトデザインが重要となります。

商品掲載のバランス

扱う商品数の多いECショップでは、むやみやたらに商品写真を掲載して見にくい画面にならないよう配慮する必要があります。全ての商品の写真を載せることよりも、デザイン全体のバランスを考えた引き算のレイアウトを優先した方が良い場合もあるのです。あまりに選択肢が多いとユーザーの意識は散漫になり、クリックする気力が失せてしまう可能性もあります。

商品ページ

商品ページはユーザーが最も期待して訪れるサイトの顔的役割のあるところです。売上をも左右する最重要ページと入っても過言ではありません。ここでは商品ページのレイアウトデザインで押さえておきたいポイントをご紹介します。

商品の詳細情報

商品の詳細情報は、ユーザーが必ず欲しいと思う情報を不足なく伝えることを重視します。一方で、過剰な情報はうるさくなってしまうため控え、あくまで過不足なく丁度良い情報量を提供できるような工夫が必要です。以下は商品の詳細情報ページに欠かせない要素となります。

・様々な角度や商品の色がわかるイメージ写真
・商品の魅力を解説した文章
・口コミ、レビュー、お客様の声など第三者による評価がわかる情報
・サイズやカラーなどの詳細スペック
・レコメンド（関連商品）

価格の記載

細かなデザインポイントではありますが、実は価格の見せ方も売上に関わる重要要素です。ユーザーのニーズや心理を分析したうえで価格をどう見せるかを決定する必要があります。価格の見せ方については以下の3つの記載例を参考にしてみてください。

・価格を前後比較させる
セット料金と単品で料金のお得さを出すことにより単価アップの効果が狙えます
・価格にポイントを添える
ポイント制を布いているECサイトには有効的です
・価格に送料・受付時間を添える
送料によって買うか否かを決定するお客様がおられるので表示すると親切です

会社概要ページ

ECサイトには、販売元である会社を紹介するページが必要不可欠です。どこに所在し、どんな理念のもとでどんな人たちが売っている商品なのかを、ユーザーは想像以上に気にします。読みやすくわかりやすい会社概要ページを設けることにより、主役である商品の魅力もいっそうアップするのです。会社概要ページに必要な要素を次にお伝えします。

企業の魅力をアップさせるための会社概要ページ

企業や扱う商品の魅力をアップさせる会社概要ページには、絶対に用意しておきたいコンテンツがあります。以下にその要素を挙げておきましょう。

・社名
・住所
・電話番号、メールアドレス
・創業年月
・オフィスやスタッフの写真
・コーポレートサイトへのURL

コーポレートサイト制作は必須とは言えませんが、あると『ちゃんとした会社』感が出て信頼性を与えることができるので、あるのがベターです。

商品発送ページ

商品発送ページでは、この会社になら任せて安心と思われるようなレイアウトデザインを心がけましょう。ユーザーに安心感を与えるために必ず用意したいコンテンツや準備について次にご説明します。

安心感を与えること

ECサイトの商品発送ページは、サイト全体のデザインとのバランスも考えながら、見やすくレイアウトすることを留意しましょう。以下のような要素を盛り込むとユーザーは安心感を覚えます。

・お届け日を記載
・改めて商品価格＋送料の表記
・クレジットカードのロゴ
・レコメンド（関連商品）
・購入ステップのビジュアル化

発送日やお届け日、価格・送料の表記などは、前のページに戻らなくても確認してもらうための必須項目です。クレジットカードのロゴはきちんと提携していることの証として安心感を与えます。関連商品は買い忘れ防止のためにあると親切です。購入ステップについては、ユーザーが今どの地点にいて、あとはどんな手順を踏めば完了するのかを示す地図となります。

ECサイトのデザインは、ブランドイメージで統一する必要があります。
また、コンバージョンを高めるためにもユーザビリティを追求したデザインが重要です。

ZERO式ECサイト制作はこちら

参考にしたいおすすめECサイト10選

前述したようなレイアウトデザインをしっかりと実践し、集客や売上など見事な成果を上げているECサイトが実際にたくさんあります。ここでは、デザインの参考にしたいおすすめのECサイトをご紹介します。

ユニクロ

トップページのヘッダー部分にあるグローバルナビゲーションが見やすいことで、一気に買物への意欲が湧くサイトです。ターゲットユーザーが幅広く商品数も多いため、ナビゲーションの操作性が肝となります。また、ともするとごちゃごちゃしてしまう商品ページも、期間ごとの推しアイテムをバナーの大小で表現するなどの工夫が見られます。

アマゾン

トップページでは文字情報を極力抑え、豊富過ぎる商品を画像で分類して見やすくしているサイトです。しかし、商品は比較対象も非常に多いため、画像を見るのにもズームや回転機能などを加え、文字情報ともどもたっぷり掲載しています。アイコン・バナーもしっかりとテキスト表記され、何をするために押すものなかを明確にして間違いを予防し、信頼性・操作性ともに高めています。

GUCCI

高い認知度と強いブランド力で、サイトデザイン全体に余裕と高級感をにじませているECサイトです。高級ブランドだけに、トップページのヘッダー部分にカスタマーサービスを配し、顧客満足度を上げる工夫がなされています。レスポンシブデザイン採用ですが、PC版では横に並べているコンテンツがスマホ版では縦に並ぶ程度で、いずれにしてもシンプルにこだわったレイアウトです。

tokyobike

シンプルでおしゃれな商品イメージそのままのデザインが好印象のECサイトです。トップページは具体的商品というよりもイメージ画像を主役にして、購入後の素敵なライフスタイルを想像させ、商品の詳細を知る方法は、右肩に設置したナビゲーションボタンの操作。生活感を排しつつユーザーが好きなようにサイト内を回遊できる仕組みとなっています。配色やレイアウトもハイセンスです。

ZOZOTOWN

毛色の違う幅広いブランドの豊富な商品を掲載するECサイト。ユーザーの利便性を考えたスタンダードな3カラム構成が、見た目をごちゃごちゃさせずにすっきりとした印象を与えています。情報量が多いため、1つずつのコンテンツや文字が小さくなっていますが、それによりサイト全体がコンパクトとなり、買物しやすいイメージに上手につなげています。お得情報などはヘッダーでしっかり告知。

無印良品

世間一般の企業イメージや実店舗のイメージを損なわないようにデザインされているのが印象的なECサイトです。味わいのあるおしゃれでシンプルなイラスト使いや、中央に集約された商品画像は、まるで実際のお店でショッピングを楽しんでいるような雰囲気。商品画像がバナーになっているため、自然に売り場へ足を運ぶような感覚で買物できます。

ノリタケ食器

トップページの階層になった使いやすいナビゲーションのお陰で、具体的な商品解説がなくても困らない構造となっているサイトです。食器のブランド名を知らないユーザーが安心して買物できるよう、シーンや用途に応じた商品提案をしているのも印象的。商品や会社にまつわる時事情報をサイドメニューに配したりコーポレートサイトのリンクをさりげなく添えたりすることで、ブランド力ある企業名にさらなる信頼感を加えています。

IDEE

定番アイテムへの誘導はグローバルナビゲーションで行い、トップページはおすすめ商品や季節商品情報をメインに扱うことでユーザーニーズに応えているデザイン例です。高級家具ショップゆえに、セールや送料無料アイテムの告知も目立つ配色でしっかりと行っています。企業情報もヘッダーとサイドバーを使って抜かりなく提供。

HUMOR

おしゃれなアパレルショップのイメージをそのままデザインに活かしたECサイトです。文字表記は英語も多めですが、わかりやすさを損なわない程度の表現でユーザーを不安にさせません。一定以上の価格帯の商品が多いため、商品掲載エリアは余裕を持たせたレイアウトで行い、企業情報やセール情報などをスライダーを利用してよく目立つ位置で告知しています。

STAR JEWELY

幅広いターゲットユーザーを持つため、商品カテゴリ名でニーズが一目瞭然となるようにデザインされています。おすすめの商品セットは見やすく美しい画像で公開されていますが、そのものがバナーになっていて、詳しい商品ページを簡単に開くこともできます。エレガントなレイアウトデザインと実用性を兼ね備えたECサイトとなっています。

まとめ：サイト構成に適したデザインを心がけよう

今回はECサイト制作で重要となるデザインのコツについて解説してきましたが、参考になりましたでしょうか。ECサイトの構成は4タイプに分けられ、自社サイトがどのタイプなのかをまず見極めることでデザインの傾向を定めることができます。

逆を言えばサイト構成を決めておかなければ、ユーザーに信頼感を与えたり利用しやすいサイトだと思われたりするデザインにすることが難しくなります。どのようなレイアウトデザインにすればユーザーが安心して商品を買いやすいのかをしっかりと見極め、必要な構成要素を過不足なく準備してデザインに臨んでくださいね。