売れるECサイトのデザインとは？トレンドやコツ、ギャラリーサイトを紹介

2022/06/10

ECのミカタ編集部

年々EC事業に参入する企業は増えており、ECサイトのデザインでいかに差別化が図れるかが重要なポイントとなっています。ただし、見た目がよいだけで使いづらいECサイトでは売上を伸ばすことはできません。
トレンドのデザインを取り入れつつ、購入までの導線がスムーズなECサイトを目指しましょう。
また、自社での構築が難しい場合は、Web制作会社に依頼するのがおすすめです。
今回紹介するギャラリーや制作会社、デザイン事例を参考に、自社商品を魅力的に伝えられるECサイトのデザインを考えてみてください。

ECサイトにおけるデザインの重要性

ECサイトにおけるデザインは、ユーザーの目に最初に触れる部分であり、さらにサイト内の利便性を大きく左右する要素となります。たとえどんなに優れた商品を扱っていても購入ボタンがわかりづらかったり、そもそも商品が見つけられなかったりする場合、購入には至りません。
また、一見おしゃれにみえるECサイトでも、利便性の悪さが原因で売上が伸び悩むこともあります。
逆にユーザーにとって使いやすく、購入したくなるようなECサイト設計・デザインであれば、それだけで売上が伸ばすことが可能になります。

売れるECサイトのデザインの特徴

「おしゃれなECサイト」と「売れるECサイト」は必ずしも同じではありません。見た目だけを考えて作ったとしても、ユーザーにとって使いづらければ購入されない可能性が高まります。
そこで踏まえておきたいのが、売れるECサイトのデザインの特徴です。
以下に売れるECサイトのデザインの特徴を3つ挙げるので、ぜひ自社サイトに取り入れてみましょう。

情報がシンプルにまとまっている

売れるECサイトのデザインの特徴1つ目は、情報がシンプルにまとまっていることです。情報がバラバラに配置されてユーザーが欲しい情報をすぐに見つけられない場合、すぐに離脱されかねません。
以下のポイントに気をつけて、ECサイト内の情報を整理しましょう。
・関連する項目をカテゴリに分ける
・カテゴリ分けを明確にする
・それぞれの項目を規則的に並べる
・無駄な情報を省く

情報がシンプルにまとまっていることでユーザーは「どこに何があるのか」や「どのように購入すればよいのか」が直感的にわかるようになります。
一目でわかりやすく、情報がすっきりと整理されたデザインは、ユーザーのストレス軽減につながります。

PCでもスマートフォンでも見やすい

売れるECサイトのデザインの特徴2つ目は、PCでもスマートフォンでも見やすいことです。
2020年に総務省が発表した「令和元年通信利用動向調査*」では、インターネットを利用している世帯は約9割、スマートフォンを保有している世帯は8割以上、さらに個人で保有している割合は67.6%で今後も増加が見込まれるとのこと。
今やPCよりもスマートフォンをメインデバイスにしている人が多いことが、この調査結果からうかがえます。
*参考：https://www.soumu.go.jp/menu_news/s-news/01tsushin02_02000148.html">https://www.soumu.go.jp/menu_news/s-news/01tsushin02_02000148.html

しかし、PCと同じ画面がスマートフォンに表示されると、文字が小さすぎたり画像サイズが大きすぎたりして、ユーザーにとって見やすいとはいえません。
どのデバイスからアクセスしても画面サイズに最適化する「レスポンシブデザイン」を採用するなど、PC・スマートフォン・タブレットのすべてに対応するECサイトを作ることが大切です。

購入までの導線がスムーズ

売れるECサイトのデザインの特徴3つ目は、購入までの導線がスムーズであることです。購入率（コンバージョン率）は、「いかに自然に購入への流れを作れるか」というECサイトのメイン導線によって変化します。
しかし、以下のような場合、ユーザー離脱の原因になります。
・導線が複雑で操作が難しい
・興味のある情報が表示されない
・期待した情報が載っているページが表示されない

商品ページからカート操作、決済完了まで導線のステップをできるだけ減らして、ユーザーが簡単に操作できるようなデザインを意識しましょう。

おしゃれなECサイトで取り入れられているトレンドデザイン

Webデザインの流行は技術の進化や世界的な状況、多くのユーザーが求めるものによって変化します。時代の流れに沿うためにも、自社の好みだけでなくトレンドデザインを取り入れてみるのもよいでしょう。
ここからは、おしゃれなECサイトで取り入れられているトレンドのデザインを8つ紹介します。

3Dデザイン

これまでのECサイトのデザインは、2D（平面）が一般的でした。しかし、3Dを使った立体デザインが2021年の大きなトレンドとなり、今後も注目のデザインとなることが予想されます。
3Dデザインを採用することでより”リアルさ”が増し、特別な世界観を作り出すことが可能になります。クオリティの高い3Dデザインはブランドイメージの向上につながり、自社ECサイトの信頼や信用の獲得にもプラスに働くでしょう。

ミニマルデザイン

ECサイトにおけるミニマルデザインとは、無駄な装飾を一切省いたシンプルなデザインを指します。ミニマルデザインに決まったルールはありませんが、メッセージ性を高めるために構成する要素を最低限に絞り込みます。

ECサイトの空間を美しく作り出し、視覚的な芸術性を感じさせることが大切なため、アクセントとなる色使いを最小限にとどめましょう。
ミニマルデザインをECサイトに採用する場合は、伝えたいメッセージを事前に明確にしておくことが大切です。

スプリットスクリーン

スプリットスクリーンとは、画面を大胆に分割するレイアウトのことで、「分割スクリーンレイアウト」や「分割式レイアウト」とも呼ばれています。
一般的なECサイトは横幅いっぱいに情報が表示され、下にスクロールすることで次の情報があらわれる作りですが、プリットスクリーンは1つの画面を左右に分け、それぞれに違う要素を配置します。
スプリットスクリーンで左右のコントラストをうまく利用すれば、ほかのサイトにはないインパクトを残すECサイトに仕上がるでしょう。

パララックスアニメーション

パララックスアニメーションとは、スクロール動作によってデザインを動かしたりアニメーションさせたりする視覚的な演出のことです。ユーザーの動き（スクロール）に合わせてコンテンツが動くため、「次は何が表示されるのだろう」と積極的にスクロールしやすい環境が作れるでしょう。
パララックスアニメーションを効果的に使うことで注目させたい部分に興味を引きつけられ、訴求したいポイントの強調にも役立ちます。ただし、処理によってページの表示速度が遅くなることや、コストがかかるといったデメリットがあります。

ニューモーフィズム

ニューモーフィズムは、「New（ニュー）」と「Skeumorphism（スキューモーフィズム）」を組み合わせた造語で、2020年初頭あたりから注目されているWebデザインです。
凹凸によって要素を表現するため、主張しすぎない控えめなデザインに仕上がります。
また、ミニマルデザインとの相性がよく、洗練されたイメージを作ることが可能。ただし、凹凸と少ない配色のみでデザインが決まるため、ユーザビリティが低下しないような配慮が必要です。

アブストラクトアート

アブストラクトアートは、抽象図形を用いた芸術作品のことです。線や四角形、円形などの単純な図形にうねりを加えたり配色を工夫したりと、さまざまな動きをつけることで印象に残りやすいECサイトを作ることが可能です。
ただし、アブストラクトアートのみを利用したECサイトは、シンプルすぎてデザインが単調に見えてしまうかもしれません。
アブストラクトアートを採用するときは構図や配色を工夫し、モード・スタイリッシュ・エネルギッシュ・華やかなど、ECサイトのコンセプトにあうイメージを作ることが大切です。

レトロモダン

懐かしさと新しさを融合させた、レトロモダンデザイン。一見時代に逆行しているかのように感じさせる古めかしいデザインは、現代のデジタルと組み合わせることでノスタルジアな世界観を作るのに有効です。
具体的には1980〜1999年頃の配色や装飾が取り入れられることが多く、いかにスタイリッシュかつユーザビリティの高いかが重要なポイントとなります。

手書き風テキスト

人の手で作られたぬくもりを感じさせる、手書き風テキストも人気の高いデザインとなっています。コンピューターグラフィックスを用いて作られたフラットな文字ではなく、アナログな印象を与えたいときに重宝します。
ペンや筆で描いたような味のあるタッチは、ユーザーに親しみを与えられるでしょう。
また、現在は手書き風イラストやアイコンも人気が高く、アニメーション表現と組み合わせることでよりトレンド感を実現できます。

デザインの参考にしたいギャラリーサイト

最近ではEC事業に力を入れている企業も多く、デザインにこだわっているケースも少なくありません。
自社のECサイトをクオリティの高いものに仕上げるためにも、他社サイトがどのようなデザインを取り入れているかチェックしておきましょう。
（以下で紹介するWebサイトの掲載数はすべて2022年3月現在の数値です）

MUUUU.ORG

MUUUU.ORG（ムーオルグ）は、Webデザインポータルサイトです。現場レベルで参考にしやすい「縦に長くオーソドックスなレイアウト」で、なおかつデザインが優れているサイトを厳選して掲載。
約4,300件のWebサイトが登録されており、カテゴリが細かく分けられているため検索もスムーズにおこなえます。
ECサイトのデザインを表示させたいときは、カテゴリの「TYPE」から「ECサイト」を選びましょう。

SANKOU!

SANKOU!は日本のWebサイト、LP、コンテンツページを集めたギャラリー・リンク集です。国内のWebサイト約2,700サイトが登録されており、あらゆるデザイン事例を閲覧できます。
SANKOU!は、サムネイルをリンクとして設定し、画像とサイト名のみを配置するシンプルな設計。日本のWebサイトを参考にしたい人は、チェックしてみるとよいでしょう。

1guu

世界中のクオリティが高いWebサイトを集めている1guu。各Webサイトの印象を一覧で見られるよう、サムネイル上にアニメーションをつけてイメージがつかみやすいように設計されています。

わざわざ各Webサイトにいかなくても、1guu内でどのようなデザインかを確認できるのがメリット。国内外問わず、あらゆるジャンルのWebデザインをチェックしたい人におすすめのギャラリーです。

S5-Style

S5-Styleは8,000以上のWebサイトを集めている、Webデザイナーのためのギャラリーサイトです。掲載中のWebサイトはコンテンツのプランニングや設計、UI、インタラクションなどあらゆる角度から選定されています。
カテゴリ分けは細かく、サイトタイプ以外にもサービス内容や色、テクニックなどで検索可能。S5-Styleには、ハイクオリティなECサイトが350件以上登録されています。

I/O3000

I/O3000は、国内外のWebサイトが登録されているギャラリーサイトです。カテゴリ以外にもタグや色、年代から検索可能で、サイトスピードが速くサクサク動作します。
日本だけでなく海外のWebデザインを参考にしたい人や、世界のトレンドデザインを参考にしたい人はチェックしてみるとよいでしょう。

ECサイトのデザインを得意とする制作会社

ここからは、ECサイトのデザインが得意な制作会社を紹介します。
Webサイト制作の外部委託を検討している人は、ぜひ参考にしてみてください。

株式会社AROUND

株式会社AROUNDは、美容コスメ領域に強みをもつ制作会社です。クリエイティブ・マーケティング・Eコマースの3つの軸を中心に、ニーズをつかむコンセプトデザインを提案してくれます。
企画から制作まで一貫してプロジェクトチームがおこなってくれるため、自社ブランドのイメージをECサイトで表現できるでしょう。また、楽天やYahoo、Amazonなどのモール型Eコマースのショップ開設や運用を任せることも可能です。

ボクブロック株式会社

ボクブロック株式会社は、国内シェアNo.1のEC-CUBEを用いたECサイト構築をおこなっています。さらに保守・集客・企画・コンサルティングなど、サイト構築後も幅広く相談できます。
EC-CUBE公式のインテグレートパートナーのプラチナランクに認定されていることや、約10年で500件以上の構築実績があることから、安心できる制作会社といえるでしょう。

コマースメディア株式会社

Shopifyでの制作実績が豊富なコマースメディア株式会社。ECサイト制作から運営、受注代行、物流代行までトータルでサポートしてくれます。

EC全般に精通しているため、EC事業全体を任せることが可能。Shopifyは越境ECにも完全対応しているため、海外展開も視野に入れている人はチェックしてみるとよいでしょう。

ECサイトのデザイン事例

ここでは、ECサイトのデザインで参考になるサイトを5つ紹介します。
実際に他社のECサイトではどのようなデザインが使われているのかを見て、イメージを膨らませてみましょう。

【アパレル】TOMMY HILFIGER

TOMMY HILFIGERは、非現実なモードの世界観を日常に楽しめるスタイルに落とし込んだ、世界中で人気のデザイナーズブランド。トップページではシンプルな情報のみを掲載し、無駄な要素を排除しています。
TOMMY HILFIGERのイメージカラーである、白・ネイビー・赤を配色し、ポップアップを自然に表示させるなど、ユーザーの興味を引くサイトデザインとなっています。

【アパレル】ARGIS

ARGISは日本の革靴・レザーシューズブランドです。ECサイトにはミニマルデザインが採用されており、無駄な装飾のないシンプルな構成となっています。
また、レザーの質感がわかりやすい画像からも、商品のこだわりを感じることができるでしょう。商品のターゲットにマッチしたWebデザインで、サイト全体の統一感がブランドイメージを作り上げています。

【食品】Mr.CHEESECAKE

Mr.CHEESECAKEは、販売開始から数分で完売するほど人気のチーズケーキ店です。オンラインショップはブランドイメージが統一された世界観で、必要な情報のみが簡潔にまとめられており、無駄のないすっきりとしたレイアウト。
また、オンラインギフトページではLINEやメールで簡単に贈り物ができたり、Instagramストーリーで使えるGIFスタンプを発行したりと、集客戦略も参考になるECサイトです。

【食品】RINGO

RINGOは、カスタードアップルパイ専門店です。トップページのメインビジュアルには画像上に動画ボタンを重ねて配置し、再生すると商品イメージが動きで伝わるようにレイアウトされています。
サイト全体を通して文字やアイコンの動きが多く、ユーザーの遊び心をくすぐるデザインといえるでしょう。

【コスメ】ASUR

ASURは、リップバームと香水の2Wayコスメを販売するブランドです。トップページにはモザイク部分が徐々に切り替わるアニメーションと、2つのイメージ画像を横に配列するスプリットスクリーンが採用されています。
ASURのように1つだけの商品を売りたい場合、ファーストビューにリンクをつけた商品画像を配置し、購入導線を簡略化するのも効果的と考えられるでしょう。