スマートフォンサイトを表示する

  1. TOP
  2. EC基礎講座 : 第6回 トップページを設計してみよう!

エキスパートコラム

EC基礎講座(全11回)

第6回:トップページを設計してみよう!

執筆:杉浦 治(一般財団法人 ネットショップ能力認定機構)

2012年9月26日更新

  • このエントリーをはてなブックマークに追加

閲覧数6,283views

このコラムをPDF形式でダウンロードする

ネットショップ運営に初めて取り組む人の中には、お客様がトップページからショップに入ってくるという誤解をしている人がいます。新規のお客様は、ヤフーやグーグルなどの検索結果ページか、楽天などモールの販促ページなどからショップに入ってくるため、商品ページやカテゴリページ、企画ページがメインの入り口になります。

既存のお客様でも、ショップからのメールマガジンなどで新商品やセールを知ってショップを訪れるため、特集商品や企画セールのページが入り口になります。

商品ページやカテゴリページ、企画ページがメインの入り口になる

しかし、ショップ内で熱心に商品を物色しているうちに、ショップの全体を見渡したくなったり、商品選択に迷いが出たりして、ページ左上のロゴを押して、トップページに行くケースが多くなります。トップページの閲覧数は全体の10~20%といったところですが、トップページに来るお客様は、購入意欲が高いお客様だと考えられます。

押さえるべき4つのポイント

購入意欲が高いお客様を迎えるために、トップページは以下の4つのポイントを押さえる必要があります。

  1. 色合いが、客層や商品に合っている。
  2. 取扱商品とショップの特徴が一目瞭然である。
  3. "にぎわい"が感じられる。
  4. 安心できるショップだと感じられる。

1.を押さえないと、トップページを見た一瞬で、直感的に「私むけのショップではない!」とか、「欲しいものが見つかる気がしない・・・」と感じて、お客様は去ってしまいます。

2.も1.と同様で、自分のニーズに合ったショップか?を短時間で判断できないと、お客様はすぐにショップを去っていくのです。

お客様には、人気があるショップほど安心するという心理が働きます。ですから3.が必要になります。

また、ネット経由の情報には少なからず疑いが持たれます。「お金を払っても安心」という安心感を徹底的にアピールしなくてはなりません。よって4.も重要です。

客層や商品に合わせて、カラーデザインのルールを決める

お客様の直感に訴えるデザインとして最も重要なのが、カラーデザインです。カラーデザインは、"デザイナー"のセンスに任せっきりではいけません。なぜならば、デザイナーはデザインの技法を知っていても、お客様のことや商品のことは知らないからです。

お客様や商品のことを良く知るのは、ショップの運営者です。よって、ショップの運営者がデザインの基本コンセプトを提言し、それをデザイナーが具体的なデザインルールにしていきます。

売りたい商品が明確な場合は「カラー」を重視し、お客様を軸にして商品を展開させるようなコンセプトの場合は「トーン」を重視します。まず、ベースとなるカラーまたはトーンを決め、次に、強調して見せたいアクセントカラー(またはアクセントトーン)を検討します。これらを十分に検討した上でプロのデザイナーに相談して具体的なデザインをしてもらうのです。

取扱商品を一目瞭然にする

取扱商品を一目瞭然にするための要素は、「ショップ名」「ショップのキャッチコピー」「ショップのロゴ画像」「トップビジュアル」などです。

「ショップ名」は、商標権に注意しつつ、お客様に馴染みがある単語を使い、商品のイメージやショップの特徴がパッと伝わる、平易な名称を心がけます。一度決めると変更は難しいので、慎重に検討しましょう。

「ショップのキャッチコピー」は、検索結果の説明文や、文字広告に使う素材などにも使用できます。ショップ名だけでは伝えきれない専門性やアピールポイントをキャッチコピーにします。

(画像提供:京都おぶぶ茶苑)

「ショップのロゴ画像」は、商品やショップのイメージを伝える写真またはイラストと、ショップ名の文字を組み合わせるのが一般的です。この画像は、各ページの左上にトップページへのリンクバナーとして配置するのが常識です。あたりまえに存在するボタンは、あたりまえに準備しておかないと、お客様にとって不親切なショップになってしまいます。常識は必ず押さえましょう。

(画像提供:京都おぶぶ茶苑)

「トップビジュアル」は、トップページの最初の印象を形成する、もっとも重要な要素です。取扱商品や、旬な販売企画、ショップの具体的な特徴に直接関係がある、品質の高い写真を用意し、重要なアピールポイントをキャッチコピーにして、写真と重ねて使用します。

(画像提供:京都おぶぶ茶苑)

にぎわい感のための要素

にぎわい感を演出するための要素には、「新着情報」「おすすめ商品」「新商品」「売れ筋ランキング」「実施中の販促イベント」といったものがあります。

実際の店舗でも、にぎわっているお店がそうであるように、たくさんのイベントを実施してアピールし、新鮮な情報がみられるように頻繁に情報更新をしましょう。

売れているショップでは、ランキングは毎日更新し、その他の情報も数日から数週間ですべて刷新されているようです。

(画像提供:アンジェ Web Shop)

販促イベント、特集の例
(画像提供:アイラブベビー)

新着情報の例
(画像提供:アンジェ Web Shop)

安心できるショップの常識

安心できるショップは、お客様を迷子にしません。お客様が目的の商品ページや情報ページに簡単にたどり着けるように、様々な工夫をしています。

まず、お客様のニーズに合った商品分類をメインメニューにします。たとえば釣り具を販売するナチュラムでは、「釣り竿」「リール」「ルアー」というような商品分類をメインメニューにはせずに、「海釣り」「池・湖釣り」「川釣り」といったシーン別のメニューをメインにしています。

また、ヘッダー部分に、グローバルナビゲーションという下記のような案内板を準備し、すべてのページに表示するのが常識です。

(画像提供:京都おぶぶ茶苑)

すべてのページの最下部に表示されるフッターには、支払いや配送に関する情報を掲載します。

(画像提供:アンジェ Web Shop)

さらに、文字通り「顔が見えるショップ」として、お客様に安心して頂くために、ショップやスタッフに関する情報をできる限り掲載します。

(画像提供:デザイナーズ家具リグナ)

買う意欲満々のお客様がせっかく自店のサイトまでたどり着いたのに、そのお客様を逃してしまうほどもったいないことはありません。トップページで押さえるべき4つのポイントをしっかりチェックして、お客様をつかまえてください。

ところで、4つのポイントは順番にも意味があります。この順番は、お客様の心理変化の順番なのです。心理変化の途中で繋がりが途切れると、その時点でお客様は去ってしまいますので、何一つとしておろそかにして良いものはありません。すべてに細心の注意をはらい、あなたの熱い想いを注ぎ込んでください。

  • このエントリーをはてなブックマークに追加
このコラムをPDF形式でダウンロードする

杉浦 治(すぎうら・おさむ)

杉浦 治(すぎうら・おさむ)

一般財団法人ネットショップ能力認定機構 理事

2002年デジタルハリウッド株式会社取締役に就任。IT業界における経営スペシャリスト育成やEC事業者向け研修開発を行う。2010年4月「ネットショップ能力認定機構」設立。ネットショップ 運営能力を測る「ネットショップ検定」を主催し、自ら講師として全国でセミナーを実施。

  • 「はじめてWEB」でホームページをはじめよう!
  • Jimdoリメイク | プロがあなたのホームページを50,000円(税抜)でリニューアル!
  • 問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール
  • 文具、通信、オフィスのことなら何でもお任せ!まとめてオフィス

ホームページを作るのがはじめてのかたはまずこちらをご覧ください

コラム週間アクセスランキング[期間:2017/6/11~2017/6/17]

おすすめコンテンツ

はじめてWEBおすすめ本

創業・経営のお役立ち情報

  • ソウギョウノート

    飲食・小売・サービス業の開業スケジュールから、融資申込に必要な書類までをカンタン作成

  • 経理通信

    経営者と経理ご担当者必見!中小企業・小規模事業者のための経理サポートサイト

  • まとめてオフィス

    文具、通信、オフィスのことなら何でもお任せ

  • フリーコールS

    問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール

  • auオフィスナンバー

    事務所開設するなら固定電話番号で信頼アップ
    今ならキャンペーン実施中!