ECサイトを立ち上げたものの、なかなか売上が伸びずに悩むケースは珍しくありません。
売れない原因はさまざまですが、商品は魅力的なのに購入してもらえない場合、サイトのデザインが影響している可能性があります。
「デザインは本当にこれでいいのか」
「ターゲットが好むサイトになっているか」
売れるECサイトには、訪問者が快適に利用できる共通点が見られます。
この記事では、売れるECサイトに見られるデザインの共通点や参考例、必要な要素をくわしく解説します。ECサイトのデザイン性を高めたい方、売上を伸ばすヒントを得たい方は、ぜひ最後までお読みください。
目次
WordPressテーマ「RIKYU」
製品のブランド力と売上を上げるネットショップが作成できる。売れるECサイトに見られるデザインの共通点
Amazonや楽天市場のようなプラットフォームは、豊富な商品数を背景に持つ膨大な会員ネットワークがあります。
私たち中小のネットショップは、このような巨大プラットフォームとは全く違ったアプローチが必要です。同じネットショップでも全く別物と考えなくてはなりません。
売れるECサイトは、たいていヒット商品を1つや2つ抱えているものですが、今回はそれ以外のデザイン面にスポットを当てます。売れるECサイトに見られるデザインの共通点は、4つあります。
それぞれ詳しく見ていきましょう。
第一印象で惹きつけるデザイン。
中小のネットショップでは、他と差別化を図るために第一印象で惹きつけるデザインが求められます。第一印象がどうかで、その後の商品の成約率にも影響するからです。最初の掴みを如何にするかが、ネットショップ成功の鍵です。
第一印象に深く関わるのは、ヘッダー周りです。ヘッダーやキャッチコピーはファーストビュー（ユーザーがページを開いた瞬間に表示される画面）を司ります。
第一印象でインパクトを与えている。
ファーストビューのデザインは、ヘッダーに挿入する画像や動画、そしてキャッチコピーに何を書くかで決まります。さらに、それらを美しく表示するための土台も美しくあるべきです。
ファーストビューのインパクトを求めるなら、WordPressテーマ「HARVES」でネットショップを構築するのがおすすめです。
美しい余白と行間
余白と行間、見た目の美しさは、印象や文字の視認性に影響します。
| 行間・余白 | 印象 |
| 詰まっていると・・・ |
|
| 広すぎると・・・ |
|
行間や余白は詰まりすぎても広すぎても駄目で、ちょうど良い間隔が必要です。素敵な写真をヘッダーに表示させても、行間や余白が残念なだけで、サイト全体が残念になります。
頭から足先まで整然とした余白と行間。
行間・余白もデザインです。適切な行間や余白を用いたWebサイトはあまりありません。なぜなら、一部のプロしか、この繊細なバランスを成立させるのは難しいからです。私たちは、誰もが美しい行間や余白を実現できるようWordPressテーマTCDを作りました。
ちょっと微妙なWebデザイン、ネットショップを少しでも減らせればと思い、TCDテーマの改善を日々行っております。
どのデバイスでも見やすい
スマートフォンからの訪問者が増えている現在、レスポンシブデザインへの対応は欠かせません。
レスポンシブデザインとは、スマートフォンやタブレット、PCなど、さまざまな画面サイズに合わせてレイアウトが自動で最適化される仕組みです。対応していないサイトは、スマートフォンで見たときに文字が小さくなったり、画像がずれたりしてユーザーを不快にさせます。
売れるECサイトを実現するなら、モバイルファーストの考え方を取り入れるべきです。また、どんなデバイスからアクセスされても、快適に閲覧できるデザインが適しています。
ユーザーによって閲覧するデバイスは異なりますので、WEBサイトにはレスポンシブデザイン（画面サイズやブラウザに応じて変更されるデザイン）が求められます。なので、制作段階ではさまざなサイズでの検証が必要になるわけです。 Chromeのデベロッパーツールを使って、他のデバイスでの表示を仮検証できま...
配色のバランスに優れている
ECサイトの配色はブランドイメージを伝えたり、顧客の感情に訴えかけたりする上で欠かせません。売れるECサイトは、ブランドイメージに合った配色で統一されています。
赤をメインカラーとして使っているのに、各所で黄色を使っていたり。複数の色を使って統一感を出すのは上級者の嗜みです。デザインにこだわりがない場合は、極力色を統一させる方が良い。
モノトーンで落ち着いた印象。
ブランドイメージを強調したい場合は、使用しているカラーを取り入れるのが適切です。高級感を演出したい場合は落ち着いた色を基調にする。また、原色や原色に近い色も避ける。
サイトの配色に統一感がないと雑多な印象を与えるため、少ない配色でバランスを整えることを意識して下さい。
あなたは色を決める時、どのように検討を重ねているでしょうか。そして何を決め手に最終的な配色を決定しますか？この記事では配色を検討する時に便利なツールとなんか垢ぬけない印象の配色となってしまいがちな理由について書いていきます。日々のヒントとして参考にしていただけたら嬉しく思います。 カラ...
商品ページのUI設計が見やすい
ECサイトの商品ページの構成は次の通りです。
- 写真
- キャッチコピー
- 商品説明文
- 配送条件
- 価格
- カートボタン
- ユーザー評価
これらの構成がわかりやすく配置されていることも大事です。ユーザーが、最初にページに飛んできて、興味を持って内容を読み込み、購入検討を挟んでカートボタンをクリックする。商品購入までの一連の流れを崩さないUIであることが重要です。
長い商品ページでも購入に導く。
ECサイトのデザインで参考にしたいサイト一覧
中小規模のECサイトで、素敵なデザインのECサイトをご紹介します。いずれも丁寧に作られているサイトなので、運営の参考になるでしょう。
栗原園
栗原園さんは、狭山茶を販売するECサイトです。オシャレなパッケージでオリジナルのティーバッグも販売されています。
トップページのヘッダー写真がとても印象に残ります。視認性の高い商品ページで売上の上がるネットショップを運営されています。
栗原園さんのECサイトは、WordPressテーマ「ICONIC」を使って制作されています。落ち着いた世界観のECサイトを作りたい方はぜひご利用ください。
学而図書
学而図書さんは、書籍の企画から販売まで行う出版会社のサイト。知的資産を守るため、教育機関・研究機関等の講義や研究成果を主に製本して、販売されています。
白を貴重とした、知的なECデザイン。情報がシンプルに整理されているからこそ生まれる空気感と言えるでしょう。
学而図書さんのECサイトは、WordPressテーマ「RIKYU」を使って制作されています。知的で高品質であることを伝えたいECサイトに向いています。
滝澤酒店
滝澤酒店さんは、酒蔵重視で厳選した逸品の酒を全国に届けるネットショップ。取扱は、日本酒や焼酎の他にワインもあります。
ロゴやヘッダー写真が素敵です。ヘッダー写真からは、酒へのこだわりが伝わってきます。言葉は必要ありません。そのような写真をヘッダーに持ってくることは、サイトを運営する上でとても重要です。
滝澤酒店さんのECサイトは、WordPressテーマ「ICONIC」を使って制作されています。
仁秀｜NINSHU
仁秀さんは、和の食器各種（茶碗、皿、鉢など）を販売するECサイトです。仁秀ブランドの陶器は、京都にある仁和寺でも販売されています。
すべての陶器は一客一客、名匠により伝統的な製法で作られており、見て良し使って良しの和食器が特徴的。伝統を引き継ぎながらも、和モダンなデザインです。
仁秀さんは、WordPressテーマ「EGO.」を使って、ネットショップを作成されています。
WOOTANG
WOOTANG（ウータン）さんは、水だけで育てる植物（水耕栽培）を販売するネットショップです。
白を基調としたサイトは洗練された印象を与えます。商品写真も統一感をもって撮影されており、丁寧に作られたWebサイトであることを印象付けます。デザインの力で、信頼性を向上されています。
WOOTANGのECサイトは、WordPressテーマ「ICONIC」を使って制作されています。
anyka
女性がいつでも華やかでいられるように。anykaさんは、愛知県の実店舗「noveRuga」さんが運営するアパレルのネットショップです。
シンプルで落ち着いたデザイン。キャッチコピーもかわいくて、世界観に引き込まれます。
anykaのECサイトは、WordPressテーマ「Ankle」を使って制作されています。Ankleは、小さく産んで大きく育てるネットショップに向いています。
福島八幡宮
福島県八女市にある福島八幡宮さんが運営するECサイト。神社のサイトは別にあり、こちらはお守りや御朱印など授与品が購入できるサイトです。
ECサイトと神社サイトでは、ロゴが分けられています。ECサイトの方はカラフルでかわいいロゴ。別サイトであることがひと目で分かります。コンテンツも整理されていて、とても見やすいです。
福島八幡宮のECサイトは、WordPressテーマ「ICONIC」を使って制作されています。
ECサイトのデザインに必要な要素
ECサイトのデザインに必要な要素は、以下のとおりです。
それぞれ詳しく見ていきましょう。
ロゴ
ロゴはECサイトの顔であり、ブランドの象徴です。
主にサイトのヘッダー部分に配置されるケースが多く、ユーザーにブランドを認識させ、信頼感を与える役割を持ちます。
作成する際のポイントは、PCやスマートフォンなど、どのデバイスで見てもきれいに表示されるよう高解像度にすることです。また、クリックでトップページに戻るように設定し、ユーザーが迷ったときにいつでもスタート地点に戻れるよう配慮しましょう。
会社やお店、商品のロゴマークは、サービスの特徴をイメージさせる重要なものです。ロゴはプロに制作してもらうのがベストだと筆者も考えています。 しかしながら、なるべく初期費用を抑えるためにロゴにお金をかけたくない、という場合も多いでしょう。というわけで、今回はお金をなるべくかけず（もしくは完全に無...
ヘッダー
ヘッダー（HEADER）は、ECサイトの全ページに共通して表示される上部の領域です。
ロゴをはじめ、グローバルナビゲーション、検索窓、カートアイコンなどが配置されます。ユーザーがどのページにいても、常に重要な機能にアクセスできるよう役割を担います。
ヘッダーはサイト全体を通して一貫したデザインを保ち、サイトの構造を理解しやすくする領域です。
メインビジュアル
メインビジュアルは、ECサイトのトップページを開いたときに最初に目に入る大きな画像や動画です。
ブランドの世界観を伝えたり、新商品やセール情報をアピールしたりするのに使われるほか、ユーザーの興味を惹きつけてサイト内を探索してもらう役割を担っています。
ユーザーに強い印象を与えるには、画質の写真やブランドイメージに合った動画の使用が有効です。
メインコンテンツ
メインコンテンツ（CONTENT）はECサイトのトップページ中央に配置される、商品やカテゴリの紹介、特集記事などです。ユーザーの購買意欲を高めるための重要な情報が詰まっています。
新着商品や人気ランキング、おすすめ商品をわかりやすく配置し、ユーザーが次に閲覧したいページへ進めるような導線を作成します。
定期的に更新し新鮮な情報を提供すれば、リピーターを増やせるでしょう。
グローバルナビゲーション
グローバルナビゲーションは、ECサイト内の主要なページへのリンクをまとめたメニューです。
通常はヘッダー部分に配置され、どのページからでもアクセスできます。
主なリンクは、以下のとおりです。
- カテゴリ
- 商品一覧
- 会社概要
- お問い合わせ
ユーザーがよく利用するページへのリンクを設置するほか、ナビゲーションの名称をわかりやすくし、迷わずに目的のページにたどり着けるよう工夫する必要があります。
ローカルナビゲーション
ローカルナビゲーションは、特定のカテゴリやページ内でのみ表示されるナビゲーションです。
たとえば、商品カテゴリページでさらに細かく商品を絞り込むためのメニューなどが該当します。
ユーザーが商品を探す際に、効率よく目的の商品にたどり着けるようサポートする役割を担います。
フッター
フッターは、ECサイトのすべてのページに共通して表示される最下部の領域です。
主に会社概要やプライバシーポリシー、特定商取引法に基づく表記、お問い合わせ先、SNSリンクなどが配置されます。
ユーザーに信頼感を与えるための重要な情報をまとめ、安心感を提供する領域です。
ECサイトデザインのトレンド例
ECサイトデザインの最新トレンドは、3つあります。
それぞれ詳しく解説します。
ミニマルデザイン
ミニマルデザインは余計な要素を排除し、必要最低限の要素だけで構成するデザインです。
主な特徴は、3つあります。
- シンプルなレイアウト
- 控えめな配色
- 十分な余白
このデザインは商品そのものを際立たせる効果があり、魅力を最大限に引き出せる点がメリットです。
ミニマルデザインが活かされたサイトとしては、Atlason.comが参考になります。
シンプルで見やすいデザインはユーザーに洗練された印象を与えるため、商品への信頼を向上させます。
スプリットレイアウト
スプリットレイアウトは画面を縦に2分割し、複数のコンテンツを同時に表示するデザインです。たとえば、画面の左側を固定して表示し、右側はスクロールできます。
片方をメインビジュアルとして固定できるため、ブランディングに適したレイアウトと言えます。
パララックスデザイン
パララックスデザインはWebページをスクロールしたときに、背景と前景の画像が異なる速度で動くデザインです。奥行きのある視覚効果を生み出し、ユーザーに新鮮な体験を提供します。
パラックスデザインはブランドの世界観を表現したり、物語性のあるコンテンツを見せたりするのに効果的です。ユーザーにとって視覚的に楽しい体験は、サイト滞在時間を延ばしブランドへの愛着を高めます。
パララックスに対応したECテーマとしては、「BASARA」があります。
コーポレートサイトとECが融合したBASARA
TCDで最高なデザインのECサイトをつくる。
売れるECサイトを運営したいものの、デザインに手間をかける時間はもったいない。デザイン性を重視したECサイトを作る場合は、TCDをお使いください。
TCDは専門知識がなくても、洗練されたおしゃれなデザインのECサイトを簡単に構築できるWordPressテーマです。デザインを意識しなくとも、商品を登楼していくだけで、素敵なサイトが完成します。
また、TCDでECサイトを作る方法は、数ある手段の中でも最も低コストで作成できます。以下はネットショップ作成の初期費用（イニシャルコスト）と固定費用（ランニングコスト）を比較した表です。
| ECサイトの制作・運営費用の比較 | ||
| 制作手段 | 初期費用 | 固定費用（年間） |
| 制作会社 | 60万円〜 | 保守管理費 50万〜120万 決済手数料 2.9〜3.6% |
| 無料ECサイトサービス | 0円 | ドメイン代 1000円〜 有料プラン 20万円 決済手数料 6.6〜8.0% |
| TCD （WordPress） |
テーマ代金のみ （19800〜49800円） |
ドメイン代 1000円〜 サーバー代 6000円〜 決済手数料 2.9〜3.6% |
ただ作るだけでしたら、BASEやSTUDIOなどの無料ECサイトサービスの方が安いですが、実際に稼働し売上を上げていこうと思えば有料プランの加入は必須となりますので、最終的には高額なランニングコストがかかり続けることになります。重たい固定費は、ECサイトを成功させるうえでも、大きな足かせとなるでしょう。
なぜ、WordPressが低コストでサイトを作れるかと言うと、ソフトウェアがオープンソースで無料で利用できる点が大きいです。そして、オープンソースなのにどんなサイトでも作れてしまう機能性があります。WordPressは世界中で使われているソフトウェアなので、常に最新の機能が備わっています。
価格面では、WordPressには勝てないのです（もし勝てる方法が物理的に存在するなら、弊社もWordPressより優れたCMSを既に開発していたでしょう）。だから、それを知っている人はみんなWordPressを使います。その他の制作手段を取れば、必ず割高になるのです。
そんなWordPressという土台を使って作られているのがTCDです。TCDはデザインだけでなく、集客やSEOにも配慮されているため、高品質なECサイトをすぐに手に入れたい方に最適です。ぜひご活用ください。
まとめ
売れるECサイトには、情報が整理されたシンプルな構成、適切な余白と行間、レスポンシブ対応、バランスの取れた配色といった共通点があります。
サイトをデザインする際はターゲットに好まれるデザインを追求し、購入までの導線をわかりやすくしましょう。
また、成功しているECサイトのデザインを参考にしながら、自社の商品やブランドイメージに合ったサイト構築を目指すべきです。
デザインの知識がない場合は、専門知識が不要で誰でも簡単におしゃれなECサイトを実現できる、WordPressテーマTCDが適しています。洗練されたデザインのテーマに変更し、売上アップにつながるサイトを構築してください。
WordPressで作成できる。
コメント