売れるECサイトデザイン｜参考になるギャラリーサイトやデザインのポイントを紹介！
人の集まる売れるECサイトにするため、デザインにこだわりたい。しかし、デザインのことはよくわからないという企業担当者は多いはず。
そんな方に向け、売れるECサイトデザインの参考になるギャラリーサイトや、デザインのポイントを紹介していきます。
なお、ECサイト制作会社の探し方・選び方がわからない！という方はEC幹事にお気軽にご相談ください。貴社の目的・予算に合った最適な会社を厳選してご紹介します。相談料・会社紹介料などは無料です。
ECサイトデザインの参考にしたいギャラリーサイト7選
まずは、ECサイトデザイン制作の参考にしたいギャラリーサイトを7つ紹介していきましょう。
SANKOU!
画像出典：SANKOU!
「SANKOU!」は、Webデザイン制作の参考となる国内サイト、約3,200種類を集めたデザインギャラリー / リンク集です。ECサイト・オンラインショップ関連だけでも国内約190サイトを掲載。サイトの種類 / 特徴 / 業種 / テイスト / 色・配色 / 動き・ギミックなど、多彩なカテゴリーで目的のサイトを絞り込めます。
MUUUUU.ORG
画像出典：MUUUUU.ORG
「MUUUUU.ORG」は、縦長デザインを採用した国内外サイト、約4,800種類を集めたデザインギャラリー / リンク集です。ECサイト・オンラインショップのデザイン / リンクだけでも、約370サイトを掲載。業種 / タイプ / カラーのほか、フラットデザイン、タイポグラフィ、ミニマルなどのデザインタイプでも絞り込み可能です。
WebDesignClip
画像出典：WebDesignClip
「WebDesignClip」は、Webサイト制作の参考になる国内外サイト、約4,600種類を集めたデザインギャラリー / リンク集です。メイン / サブカラー、レイアウト、カテゴリーで目的のサイトを素早く探せるほか、ニーズに応じてタグ付けされた項目を検索するのも可能。ECサイト / オンラインショップタグでは、380サイト以上が掲載されています。
Responsive Web Design JP
「Responsive Web Design JP」はその名の通り、国内外の秀逸なレスポンシブデザインサイトを集めたデザインギャラリー / リンク集です。ECサイト・オンラインショップの掲載数は96とやや少なめですが、PC / タブレット / スマートフォンデザインを見比べられることが特徴。Angular、 BootStrapなど、利用ツールでデザインを絞り込むことも可能です。
I/O 3000
画像出典：I/O 3000
「I/O 3000」は、Webデザイン制作の参考になる国内外サイトを集めたデザインギャラリー / リンク集です。ECサイト・オンラインショップのカテゴリーでは、約220種類が掲載されており、やや海外サイトの比重が高い印象。シンプルかつスタイリッシュなECサイトデザインを採用したい方におすすめできるギャラリーサイトです。
ARTNOC.COM
画像出典：ARTNOC.COM
「ARTNOC.COM」は、クリエイティブかつクオリティの高いWebデザインを紹介することに特化したギャラリーサイトです。ただのリンク集ではなく、サムネイルクリックでサイトの全ページを閲覧できる仕様になっていることが特徴。ECサイト・オンラインショップは、国内を中心に約149種類を掲載しています。
EC幹事
画像出典：EC幹事
ギャラリーサイトではありませんが、EC幹事もECサイトデザインの参考になる国内サイトを、約147種類（2023年5月現在）紹介しています。業界・業種カテゴリーから適切な事例を探せるほか、紹介するECサイトは「トップページ」「商品一覧」「商品詳細」別に閲覧可能。ECサイト制作に関するノウハウ記事も発信しています。
売れているECサイトのデザイン例
ギャラリーサイトで紹介されている、スタイリッシュかつハイクオリティなECサイトデザインを参考にすることで、自社ECサイトのデザインクオリティも高めることが可能。しかし、ハイクオリティなデザインが「売れるECサイトデザイン」だとはいい切れないことも事実です。
それでは、実際に売上という結果を残しているECサイトは、どのようなデザインを採用しているのか？株式会社インプレスが実施した2022年版売上高調査「ネット販売白書」から、上位30位内にランクされたECサイトを、業種別に一部紹介していきましょう。
販売戦略や資本の違いも売上を形成する重要な要因ではありますが、デザインはECサイトのコンセプトを表すもの。「売れるECサイトデザイン」とはなにか？参考になるはずです。
参考：月間ネット販売
ヨドバシ.com（家電）
画像出典：ヨドバシ.com
自社型ECサイトとして、Amazonに次ぐ2位にランクされたのは、ヨドバシカメラが運営するオンラインショップ「ヨドバシ.com」です。家電ECサイトとしてもトップとなる、約2,100億円の売上高を記録。セール / 特集バナーの目立つファーストビュー（最初に目に見える領域）ですが、意外に余白を多く取ったスッキリ目のデザインが採用されています。
ユニクロ公式オンラインショップ（アパレル）
画像出典：ユニクロ公式オンラインショップ
ZOZOを除くアパレル・衣料品分野でトップに付けたのは、全体の6位にランクインした「ユニクロ公式オンラインショップ」です。ECサイトの売上のみでも約1,260億円を記録しており、今後もEC化率を高めていく方針。大胆な縦スクロールで見せたいものをアピールするだけでなく、欲しい商品にすぐたどり着けるわかりやすさが特徴です。
Oisix（食品）
画像出典：Oisix
食品分野のEC売上高でトップだったのは、食品宅配事業をメインにするオイシックス・ラ・大地株式会社。全体でも7位にランクされた売上高は約1,130億円を記録。その代表となるECサイトが「Oisix」です。スマートフォンでの閲覧を意識した縦長ページであるのが特徴。関連商材にスライダーを使うなどの工夫もされています。
ニトリネット（家具・雑貨）
画像出典：ニトリネット
家具・雑貨分野のEC売上高でトップだったのは、イオンに迫る716億円の売上高を記録したニトリでした。ファーストビューに特集を配置してお得感を演出しているほか、おすすめ商品、カテゴリ検索にも素早くアクセスできるデザインを採用。Instagramに投稿されたユーザーの声を紹介するなど、エンゲージメントを高める工夫もされています。
Dell Japan（PC）
画像出典：Dell Japan
全体の13位、PC分野のEC売上高トップだったのは、590億円の売上高を記録したDELL Technologies。余白を活かしたスッキリと見やすいデザインが採用されており、トップメニューから目的の商品へ素早くアクセス可能。固定されたファーストビューを定期的に変更することで、おすすめが一目でわかるようになっています。
Maison KOSE（化粧品）
画像出典：Maison KOSE
化粧品分野のEC売上高トップだったのは、全体の30位、365億円の売上高を記録したMaison KOSEです。DELLとは対照的に、カルーセルを活用したファーストビューを採用しているのが特徴。多種多様なラインナップを効果的にアピールし、クリック率を高めていこうという狙いがあると思われます。
売れるECサイトデザインは優れた商業デザイン
ここまでで、ネット販売白書の上位30以内にランキングされたECサイトのうち、業種別売上高トップのサイトを紹介してきました。しかし、必ずしも「スタイリッシュ」「おしゃれ」なデザインばかりではないことがおわかりでしょう。それはなぜか？ECサイトのデザインは「商業デザイン」にほかならないからです。
商業デザインとは、商業に関わるデザインのこと。ECサイトを例にすれば、販売する商品の売上を最大化、促進するためのデザインということです。つまり、商業デザインであるECサイトデザインには、必ず「対象となるエンドユーザーが存在」します。売れるECサイトデザインとは、ユーザーに「買いたい」と思わせる優れた商業デザインのことです。
UI / UXデザインとは
それでは、ECサイトデザインを優れた商業デザインにするにはどうしたらいいのか？そのヒントとなるのが「UI / UXデザイン」です。
User Interfaceの略称であるUIとは、ユーザーとプロダクト / サービスをつなぐ接点のこと。ECサイトであれば、写真・グラフィック / テキスト / ボタンなど、ユーザーが目にするすべてのものが「UI」です。
一方、User eXperienceの略称であるUXとは、プロダクト / サービスから得られるユーザー体験のこと。商品の写真がわかりやすかった、買いやすかったなど、ECサイト自体から得られるもののほか、購入した商品に満足したなども「UX」に含まれます。
つまり、顧客に優れた体験 / 価値（UX）を与えるにはどうすべきかをデザインすることがUXデザイン。デザインしたUXをどのように実現していくか、インターフェース（UI）をデザインすることがUIデザインです。UI / UXを念頭に置いておくことで、優れた商業デザインとしての売れるECサイトデザインを実現できます。
売れるECサイトデザインのポイント
アートとは明確に異なる「商業デザイン」「UI / UXデザイン」には、目的達成に向けた一定のセオリーがあります。売れるECサイトをデザインするには、このセオリーを押さえておくことがポイント。基本的なことだけを簡単に紹介しておきましょう。
情報の整理・グルーピング
優れたUXを持つUIの特徴は、ユーザーにとってわかりやすいこと、直感的に操作できること。つまり、どこにどのような情報があるのか、ユーザーが一目で把握できるように、情報を整理すること、不要な情報を削除すること。さらに、属性の同じ情報はそれぞれをグルーピングしておくことが、売れるECサイトデザイン最初のポイントです。
購入までの導線
商業デザインの目的は、ECサイトに掲載する商品の販売を最大化すること。そのためには、最短距離で購入できるよう「導線」を工夫することがポイントです。具体的には、ユーザーが途中で離脱してしまわないようにすること。見たい情報にすぐたどり着けること。
たとえば、取扱商品の多いMaison KOSEは、おすすめ商品をカルーセルで表示しながらファーストビューに変化を持たせ、ユーザーの興味を惹いています。すぐ下にはトピックごとにカテゴリー分類されたリンクが用意されており、目的の商品に素早くたどり着けるようレイアウトも工夫されてい
ます。
スマートフォンファースト
PC向けも重要ではありますが、ECサイトデザインはスマートフォンファーストで考えることもポイント。なぜなら、ECサイトユーザーの利用デバイスは、スマートフォンがPCを上回っているから
です。
スマートフォンに最適化されたECサイトデザインは、SEO面でも有利に働くため、効果的な集客 / マーケティング施策も展開できます。
ユーザーの反応を見て改善する
同じ商業デザインでも、パッケージなどと異なり「デザインの変更 / 修正が容易」であることがECサイトデザインの特徴。ユーザーデータを収集しやすいのもECサイトのメリットです。よく見られているのはどこか？どこで離脱しているのか？収集したデータからユーザーの反応を分析し、随時ECサイトデザインを変更 / 修正していきましょう。
商業デザインのスキル
一定のセオリーがあるとはいえ、ECサイトデザインの完成度を高めるためには、商業デザインの知識・スキルが必要です。試行錯誤しながら自身の手で完成度を高めていく方法もありますが、成果を得られるまでに時間がかかってしまいます。
UI / UXの知見がある制作会社にECサイトデザインを任せ、集客 / マーケティングに専念することで、成果を得るまでの時間を短縮するのも方法のひとつです。
ECサイトデザインに定評のあるおすすめ制作会社
最後にECサイトデザインに定評のある、おすすめ制作会社を紹介しておきましょう。売れるECサイトを実現するため、デザイン面を強力にサポートしてくれるはずです。
株式会社アライバルクオリティー
画像出典：株式会社アライバルクオリティー
株式会社アライバルクオリティーは、東京都渋谷区を拠点とするクリエイティブエージェンシーです。Webサイト / ECサイトデザインをはじめとした「クリエイティブデザイン」、戦略立案、セールスプロモーションなどの「マーケティングデザイン」を組み合わせた、「売るためのストーリーをデザイン」できることが特徴。
グラフィックデザイン、パッケージデザイン、ブランディング、コンテンツマーケティングなどに幅広く対応するため、トータルな視点でEC事業をサポート可能です。
コマースメディア株式会社
画像出典：コマースメディア株式会社
コマースメディア株式会社は、東京都豊島区に本社を構えるShpify Plusパートナー認定制作会社です。戦略策定 / デザインを含むECサイト構築はもちろん、サイト更新、運営・受注 / 物流 / カスタマーサポート代行を含め、EC事業の全業務をワンストップで依頼可能。各種コンサルティングや越境ECのサポートも提供しています。
同社が得意とするのは、パートナーでもあるShopify構築ですが、その他の自社EC、ECモールの構築・運営にも対応。ECサイトを自社運営するノウハウを活かした、売れるECサイトをデザインしてくれます。
株式会社askme
画像出典：株式会社askme
株式会社askmeは、大阪市西区に本社を構える制作会社です。Shopfy、makeshop、カラーミーショップなどの自社ECサイト制作だけでなく、楽天市場、Yahoo!ショッピングなどのECモール出店サポートも提供。1,500店以上のECサイト制作をサポートした実績を持ち、サイト更新、メルマガ配信など、豊富なノウハウを活かしたサポートも提供しています。
企画・サイト設計からECサイトデザイン・構築までをパッケージングしたプランのほか、トップページデザインのみなど、個別の依頼にも対応できます。
売れるECサイトデザインのポイントを紹介しました
人の集まる売れるECサイトにするため、デザインにこだわりたい。しかし、デザインのことはよくわからない。そんな企業担当者の方に向け、ECサイトデザインの参考になるギャラリーサイトや、デザインのポイントを紹介してきました。
ブランディングの観点からも、スタイリッシュで人目を惹くデザインは重要ですが、ECサイトデザインでなによりも重要なのはユーザビリティ。どちらも両立させることは簡単ではありません。自分でデザインするのは難しい、そう感じた方なら、UI / UXデザインに強みのある制作会社へ依頼することがおすすめです。
なお、ECサイト制作会社の探し方・選び方がわからない！という方はEC幹事にお気軽にご相談ください。貴社の目的・予算に合った最適な会社を厳選してご紹介します。相談料・会社紹介料などは無料です。
