ネットショップの顔ともいえるウェブサイトのデザインは、ショップのイメージや売り上げに大きく影響します。ネットショップのデザインを決定する前に、使いやすく好印象となるデザインの基本と、買い物をしやすくするためのコツを覚えておきましょう。デザインのトレンドとして、注目すべきネットショップの例も紹介します。
目次
ネットショップのデザインの五つの基本
ネットショップはウェブサイトであると同時に、ECサイト、お客様が買い物をするオンライン上の店舗でもあります。つまりネットショップには、ウェブサイトと店舗両方の快適さを併せ持つデザインであることが求められます。これは、ネットショップを自作する場合も、デザインのプロに依頼して作成してもらう場合も変わりません。
デザインやウェブ構築の専門知識よりも先に、最低限知っておくべきネットショップのデザインの基本は以下の五つです。
1. 「使いやすさ」は購入者目線で
ネットショップを実店舗に例えるなら、サイトのデザインは店のフロア設計やレイアウトに相当します。ネットショップのデザインで最も重視すべきことは、お客様となるターゲットの目線で見て使いやすいかどうかです。特に、個々のネットショップのターゲットを明確にしておくことで、たとえば、乳児の服を初めて買う人にわかりやすいサイズ比較表や写真、高齢者が見やすいフォントサイズなど、必要なデザインの要素が浮かび上がってきます。
2. 情報を整理して見やすく
実店舗に足を踏み入れても、棚から商品が取りにくい、商品がどこにあるかわからないなど、不親切な配置や陳列が買い物のストレスや購買意欲の低下につながることがあります。同様にネットショップでも、情報が整理されていることは売り上げアップのために非常に重要です。
ブランドごとや商品カテゴリごとに規則的に枝分かれしたページ設計、苦労して探さなくても必要な商品情報に辿り着けるページ内の構成など、優れたデザインによる情報整理でネットショップは見やすく、使いやすくなります。
3. スマートフォンやタブレットPCに対応
ネットショップのデザインはパソコンからの利用だけでなく、スマートフォンやタブレットPCなどの小型デバイスにも対応している必要があります。1種類のデバイスにしか対応していないネットショップは、お客様の買い物の利便性が下がるため、ビジネスの機会損失につながります。
どのデバイスからでもネットショップの印象が大幅に変わらずに利用できるウェブサイトのデザインを「レスポンシブデザイン」と呼びます。レスポンシブデザインのネットショップなら、デバイスのサイズに応じて自動的に表示の仕方を最適化してくれるため、パソコン用とスマートフォン用のサイトを二つ用意する必要がありません。
4. ショップ・商品のイメージに合う配色やフォント
出店にあたり、「こんなネットショップにしたい」というデザインのイメージが既にあるかもしれません。注意すべきは、ネットショップのコンセプトや扱う商品と、デザインがマッチしているかどうかです。配色、フォント、ロゴデザインなどを決める際は、個人の好みから一旦離れて、ネットショップ自体に合うデザインであるかを客観的に検討しましょう。
5. 計算されたファーストビュー
ファーストビューとは、ウェブサイトにアクセスしたときに最初に目に入る部分のデザインを指します。お客様がファーストビューにある要素に引きつけられれば、ページのスクロールや別ページの閲覧など、次の行動につながります。反対に、ファーストビューの魅力が弱い、またはネットショップのイメージを伝えきれていないと、閲覧者が離脱してしまう可能性もあります。
ファーストビューの肝は、最初の数秒でネットショップを印象付けられるかどうかです。長い文章や複雑なコンテンツではなく、ネットショップ名、ロゴ、キャッチフレーズ、高品質の写真、セール情報などを中心に、視覚的に瞬時にネットショップのイメージを理解できるデザインが求められます。
パソコンとスマートフォンではファーストビューに入る情報量も異なるため、レスポンシブデザインならどのデバイスでも最適なファーストビューになるよう検討する必要があります。
ネットショップのデザインのコツ
具体的に、お客様の購買意欲を刺激し、ストレスなく楽しく買い物ができるネットショップのデザインの特徴を考えてみましょう。以下のコツを意識したデザインにすることで、初めて作るネットショップでも失敗を回避できます。
商品を探しやすくする
どんなに価値ある商品を扱っているネットショップでも、お客様が欲しい商品を探し出せなければ購入してもらうことはできません。ネットショップに求められる「商品を探しやすくするコツ」としては、明快なカテゴリ分けと、それを表示させるデザインが挙げられます。
たとえば、食器専門のネットショップでベビー用の小皿を探すケースを考えてみましょう。お客様がカテゴリ一覧から探す場合、もし商品の大カテゴリが「小皿」「大皿」「ボウル」「カップ」の四つなら、小皿のカテゴリからベビー用の皿を探すことになります。その場合、小皿の大カテゴリの中に、「子ども用」などのカテゴリがあると、お客様は商品を探しやすくなります。あるいは、大カテゴリ自体に「子ども用」のカテゴリがあれば、カテゴリ一覧を開いた全てのお客様の目に触れ、別の食器を買うつもりだった人も気になって覗いてみるかもしれません。
お客様によっては、ネットショップ内の検索窓から欲しい商品を探す場合もあります。検索窓がどこにあるか見つけやすく、どのページからでもアクセスできるようにデザインされていると非常に便利です。
また、ネットショップのファーストビューにバナーが設置されたデザインなら、特定のカテゴリや注目商品、新商品の特集やセールのバナーを載せることで、お客様の利便性とネットショップの訴求性を両立しやすくなります。
ロゴやアイコンをわかりやすく
ネットショップやブランドを記号的に示す「ロゴ」も、デザインの大切な要素です。ロゴを作る上では、色や形、フォントなどの組み合わせでコンセプトやイメージを的確に伝えることはもちろん、印象に残るデザイン、競合ネットショップと差別化されたデザインであることも重視しましょう。
加えて、ネットショップ内で使う「アイコン」のデザインにも意識を向けてみましょう。たとえば衣類などの商品ページに男性用、女性用、ユニセックスなどを示すアイコンを使うことで、視覚的なわかりやすさを追加でき、商品ページが文字での説明ばかりになることを防ぎます。アイコンのデザインは、ネットショップに合うものを選ぶことも忘れずに。
商品を一番目立たせる
ネットショップはあくまで商品の売買の場であるため、商品が最も目立つように作られていなくては意味がありません。商品ページが、小さい商品写真1枚と、商品にこめたオーナーの思いが長々と文章で綴られているだけのデザインだとしたら、お客様はどう感じるでしょうか。
その商品を求めるお客様にとって必要なのは、商品自体の情報です。そのために、商品ページは、さまざまな角度から商品を撮った高画質の写真に加え、全体と部分、使用例などを掲載できるデザインにします。サイズや素材、使用感などの詳細を文章やアイコンでわかりやすく伝えることも重要です。
ネットショップのトップページ（ホームのページ）についても、どんな商品が売られているショップであるかがファーストビューでわかるように、商品が目立つデザインを選択する方法もあります。
カートや購入のボタンをわかりやすく
お客様が商品ページを見て「これを買おう」と決断しても、購入の手続き方法がわかりにくいデザインだとしたら、購入を諦めて他のネットショップへと移動してしまう可能性があります。
商品ページに設置する「購入」や「カートに入れる」のボタンは、見やすい位置とサイズ、色などのデザインが重要です。もしよく利用するネットショップがあれば、参考のためにボタンのデザインを確認してみてください。一般的に購入ボタンは、商品名や商品写真から近い位置に配置し、本文より大きめの文字を使用します。ボタンの色は、青または緑が購入に結びつきやすい色といわれます。
お客様が買い物の途中にカートの中身を確認しやすいよう、「カートを見る」という機能もアクセスしやすいようにデザインしておくと、お客様の安心感とネットショップへの信頼感につながります。
商品画像のクオリティに注意
ネットショップに使用するなら、高解像度の画像（写真、イラストなど）が必須です。解像度とは画像の密度を指し、解像度が高いほど密度が高く高画質となります。逆に、低解像度の画像は密度が低いため、粒子が粗くぼんやりした印象になってしまい、画像を拡大したときにも細部がよく見えないという問題があります。
高画質の写真は、一眼レフなどの高品質のカメラで撮影可能です。画質は多少落ちるものの、一般的なデジタルカメラやカメラ性能の良いスマートフォンでも撮ることができます。特に、ネットショップのファーストビューに掲載する写真や、大きく掲載したい写真は、高画質なものを用意することで、デザインのクオリティも格段にアップします。
商品ページに掲載する商品単体の写真は背景を白などの単色にして、影が濃く出ないようライティングも工夫するなど、撮影方法にも注意しましょう。
ネットショップデザインのトレンドを学ぶ方法は？
ネットショップのデザインは、以上のような基本を押さえるだけでなく、デザインのトレンドを意識して作ることも大切です。デザインのトレンドとは、配色やフォントといった要素だけでなく、画像や動画の見せ方、ネットショップとしての機能のトレンドもあります。新たに登場した便利な機能を使わず、使いにくく古いデザインのウェブサイトのままでは、ネットショップとしての信頼性にも関わります。
トレンドを知る方法としては、多くの優れたネットショップのデザインを見ることが最も勉強になります。同ジャンルのネットショップはもちろん、異なる商品分野を扱うネットショップのデザインも積極的にチェックしてみましょう。以下のようなデザインギャラリーサイトでは、一度にたくさんのウェブサイトのデザインを見ることができます。
- SANKOU!：「ECサイト・オンラインショップ」のカテゴリあり。
- Cart Craze：ネットショップのデザインに特化
- MUUUUU.ORG：ロングページ（縦長でスクロールするタイプ）のウェブサイトに特化、「ECサイト」のカテゴリあり
- I/O 3000：おしゃれなデザインが多くネットショップもあり
2021年に注目すべきデザインのネットショップ7選
トレンド感のあるデザインのネットショップ（ECサイト機能のあるウェブサイトを含む）の中から、デザインの参考になる7店をピックアップしました。リンク先のページを開いたら、パソコンで見る場合はブラウザ画面の縦横比率を変えてみる、スマートフォンやタブレットPCの場合は縦から横に変えてみるなどして、レスポンシブデザインがどのように機能し、見え方が変わるのかもぜひ確認してみてください。
-
佐嘉平川屋
入れ替わるバナーと、商品カテゴリの両方をトップに並べたデザイン。ギフト向け商品でもあるため、「商品一覧」では価格帯から探せる工夫もあるなど、購入までの動線が明確です。 -
和乃果
シンプルかつインパクト大のファーストビューでは、商品コンセプトが瞬時に伝わるみずみずしい写真とキャッチコピーが効果的に使われています。「和」を表現するフォントや縦書き文字も生きたデザインです。 -
PRMAL
高級感と健康的な親しみやすさを両立したデザインのネットショップ。ファーストビューがスプリットスクリーン（縦に2分割されたデザイン）のレイアウトで、どのデバイスから見ても印象が変わらず、かつ使いやすい点も魅力です。 -
ヤマとカワ珈琲店
価格よりブランド感で勝負するなら、ブランディングを前面に押し出したデザインにする方法もあります。清潔感と落ち着きのある色使いも魅力的なデザインのネットショップです。 -
Hince
動画をメインビジュアルとして使うことで、思わず目を引きます。静止画では伝えきれない商品の魅力やイメージを伝えることができ、ウェブデザインのトレンドの一つでもあります。 -
チーズころん
パララックス（視差効果）というアニメーション技術を使い、異なる速度で画像などを動かすデザイン。ポップ感や生き生きとした遊び心、トレンド感も表現できます。 -
SENN
余白の使い方も美しい、ミニマルデザインのネットショップです。ページ内の要素を厳選することで商品やブランドを際立たせるデザインは、近年の流行の一つです。
以上のように、ネットショップのデザインは商品やブランドとマッチしていることも重要です。デザインのトレンド情報もリサーチして、お客様とネットショップの双方にとってメリットのあるデザインを実現しましょう。
Squareのブログでは、起業したい、自分のビジネスをさらに発展させたい、と考える人に向けて情報を発信しています。お届けするのは集客に使えるアイデア、資金運用や税金の知識、最新のキャッシュレス事情など。また、Square加盟店の取材記事では、日々経営に向き合う人たちの試行錯誤の様子や、乗り越えてきた壁を垣間見ることができます。Squareブログ編集チームでは、記事を通してビジネスの立ち上げから日々の運営、成長をサポートします。
執筆は2021年9月7日時点の情報を参照しています。
当ウェブサイトからリンクした外部のウェブサイトの内容については、Squareは責任を負いません。
Photography provided by, Unsplash