ECサイトのデザインは、商品の売上を左右するといっても過言ではないため「どのようなデザインにすればいいのか」と悩む方も多いと思います。そこでこの記事では、ECサイトのデザインで重要なポイントや、具体的な作り方のコツ、参考になるECサイトのデザインの実例をご紹介します。
以下のデザインのコツを活かして、売れるサイトを作りましょう。
ECサイトはおしゃれに作ればみんな買ってくれるんじゃないかな？
いえ！おしゃれさも大切ですが、他にも大切なポイントがあります。
売れるサイトにするコツをお伝えしますね。
目次
ECサイトのデザインとは何？なぜ重要かも解説！
ECサイトのデザインとは、サイトを構成する要素や見た目を設計することです。
ユーザーが初めてショップに訪れた際、魅力的なデザインであれば興味を持ち、さまざまなページを見て長時間滞在してくれます。
また、ショップのデザインはブランドイメージを印象付けるものなので、商品のターゲット層へ自社のコンセプトをデザインで訴求することができます。
実際に商品を手に取れない分、デザインは商品のイメージや魅力を補足していく役割があるため、ECサイトのデザインは重要なのです。
WebサイトとECサイトの違い
Webサイトとは、複数のWebページが集まっているもののことです。
Webサイトとホームページはほとんど同じ意味で使われていますが、実はホームページはWebサイトの中でも、TOPページのことを指します。
そしてWebサイトが複数のWebページの集まり全般を指すとすると、ECサイトは「商品の売買ができるWebサイト」なので、Webサイトの一種といえるでしょう。
なお、Webサイトには他にもコーポレートサイトやオウンドメディアなどがありますが、最近ではオウンドメディアとECサイトが一緒になったメディアECも増えてきています。
ECサイトのデザインでは特にUIとUXが重要
Webサイトの中でも「商品を購入してもらう」という明確な目的があるECサイトにおいては、ユーザーが買い物しやすいよう、UIとUXを意識したデザインが重要です。
UIとはユーザーインターフェース（User Interface）を略した言葉で、ユーザーとサービスの接点のことです。
ECサイトでいうと、サイトの見た目（全体的なデザイン）はもちろんのこと、押しやすいデザインのボタン、読みやすいフォントなど、ユーザーが触れるすべてのデザインがUIです。
一方UXはユーザーエクスペリエンス（User experience）の略で、ユーザーが得た体験のことです。
サイトを利用したユーザーの「商品が探しやすかった」「見やすかった」という感想や「梱包が丁寧だった」という商品に関する感想など、すべての体験がUXになります。
ユーザーは満足のいくUXを得られれば再訪してくれる可能性が高いため、まずはUIを意識したデザインが求められるのです。
逆の言い方をすると、UIを全く考慮していないECサイトを作ってしまうと、「なんだか見づらい」「欲しい商品までたどり着かない」とすぐにユーザーは離脱してしまい、商品購入に至りません。
では具体的に、UIやUXを意識したデザインにするためのポイントをこれからご紹介します。
ECサイトのデザインで大切な3つのポイントとは？
ECサイトでの買い物は実際に商品に触れたり見たりすることができないため、サイト上のみで「この商品が欲しい」と思わせて「購入」してもらわなければなりません。
そのためにはデザインの力が必要であり、ECサイトのデザインにおいては、以下の3つのポイントを押さえることが重要です。
- ・全体的に見やすい
- ・商品が買いやすい
- ・商品のイメージに合っている
どんなにおしゃれなデザインでも、サイトが見づらいと「一体何を売っているのか」伝わりませんし、商品が欲しいと思われても購入ボタンが見つからなければ、ユーザーは購入をあきらめてしまうでしょう。
また、どんなに商品力があっても、コンセプトとずれたデザインにしてしまっては商品の魅力が伝わらず、購入にはいたりません。
どれか1つのポイントがすごく良いサイトではなく「3つのポイントをバランス良く押さえている」ことが大切なのです。
見やすいECサイトにするデザインのコツ
どこに何の情報があるのかわからない、背景色と文字色が同化して読みづらいなど、ユーザーは見にくいサイトだと感じると、訪問してもすぐに離脱してしまいます。
そのため、パッと見ても情報が入ってくるような見やすいサイトにしましょう。以下はサイトを見やすくするコツです。
情報を整理してシンプルに
商品の良さをアピールするためにさまざまな情報を載せたくなりますが、情報量が多すぎるとサイトがごちゃごちゃしてしまい、見にくさにつながります。まずは、「必要最低限の情報のみ」を載せたシンプルなデザインにすることをおすすめします。
まとめられる情報を1つにしてカテゴリで分けると見やすくなります。
下記の図のように、大カテゴリ／中カテゴリ／（小カテゴリ）と、カテゴリでまとめるとさらにわかりやすく、各情報にアクセスしやすくなります。
また、情報はバラバラと表示するのではなく、規則的に並べることも大切です。ページによって商品情報の位置が変わると、見る側は混乱してしまいます。サイト内の情報の配置を規則化すれば、見やすくスッキリとしたデザインになります。
訪問した人が求めている情報をわかりやすく表示することが大切です。
余白や行間を十分取る
商品画像の間隔や、文章の上下の間隔が詰まっていることもサイトを見にくくする要因です。
情報が詰まっていると、1つ1つの情報が目に留まりづらくなってしまいます。
商品画像を並べる際は間隔を空けて余白を作る、フォントを調整して文章の行間を広くするなどスペースにゆとりを持たせるようにしましょう。
また長い文章は、2～3文ごとに段落を分けて間隔を空けたり、見出しを付けたりして読みやすくするのもポイントです。
スマートフォンに対応したデザインを
今はPCよりも、スマートフォンからネットショッピングをする人のほうが多いので、スマートフォンでも見やすいデザインにすることが必須です。
PC用のデザインをスマートフォンで表示すると文字や画像が小さく、拡大しないと見られないため、離脱につながってしまいます。
「レスポンシブデザイン」なら、ECサイト上のコンテンツを自動で各端末に最適なサイズで表示してくれます。
同じ内容をスマートフォンでもPCでも見やすく自動変換してくれるので、おすすめのデザインです。
後ほど紹介するカラーミーショップのDISCOVERというデザインテンプレートは、無料でレスポンシブデザインに対応しているので、ぜひ見てみてください。
色の種類や、配色にも気を付ける
赤など、ビビットな色は目立つので使いたくなりますが、色の3原色（赤・青・緑）をメインカラーで使うと、目がチカチカして見づらくなります。
見やすいデザインを目指すなら、白をベースのカラーにして、アクセントカラーとして1〜2色プラスするのがおすすめです。
先ほどの3原色も、特定の場所を目立たせるためのワンポイントや、アクセントとして使う分には効果的でしょう。
また、配色にも注意が必要です。
背景色と文字色の組み合わせによって文字が読みづらくなったり、意図しない部分が悪目立ちして見にくさにつながることもあります。
インターネット上にはさまざまな配色ツールがありますので、活用しながら配色を決めてみてください。
商品が買いやすいECサイトにするデザインのコツ
冒頭でもお伝えしましたが、購入につなげるためにはサイトでの「買いやすさ」も同じくらい重要です。
買いやすさとは、ただスムーズに購入できるというだけでなく、さまざまな商品が提案してもらえる、商品の情報がきちんと伝わってくる、ということも含まれます。
つまり買いやすいサイトとは、サイトを訪れた人が購入を完了するまでのすべての過程（導線）をあらかじめ用意し、できるだけ離脱を減らして他のページ（商品）に遷移してもらい、スムーズに購入までつなげられるサイトといえるでしょう。
具体的なコツを以下に紹介します。
ファーストビューには目を引く情報を
Webサイトに訪れたとき、最初に見える画面のことをファーストビューといいます。
インターネットで検索した際に、いくつかのサイトを開いてはパッと見て判断して閉じるという経験があると思いますが、それくらいファーストビューは大切です。
ファーストビューでは「何を売っていて、どんなお店なのか」を伝えるとともに、訪問者にサイトを見てもらうため、主に以下の要素を表示しましょう。
- ・商品の魅力が表せている写真
- ・メディア掲載や販売実績、セール情報など興味を引く情報
- ・「どんな商品で、こんなメリットがある」ということが伝わるキャッチコピー
基本的には、購入意欲が低い状態でサイトを訪れる人のほうが多いといえます。
そういった人に対して、ファーストビューで商品の効果や魅力、販売実績による信頼感やお得な情報を伝え、興味を持ってもらいます。
とくに写真は、いつも同じでは飽きられてしまうため、定期的に更新しましょう。
購入ボタンをわかりやすく
商品を購入するまでは、「商品ページ→カート→決済」という流れがあるため、スムーズに進められる導線を意識したデザインにすることが大切です。
この流れの中でつまずいてしまうと、途中で購入をあきらめられてしまいます。
とくに、購入ボタンをわかりやすくすることは非常に重要です。
購入ボタンに関しては以下の点を工夫しましょう。
- 1．ボタンはできるだけ大きくする
- 2．サイト内で目立つ色にする
- 3．押しやすい配置にする
デザインを優先するあまり、ボタンを小さくしてしまうとそのまま押しにくさにつながります。
ボタンはできる範囲で大きめにしましょう。
また、見つけやすいようにサイト全体の中で目立つ色にします。
奇抜な色ではなくてもサイト内で目立つ色なら十分です。ボタンの周辺に余白を取ると、際立たせられます。
さらに、スマートフォンではとくに画面をスクロールしているうちにボタンを見失ってしまう可能性があるので、画面の一番下に購入ボタンを固定するのもおすすめです。
商品画像の下部も活用する
Amazonなど大手のサイトなどではよく「この商品もおすすめです」と他の商品が表示されます。
これは、閲覧していた商品が希望に合わなかった場合も、他の商品を続けて見てもらうためです。
当初の商品が購入されなかったとしても、回遊率（訪問者がサイト内のページをどれだけ見たのかを示す数値）を高めて、最終的に何らかの商品の購入につなげましょう。
商品下部に関連商品を表示する以外に、ホーム画面で「売り上げランキング」や「季節限定の商品」「セール対象の商品」などを表示することも回遊率を高めます。
商品を探しやすくする
商品数が多い場合はとくに、目的の商品までいかにたどり着けるかも購入までのカギを握っています。「検索窓」をファーストビューで見える位置に置く、カテゴリ一覧をサイドや上部に表示してそこから商品詳細へ遷移できるようにするなど、初めて訪れた人が商品を探しやすいようにしましょう。
購入に必要な情報をそろえる
「購入までスムーズに進めるようにする」ためには、商品情報が十分にあるということも欠かせません。
商品の写真がいくら良くても、情報が少なければ購入を決断できないからです。
サイズなどの商品情報だけではなく、お届までの日数や配送方法といった情報も、購入を判断するには必要な情報です。
また、購入を判断するための情報としては販売者の情報や会社概要も購入者は気になるところです。
初めての買い物では「この会社はきちんと対応してもらえるのか」と不安になる人もいますので、会社名や連絡先といった情報は目の付くところに表示して、信頼感を与えましょう。
商品イメージに合ったECサイトにするデザインのコツ
ここまでで、「わかりやすいECサイト」「買いやすいECサイト」にするためのコツをご紹介しました。最後に商品の良さを伝える、イメージに合ったECサイトのデザインのコツをお伝えします。
いくら良い商品でも、デザインによる見せ方が合っていないと魅力が半減してしまいますので、外せないポイントです。
イメージが伝わる商品画像を使う
いろいろとお伝えしていますが、商品を欲しいと思わせるにはやはり写真が一番重要です。
実際に触れられない分、人は写真を見て商品をイメージします。
食品であればシズル感、ファッションや日用品、家具などは質感や色味などを写真で表現することが求められます。
さらに、商品単体の写真だけではなく、商品の着用写真や雑貨、家具類を実際に使っている写真も載せることを心がけましょう。
「ユーザーが利用しているシーン」を伝えることで、購入後に自分が使っているイメージがわきやすくなります。
食品の場合も、食事のシーンの写真を載せれば「どんなシーンにピッタリか」がわかるので、購入の決め手となるでしょう。
ターゲットに合わせてデザインする
商品を販売する時点で、ある程度はターゲットとするユーザーの属性（性別・年齢・職業など）を定めて売り出していると思います。
であるとすれば、ECサイトのデザインもその属性に合わせたデザインにすると、より訪問者が商品をイメージしやすくなります。
好まれる色遣いや見やすい文字の大きさは性別や年齢などによって変わってきますので、属性に合ったデザインにし、商品のイメージを作っていきましょう。
写真や文章のトーンを統一する
ECサイトではショップ独自の世界観を作ることが商品イメージのために必須です。
ですが、文章のトーンが毎回違ったり、写真の色味や雰囲気がバラバラではイメージが統一されません。
トーンがそろわないと世界観が崩れるだけでなく、適当な運営をしていると思われ、ECサイトに対する信頼感も持たれにくくなります。
そうならないためには、掲載する文章や写真のトーン＆マナーをそろえるためのルール（ガイドライン）を作っておきます。
独自の世界観ができれば、「きちんとこだわっているお店」という印象を与えられ、結果として購入やリピートにつながると考えられます。
ブランドイメージを傷つける表現はしない
世界観の話にもかかわってきますが、作り上げたイメージを壊すような表現は控えましょう。
シックで落ち着いたトーンのサイトにもかかわらず、情報を目立たせたいために「爆安セール！！！」など、奇抜なデザインのバナーを掲載すると、一気に世界観が崩れてしまいます。
一時は売上を上げたとしても、将来的にリピーターが離れてしまう可能性が高いので、PRする場合もこれまでのイメージに合わせて行いましょう。
商品イメージにあったサイトのデザインをする上でバナー作成のデザインも大きく関わってくるかと思います。下記の記事では、バナー作りのポイントを解説しているのでこちらも合わせてチェックしてみてくださいね！
ECサイトデザインの最新のトレンドとは？
上記では、売上アップのためのECサイトのデザインのコツをご紹介しました。
ここからは日々変わりゆくECサイトのデザインのトレンドをピックアップします。
必ずしもトレンドを取り入れる必要はありませんが、最新のトレンドを理解しておくことで、今以上に多くのユーザーから興味を抱いてもらえる可能性があるでしょう。
３D(グラフィック・アニメーション)を用いたデザイン
これまでのECサイトは、フラットデザイン（平面的なデザイン）を採用しているものがほとんどでした。
しかし、最近ではグラフィックやアニメーションなどを用いた3Dデザインが注目されています。
以前は、ブラウザ上で3Dを表示させるには特別な技術が必要でしたが、昨今PCだけでなくスマホでも簡単に3Dを表現できるようになりました。
そのため、グラフィックやアニメーションを使ったECサイトは増加傾向にあります。
動きのあるデザインはユーザーを惹きつけ、回遊率の上昇や離脱率の低下が見込めるでしょう。
巨大タイポグラフィが目を引くデザイン
文字を適切に配列して読みやすくすることを「タイポグラフィ」といい、活字印刷の時代から意識されていましたが、ECサイトにおいても大切です。
近年のECサイトにおいては、巨大なタイポグラフィで文字自体をデザインの一部として使用してユーザーの目を引くサイトが増えてきています。
サイトのトップページや見出しに巨大なフォントのテキストを用いることでインパクトが出て、ユーザーにも印象が残りやすいデザインになるでしょう。
アルファベットを用いる巨大なタイポグラフィが多いですが、日本語フォントを使用してもユニークなデザインができ上がります。
パララックス・アニメーションが使われたデザイン
「パララックス」とは英語で「視差」を意味し、遠近差を出すことで立体感やスピード感を出す効果を指します。
ECサイトのデザインでこの効果を用いるのが、パララックス・アニメーションです。
たとえば、スクロールに応じて画像が動いたり、スクロールとずれて画像が動いたりするデザインが挙げられます。
また、スクロールすると紙芝居のようにどんどん画面上の画像が切り替わるパララックス・アニメーションデザインは海外のサイトで多く見受けられます。
このパララックス・アニメーションをデザインに取り入れることで、ストーリー性がある商品の説明などが効果的にユーザーに伝わるでしょう。
ECサイトデザインを学べる！ギャラリーサイトを紹介
参考になりそうなおしゃれなECサイトを自分で探し当てるのはなかなか難しいですよね。実はさまざまなECサイトのデザインが紹介されている、ギャラリーサイトというものが存在します。
どんなECサイトをしようか考える際の参考にしてくださいね。
SANKOU!
SANKOU!は、ECサイトデザインの制作の参考となる国内のサイトを1000種類以上集めたギャラリーサイトです。
トップページのサムネイルとサイト名が表記されたシンプルなデザインのため、一覧で見やすい作りとなっています。
さまざまな業界のECサイトが掲載されており、フィルターをかけて見たい分野を絞ることができます。
PCのデザインだけでなく、スマホ版のデザインが見られるのも非常に便利です。
ECサイトのデザインは定期的に更新されているため、常に最新の情報が得られるでしょう。
MUUUUU.ORG
MUUUUU.ORGは、縦長のオーソドックスなレイアウトで、デザインが優れたECサイトを厳選して集めているギャラリーサイトです。
産業やデザインのタイプ、色味などによってECサイトを検索でき、非常に探しやすいでしょう。
クオリティが高いサイトが多く掲載されているため、とくにトップページを制作する際の参考としておすすめです。
ECサイトだけでなく、コーポレートサイトやブランディングサイトなど合計3,000サイト以上が掲載されていますが、ECサイト内でカテゴリを絞って検索することはできないので注意してください。
ECサイトデザインは自作でできる？デザイン会社へ依頼する？
ECサイトを立ち上げたりリニューアルしたりする際、デザインを自社で作るのか制作会社へ依頼したほうがいいのかは、迷うところです。
どのような場合なら自作がいいのか、それとも外部に依頼したほうがいいのかについて考えてみましょう。
初心者でもデザインテンプレートを使えば自作も可能
「社内にデザインスキルがある人員はいないし、でも制作会社に依頼するには費用がかかりそう…」と悩む方は多いでしょう。
それならスキルを学ぶためにスクールに通うことも考えられますが、まとまった費用や時間がまったく用意できない場合もあります。
そんなときに初心者の方にもおすすめなのが、デザインテンプレートの利用です。
デザインテンプレートはすでにある程度のデザインが完成しているので、画像を当てはめていけばデザインをしたことが無い人でもECサイトが完成します。
ECサイト作成サービスではとくに豊富にデザインテンプレートが用意されており、カラーミーショップでは（無料・有料あわせて）85種類以上もあります。
デザインに必要なスキルはないけれど、制作会社に頼む予算もない場合には、テンプレートを利用することをおすすめします。
スキルを身に付けたいならスクールがおすすめ
ECサイトをデザインするには、一般的に下記のようなスキルがあると良いといわれています。
- ・タイポグラフィや色彩構成など全体的なWebデザインの知識
- ・HTMLやCSS、JavaScriptなどのコーディングの知識
- ・PhotoshopやIllustratorなどのデザインツールの操作
- ・デバイスの画面に応じてデザインを最適化するレスポンシブデザインスキル など
先ほどお伝えしたように、ECサイト作成サービスではさまざまなテンプレートが用意されていますので、上記のような知識が無くてもECサイトを開設することは可能です。
ですが、テンプレートをカスタマイズしたかったり、自分でもデザインをしてみたかったりする場合は、デザインスクールへ通ってスキルを身に付けるのがおすすめでしょう。
デザインテンプレートをカスタマイズすることで、よりオリジナリティにあふれた自社だけのサイトが作成できます。
売れるECサイトを作りたいなら実績豊富な制作会社へ
もしECサイトのデザイン予算を確保できるなら、数多くのECサイトを作ってきたプロの制作会社への依頼するのが最良の方法です。
デザインを制作会社に頼むと以下のようなメリットがあります。
- ・商品の魅力やブランドイメージを最大限にアピールした売れるサイトにできる
- ・自社だけの唯一無二のサイトが完成する
- ・デザインを外部に依頼することで、リソースを商品企画や販促など別の業務に割ける
売れるECサイトを制作したいのであれば、確実なのは経験豊富な制作会社に依頼して作ってもらうことでしょう。
制作会社はいくつものECサイトを手掛けてきているので、「どのようなデザインならユーザーに魅力が伝わるか」「商材ごとの売れやすいデザイン」といったノウハウを駆使して完成度の高いデザインに仕上げてくれます。
ですが制作会社は多数あるため、どこに依頼すればいいのか迷う人も少なくありません。
そこでカラーミーショップでは、各社にピッタリの制作会社を紹介する制作代行サービスを提供しています。
制作代行サービスを利用することで、自力で探す手間もなく、実績豊富で自社に最適な制作会社が見つかるでしょう。
デザイン全体的な作成以外でも、デザインの一部カスタマイズや撮影代行なども行っているため、自社内でデザインの悩みをお持ちの方はぜひ制作代行サービスを検討してみてくださいね。
【参考】デザインスクールの費用・制作会社のデザイン費はいくら？
デザインスクールに通ったり、外部の制作会社にデザインを依頼したりすると、どれくらい費用がかかるのか気になりますよね。
ここでは、それぞれの費用のおおよその目安をご紹介します。
まず、デザインスクールに通った場合ですが目安は以下になります。
- ・1ヵ月コース…10～20万円程度
- ・6ヵ月コース…50～70万円程度
どれくらいの期間通うのか、オンラインなのかオフラインなのかにもよりますが6ヵ月程度通った場合は、50万円以上は必要と考えておいたほうが良いでしょう。
また、もし外部にデザインを依頼した場合の費用相場は下記になります。
- ・コンセプトやレイアウト（設計図）の決定：約50万円
- ・トップページや商品詳細ページのデザイン：約70万円
- ・コーディング：約60万円
上記は目安ですので、サイトの規模によって異なってきますが数十万円程度はかかると考えておくと無難です。
ただしECサイトの制作においてはいくつかの補助金制度がありますので、デザインを外部に委託する場合、制作費用の大部分を補助金でまかなえる可能性もあります。
補助金について詳しくは、カラーミーショップの補助金についてのお知らせをご覧ください。
無料のものも！おしゃれなカラーミーショップのデザインテンプレート
先ほど、カラーミーショップでは無料・有料のテンプレートが85種類以上あるとお伝えしました。
その中から、とくにおすすめのデザインテンプレートを3つご紹介していきます。
無料版もあるので、デザイン制作にぜひ利用してみてくださいね。
DISCOVER
DISCOVERは、無料でも利用できるレスポンシブデザインのテンプレートで、シンプルなデザインが特徴です。
すっきりとしたデザインで商品画像が大きく表示されるため、ユーザーは視覚的に商品が買いやすく、購入率のUPが期待できるでしょう。
ただし無料版では一部機能に制限があるため、機能をフルで活用したい場合は有料版がおすすめです。
Penta
Pentaは、昨今のスマートフォンの普及に合わせ、スマホからの利用を想定したデザインテンプレートです。
スタンダードな1カラムのサイトデザインなので、商品を選ばず、食品やアパレルなどどのような商材のECサイトにも向いています。
商品詳細ページには、オプションを選択すれば価格の表示が変わる機能が備わっているため、アパレル商品でサイズやカラーが豊富にある場合などは非常に便利でしょう。
Triple
Tripleは、PCとスマホ、タブレットの3つのデバイスのECサイトに完全対応したデザインテンプレートです。
デザインが初めての方でも、このテンプレートを使用することで洗練されたECサイトを作ることができます。
トップページに商品を見やすく配置できるため、ユーザーをスムーズに詳細ページに促せることも特徴です。
以上がとくにおすすめのテンプレートでしたが、カラーミーショップにはその他にも商品を魅力的に見せるテンプレートがあるので、ぜひチェックしてみてください。
参考になるカラーミーショップのECサイトのデザイン22選
ここからは「カラーミーショップ」のデザインの自由度を生かして作られた、おしゃれなデザインのネットショップを22店舗ご紹介いたします。
食品
1.森國酒造
香川県・小豆島唯一の酒造「森國酒造」。瀬戸内海のおだやかな自然に育まれたお酒の魅力を、美しい写真とシンプルなデザインで伝えています。
2.Nova SELECT
最高品質のオーガニックナッツやフルーツをお届けしている埼玉の「Nova SELECT」は、アースカラーのナッツやフルーツが映えるすっきりとしたデザイン。
ローディングの画面にはイラストが出てきたりと、どこか親しみやすさとあたたかみを感じます。
3.AURORA COFFEE
山形県のコーヒーショップ「AURORA COFFEE」は、チャートのように並んだ商品一覧から、種類豊富なコーヒー豆を選べるユニークなデザイン。
パッケージやお店のイメージそのまま、白黒のロゴをメインにラインマーカーを引いたようなあしらいがおしゃれなショップです。
4.山奥チョコレート 日和
福井県にある和菓子の老舗「森八大名閣」が手がけるチョコレート専門店。
緑豊かな森林がキービジュアルとなっており、穏やかな自然の中で丹精を込めて作られたチョコレートの魅力がうまく表現されています。
ショップの売りである生チョコサンドは、トップページにシズル感たっぷりの写真とわかりやすい説明文を掲載することで、消費者を商品ページに促す導線ができているといえるでしょう。
5.長谷川栄雅
350年続く伝統の技法をもちいた最高級日本酒を販売する酒造のサイト。
フォントや写真使い、色調などにこだわることで、洗練されながらも伝統を感じさせるデザインを完成させています。
6.BambooCut Market
立ち食いの梅干しBarを運営するなど、「粋」をテーマにイベントや商品開発などさまざまなプロデュースを行うBambooCut社のオンラインサイトです。
梅干しというシンプルな商品をメインで扱いながらも、イラストを使って味を表現するなどユーモアあふれ、見ていてわくわくするようなデザインに仕上がっています。
7.宮崎上水園
シンプルなパッケージが目新しい宮崎生まれの緑茶ブランド「バイオ茶」。
お茶のグリーンがよく映えるような清潔感あふれるデザインになっています。
8.大沼養蜂
山形県の養蜂場「大沼養蜂」。
純粋な天然蜂蜜にひとつひとつハンコを押した、ぬくもりあるパッケージ。そのていねいなつくりをまるで紙に描いてお届けしているようなデザインのお店です。
9.BATON ONLINE SHOP
大阪でカフェやテイクアウト専門店を運営するBATON GROUPのオンラインショップです。
どこか懐かしいレトロなパッケージが特徴のスイーツや食品、雑貨を販売しています。
看板商品であるクッキー「コバトスペキュロス」のデザインに合わせて、サイト全体がレトロなデザインで統一されており、訪問者の心をくすぐります。
おすすめや新商品がわかりやすく掲載されているため、訪問者が詳細を見ようと思う自然な導線となっているのも特徴です。
10.tartelette
熊本の城下町にあるタルト専門店「tartelette」は、ブルーとホワイトの組み合わせがなんとも涼しげなネットショップ。
味のある店内風景に鮮やかなタルトの写真がよく映えています。
11.浜口水産
日本の西端にある五島列島から、新鮮なかまぼこなどの練り物を販売している「浜口水産」。
モノトーンを基調としたシックなデザインが、真摯なものづくりと職人の自信をイメージさせてくれます。
雑貨・インテリア・文具
12.free stitch
“より豊かな暮らしを愛犬と” を合言葉に良質なペット用品をお届けしている「free stitch」は、カフェのような落ちついた大人っぽい雰囲気のショップ。
写真をふんだんに使い、用途やジャンルから商品を検索することができる使い勝手のよいデザインになっています。
13.書遊Online
創業100年を超える老舗の書道用品のECサイトで、学校教材や書籍など「書」に関連する商品を幅広く取り扱っています。
書道に普段触れていない人でも親しみが持てるようなデザインで、商品も「カテゴリ」「用途」「キーワード」の3つから検索できて使いやすいことなどが、書遊Onlineがユーザーに支持される理由の一つでしょう。
14.カタカナ
「日本のカッコイイを集めたお土産屋さん」がテーマのサイトは、シンプルで見やすくすることでユニークな商品たちを際立たせています。
商品ページの写真を充実させるため、実物を手に取れないネットショッピングでもユーザーが安心して購入できるでしょう。
15. PINT
日本全国のさまざまな伝統技能や職人さんとコラボしたオリジナル商品を開発・販売している「PINT」。
商品一つ一つの「重み」を感じるような、ダイナミックなつくり。１点ずつの解説文・画像もボリューミーで、それぞれのストーリーをじっくり味わうことができます。
16.EDIT LIFE
編集者やブランディング・ディレクターがキュレーターとなってアイテムを提案する「EDIT LIFE」。
商品単体の提案にとどまらず、その先にある生活やスタイルまでも提案しています。世界観やコンテンツを楽しめるデザインはすっきりとして見やすく、何度でも訪れたくなりそう。
17.石木花
「小さな器に大きな自然」をテーマに展開しているオリジナル盆栽ブランドのECサイトです。
自然の美しさや強さをサイトデザインで余すことなく表現しており、おもわず訪問者が盆栽に魅了されます。
盆栽の写真も、引きで撮ったものや寄りで撮ったものなど商品の魅力を伝える工夫がされています。
ファッション・アクセサリー
18.Lanterna
東京各地の職人さんによるメイド・イン・トーキョーのアクセサリーを販売している「Lanterna（ランテルナ）」。
遊び心あるアクセサリーの魅力を、無駄を削ぎ落としたシンプルなデザインで伝えています。
19.DRESS HERSELF
シルクを中心とした上質なデイリーウェアブランドを販売しているDRESS HERSELF 。
大人の女性向けにサイトデザインも落ち着いたトーンでまとめ、多数の商品画像を掲載することで、雑誌をめくる感覚で商品画像を見ることができます。
トップページや商品ページなど、目につきやすいところに表示されているユーザーレビューが購入意欲を刺激します。
20.dansko
アメリカのシューズブランド「dansko」の日本公式ネットショップは、ブラウンをベースにした珍しい配色。
アースカラーのやさしいトーンに、艶やかな革靴とコーディネート写真が映えるシンプルなデザインです。
21.NAOT
イスラエルの靴職人さんが作るシューズブランド「NAOT」。
商品がずらりと並んだ一覧ページは比較しやすく、それぞれにスタイリング写真もついているので履いた際のイメージもつきやすくなっています。
サイズアドバイスやFAQなども充実しており、シンプルながらコンテンツも充実したショップです。
22.久米繊維
戦後の日本に「Tシャツスタイル」を広めたパイオニア的存在の久米線維工業株式会社が展開するECサイト。
Tシャツの比較表が大きく表示され、詳細をクリックすると、お気に入りの1枚が見つかる仕組みになっています。
トップページには、すべて抜け感のある洗練された写真が使われており、Tシャツスタイルの先駆者としての「伝統」と、現代をリードする「革新」を兼ね備えたデザインといえるでしょう。
まとめ
ECサイトのデザインは、購入する人にとって魅力的で買いやすく、わかりやすいことが大切です。
小さな工夫でも売り上げにつながるので、ぜひ実践してみましょう。
また、ご紹介した22のショップのデザインも参考にしてみてください。
また、こちらのネットショップ運営や開業方法、売上アップに関連した記事も見られていますので、ぜひ合わせてチェックしてみてくださいね！
よくある質問
世の中には数えきれないほどたくさんのECサイトがあります。
そのため、訪れてくれたユーザーがあなたのサイトを見て、「何を売っているお店か分からない」「商品画像が見づらい」などと感じてしまうと、すぐ離脱して他のサイトで買い物しようと思ってしまいます。
せっかく訪れてくれた訪問者に商品を購入してもらうためにも、最初の接点であるデザインはとても大切なのです。
ECサイトのデザインを考える上で大切なのは以下の3つのポイントです。
・全体的に見やすい
・商品が買いやすい
・商品のイメージに合っている
見やすいだけではなく、どんなお店なのかが分かるコンセプトや、実際に商品をカゴに入れるまでの導線を整理して買いやすいサイトにすることも重要です。詳しくはこちらの章で解説していますので、ご覧ください。
