BLOG MENU

【最新版】ECサイトのデザインポイントとトレンド｜参考事例15選もご紹介

ECサイトのデザインには見た目と機能性が求められます。いくらサイトの感じがよくても欲しい商品が簡単に見つからなかったら、買ってもらえませんよね。

しかしどんなデザインがユーザーに好まれ、商品の購入率が高くなるのか、具体的に想像はつきにくいのではないでしょうか。

本記事では、ECサイトを運営する企業のご担当者様向けに、ECサイトのデザインで押さえるべきポイントについて解説します。ポイントだけではピンとこないと思いますので、デザインが秀逸なECサイトも15個挙げました。これらを参考に、ECサイトのデザインを検討してみてください。

ではいってみましょう。

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

ECサイトにおいてデザインが重要なのは、「見づらい」「探しづらい」「どんなお店かわからない」の3つの問題を解決するからです。

サイトに訪れたユーザーは自分に関係のあるお店かどうかを一瞬で判断し、「Yes」なら商品や情報を探し始めます。購入までの過程で見たい商品がなかなか見つからなかったり、見つかっても今ひとつだったりしたら、購入に至らず離脱されてしまいます。

商品の魅力を伝えるテキストや写真も見せ方次第。どうやって見せるかで、ユーザーの行動は変わります。ゆえにデザインが重要なのです。

ECサイトのデザイントレンド【事例5つ】

ECサイトのデザインにもトレンドがあります。デザイン制作の参考になりますので、2023年現在のトレンドを5つ紹介します。

大きなタイポグラフィ

「大きなタイポグラフィ」は、大きな文字を使ったインパクトのあるデザインが特徴です。

WebサイトのTOPページに、ブランド名やブランドメッセージ、キャッチコピーを大きく表示させます。参考サイトは「DDD HOTEL」です。

最適なフォントとインパクトのあるフォントサイズで、ブランドメッセージや商品名をユーザーに瞬時に伝えられるほか。メッセージでオリジナリティを演出することもできます。

アニメーション

アニメーションを使ったデザインも近年のWebサイトのトレンドの一つです。

例えば、背景アニメーション。いろいろなタイプがありますが、最近は「画像かと思ったら、動いた！」というくらいゆっくりと動くものをよく見かけます。動きに変化をつけることでユーザーの視線が止まるため、即時離脱を防止しスクロールしてもらいやすくなります。またおしゃれで先進的な印象を与えることも可能です。

参考サイトは「BLANC HONEY」。背景が多層的にふわふわと動くので、思わず見てしまいます。商品の特徴が視覚的に一瞬で理解できるのも特徴的です。

ミニマルデザイン

シンプルなデザインとして、トレンドになっているミニマルデザイン。余白を多くとることで情報に目がいきやすくなります。

余白の多いデザインは、高級感やスタイリッシュさを表現できる一方で、シンプルにしすぎるとユーザーが困惑してしまう原因になるため、計算されたシンプルさが重要です。

参考サイトは「HELENUS」。文字は少なく、画像は大きく、余白が大胆にとってあり高級感を感じさせます。

スプリットスクリーンレイアウト

スプリットスクリーンレイアウトとは、画面を左右に分割したデザインです。たとえば、右半分は画像や動画・左半分はキャッチコピーやブランドメッセージを表示したデザインです。

参考サイトは「Salanaru」。こちらのサイトは、スクロール時の動き方が画面の左右で違います。他にはないデザインで、「高級感」「唯一無二」といった印象を与えています。

手書き風のデザイン

手書きの温かみを取り入れたデザインもトレンドの一つです。手書き風のフォントやイラストを使って、親しみやすさをアピールできるメリットがあります。

参考サイトは「BROWN CHEESE BROTHER」。手書きの効果を活かして、絵本のようなサイトに仕上がっています。「手書き風」は家庭をイメージする企業などによく取り入れられるデザインですが、あえて親しみにくいものに取り入れることで、柔らかい雰囲気を狙うこともあります。

デザインが参考になるECサイト10選

デザインの参考にしたいECサイトを10個紹介します。デザインを検討する際は、他のECサイトを参考にすることも有効です。ぜひデザインにお悩みの方は、チェックしてみてください。

IBIZA

IBIZAは創業から50年以上、サステナブルなバッグの企画、製造、販売を行っています。

ECサイトはシンプルなレイアウトで、商品の上品さや質の良さを引き立てます。ブランドメッセージをコンテンツだけでなくデザインで発信しながら、ユーザーがショッピングしやすいレイアウトであるのが特徴です。

こちらのECサイトは、クーシーがブランドサイトとECサイトの統合・リニューアルを担当しました。制作の詳細はクーシーの制作実績でご覧ください。

MEGLY

MEGLYは、HEALTH、BEAUTY、HYGIENEでブランドを展開するMTGのセルフケアブランドです。

PCサイトのファーストビューには、スプリットスクリーンレイアウトを採用。商品とそれを使う人の表情の写真をセットで使って、効果的にユーザーの目をひきつけるファーストビューになっています。

動画、アニメーション、イラストなどをセクションごとに使い、見る人の目を止める工夫が随所に見られるほか、おしゃれさとポップさが同居しているのも特徴的です。

SANGI SHOP

株式会社サンギが運営するアパガード公式通販オンラインショップです。

こちらのサイトは、商品写真に注目してください。シンプルなものからイメージを演出するものまで、商品単独の写真がかなり多く使われています。ECサイトにおける、品質の高い写真の重要さがわかるサイトです。とくにECサイトでは物撮り写真は妥協せず、プロに依頼しましょう。

犬猫生活

「犬猫生活」は、ペット関連商品の企画・製造・販売する株式会社犬猫生活が運営するECサイトです。現在の代表が1匹の野良猫を保護したことで始まった会社で、すべての動物とそのご家族が幸せになるお手伝いをしています。

こちらのECサイトは、ひとことで言えば「つかみがすごい！」です。トップページのファーストビューはゆったりとした波線が右から左へ流れていくアニメーション。その上をペットとご家族が写った写真がスクロールとともに流れていきます。

ペットと過ごすかけがえのない時間を連想させるファーストビューは、そう思っている人の心をぎゅっと掴むでしょう。ECサイトで重要な「共感」を生みやすいデザインです。

SOGA FARM（曽我農園）

雪国・新潟のトマト産地でフルーツトマトを作る農園「SOGA FARM（曽我農園）」のECサイトです。

こちらのサイトはフォントと色の使い方が商品とマッチしています。まずはフォント。和文は明朝系、欧文はセリフ系のフォントが主に使われていますが、これが「丁寧さ」や「冬の厳しさ」を連想させます。色はベースカラーが白で、トマトの赤がよく映えると同時に、新潟の雪を思い出さずにいられません。

そもそも夏のイメージが強いトマトが、「越冬」「新潟」といった言葉と組み合わさっていたら否が応でも興味を掻き立てられます。そんなユーザーが持つであろうイメージにマッチしたデザインになっており、違和感なく見ることができるサイトです。

CIRAFFITI

CIRAFFITIは、鳥取発のノンアル・ローアルコールクラフトビール専門ブランドです。下戸の立場からすると、「シラフでセカイを塗り替える。」のキャッチコピーのウキウキ感がたまりません。

こちらのサイトは、とにかく「楽しさ」と「軽やかさ」を感じられるようにデザインされているように思います。ノンアル・ローアルビールを飲む楽しさがビンビン伝わってくる写真。スクロールは軽すぎて思っていたよりかなり行き過ぎてしまうのですが、これも楽しさや軽やかさの演出に見えます。ビールの味より、飲んだ後の世界を想像させるサイトです。

那須塩原湯守田中屋

湯守田中屋は創業明治17年、那須塩原の歴史ある温泉宿です。そんな背景があるとは思えないほどポップなオンラインショップになっています。

田中屋の公式サイトは、いかにも老舗の温泉旅館といった落ち着いた雰囲気です。そこから180度イメージが違うこちらのサイト。田中屋を知らなくて、ネットに親和性の高い若い世代の女性がターゲットになっていると思われます。

イラストとアニメーションを使っていることそのものは、ポップさの要因ではありません。それらが適切にチューニングされているからポップに見えるのです。Webサイトのイラストの作り方については、こちらの記事をご覧ください。

Webサイトで使うイラストの制作フローと依頼のポイントをWeb制作会社が解説します

粥粥好日

粥粥好日は株式会社ドットミーが運営するオンラインショップです。日本では療養食として位置付けられてきたお粥を、ワクワクする日常食にアップデートして提供しています。

色を見れば誰がターゲットかわかるほど、可愛らしいカラーリングです。グリーンは彩度低め、明度高めの柔らかい色で、比較的はっきりした色合いのピンクがアクセントとして効いています。手軽なのに健康。健康なのにおしゃれ。従来のお粥のイメージをガラリと変えるデザインで、食べるといいことありそうな気分にさせてくれるサイトです。

moln

moln（モルン）は、franky株式会社が手がける一人ひとりの旅を作るためのブランドです。このオンラインショップでは、1種類のスーツケースをメインで扱っています。他は仕分け用のケースだけです。

高級品を扱うオンラインショップを作るなら、真似したいところがたくさんあるサイトです。とにかくすべてが削ぎ落とされてシンプル。商品点数、文字数、写真、ロゴまでもがミニマルにまとまっています。余白の取り方やアニメーションの付け方も参考になるはずです。

minacolor

minacolor（ミナカラ）は、株式会社ミナカラが運営する日常医療のオンライン薬局です。

こちらのサイトは、一般の薬局と同様に取扱商品が非常にたくさんあります。これをいかに迷わせないでユーザーに届けるか。minacolorでは、「カテゴリー」「からだの部分」「製薬メーカー」などの切り口で、ユーザーが希望の商品を探せるようにしました。サイト内検索や薬剤師へのオンライン相談もあります。どれかを使えば、希望のお薬に辿り着けるでしょう。

項目数が多い「からだの部分」は、アイコンを使ってひと目でわかるように表示されています。ユーザー目線で情報がデザインされたサイトです。商品点数が多いサイトを作るときの参考になります。

ECサイトデザインの基本

ECサイトをデザインする際は、これから紹介する4つのポイントを心がけてみてください。

シンプルなデザイン

ユーザーにストレスなくショッピングをしてもらうために、わかりやすさと見やすさを考えてシンプルなデザインにします。

シンプルなデザインとは、以下の条件を満たすものです。

文字や装飾が少ない
情報が整理されている
ほしい情報に迷わずたどり着ける

シンプル＝No ストレス。シンプルなデザインはユーザーの滞在時間を伸ばし、購入率も向上させるでしょう。個性的すぎるデザインよりもシンプルなデザインが断然おすすめです。

魅力的な商品写真

ECサイトで商品を購入するユーザーは、実物を手に取り質感や重さ、大きさを実感することができません。購入した商品がイメージと違ったらどうでしょう。お客様をがっかりさせてしまうだけでなく、返品やクレームにつながることもあります。

安心して気持ちよく買い物を楽しんでもらうためにも、商品写真の品質にはこだわりましょう。購入後の様子がイメージしやすい使用時の写真も効果的です。

では、どうやって魅力的な商品写真を用意すればいいのか？　それは「物撮りのプロ」に依頼するのが一番確実で早いです。もちろん費用は発生しますが、それ以上の価値があるのは、こちらの記事を読むとわかりますのでどうぞ。

「物撮り」のプロに聞く！ECサイトの商品撮影で役立つ8つのポイント

購入までの導線

買いたいと思った時に購入ボタンがさっと見つからなかったら、ユーザーは購入せず離脱してしまいます。ユーザーにストレスを感じさせず、スムーズにショッピングできるように導線を考えてデザインしましょう。

スマホからの見やすさ

スマートフォンの画面サイズに対応したサイト作りは必ず行ってください。スマートフォンからインターネットを利用する人が確実に増えているからです。

総務省が発表したデータによると、68%の人がスマートフォンからインターネットを利用しています。このデータからも、スマートフォンでの見やすさがいかに重要かわかります。
参考：令和３年通信利用動向調査の結果

購入までを意識したデザインのコツ

「購入してもらうこと」を意識してデザインするとき、押さえるべきポイントは以下の4つです。

ターゲットを明確にする
ファーストビューを意識する
ボタンのデザインにこだわる
オリジナリティを出す

ターゲットを明確にする

ECサイトに来てほしい層（ターゲット）を明確に設定します。ターゲットを絞らないと、採るべきデザインが決まらないからです。

男性と女性で、全体のトーンや好みのカラー、使用する画像は変わります。年代によっても変わってくるでしょう。属性だけでなく、ユーザーが抱える問題意識や悩みもあわせて考えると、よりはっきりとターゲットが見えてきます。

ターゲットを設定する際には、過去の顧客もヒントになります。購入やお申し込みなどのゴールに至ったのがどんな人かわかれば、ターゲットの傾向がつかめます。ゴールの手前まで来て離脱した人からは、顧客になりそうな人の特徴がわかるはずです。

ファーストビューを意識する

ECサイトに訪れたユーザーが最初に目にするのがファーストビューです。ほぼ100％のユーザーが見る部分なので最重要のパートと言ってもいいでしょう。

重要と言えるもう一つの理由は、ユーザーがECサイトに止まるかどうかを判断するポイントになるからです。ファーストビューを見て「あ、違うな」と思ったら、3秒で離脱されてしまいます。

購買へつながるはじめの一歩として、ECサイトに訪れたユーザーにまず「サイトを見てみよう！」と思ってもらうために、ファーストビューのデザインは重要です。

ボタンのデザインにこだわる

購入ボタンは、購入率を左右する重要なポイントです。デザインや文言のわずかな違いでクリック率が大きく変わることもあります。

たとえばボタンに使用する色は、一般的に緑や青の購入率が高くなると言われていますが、それが正解とは限りません。いろいろ試して、一番結果が良かったものが正解です。文言や形、大きさについても同様に、一つずつ変えてテストしてみてください。

オリジナリティを出す

ブランディング効果を狙うなら、オリジナリティを出すことも忘れずに。ただし、シンプルなデザインとのバランスには気をつけましょう。オリジナリティにこだわりすぎてユーザーの利便性を損ねては意味がありません。

オリジナリティの出し方としては、「商品やブランドの想いを掲載したページを作る」「ブランドカラーを活用する」といった方法があります。

まとめ

ECサイトのデザインは、ユーザーの購買意欲を高める重要なポイントです。シンプルを基本にしつつ、商品購入までの導線を考えてデザインしてみてください。

デザインを考える際は、他のECサイトを参考にすることもおすすめです。今回紹介したECサイトを参考に、ブランドの世界観をユーザーに伝えられるデザインを考えてみてはいかがでしょうか？