ネットショップを訪れたユーザーが商品を購入するかどうかの決定には、ウェブサイトのデザインが大きく影響します。ネットショップの印象だけでなく、商品の選びやすさ、購入手続きの進めやすさなども、ユーザーを意識したデザインが鍵を握っています。ネットショップのデザインを自分で作りたい人のための、デザインの基礎知識やコツを解説します。
目次
ネットショップのデザイン、依頼と自作のメリット・デメリット
ネットショップのサイトデザインを作るためには、プロのウェブデザイン制作会社に依頼する方法と、事業主自らスキルを学んで自作する方法があります。
プロに依頼する場合、ECサイトに強い制作会社であれば要望を聞いて優れたデザインを作ってくれる反面、自作よりコストがかかります。自作であれば、時間はかかるものの、細部にまでこだわりながらデザインを決め、完成後の修正や改変もいつでも可能です。コストが無料または非常に安い点も魅力といえます。
最近は自作といっても、デザインのテンプレートを使って作る方法もあるため、ゼロから作るよりは遥かに負担が少なく、かつ効果的なサイトを作ることができます。自作のために、デザインの基本や注意すべきポイントをチェックしておきましょう。
ネットショップのデザイン決定の考え方
ネットショップのデザインを決める上で最も重要なことは、ユーザー目線での使いやすさです。ネットショップのオーナーやデザイナーが気に入ったデザインに仕上げても、ユーザーが使いにくく、購入に結びつかないデザインであれば、折角の労力が無駄になってしまいます。
ネットショップの視覚的な印象が「おしゃれ」「かわいい」「格好いい」ものであったとしても、それだけでは売り上げは促進されません。また、構造的に使いやすく設計されたデザインのネットショップであっても、色や形、配置といったデザイン性が優れていなければ、「人気がなさそう」「信用できない」「格好悪い」と受け止められてしまうこともあります。印象と機能の両方を組み合わることで、ユーザーに「このネットショップで買おう」と直感的に感じてもらい、購入を後押しするデザインを作り出しましょう。
優れたネットショップのデザインの最低条件
ユーザーに使いやすく、購入を後押しするネットショップのデザインには、五つの最低条件があります。
-
コンテンツに優先順位をつける
ネットショップのページの、下にスクロールせずとも表示され、必ずユーザーの目に入る部分を、ファーストビューと呼びます。特にスマートフォンで表示させる場合、ファーストビューに入る情報量は限られ、そこに魅力的な画像や情報がないとユーザーの興味を引くことができません。売りたい新商品の情報やセール情報など、コンテンツとして優先度の高いものがファーストビューにくるようにするためには、優先順位を決めてからデザインを考える必要があります。 -
レスポンシブデザインになっている
パソコン、スマートフォン、タブレットなど、表示させる端末に応じて自動的に見やすいレイアウトへの切り替えができるウェブサイトのデザインを、レスポンシブデザインと呼びます。違うサイズ、違うレイアウトでありながら、同じネットショップのウェブサイトであることがわかり、かつ見やすく使いやすいデザインが理想的です。 -
シンプルかつ必要な情報がそろっている
ネットショップにたどり着いたユーザーが、商品ページを開き、商品をカートに入れるまでに何が必要か考えてみましょう。わかりやすい商品写真、価格、サイズや材質などの仕様、使い方や商品の長所などの説明により納得できたとき、ユーザーは購入を決断し、商品をカートに入れます。必要な情報がそろっていることに加え、無駄を省いたシンプルなデザインが商品のわかりやすさを引き立てます。 -
カートに入れるためのボタンは目立たせる
商品ページの「カートに入れる」のボタンは、他の文字より目立たせるのが定石です。せっかく商品を買いたいと思っても、どこに購入の機能があるかわからなければネットショップの売り上げにはつながりません。一般的に購入ボタンの色は、緑、または青がクリックされやすく、小さすぎたり他の文字と接していると押しにくくなります。 -
関連商品を表示させる
各商品ページの下部などにある「関連アイテム」「こちらもおすすめ」などの他の商品情報は、ユーザーが探しているかもしれない商品を提示する機能です。さらに、クロスセルを促進し、ネットショップの売り上げアップにも効果があります。関連性が感じられる、商品写真がわかりやすい、押し付けがましさがないといったポジティブな印象を与えるデザインが重要です。
ネットショップのデザインを知るためには
印象と構造の両方において優れたネットショップのデザインは、自分で一から考えるより、既存のネットショップを参考にしながら学ぶことがお勧めです。
同分野の競合他社のネットショップは、デザインを学ぶ上で好例といえます。買い物をするユーザーの目線で、上述の五つの最低条件がそろっているか、買い物をするときに使いやすいと感じられるかを確認してみましょう。複数のネットショップのデザインを確認し、良い点は参考にしながら、改善すべき点もあればリスト化し、自社ネットショップのデザインに生かします。
さらに、ウェブデザインばかりを集めた以下のようなギャラリーサイトでは、優れたウェブサイトのデザインの実例を知ることが可能です。フード、ファッション、ビューティーなど、ネットショップの業種ごとに気になるデザインをチェックしてみてください。
- I/O 3000: おしゃれなデザインが多い
- Cart Craze: ネットショップのデザインに特化
- SANKOU!: ECサイトのカテゴリーあり
作りたいデザインの候補をいくつか検討したら、ネットショップ用に作られたデザインのテンプレートから、理想に近いものを使って自作するという方法もあります。テンプレートそのものもデザインを学ぶために適したリソースなので、検索してみましょう。テンプレートには有料と無料のものがありますが、有料でもプロの制作会社やデザイナーに依頼するよりは遥かに安価に利用できます。
ネットショップで使えるデザインの基本ルール
ネットショップに限らず、デザイン全般において色や調和などの要素・構成がユーザーに与える効果を頭に入れておきましょう。競合ネットショップのデザインなど具体的な例を見ながら考えると、より理解しやすくなります。
まず、デザインにおける七つの表現の要素（エレメント）を、ネットショップのデザインをする際を例に考えてみましょう。必ずしも全ての要素が、一つのネットショップに必要になるわけではありませんが、概念として理解しておくことでデザインの幅が広がります。
| 要素 | ネットショップのデザインにおけるポイント |
|---|---|
| 色 | 奇抜さを狙った色の組み合わせや、主張の強すぎる3原色（赤、青、緑）はネットショップとしては見にくくなるため避けましょう。背景は白を基本とすると失敗しにくいデザインになります。そこにアクセントにするテーマカラー（1色または2色）を決め、強調する文字色や装飾などに使います。競合ネットショップと違う色をテーマカラーにすることで、独自性の印象をユーザーに与えることも可能です。 |
| 線 | スペースを区切ったり、強調するために効果的に使います。色や線の太さなどによっても、デザインの幅が広がります。文字の書体（フォント）も線により構成され、異なる線が文字の印象を変え、ネットショップの印象にも影響します。 |
| 形 | ネットショップのデザインはあくまで、商品を引き立てるものである必要があるため、商品写真はシンプルな四角（長方形、正方形）が望ましいです。ただ、四角だけだと単調になるようなら、ショップのプロフィールなどで丸形や楕円形の写真を使う、ロゴに曲線的な形を使うなどすることで、全体のデザインに変化をつけることも可能です。 それぞれの形がデザインにもたらす印象も重要で、曲線的な形は柔らかく優しい印象に、直線的な形はフォーマルで整然とした印象につながります。 |
| フォーム | 縦、横、高さの3次元のフォーム（立体）を2次元の中に表現し、球体、立方体・直方体、三角錐を感じさせることもデザインの特徴になり得ます。 |
| 空間（スペース） | 文字や写真が画面いっぱいにびっしりと並んだネットショップは、ユーザーに威圧感を与え、疲れさせてしまいます。優れたデザインには、適切な空間、つまり「余白」が意図的に配置されています。 |
| 明度（トーン） | 明るさと暗さを意味する明度を調整することで、画像の印象を変える、色の趣きを変えるといったことが可能です。 |
| 質感（テクスチャー） | 人間は目で見て、ざらざら、すべすべ、などの質感を想像します。ネットショップでも、硬質なガラスの質感、柔らかな布の質感などを、デザインに用いることで個性を表現できます。 |
上の要素の組み合わせ方（構成）にも、デザインの原則があります。以下の六つは、構成方法のベースとなるルールです。ネットショップのページごとに、必要な構成を効果的に使用しましょう。
| 構成 | ネットショップのデザインにおけるポイント |
|---|---|
| 近接 | 文字通り「近く、接すること」。近くに配置された画像と文字は「関連性のあるもの」で「一つのグループ」と見なされ、逆に離して配置することで別のグループであると表現できます。画像とその商品名が離れすぎていると、近接のルールに則っていないので、関連性のあるものかどうかを視覚的に判断することができません。 |
| 整列 | 整列とは、ただ隣同士に配置するだけでなく、規則を設け、それにしたがって並べること。同一サイズ、同一間隔、同一フォントなどの規則を作ることで、人は順番に一つずつ見やすくなります。カテゴリー別などの商品一覧のページで、横並び、縦並びの画像が整列していないデザインだと、乱雑かつプロフェッショナルでない印象になります。 |
| 反復 | 同じ形、同じ色の連続により、デザインに統一性やリズムを生みます。同じ形の商品の相違点（色、模様など）を強調して見せたいときにも、反復と整列が効果的に使えます。 |
| コントラスト | 対比（コントラスト）による差別化と、リズムの変化は、デザインのアクセントになります。濃い色の連続の中に一部だけある薄い色や、普通サイズの黒い文字列の中に突如として登場する赤字・太字は、否応なしに目を引き、印象に残ります。 たとえばセールのバナーやアイコンでは、「30％オフ」や「本日最終日」を大きく目立つ色にして、「※ノベルティは5,000円以上の購入に限る」を小さく、地味な色にするという強弱のコントラストで、目を引くデザインになります。 |
| 調和 | 完全に同じ色でなくても、秋らしい色、都会的な色など、同系統の色を複数使えばバラバラの印象にならず、デザインに調和が生まれます。異なるものを使いながらも、組み合わせに感じられる統一感が調和です。一般的に、パステルカラーのグリーンとピンクは調和しますが、蛍光グリーンとパステルピンクでは不調和です（不調和をあえてデザインの基調に使うケースもありますが高等テクニックといえます）。色に限らず、形や質感などのデザインの「要素」が調和していると、見ていて落ち着く、安定感のある状態になります。 |
| 割合 | ネットショップのページで、強調して伝えたいことは大きく、補助的に伝えたいことは小さく掲載します。その割合の違いが、視覚的に「重要性の違い」として判断されます。注目してほしい新商品やセールの情報は大きく、ネットショップの問い合わせ先や所在地は小さく載せることで、どちらにより注目してほしいかがわかります。商品ページなら、最も注目してほしい画像を大きく、文字情報の中でも商品名や価格は比較的大きめに載せます。新聞の一面やウェブメディアでも、発信者が最重要と考えるニュースが最も大きく掲載されるのが良い例です。 |
ネットショップのデザインを自作する際、デザインの方向性に迷ったら、「ユーザーから見て使いやすいか」という起点に立ち返ってみましょう。ユーザーの使いやすさは、買い物のしやすさであり、購入へのつながりやすさです。デザインを通じて、良い商品やサービスをわかりやすく親切に提供したいという思いを、ネットショップとして表現してみてください。
Squareのブログでは、起業したい、自分のビジネスをさらに発展させたい、と考える人に向けて情報を発信しています。お届けするのは集客に使えるアイデア、資金運用や税金の知識、最新のキャッシュレス事情など。また、Square加盟店の取材記事では、日々経営に向き合う人たちの試行錯誤の様子や、乗り越えてきた壁を垣間見ることができます。Squareブログ編集チームでは、記事を通してビジネスの立ち上げから日々の運営、成長をサポートします。
執筆は2021年8月2日時点の情報を参照しています。
当ウェブサイトからリンクした外部のウェブサイトの内容については、Squareは責任を負いません。
Photography provided by, Unsplash