WEBデザイン

ネットショップ制作

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

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

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

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

  • 自分のお店に最適なテンプレートを知りたい方。
  • 売れるレイアウトの基本的な事柄を知りたい方。
  • WEBサイトの視線誘導について理解したい方。

デザインを語るその前に

売れる・売れないは商品画像で9割以上は決まる

ステーキ

ネット通販で売るために一番重要なのは「商品写真」です。

とくに、食品、ファッションなど見た目で購入が決まるようなものは9割以上は商品画像で決まると断言してもいいですね。

このあと売るためのデザインについて色々語るのですが、なによりも優先すべきは商品画像だという点を忘れないでください。

--どこに”時間”と”お金”をかけるかという話です。

たとえば、予算が少ないなら、BASE、STORES、あたりを利用して、大部分の予算は写真撮影に費やします。売れるデザイン、レイアウトなんて売れる商品画像ありきの話だと考えてください。

今時店長
という「身も蓋もない」ことを言ってからデザインについて語ります。でも、このお金を掛けるバランスはとても大切です。

超格安な制作代行サービス

超格安な制作代行サービス
※料金は2020年6月時点のものです。

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

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

商品のレイアウト

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

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

質問:一番売れるテンプレートはどれでしょう?

デザイン1
デザイン1

デザイン2
デザイン2

デザイン3
デザイン3

上記3つのテンプレートは、無料ネットショップ作成サービスの「STORES」で選択できるテンプレートの一例です。

このなかで一番売れるのは、どのテンプレートだかわかりますか?

答えは、商材と商品点数で変わります。

では、そのテンプレートを選択する上で参考にしてほしいポイントについて解説していきます。

デザイン1を選んだ方がよい商材とは

デザイン3

これは、国内ファッション通販サイト、ZOZOSHOPLIST、などが採用しているレイアウトとおおむね同じサイズ感です。

このデザインが最適なのは、ファッション通販サイトをはじめとする、商品一覧でデザインを選ぶ必要のある商材です。

とても汎用性の高いデザインです。

そんなことない!と思われる方もいるかもしれませんが、

これは、大手通販サイトが色々な形で分析して出したサイズ感なので、とても信頼性の高いサイズ感です。

デザイン2を選んだ方がよい商材とは

デザイン2

先程よりも商品点数が多いレイアウトです。商品画像が増えた結果、画像サイズは小さくなりデザインの細かな部分が若干みえづらくなりました。

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

なぜアスクルは、こちらのデザインを選ぶのでしょうか?

それは、商品一覧で画像でデザインの詳細な部分をみせるよりも、1ページより多くの商品をみれたほうが「ユーザービリティ」が高くなるからです。

ユーザービリティとは、インターネットにおけるWEBページの使いやすさや使い勝手のことです。

アスクルの販売しているのは事務用品は、ZOZOのように一覧で細かなデザインが確認できなくても不便さはないというわけです。

だから、こちらのデザインが採用されているわけですね。

デザイン3を選んだ方がよい商材とは

デザイン1

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

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

健康食品・コスメ

答えは、健康食品、化粧品、ダイエット器具などですね。

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

縦一列にすることで、視線もそらすことなくで、まるで語りかけるようなコンテンツを作ることができます。サイドバーは無くてもいいかもしれません。

勘違いしてほしくないのですが、

このデザインが絶対にファッション通販に向いていないわけではありません。

説明が必要な商材であれば最適なデザインだと言えます。

深夜の通販番組のイタリア革のバッグ、真珠のネックレスなどを思い出してみてください。この形がベストだとわかりますね。

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

ネットショップには王道のレイアウトが存在しますが、それが全ての店舗で同じように最適とは言い切れないというわけです。

自分のお店にあったレイアウトを選択しましょう。

今時店長
ネットショップのデザインはシンプルなものを選びましょう。「STORES.jp」は、初心者でもプロ仕様のネットショップが作れるのでオススメです。

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

家族

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

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

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

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

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

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

大手はここまでしている

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

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

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

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

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

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

ハミーは、楽天市場ショップ・オブ・ザ・イヤーも何度か受賞、現在は東証一部(3134)の企業です。

ボタンの色は何色が売れるの?

色鉛筆

たとえば「購入する」というボタンの色は何色が最適だと思いますか?

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

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

ちなみに、楽天市場は「赤」、Amazonは「オレンジ」、ZOZOは「グレー」です。じつは店舗のメインカラーとも同じです。

今時店長
とくに、高齢者の多いお店は、文字の大きさ、注文方法のわかりやすさを追求してください。それだけで売上がアップすることがよくあります。

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

裏口

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

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

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

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

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

導線

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

視線の動きは完成してから検証して改善していくものです。

具体的な方法としては、自分が買物をする気持ちになって自分の店舗をチェックしてみてください。自分ではちょっと・・という方は、知人やスタッフなど第三者に試してもらいましょう。

ヒートマップ

また、アクセス解析のヒートマップを活用してもいいですね。

上画像は当サイトのヒートマップ解析ツールの結果です。

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

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

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

続きを見る

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

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

顔写真

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

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

今時店長
Googleアドセンスが日本に上陸した2003年頃は、アドセンス広告の上などに女性の画像を掲載することが禁止されていました。それほど、視線が集まるというわけです。

商品が探しやすい環境を整えましょう

検索エンジン

意識してほしいのは下記2つの位置です。

  • 検索ボックス
  • 問い合わせ先

検索ボックスは、ファーストビューでみえる位置に設置しましょう。

サイドバーに設置する場合には、最上段またはその付近で見つけやすい場所が最適です。電話での問い合わせでも案内がスムーズにできます。

お問合せ先は、多くの店舗が設置している最下部にはおいておきましょう。とくに多い質問内容は、よくある問い合わせなどをつくり掲載してもいいですね。

今時店長
検索の使いやすさ、検索結果の見やすさもあわせてチェックしてみてください。検索ユーザーは見込み客の可能性が高いので、直接売上にも影響してきます。

今回のまとめ

今時店長

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

もう一度まとめると

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

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

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

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

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

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

おすすめ記事

無料ネットショップ 1

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

商品仕入れ 2

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

ハンドメイド販売 3

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

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

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

確定申告 5

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

同梱チラシ 6

今時店長皆さんこんにちは、今時店長です。 今回は、ネットショップの荷物に同梱するチラシについて、実際に効果のあった成功パターンとデザインの作り方のコツなどをご紹介します。 --同梱・同封チラシとは 荷 ...

Tシャツ 7

今時店長皆さんこんにちは、今時店長です。 今回は、誰にでもウケる面白いTシャツの作り方をご紹介します。 自分用はもちろんのこと、あなたが店長となりネット通販で販売する方法まで解説しています。Tシャツ作 ...

FREE 8

今時店長皆さんこんにちは、今時店長です。 今回は「本当に無料で使えるの!?」と言いたくなるような、ホームページ作成サービスだけを厳選してご紹介します。 無料サービスは広告が目立ちすぎて使えない・・。そ ...

-ネットショップ制作

© 2020 いまどきのネットショップ開業講座