ネットショップにおける「売れるデザイン」を考える

ネットショップにおいて、デザインの良し悪しは売上に大きく影響します。

モール型のネットショップなどに出店するのであれば、デザインの自由が利く範囲は狭いかもしれませんが、その代わり、ある程度見やすさ使いやすさも担保されています。

一方、自社で運営するネットショップはデザインの全ての面を自由に決めることが可能であるが故に、デザインは「諸刃の剣」となります。
この記事では自社で経営するネットショップを「売れるサイト」にするためのデザインについて考えていきたいと思います。

＜目次＞

• デザインとは「設計」である
• 「印象」と「使いやすさ」の両立
• PCとスマホのデザインの違い
• ボタンはそれと分かりやすく

デザインとは「設計」である

「デザイン」という言葉を聞くと、テキストや見た目を装飾して、画像やイラストと共に見栄え良くレイアウトするといった行為のことを想像する人も多いと思います。

もちろんそれもデザインの大切な一要素なのですが、デザインの本質は、見た目の色や形を決めるだけでなく、ユーザーの動きを意図を持って「設計」することにあります。

これをネットショップに当てはめると、最終的には売上につながるように、それに必要な画像やテキスト、ボタンなどを使って導線設計をすることになります。

極端なことを言えば、見た目はカッコ悪くても、それで確実に売上がアップするのであれば、ネットショップにおいては優れたデザインである、ということになります。

「見た目の印象」と「使いやすさ」の両立

ネットショップを訪れたユーザーに「おしゃれ」「カッコいい」といった第一印象を持ってもらうことは間違いなくプラス要素とはなりますが、見た目が好きか嫌いか、素敵だと思うか、カッコ悪いと思うかは、見た人の主観になります。

では、どんなサイトであれば使い続けてもらえるか。それはユーザーにとって「使いやすい」サイトになります。

もちろん、見た目にも「好きだ」と感じてもらった上で使いやすいサイトとなればなおよしなので、その両軸でデザインを追求するのが理想的です。

ここからは、それではそれらを実現するために具体的に何をすればいいかについて考えてみたいと思います。

ペルソナを設定する

まず、サイトの見た目の印象について、それが人の好き嫌いに左右される以上、100人中100人を満足させることは不可能です。

では、何を軸にサイトのテイストを決めていけばいいのでしょう。そこで役立つのが「ペルソナ」を設定することです。

訪問した人間全員に好かれることは無理でも、自社のネットショップのターゲットにしたい人が確実に好きになってくれるテイストを外さないように意識しましょう。そのために、ネットショップを訪問するユーザーは、一体どんな人間なのか、性別、年齢、趣味、好きなモノやコトなどのライフスタイルなどを細かく想像しながら設定し、架空の一個人として成立させるのです。
その人物モデルを「ペルソナ」と呼びます。

ペルソナは、ネットショップで扱っている商品などからある程度絞り込んで設定可能です。

ペルソナの重要度を具体例から考えてみます

例えば、ハードなデザインのアメリカンテイスト雑貨を扱っているネットショップなのに、可愛いデザインテイストを使ってしまっては、商品と店舗のイメージにギャップが生まれてしまいます。
仮にユーザーが欲しい商品が決まっている場合は買ってもらえることもあるかもしれませんが、ネットショップそのものに対するブランドイメージは、ターゲットユーザーにとって「自分のものではない」という判断がなされ、リピート訪問してくれる確率は下がってしまうでしょう。

「お約束」の項目は他社と差別化しない

売上に繋がるデザインを意識したネットショップは、ユーザーが見たいものが見たい場所にレイアウトされており、次に見たいページに迷わず遷移することができます。つまり、ストレスがないのです。

良いネットショップほど、ユーザーが迷わず、積極的にアクションを起こせるようユーザーインターフェース（UI）が計算してデザインされています。

その中で、ホームボタンや会員ログイン、お問合せなど、他のネットショップやインターネットのサイトとして「お約束」な項目に関しては、変に他社と差別化してしまうと、ユーザーが迷ってしまう要因となってしまうため、それらについては通例に則ったデザインを心がけましょう。

テイストをコロコロ変えない

ユーザーにとって最初の印象が微妙だとしても、使い続けるうちに愛着が湧いてきたりします。ブランドイメージは積み重ねで定着しユーザーにとって心地よいものになっていくため、短期に成果が出ないからと言って、デザインのテイストをコロコロ変えてしまうのは避けたほうが懸命です。

ただし、ユーザビリティに関わる部分（ボタンの大きさや、画像の表示形式etc…）については、PDCAを回しつつ細かくチューニングして、ベストな状態を模索するべきでしょう。

ファーストビューの重要性

ボタンをクリックしたりタップした先で最初に画面に表示されるファーストビューは、そのネットショップにおいて購買意欲を促進させるか、それとも離脱するかを左右する非常に重要なポイントと言えます。

多くのユーザーは、その商品を購入するか否か、まず最初に画像で判断しますので、ファーストビューに商品画像がない状態になっていたとしたら改善すべきです。

また、ファーストビューで画像や商品紹介はたくさん出てくるけれど、「結論」となる価格を見られるまで時間がかかることもネガティブな要素と言えるでしょう。

フッターでは次のアクションを促す

特定の商品ページを全部見たユーザーに対しては、フッター部分で「次のアクション」を促し、回遊させるデザインを施すべきです。

例えば「この商品を閲覧したユーザーはこちらもチェックしています」や「あなたへのオススメ」「類似商品」などがそれに当たります。

仮に何かしらの理由（価格やサイズ、カラーなど）で閲覧した商品の購買に至らなかったユーザーも、フッターでの誘導によってサイトを回遊させ、購買の確率を高めることが可能になるのです。

PCとスマホのデザインの違い

現在では、ほぼ全てのユーザーがスマホを持っていますし、人によってはサイトを訪問する時間帯によって（会社の休憩中はPCで、通勤電車の中や自宅ではスマホでといった感じで）スマホとPCを使い分けるというユーザーもいるため、同じネットショップであってもPC用とスマホ用で表示形式を変える必要があります。

一般的にPCは画像やテキストなど各要素のブロックにメリハリをつけてレイアウトすると見やすくなります。また、トップビューに表示する商品をスライド表示など動的な方法を取ることも有効です。

一方、スマホの場合は画面が小さいので、テキストを極力少なく、アイコンなどで省スペースすることで見やすさを追求しましょう。また、PCに比べデータの読み込みに時間がかかるため、データは軽く、トップビューへの表示も静止画の方が無難です。

これらを意識してPC用のページとスマホ用のページを別々に作っても良いのですが、今後、5Gが実用化されることによってPCとスマホで読み込み時間にも差がなくなってくることを考えると、制作に工数はかかったとしても「レスポンシブデザイン」（同じURL、HTMLコードを配信して、デバイスによって最適な表示をしてくれるデザイン）を採用することをオススメします。

ボタンはそれと分かりやすく

ネットショップの目的は言うまでもなくユーザーに商品を買ってもらうことであり、そのためには必ず「カートに入れる」「購入する」といったボタンやリンクをクリック（あるいはタップ）してもらう必要があります。

そのためのボタンやリンクが、見た目のデザイン優先でそれとわからないのは致命的に売上を下げる結果を招いてしまいます。したがって、ボタンやテキストリンクは、確実にそれとわかるよう意識して色やサイズを決定しましょう。

ボタンの色は白は避け、ベタ塗りで目立つ色の方がクリックを促進できます。スマホの場合、タップしやすいボタンは幅1cm以上と言われているので、それも意識すると良いでしょう。

まとめ

いかがでしたか。

デザインに正解はありません。上記で述べたポイントはある程度検証されている方法ではありますが、要は最終的にユーザーが買ってくれるのであれば、それ以外のデザインでも全然構わないわけです。

大切なのは、自社ネットショップのユーザー動向を常にウォッチし、分析し、わかったことを実践することです。それを念頭に置いて、デザインと向き合ってみてください。

PR：ECサイト構築パッケージ「EC-ORANGE」