ネットショップをはじめるうえで、デザインはとても重要です。
商品の見やすさ、ブランドイメージ、購入者の年齢や属性に合わせたデザインなど、デザインが売上に直結すると言っても過言ではありません。
とはいえ、はじめてネットショップを立ち上げるさいは、どのようなデザインにすればいいのか、よく分からないですよね。
そこでこの記事では、売れるネットショップに共通するデザインのポイントを解説していきます。
目次
売れるデザインに正解はない
はじめから根も葉もないことを言いますが、これがネットショップデザインの本質です。
なぜなら、ネットショップと一口に言っても、そのお店のコンセプトや売っているものはそれぞれ異なっていて、お店に来るお客様も異なるからです。
そんな多種多様な商品とお客様が複雑に絡み合うネットショップにおいて、一つの正解を求めるのは逆に非効率なのです。
例えば、人気テーマパークのショップに期待するデザインと、イタリア製高級家具のショップに期待するデザインが異なることはかんたんにイメージできるかと思います。
ではそんなネットショップにおいて「売れるデザイン」とは何を指すのか？
考えるポイントは以下の2点です。
・「イメージ作り」のデザイン
・「購入させる」デザイン
イメージ作りのデザイン
イメージ作りのデザインというのは、かんたんに言えば「ぱっと見の印象」です。
この印象が来訪者のイメージとマッチしていれば、すんなりショップ回遊に移ってくれる可能性が高いですが、来訪者に違和感を与える場合敬遠される可能性が高まります。
例えばサーフやリゾート系の商品を扱っているのに、ショップを訪れてみるとジャングルのような雰囲気になっていると、さすがに違和感を感じますよね。
またお世辞にも「おしゃれ」とは言えない感じだと、リゾートなどのイメージとは離れてしまい違和感が出てきてしまいます。
そういったことを考えるのが「イメージ作り」のデザインです。
「購入させる」デザイン
購入させるデザインとは、お客様が訪問して、商品をカートに入れて、決済をするという一連の動作を邪魔しないデザインのこと。
例えば商品をカートに入れたいのに、どのボタンを押せばいいか分からないと行動が阻害されてしまいます。
そういったことがないように、ナビゲーションしたりするのが「購入させる」デザインとなります。
今回はこの2つのデザインに分けてポイントを解説していきます。
イメージ作りのデザインのポイント
それではまずイメージ作りのデザインのポイントを解説していきます。イメージ作りのデザインにおいて重要なのが、お客様に合わせること。
ショップのコンセプトやターゲットにあわせた印象になるようにしていく必要があります。
Point1. メインカラーを統一する
多くの色を使うと、見づらくなってしまうため、メインカラーを決めて、同系色でまとめるようにしましょう。
見やすいデザインの例としては、白色などはっきりした色をメインカラーにしつつ、その他の色を1～2色アクセントとして使用する、のがおすすめです。
アクセントカラーも数をしぼり、あまり多くの色を使わないようにしましょう。色の選択に迷うときは、「色相環」などで検索してみましょう。
Point2. 写真に力を入れる
デザインには関係ないのでは？と思う方もいるかもしれませんが、ネットショップにおいて商品写真は非常に重要です。
というのもネットショップの画面の中で、多くの面積を占めるのは商品写真だから。
商品写真に力を入れることで、魅力を高めることもできますし、何より第一印象が変わってきます。商品写真のトーンを揃えていくことが、最終的にショップの第一印象につながります。
商品写真の撮り方は下記の記事も参考にしてみてください。
Point3. 購入者層に合わせる
年齢や性別などで、色合いや文字のサイズを決めることも大切です。
たとえば、50〜60代向けの商品を販売するネットショップであれば、落ち着いた色合いの、大きめの文字サイズのデザインの方がいいかもしれません。
色合いが奇抜だったり、文字のサイズが小さかったりすると、画面が見づらく、ネットショップから離れていてしまう可能性もあります。
一方で、10〜20代向けの商品を販売する場合は、ポップな印象で、画像などが多く、ワクワクするもののほうがいいかもしれません。
かならずしも年齢で区切れるわけではありませんが、このように、ネットショップのデザインを購入者に合わせることにより、ショップを居心地のいいものにしていきましょう。
Point4. 文字・書体を統一する
基本中の基本ですが、文字の書体を統一する、ということも忘れてはいけません。
文の中に、違う書体がふくまれている場合はもちろんのこと、商品名と説明文の書体が違ったりしても、読みづらくなってしまいます。
そのため、よほどこだわりがない場合は、書体は統一するように心がけましょう。
なお、「BASE」では、 万人に見やすい「ヒラギノ体」やパソコンなどで見やすい「游ゴシック体」、新聞用の書体で読みやすい「Times New Roman」などのフォントを利用できます。
購入させるデザインのポイント
購入させるデザインに必要なのは、お客様の行動を阻害せず、「商品を見る→カートに入れる→購入する」という一連の操作をスムーズに終えられるようにすること。
それを達成するためのポイントを解説します。
Point1. 装飾しすぎない
デザインを考えていくと、あれも入れたいこれも入れたい、となり、非常に要素が多いデザインができあがりやすいです。
売上をあげるショップを目指すのであれば、情報を削ぎ落とすことも重要です。
ネットショップを見ている最中に、デザインを装飾しすぎていて「どこをクリックしていいのかわからない」「何の情報を伝えたいのかがわからない」と思ったことはないでしょうか？
つまり、雑音が多いと「購入」というもっとも大事な行動を妨げてしまうのです。
勘違いしてはいけないのは、あくまでも「無駄な」情報を削ぎ落とすことであり、商品に関する情報などは、積極的に入れておく必要があります。
2019年に博報堂が調査したデータによれば、ECショップなどでは、買い物に「楽しさ」を求める傾向にあるようです。
たとえば、「あ、こんな商品もあるんだ」「こんなストーリーのある商品なんだ」といった発見は、お客様を満足させ、購買意欲をそそります。
そのため、ショップ運営者は、消費者が求めている情報とそうでない情報の、取捨選択がとても重要となってきます。
Point2. 視線移動を意識する
すこしむずかしい話になりますが、お客様の視線移動を意識してデザインすることも、とても大切です。
人の目線の動きには、決まったパターンがあると言われており、有名なものに「Zの法則」と「Fの法則」と呼ばれるものがあります。
たとえば、サイトの画面を見るときの視線が、アルファベットの「Z」のように動くのが「Zの法則」、「F」のように動くのが「Fの法則」です。
共通するのは、視線のはじまりはページの左上からで、その後右に移動した後、すこし下に進み、また左から右へ移動する、という点です。
そのため、かならず伝えたい情報は、ページの上段に記載し、文章や画像などで情報をつたえるときは、左から右への移動を意識しましょう。
初訪問でもリピーターのお客様であっても、多くの人に見やすいデザインとなります。
ネットショップのデザイン参考事例
さてここまでネットショップで抑えておきたいデザインのポイントを解説してきましたが、実際にどのようなデザインがあるのか気になると思います。
「BASE」でショップを作っている方のデザイン例は下記のページに掲載していますので、ぜひ参考にしてみてください。
また導入事例でご紹介しれ入るショップ様は、どのショップも素敵なデザインとなっていますので、きっと参考になるはずです。
運営ノウハウなども語っていただいていますので、ぜひ参考にしてみてください。
おしゃれなデザインのネットショップを作るなら、どのサービスを選ぶかが重要。選び方は？
さて、ここまで、ネットショップのデザインにおいて、おさえておきたい基本的な項目についてお伝えしました。
ただ、おそらくこの記事を見ている方は、「おしゃれなデザインにしたい」という思いもあるのではないでしょうか。
それを叶えるには、そもそも、どのネットショップ作成サービスを選ぶか？も、重要なポイントとなります。
とくに、専門家に外注せず、自分でデザインする場合、下記の2点に気をつけて選ぶことをおすすめします。
なお、各ネットショップ作成サービスの情報は、下記の記事でまとめていますので、こちらも参考にしてみてください。
1. 自分で触りたいなら、テンプレートがあるネットショップ
ネットショップのデザインをするさいに、そもそも、自分でいろいろと工夫を凝らしたいのか、外注してプロにお願いしたいのか、イメージはさまざまかと思います。
仮に、自分でこまかいところまで触って変えていきたい場合は、デザインのテンプレートがあるネットショップ作成サービスを選びましょう。
なお、「BASE」には、無料と有料のテンプレートが存在します。
無料テンプレートは、はじめての方でも抵抗なくかんたんにデザインできるように作られているため、デザインを凝ったものにしたい方には、物足りないこともあるかもしれません。
「BASE」の有料テンプレートには、あらゆるジャンルの商品に対応できる、綺麗でシンプルな「DEPARTMENT」、写真が映えるスタイリッシュなデザインの「Copenhagen」など、デザイナーが作ったプロ品質のデザインが多数あります。
2. 専門知識がなくても、デザインの編集・カスタマイズができるか
そもそも、専門知識がなくてもデザインの編集ができるのか？ということも、考えておかなければなりません。
たとえば、画面のどこかの色や大きさを変えるために、HTMLやCSSを触らなければならない、となれば、知識がない方にとっては、とても苦痛だと思います。
そんな事態にならないためにも、デザインをどうやって編集するのか？については、事前にかならず確認しておくようにしましょう。
なお、「BASE」では、スマホからでもデザイン編集ができるほどかんたんですので、下記の記事なども参考にしてみてください。
また、HTMLなどを触って、本格的にデザインを編集したい場合は、「HTML編集 App」という無料の拡張機能を利用すれば、かんたんにHTMLも触ることができるようになっています。
まとめ
この記事では、ネットショップのデザインにおいて、基本的におさえておきたいポイントと、ネットショップの選び方について解説しました。
おしゃれなデザインのショップを見ると、ついつい自分もこんな風にしたい。と思ってしまいますが、それを実現するのは、思い通りにはいかなかったりします。
ネットショップを選ぶときには、本当に自分でもできるか？という視点を持って選ぶことを、どうか忘れないようにしてください。
