WEBデザイン

その他

【超重要】ネットショップの売れるデザイン4つのコツ!基本レイアウト・テンプレートの決め方と参考例

今時店長
皆さんこんにちは、今時店長です。

今回は、ネットショップで売れるデザインを決めるための4つのコツをご紹介します。

こんな方にオススメの記事

  • ネットショップのテンプレートの選び方を知りたい方。
  • ネットショップで売れるレイアウトを知りたい方。
  • ネットショップにおける新選誘導について理解したい方。

売れるデザイン4つのコツ

レイアウトは商材と商品点数で決める

商品のレイアウト

ネットショップのレイアウトは商材と商品点数で決めていきます。

言葉で説明してもわかりづらいので具体的にみていきましょう。

デザイン3

たとえば、PC4列、スマホ2列の一番ポピュラーなレイアウト。

このタイプは、ファッション通販サイトで導入されているサイズ感です。

国内ファッション通販サイト、ZOZOSHOPLIST、あたりはこのサイズですね。

このサイズは、複数の商品からデザインを見て選択したい場合に選択します。

大手通販サイトはいろいろな形で分析をして、このレイアウトとサイズに到達しているため、信頼できるレイアウトだと言えるでしょう。

では、次のレイアウトです。

デザイン2

先程よりも商品点数が増えました。

このタイプは、先ほどよりも商品点数が多い場合に選択します。

たとえば、事務用品を販売している「アスクル」などはこのデザインに近いです。

商品一覧の画像サイズは、ファッション通販ではよくみえないと選びづらいわけですが、事務用品などであれば商品名が読めれば、たくさん商品が並んでいたほうが短時間で欲しい商品を見つけることができます。

最後は一列のレイアウトです。

デザイン1

このレイアウトが最適な商材を考えてみてください。

健康食品・コスメ

このデザインは、商品画像だけでは魅力が伝わらない商材でよく利用されます。

商品画像に加えて、商品のメリットや特徴、実際に利用したユーザーの感想などを一枚の商品ページで話しかけるように説明する場合に利用します。

ズバリ、健康食品、化粧品、ダイエット器具などでよく利用されます。

健康食品でよく知られる「やずや」の商品ページなどもこの形ですね。

重要なのは、商材と商品点数で最適なレイアウトは違うということです。

  • ファッション(商品点数多い)・・・4列
  • 事務用品(商品点数多い)・・・6列
  • 健康食品(商品点数少ない)・・・1列

商材や商品点数を考慮してからレイアウトを決めていきましょう。

ただし、ファッションなら4列を選ぶのが必ず正しいわけではありません。

深夜の通販番組のイタリア革のバッグ、真珠のネックレスを思いだしてください。

たとえ見た目で購入が決まる商材でも、詳細な説明がないと購入まで至らない商材なども1列が最適な選択になります。

当然ですが、全ての商材で万能なレイアウトなどは存在しません。

今時店長
上記レイアウト画像はは、無料ネットショップ作成サービスの「STORES.jp」よりお借りしました。初心者でもプロ仕様のネットショップが作成できます。

購入者の属性に合わせたデザインをする

家族

あなたのお店のお客さんをイメージしてみてください

  • 年齢・・・文字サイズ
  • 性別・・・色合い
  • 趣味嗜好・・・デザイン

一番わかりやすいのは文字サイズですね。

たとえば上記でもあげた「ZOZO」と「やずや」で文字サイズを比べた場合、高齢者が多いやずやはZOZOよりも文字サイズは2倍近く大きいです。

重要なのは、属性に合わせた最適なデザインとレイアウトを提供することです。

性別や趣味嗜好なども属性に合わせなければ売れません。

大手はここまでしている

Hamee株式会社というスマホケースを販売している企業をご存知ですか?

楽天市場でさっと検索しても3サイト以上出店していました。

全てスマホケースのお店ですがなぜ3サイト以上も出店するのか・・・・。

すべては顧客に合わせた販売方法をするためです。

同じ商品でも「男性用」と「女性用」で商品画像を変えて出品しています

このように、顧客全員に同じサービスを提供するのではなく、属性に合わせて最適な販売方法を変更する手法を「パーソナライズ」と呼びます。

ハミーはパーソナライズでマザーズ上場まで行き着いています。

ボタンのデザインもパーソナライズを意識する

色鉛筆

たとえば「購入する」というボタンの色です。

青がよいというサイトもあれば、緑がよいとか、赤がよいとか、答えはまちまちで正解をみつけることはできません。

どれでも構わないという考え方もできますが、そこもパーソナライズで属性に合わせて選択すると考えると正しい道に近づけるのではないでしょうか。

ちなみに、楽天市場は「赤」、Amazonは「オレンジ」、ZOZOは「グレー」です。じつは店舗のメインカラーとも合っていたりします。

今時店長
とくに高齢者の購入層が多い店舗は徹底的に突き詰めましょう。「カゴ落ち」を防ぐだけで売上は大きく変わる可能性があります。

全てのページがトップページだと考える

裏口

ネットショップのアクセス解析をみると、トップページ以外にも商品ページから来店するユーザーが多いことがわかります。

つまり重要なのは、商品が購入に至らなかった場合に、ほかの商品に興味を持ってもらえるように商品ページの下部分を作り込むことが大切です。

とくに、楽天市場、Yahoo!ショッピングなど、ショッピングモール型のネットショップは、商品ページがトップページだと考えて時間を掛けて最適な配置を考えてください。

今時店長
ブログに広告を掲載するのであれば「記事の下」が圧倒的にクリック数が高いです。ネットショップも同様に「商品の下」が一番有効活用するべき場所というわけです。

完成後も常に検証を続けましょう

導線

よくデザインの導線を解説しているサイトを目にしますが、基本的にあれば後付けの理論であって、先に学ぶことはありません。

一番大切なことは、デザイン(完成)したあとに検証することです。

ヒートマップ

上記は、当サイトトップページをヒートマップ解析ツールで調査したものです。

少し調査日数が少ないのでわかりづらいかもしれませんが、上の4つのバナーでも一番左の「基本料金無料」よりも一番右の「資金0円の受注生産」の方がクリック数が少ないことを知ることができました。

無料ヒートマップ解析ツール User Heat : どこが読まれているか見えるアクセス解析
無料ヒートマップ解析ツール User Heat : どこが読まれているか見えるアクセス解析

ヒートマップ解析ツール開発企業のユーザーローカルが提供する、無料ツール。アイトラッキングを疑似体験。

続きを見る

常に検証してデータに基づいてレイアウトを変えていきましょう。

顔写真は視線をあつめるのに有効

顔写真

視線を誘導するテクニックとして、人物の顔写真を掲載するのは有効です。

楽天市場のカニを持っている子供、スマホケースを持っている女性など。商品写真に人物を入れた写真などもその効果を狙ってのものだと言えるでしょう。

今回のまとめ

今時店長

今回は、ネットショップのデザインについて、4つのコツをご紹介しました。

もう一度まとめると

  • レイアウトは商材と商品点数で決める
  • 購入者の属性に合わせたデザインをする
  • 全てのページがトップページだと考える
  • 完成後も常に検証を続けましょう

全ての商材に対して万能な答えはありません。

もちろん、当サイトの情報が正しいとも限りません。

あなたのお店に最適なデザインを模索してみてください。

というわけで今回はここまで。
また新しい情報などあれば更新していきます。

今イチオシの無料サービス

今時店長
2019年7月に「STORES.jp」は大幅改変されました。無料会員にもレイアウト機能全開放!決済手数料も業界最安値クラスで申し分ありません。

今月の入会特典のあるサービス

  • エックスサーバー|新規サーバー申込みでドメイン代金がずっと無料!(他サービスからの移管もOK)申込対象期間:2020年4月30日まで

おすすめ記事

無料ネットショップ 1

今時店長皆さんこんにちは、今時店長です。 今回は、基本料金無料(タダ)で出店できる、ネットショップ作成サービスのについて、人気の傾向や料金や解説したのち、おすすめサービスをご紹介します。 こんな方にお ...

商品仕入れ 2

今時店長皆さんこんにちは、今時店長です。 今回は、ネットショップの商品仕入れについてご紹介します。 個人が趣味や副業でも挑戦できるアイデアから、さらに本業として商品を仕入れるための基礎知識から具体的な ...

ハンドメイド販売 3

今時店長皆さんこんにちは、今時店長です。 今回は、ハンドメイド・手作り・クラフト作品の方法について、ネット通販業界歴10年以上の経験をもとに、最適な販売方法について解説します。 こんな方にオススメの記 ...

オリジナルTシャツの販売 4

今時店長皆さんこんにちは、今時店長です。 今回は、自作のデザインを在庫リスクなしで販売できるサービスをご紹介します。 こんな方におすすめの記事 資金は無いけどオリジナル商品を販売したい方。 YouTu ...

確定申告 5

今時店長皆さんこんにちは、今時店長です。 今回は、ネットショップを開業している個人事業主の方におすすめしたい、三大クラウド会計ソフト(やよい、マネーフォワード、フリー)について無料で使える範囲について ...

-その他

Copyright© いまどきのネットショップ開業講座 , 2020 All Rights Reserved.