ドロップシッピングで売れるショップのデザイン

売れるショップのレイアウトとは

買い物に必要な情報をすぐに見つけられる

顧客は、ショップのトップページから訪れるとは限りません。Googleなどの検索結果のページから直接、商品ページにアクセスするほうが多いといってもよいくらいです。そのため、送料や配送までの時間や、購入までの流れとショッピングに必要な情報は、どのページからでもすぐに見られるようにしておきましょう。また、カートの中身をすぐに確認できるよう、どのページにもカートボタンをつけておくことも重要です。

カードが使えるか、代金引き換えでもOKなのか、といった決済に関する情報も、顧客の気になるところです。ヘッダー近辺の目立つところに掲載しましょう。

顧客がすぐに見たい情報

支払い方法、送料
購入の流れ
返品と交換
ショップの紹介
特定商取引法に関わる表記
カートの中身

何が得なのかすぐにわかる

顧客にとってお得な情報は、見やすく目立つようにしましょう。たとえば、「8000円以上なら送料無料」といったキャッチコピーは、いつも顧客の視野の入る場所に表示させておきましょう。送料は商品詳細ページのカートボタン付近にいれておくと効果的です。

売れ筋ランキングは、何を買えばよいのか迷っている顧客に有益な情報になります。これも、目立つところに掲載するようにしましょう。

ショップのデザインは極力シンプルに

ショップの基本デザインは2カラムor3カラム

売れているショップのサイトデザインは、2カラムまたは3カラムがほとんどです。つまり横に2列または3列の要素が並ぶレイアウトですが、どちらにもメリットがあるので、目的に合わせて選ぶとよいでしょう。

2カラムのレイアウトでは、メインの記事が大きく見せられるというメリットがあります。画像も大きく見せられるため、ユーザーが記事に集中しやすくなります。

一方、3カラムのレイアウトは記事を表示するカラムが小さくなる代わりに、両端のカラムにさまざまな情報が掲載できます。おすすめ商品やランキングなど、アピールしたい情報右カラムに置くパターンが多いようです。

どちらのレイアウトも、ブログならテンプレートを替えるだけで簡単に試せます。

使う色は2〜3色

Webサイトで使う色は、2〜3色ぐらいに留めておくと、まとまった印象になります。また、食品ならおいしく見える暖色系、デジタル機器などでクールな印象をあたえたいなら、黒やグレーや寒色系といった具合に、商材を引き立てる色の組み合わせを心がけましょう。

配色は、面積によっても印象が変わります。そのため、ネットで配色について解説しているサイトを参考にするとよいでしょう。また、淡い色を使うとディスプレイによっては見えづらくなります。

役割ごとにフォントの大きさを統一する

Webサイトはタイトル(キャッチコピー)、リード(概要)、本文(商品説明)、写真のキャプション(写真の説明)という要素で成り立っています。文字の大きさや色を設定する場合は、役割毎に同じ大きさ・色を設定しましょう。

そこで活躍するのが、フォント、文字の大きさ、色を一括して指定するCSSです。CSSを使うとサイトデザインに統一感が出るだけでなく、リニューアルするときも一括してデザインを変更できます。ブログの管理画面やホームページ制作ソフトではCSSの編集機能があるので、デザインを修正したいときはぜひ活用してみましょう。

商品の見せ方を工夫する

何をアピールしたいかで写真を選ぶ

DSPでは通常、1つの商品につき何種類かの商品写真を用意しています。商品の何を顧客にアピールするかによって、写真を使い分けましょう。

商品写真以外にも、薬の原理を解説した図や実証データのグラフが提供されている商品もあります。効果的にアピールできる情報があれば、積極的に活用しましょう。

顧客は売れ筋ランキングで安心する

顧客は頭のどこかに「この商品を選んで本当に大丈夫？」という不安な気持ちを持っています。そこで、「売れ筋商品」という情報があれば「みんなが買っているから、きっとよい商品だ」と感じ、安心して購入してもらうことができます。

ECモールやネットショップでは、必ずといってよいほど売れ筋ランキングが掲載されています。何を買おうか迷った顧客が、これを買えば大丈夫と思える材料になるからです。

HTMLタグを使って文章を強調する

文章のどこが重要かを知らせるHTML

雑誌の紙面は、大見出し、小見出し、本文という構造になっています。文字の大きさは、大見出しがもっとも大きく、小見出し、本文と文字のサイズが小さくなっていきます。どの雑誌でも、この法則は守られています。

Webサイトも同じで、キャッチコピーは大きい文字で、商品説明など詳細部分は小さな文字で表現します。HTMLで大見出し、小見出しを指定するのが、<h1>、<h2>などのタグです。

大見出しを指定する<h1>タグは、文字を大きくして、Webサイトを見ている人に重要だと知らせると同時に、検索エンジンにも「ここは見出しだから重要な部分」と知らせています。そのため、<h1>で囲まれた部分に検索してほしいキーワードを入れておくと、検索エンジンで上位に表示されやすくなります。ほかにも、囲んだ範囲を強調する<em>タグや<strong>タグにも同様の効果があります。

強調タグの乱用は逆効果

検索されたいキーワードをすべて<h1>や<em>、<strong>タグで囲んでも、検索結果の上位に表示されるわけではありません。

HTMLタグは文章の構造を表現するものです。本来の目的をはずれて、検索結果の上位に表示させるためだけに乱用すると検索エンジンスパムと見なされます。最悪、検索エンジンで検索しても表示されないなど、大きな痛手を被ることになります。

また、仮にそういった試みがうまくいっても、無理矢理HTMLの強調タグを使ったようなWebサイトは、ユーザーにとってわかりやすいWebサイトにはなりません。

グラフ・表・イラストで文章をイメージ化

グラフ化してわかりやすく

消費電力の低下や燃費の向上といったメリットは、数値だけを書いてもどれくらいの効果があるのか、今ひとつ伝わりにくいものです。数字のメリットを顧客に伝えたいときは、グラフや表を使ってグラフィカルに表現し、ひと目でその効果がわかるようにしましょう。

商品電力であれば、電気料金に換算してグラフ化して見せることで、消費電力の少ない家電を購入するメリットがすぐ理解してもらえます。

広告素材を上手く使う

DSPでは商品写真と一緒に、広告用の素材を配布している場合があります。ダイエット器具や健康食品、化粧品といったジャンルでは、言葉だけではなかなか具体的に効果を説明できないので、こうした素材を上手く利用して、わかりやすい商品説明を書きましょう。

絵やデザインが苦手な人は、フリー素材を活用

インターネットには、ショップの飾りとして使える素材画像を集めたWebサイトがいろいろあります。人物イラストやアイコンなどの画像も豊富にあるので、上手く組み合わせてオリジナルデザインのサイトやブログを作ってみましょう。

ただし、Webサイトによっては、商用利用できなかったり、画像の加工が不可だったりなど、使用条件が定められている場合があります。事前に確認しておきましょう。

配布されている素材を使用する

広告素材を入手する

DSPでは、1点の商品につき、角度を変えて撮影したものや、「○袋入り」などの文字を入れた写真が数種類用意されています。また、広告用の素材が用意されていることもあります。こうした素材は、無料で使え、著しく誤解を与えない範囲であれば自由に加工することができます。

素材を加工して商品を引き立たせる

画像をトリミングし、強調したい所を囲む

写真の周辺部を切り取って、構図を変化させることをトリミングといいます。写真をトリミングすることで、アピールしたい箇所を明確にすることができます。
商品写真をトリミングや印をつけるなどといった、簡単な画像加工をするだけでも、商品写真のアピール力は大きく高まります。

バナー画像を作成する

DSPでダウンロードした画像素材を元に、簡単なバナーを作成してみましょう。ショッピングサイトに、インパクトのあるバナーがあると、顧客の購買意欲をあおることができます。また、置いておくだけでもショップが華やかに見え、サイトデザインの欠かせない要素になっています。

商品に関連するYouTubeの動画を使う

増えている動画を使った商品説明

ネット環境と動画共有サイトの一般化によって、商品説明に動画を使っているネットショップが増えました。商品の使い方の説明などオリジナルの商品説明ビデオを撮影して、YouTubeに公開してみましょう。デジカメの動画撮影機能でも、十分なクオリティの動画できます。また、iPod nanoの動画撮影機能を利用してもよいでしょう。

YouTubeを使って動画を公開しよう

YouTubeは、閲覧・アップロードともに無料で利用することができます。閲覧はどのユーザでもできますが、アップロードにはアカウントを作成する必要があります。まずは、YouTubeのアカウントを作成しましょう。

なお、GmailやGoogleカレンダーなどGoogleのサービスを使っている場合は、そのアカウントでYouTubeにログインすることができます。個人用とショップ用のアカウントを分けておきたいのであれば、新しいアカウントを作りましょう。