ECサイトのデザインは、商品の売上を左右するといっても過言ではないため「どのようなデザインにすればいいのか」と悩む方も多いと思います。
そこでこの記事では、ECサイトのデザインで重要なポイントや、具体的な作り方のコツ、参考になるECサイトのデザインの実例をご紹介します。
以下のデザインのコツを活かして、売れるサイトを作りましょう。
ECサイトはおしゃれに作ればみんな買ってくれるんじゃないかな？
いえ！おしゃれさも大切ですが、他にも大切なポイントがあります。
売れるサイトにするコツをお伝えしますね。
目次
売れる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サイトではショップ独自の世界観を作ることが商品イメージのために必須です。
ですが、文章のトーンが毎回違ったり、写真の色味や雰囲気がバラバラではイメージが統一されません。
トーンがそろわないと世界観が崩れるだけでなく、適当な運営をしていると思われ、ECサイトに対する信頼感も持たれにくくなります。
そうならないためには、掲載する文章や写真のトーン＆マナーをそろえるためのルール（ガイドライン）を作っておきます。
独自の世界観ができれば、「きちんとこだわっているお店」という印象を与えられ、結果として購入やリピートにつながると考えられます。
ブランドイメージを傷つける表現はしない
世界観の話にもかかわってきますが、作り上げたイメージを壊すような表現は控えましょう。
シックで落ち着いたトーンのサイトにもかかわらず、情報を目立たせたいために「爆安セール！！！」など、奇抜なデザインのバナーを掲載すると、一気に世界観が崩れてしまいます。
一時は売上を上げたとしても、将来的にリピーターが離れてしまう可能性が高いので、PRする場合もこれまでのイメージに合わせて行いましょう。
商品イメージに合ったサイトのデザインをする上でバナー作成のデザインも大きく関わってくるかと思います。下記の記事では、バナー作りのポイントを解説しているのでこちらも合わせてチェックしてみてくださいね！
売れるECサイトにするための改善チェックポイント
「商品を購入してもらう」という明確な目的があるECサイトにおいては、ユーザーが買い物しやすいよう、UIとUXを意識したデザインが重要です。
UIとはユーザーインターフェース（User Interface）を略した言葉で、サイトの見た目（全体的なデザイン）はもちろんのこと、押しやすいデザインのボタン、読みやすいフォントなど、ユーザーが触れるすべてのデザインがUIです。
一方UXはユーザーエクスペリエンス（User experience）の略で、ユーザーが得る体験を指し、ユーザーの「商品が探しやすかった」「見やすかった」という感想や「梱包が丁寧だった」という商品に関する感想など、すべての体験がUXになります。
ユーザーは満足のいくUXを得られれば再訪してくれる可能性が高いため、まずはUIを意識したデザインが求められています。
逆の言い方をすると、UIを全く考慮していないECサイトを作ってしまうと、ユーザーはすぐに離脱してしまい、商品購入に至りません。
では具体的に、UIを意識したデザインにするための簡単なチェックポイントをこれからご紹介します。
ECサイト全体のデザイン改善チェックポイント
まずは、ECサイト全体における改善ポイントをご紹介します。
下記は最低限は押さえておきたいポイントのため、自社のサイトでチェックしてみてください。
- □パッと見（ファーストビュー）で、何のお店かわかるか
- □情報が整理され、どこに何があるかわかりやすいか
- □わかりやすいところに検索窓があるか
- □サイトの導線がわかりやすいか
- □余白や行間が十分に取られていて見やすいか
- □奇抜な色をたくさん使い、見づらくなってないか
- □スマートフォンに対応したデザインか
- □画像のリンク切れ・誤字脱字はないか
- □問い合わせ窓口や会社情報は目立つところにあるか
商品ページのデザイン改善チェックポイント
次は、商品ページに特化したチェックリストです。
商品ページは、ユーザーが商品について詳細な情報を得るためのページなので、購入するかどうかの判断を大きく左右する要素です。
商品情報が充実していればユーザーは商品をよく理解し、購入意欲が高まりますが、反対に情報が不足していたり魅力のない画像だったりすると、顧客は購入を止めてしまうでしょう。
下記は簡単なチェックリストですが、この他にも改善ポイントはあります。
家族や友人など身近な人に使ってもらい、改善点を尋ねてみるというのも1つの手でしょう。
- □商品の特徴が一目でわかる写真（動画）を掲載しているか
- □簡潔でわかりやすい商品説明文になっているか
- □購入ボタンが押しやすい場所・大きさになっているか
- □購入時にワンクリックでカートに入れられるか
- □購入を促す口コミ投稿が設置されているか
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サイト内でカテゴリを絞って検索することはできないので注意してください。
WebDesignClip
6,000以上もの日本や海外のWebサイトを紹介しているギャラリーサイトです。
スマートフォン用のデザイン例も2,000件以上あります（（掲載数は2024年6月時点）。
色味やサイトのジャンルだけでなく、レイアウト（素材の配置パターン）でも検索できるのが特徴です。
掲載数がとにかく多いので、より多くのWebサイトのデザイン例を見たい際に参考になるでしょう。
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万円
上記は目安ですので、サイトの規模によって異なってきますが数十万円程度はかかると考えておくと無難です。
無料のものも！おしゃれなカラーミーショップのデザインテンプレート
先ほど、カラーミーショップでは無料・有料のテンプレートが85種類以上あるとお伝えしました。
その中から、特におすすめのデザインテンプレートを3つご紹介していきます。
無料版もあるので、デザイン制作にぜひ利用してみてくださいね。
DISCOVER
DISCOVERは、無料でも利用できるレスポンシブデザインのテンプレートで、シンプルなデザインが特徴です。
すっきりとしたデザインで商品画像が大きく表示されるため、ユーザーは視覚的に商品が買いやすく、購入率のUPが期待できるでしょう。
ただし無料版では一部機能に制限があるため、機能をフルで活用したい場合は有料版がおすすめです。
Penta
Pentaは、昨今のスマートフォンの普及に合わせ、スマホからの利用を想定したデザインテンプレートです。
スタンダードな1カラムのサイトデザインなので、商品を選ばず、食品やアパレルなどどのような商材のECサイトにも向いています。
商品詳細ページには、オプションを選択すれば価格の表示が変わる機能が備わっているため、アパレル商品でサイズやカラーが豊富にある場合などは非常に便利でしょう。
Triple
Tripleは、PCとスマホ、タブレットの3つのデバイスのECサイトに完全対応したデザインテンプレートです。
デザインが初めての方でも、このテンプレートを使用することで洗練されたECサイトを作ることができます。
トップページに商品を見やすく配置できるため、ユーザーをスムーズに詳細ページに促せることも特徴です。
以上が特におすすめのテンプレートでしたが、カラーミーショップにはその他にも商品を魅力的に見せるテンプレートがあるので、ぜひチェックしてみてください。
参考になるカラーミーショップのECサイトのデザイン23選
ここからは「カラーミーショップ」のデザインの自由度を生かして作られた、おしゃれなデザインのネットショップを23店舗ご紹介いたします。
食品
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.紡ぎ舎
シンプルな背景で商品を際立たせるサイトデザインです。
トップページには人気商品、読み物・特集、再入荷商品など、ユーザーが欲しい情報がきちんと整理されて掲載してあります。
また、商品検索では商品カテゴリだけでなく、作り手（生産者）や素材などさまざまな角度から商品を探せるようになっており、ユーザービリティが非常に高いサイトといえます。
16.EDIT LIFE
編集者やブランディング・ディレクターがキュレーターとなってアイテムを提案する「EDIT LIFE」。
商品単体の提案にとどまらず、その先にある生活やスタイルまでも提案しています。世界観やコンテンツを楽しめるデザインはすっきりとして見やすく、何度でも訪れたくなりそう。
17.石木花
「小さな器に大きな自然」をテーマに展開しているオリジナル盆栽ブランドのECサイトです。
自然の美しさや強さをサイトデザインで余すことなく表現しており、おもわず訪問者が盆栽に魅了されます。
盆栽の写真も、引きで撮ったものや寄りで撮ったものなど商品の魅力を伝える工夫がされています。
18.オルティッド 暮らしの道具
全体的に落ち着いたグレーを基調としたデザインにすることで、シックで洗練されたブランドの世界観が統一されています。
また商品写真は他のショップのお手本になるほど美しく、特に食器やガラス製品では光を巧みに使い、質感がよく伝わるような写真になっています。
ファッション・アクセサリー
19.Lanterna
東京各地の職人さんによるメイド・イン・トーキョーのアクセサリーを販売している「Lanterna（ランテルナ）」。
遊び心あるアクセサリーの魅力を、無駄を削ぎ落としたシンプルなデザインで伝えています。
20.DRESS HERSELF
シルクを中心とした上質なデイリーウェアブランドを販売しているDRESS HERSELF 。
大人の女性向けにサイトデザインも落ち着いたトーンでまとめ、多数の商品画像を掲載することで、雑誌をめくる感覚で商品画像を見ることができます。
トップページや商品ページなど、目につきやすいところに表示されているユーザーレビューが購入意欲を刺激します。
21.dansko
アメリカのシューズブランド「dansko」の日本公式ネットショップは、ブラウンをベースにした珍しい配色。
アースカラーのやさしいトーンに、艶やかな革靴とコーディネート写真が映えるシンプルなデザインです。
22.NAOT
イスラエルの靴職人さんが作るシューズブランド「NAOT」。
商品がずらりと並んだ一覧ページは比較しやすく、それぞれにスタイリング写真もついているので履いた際のイメージもつきやすくなっています。
サイズアドバイスやFAQなども充実しており、シンプルながらコンテンツも充実したショップです。
23.久米繊維
戦後の日本に「Tシャツスタイル」を広めたパイオニア的存在の久米線維工業株式会社が展開するECサイト。
Tシャツの比較表が大きく表示され、詳細をクリックすると、お気に入りの1枚が見つかる仕組みになっています。
トップページには、すべて抜け感のある洗練された写真が使われており、Tシャツスタイルの先駆者としての「伝統」と、現代をリードする「革新」を兼ね備えたデザインといえるでしょう。
ECサイトではバナーデザインも重要
さまざまな情報が掲載されているECサイトにおいて、特に伝えたい情報がある際はバナーで訴求するのが効果的です。
ユーザーが思わずクリックしたくなるようなバナーを作る際は、文字情報が特に重要で、商品名やメリットを大きくしっかりデザインすることがポイントです。
文字が読みづらいと見てもらえないため、文字の太さやサイズを工夫して伝えたい情報がパッと見でわかるようにしましょう。
クリックされるバナーの作り方についてもっと知りたい方は、『思わずクリックしたくなるバナーデザインのきほん』の著者であるデザイナーのカトウヒカルさんにインタビューをしていますので、ぜひご覧ください。
まとめ
ECサイトのデザインは、購入する人にとって魅力的で買いやすく、わかりやすいことが大切です。
小さな工夫でも売り上げにつながるので、ぜひ実践してみましょう。
また、ご紹介した23のショップのデザインも参考にしてみてください。
こちらのネットショップ運営や開業方法、売上アップに関連した記事も見られていますので、ぜひ合わせてチェックしてみてくださいね！
よくある質問
ECサイトのデザインを考える上で大切なのは以下の3つのポイントです。
・全体的に見やすい
・商品が買いやすい
・商品のイメージに合っている
見やすいだけではなく、どんなお店なのかが分かるコンセプトや、実際に商品をカゴに入れるまでの導線を整理して買いやすいサイトにすることも重要です。詳しくはこちらの章で解説していますので、ご覧ください。
