売れるECサイトデザイン10のポイント【参考事例有】
公開日 2019年3月26日、更新日 2023年9月14日
EC サイトのデザインは、見た目の良さだけでなく、商品を購入してもらうまでの動線を意識する必要があります。この記事では、個人でネットショップを運営している人や、初めてネットショップを作成する人にもわかりやすく、売れる EC サイトにするためのポイントを解説します。 この記事を参考に、EC サイトのデザインの改善点のチェックや、EC サイトデザインのアップデートに取り組んでみましょう。初めてネットショップを作成する場合は、ネットショップサイトの作り方についての記事もあわせてお役立てください。
目次
売れるECサイトの基本とデザインのポイント
「EC サイトを公開したけど、なかなか売り上げが伸びない...」といった悩みは多くの EC サイトが最初に直面する壁の一つです。そんなときは、以下の 10 のチェックポイントを確認してみましょう。いますぐ実践するべき、売り上げを伸ばすためのポイントをデザインの側面からわかりやすく解説します。
01. 説得力があるファーストビューデザイン
トップページで、スクロールせずにみられるエリアをファーストビューと言います。ファーストビューには、売れ筋商品や、期間限定のキャンペーンなど、インパクトのあるコンテンツを掲載して、訪問者を惹きつける役割があります。
ブランドの使命や特徴など、長く使えるコンテンツを掲載することもできますが、定期的に更新することでフレッシュさを保ちましょう。
たとえば Wigs by Tiffani は、写真撮影の舞台裏を見せる動画を配置しています。この動画では、カスタムフィットのウィッグを熱心に試着するモデルたちと、創業者であるティファニのやり取りの様子がテンポよく表示されることで、動きのあるデザインになっています。
02. 分かりやすいCTA
CTA（calls-to-action）は、ページ上で訪問者に特定のアクションを促す要素（リンク、ボタン、バナー、ポップアップなど）のことです。
「商品をもっと見る」、「カートに追加」、「ニュースレターに登録」などのボタンやバナーを設置することで、訪問者へ行動を導します。 CTA ボタンは、目立つデザインで、動詞を含んだキャッチコピーにすることでクリック率を向上させることができます。
たとえば Jule Dancewear では、すべての CTA が「shop（買い物する）」という指示語で始まっています。それぞれの指示語の後ろに特定の商品カテゴリーが続き（たとえば「shop LEOTARDS」）、表示される商品がひと目で買い物客に分かるようになっています。また、このサイトでは、矢印やその他の記号を使って買い物客の目が CTA に引きつけられるようにしています。
ページに過剰な数のアイコンを詰め込んだりしない限り、これは非常に効果的な アプローチです。
03. 商品カテゴリの整理と明確なメニューデザイン
商品カテゴリーはシンプルな構成し、顧客が興味のある商品を見つけるまでのクリック数が 3 回以下になるようにします。そのためには、商品カテゴリの階層は 3 層までにすることがおすすめです。
アパレル EC サイトの商品カテゴリの事例 親カテゴリ 女性向け、男性向け、子供向け
子カテゴリ トップス、ボトムス、ジャケット、アパレル小物、アンダーウェア 孫カテゴリ プリーツスカート、デニムパンツ、ワイドパンツ 、プレスオン
カテゴリ分けは、ユーザーだけでなく SEO 対策としても重要です。検索キーワードを含む、検索しやすいカテゴリ名を意識しましょう。カテゴリー構成の参考に、お気に入りの EC のサイトがどのように構成されているかを確認してみるのもいいでしょう。
04. 社会的証明（ソーシャルプルーフ）
口コミの力を否定することはできません。EC サイトでは、「お客様の声」をはじめ、過去に獲得した賞や、ユーザー生成コンテンツ（UGC）をトップページに掲載することで、信頼できるビジネスであることを強調しましょう。
たとえば Planner Kate の EC サイトでは、ユーザーのレビューをスライドショーで見られます。それぞれのレビューを見れば、ステッカーの種類、商品の品質、信頼できる配送など、 実際のユーザー目線での評価を知ることができます。
05. 「ビジネスについて」ページを設置
必ずしも必要ではありませんが、事業を紹介するためのページは、あなたがだれであり、何を訴えようとしていて、なぜあなたから買うべきなのかを訪問者に伝える場を提供します。また、事業の特徴（たとえば、地元から食材を仕入れている、持続可能を意識したパッケージを使っているなど）を紹介するのに適しています。
Izzy Wheels では、色鮮やかで目に飛び込んでくるような自己紹介コーナーを設け、初めてサイトを訪問した人々に、事業の背景にある使命を訴えかけています。
「Izzy Wheels は、すてきで陽気なアイルランド人の、アルバ＆イジー姉妹によって設立されました。姉妹は現在、世界中のアーティストやファッションデザイナーと提携し、車椅子をファッションステートメントに変えようとしています」
さらにこのコーナーでは、「受賞歴があるデザイナーズ ホイールカバー」や「世界中に発送」など、ブランド独自の価値についても紹介しています。
06. 送料を無料または割引にする（実施できる場合）
調査によると、買い物客の 62.2 ％が送料の安さをショップ選びの重要な要素だと考えているほか、 74.1 ％が送料無料を「うれしい」と回答しています。
配送に関わる割引サービスを提供している場合は、ECサイトのトップページ、またはファーストビューでしっかり強調しましょう。送料についてのお得情報をバナーで訪問者に知らせ、送料に関する特典を受ける方法（たとえば 5,000 円以上の購入で送料無料、会員になると送料無料、など）を説明するなどが考えられます。
07. ブランディングに統一感を持たせる
EC サイトのデザインはお店のブランディングを総合的に表現するページであるべきです。色、画像、動画、フォントなどの要素を駆使し、買い物客があなたのブランドを連想できるようなクリアなビジュアル アイデンティティを醸し出す必要があります。そうすることにより、顧客はサイトの閲覧中も、自宅で商品で受け取る時も、あなたの個性一つひとつに表れている一貫したテーマを認識できます。
Mananalu の EC サイトは、自然からインスピレーションを受けた色彩を基調とするデザインによって、サステナビリティーへのコミットメントを表現しています。ファーストビューには創業者が出演する動画が映し出され、複数の人物がリレーをしながら会社と商品の背景となる理念を訴えています。
動画には、最小限ながらもパワフルなメッセージ性を持ったテキストが挿入され、ストーリーを視覚に託した構成になっています。このヘッダー動画は、海の波がデザインされた Mananalu の商品パッケージやブランドのテーマともマッチしています。
08. ECサイトをモバイル端末用に最適化
現在、半数以上のオンライントラフィックがモバイル端末となっています。したがって、EC サイトをスマホ画面からでも快適に利用できるようにデザインすることは、避けられない対策と言えます。
モバイル向けにデザインを調整する場合は、サイトの速度を落とす不要なデザイン要素を取り除いてください。また、モバイル決済の流れも忘れずにテストしてください。買い物客が操作に行き詰まって他のサイトに行ってしまわないよう、モバイル端末を使った取引と決済に問題がないことを確認しましょう。
つまり、業界トップクラスのサイトパフォーマンスを確保し、トップページから商品ページに至るすべてのページを読み込みが速くて閲覧方法もわかりやすく、全般的にモバイル端末で優れたユーザー体験を得られるようなものでなければなりません。
たとえば、 Sticky Lemon のモバイルサイトはスッキリまとめられています。画面にゆとりがあり、訪問者はスクロールをあまりしなくてもページの「本題」（すなわち商品）にたどり着くことができます。重要な情報はトップに表示され、ページのテキスト、画像、その他の要素も小さなデバイス向けの適切なサイズに設定されています。
09. 「特定商取引法に基づく表記」を記載する
インターネット上で商品やサービスの販売を行う場合、「特定商取引法に基づく表記」をサイトに掲載することが義務付けられています。特定商取引法ガイドや Wix のサポート記事を参照しつつ事業形態に応じた表示をわかりやすく掲載しましょう。
売買の取引を円滑に、そして可能な限りトラブルを未然に防ぐため、キャンセルや返品・交換、配達などに関する条件の明記が必要です。商品の使用感がわかる、充実した商品説明を掲載することや、「ご利用ガイド」や「よくある質問」ページを設けることで、利用客が安心して買い物ができるサイトづくりにも繋がります。
10. 購入完了までの手順を明確に
ユーザーが購入手続きに進むものの、購入完了までのステップが分かりにくい場合は、購入を断念してしまうケースが考えられます。このような状況を避けるためにも、進捗を表示するプログレスバーの設置で、購入者にとってフィニッシュラインを明確に示す対策を施しましょう。
Wix ストアをご利用の場合、購入時のステップが番号順で表示され、お届け先、配送方法、決済方法など分かりやすいレイアウトでスムーズに購入手続き完了できます。
売り上げを伸ばすためのECサイト運営のコツ
売上を伸ばしている EC サイトの特徴は、ショップの利用客が商品選定から購入完了までの一連の流れを円滑に進めることができるという共通点があります。それでは、ECサイトの売り上げを向上するために取り入れるべきポイントを具体的に解説していきます。
01. 動画コンテンツに注力
動画コンテンツ自体は目新しいものではありませんが、オンラインショッピングとの相性が良く、訪問者をより長い時間ページに引き留めておくことができます。また、買い物客にとっても、写真では伝わりにくい、商品のサイズ感や機能がわかる動画コンテンツにより、商品に対する信頼感が高まります。
動画コンテンツは、EC サイトのマーケティング戦略としても有利になります。動画を伴うオンラインストアは、 Google の検索結果で上位に表示される可能性が 高くなります。
02. ニーズを満たすコンテンツ
オンラインストアに使えるアイデアをいくつか紹介します。
よくある質問と回答 訪問者の質問は 、5～10 個の似たような内容に集約できます。それをサイトのページや動画コンテンツとして掲載しましょう。ベストセラー商品やサービスについては、質問と回答の動画を別途作成します。
商品の動画 その商品を主役にした動画を作成しましょう。このタイプの動画には、商品のデモンストレーション、商品の説明、使用動画などがあります。
顧客の声 顧客の感想を動画にすることで、ブランドを際立たせて信頼感を高められます。商品に満足した顧客による商品使用の体験談などは、より高い効果が期待できます。
社員の紹介 もう一つの優れたコンテンツは、ビジネスの舞台裏の紹介です。潜在的な顧客に、ブランドへの親近感や信頼感を与えられます。
03. ライブチャットやチャットボットを使ってリアルタイムで接客
ネットの買い物客は、年中無休のサービスを EC サイトに期待しています。そのため、ますます多くのサイトで、 Wix チャットやチャットボットを利用したカスタマーサポートが導入されています。
ライブチャットを活用すれば、買い物客の求めにその場で対応できます。これは、顧客との関係を構築するばかりでなく、売上の向上も期待できる優れた方法です。 Wix では、Wix Owner アプリを使ってチャットボックスのカスタマイズや動作時間の設定、クーポンの送付、外出先でのチャットなどが可能です。
一方、チャットボットは実際の人間を模倣する AI ソフトウェアプログラムです。自動化された、あるいは予測に従った応答を使い、顧客が音声またはテキストでサイトとやりとりできるようにします。チャットボットでは、ライブチャットがオフになっている時でも顧客の質問に答え、商品を販売できます。どのようなものであれ、ライブチャットやチャットボットによるタイムリーな応答とパーソナライズされたサービスは、買い物客の高い評価を集めています。
04. 複数の販売チャネルの活用
EC サイトの販売チャネルを決める場合は、ソーシャルコマースへと展開することも考慮しましょう。ソーシャルメディアのユーザーは全世界で 35 億人に上り、新しい顧客を獲得するチャンスはたっぷりあります。
ソーシャルメディアのプラットフォームはオンラインショッピングが手軽にできるようになっています。抜け目のないオンラインストアは Facebook、Instagram、Pinterest、X（旧 Twitter）を利用し、ちょっとのぞきに来た訪問者をワンクリックで買い物客に変えてしまいます。 Instagram は、買い物客がアプリを離れずに購入を済ませられる機能「Instagram Shopping」を導入し、EC 機能を強化しています。また、購入者の支払い情報を保存し、次回の買い物ではより迅速に購入できるようになっています。
自分の顧客が毎日利用している SNS の販売チャネルを選びましょう。これらのプラットフォームで一貫したブランド戦略を適用し、 E コマースを強化しましょう。最終的に目指すのは、ソーシャルネットワークからあなたのサイトでのチェックアウトに至るまで、統一感のある買い物体験を顧客に提供することです。
まとめ
ネットショップ運営では、常に新しい戦略を取り入れて、改善していくことが成長の近道です。ECサイトのマーケティング戦略についてもっと知りたい方は、カスタマージャーニーについての記事もご覧ください。
売上を伸ばすために取り入れたい EC サイトデザインのポイントは見つかりましたか？ EC サイト運営に欠かせない機能が揃った Wix のプラットフォームであなたの EC サイトを作成しましょう。豊富なネットショップテンプレートから好みのデザインを選択し、本格ネットショップの運営がすぐに始められます。
あわせて読みたい記事
編集者：Miyuki Shimose
SEO & ブログコンテンツマーケター
