【初心者必見】ネットショップ用ヘッダー画像(看板)の作り方とポイント

ネットショップのヘッダー画像(看板)は、ファーストビューにあたる為、とても大事な部分になります。
作り方によっては、売上に大きく左右されるといっても過言ではありません。

特にネットショップでは、重要な要素のひとつでもあります。
本記事では、ヘッダー画像を作る上でのポイントや気を付けたいことをお話しします。

ヘッダー画像とは?

まず、ヘッダー画像について簡単にご説明したいと思います。
以下、画像内の赤枠部分が一般的に言われるヘッダーエリアです。

参考ヘッダー画像1

人それぞれ捉え方が多少異なりますが、上記画像内の赤枠部分(ヘッダーエリア)に入る画像のことを、基本的にはヘッダー画像といいます。
上記画像の例でいうと、茶碗やスプーンのイラストがありますが、この部分がヘッダー画像にあたります。

看板画像とは?

ちなみに以下の赤枠部分のような画像のことを、一般的に看板画像と言われています。

参考ヘッダー画像2

ヘッダーエリアは戦略的に使う

ヘッダーエリアは冒頭でもお話しした通り、ユーザーがネットショップに訪れた際のファーストビュー(初めに見られる範囲)になります。
そのため「何を持ってくるか」「どんなコンテンツを入れるか」で、ユーザーが感じる印象が大きく変わってきます。

参考例1:バナー設置とカテゴリーメニュー

参考例として以下のサイトを挙げさせて頂くと、こちらはヘッダーエリアに、バナーを3つ並べて配置されています。
送料無料バナーは、送料を気にされているユーザーにとっては目を引く告知です。
あと2つのバナーは、プレゼント付きのバナーになるかと思いますが、こちらも購入を迷われているユーザーとっての後押しになりえます。

参考ヘッダー画像3

また、少し画像が小さいので見づらいかもしれませんが、ヘッダーのナビゲーションメニュー(俗に言うグローバルナビゲーション)には、主要となりえるカテゴリーをピックアップしメニューとして設置されています。

ヘッダーエリアは、基本的にどのページにも表示される共通のエリアになりますので、上記サイトのような使い方も効果的といえます。

 

参考例2:ナビゲーションエリア

以下のサイトで共通して言えることは、商品点数やカテゴリー数などを考慮し、主にナビゲーションエリアとしてヘッダーエリアを利用しています。
予め商品点数やカテゴリー数が多いと予想されるネットショップは、初期の段階からサイトの構成や方向性をしっかり決めておく必要があります。

参考ヘッダー画像4 参考ヘッダー画像5

参考例3:ヘッダーエリアをフル使用

次の例では、ヘッダーエリアをフルに使い、ユーザーに伝えたい情報を案内されています。
こういったヘッダーエリアの使い方も、ターゲット層によってはアリだと思いますし、何より、ユーザー(お客様様)が欲しいであろう情報がファーストビューでわかるため、安心して買い物を行うことができます。

参考ヘッダー画像6

ターゲット層やコンセプトによって変わる

参考例としていくつか挙げさせて頂きましたが、「このヘッダーエリア(画像)の作りなら良い!」というものはありません。
その理由は、扱っている商品やターゲット層、コンセプトなどによって、ネットショップ毎に適切であろう作りがあるからです。

関連ネットショップのコンセプトの決め方

ですが、そんな中でも共通する要素というものが存在します。
それらを見つけて取り入れることで、いくつかのパターンに落とし込むことは可能です。

ヘッダー画像を作る上でのポイント

今回は、以下のようなヘッダー画像を作る上でのポイントをお話ししようと思います。

参考ヘッダー画像6 

参考ヘッダー画像4

ロゴ作成

まずは、ロゴです。
ネットショップの顔ともなりうる部分なので、カッコよくしたり可愛くしたり、装飾を多く施し作られる人がいますが、あまりオススメしません。

ロゴは、かなりのこだわりがない限りは、わかりやすくシンプルなものが良いと思います。
英字などを用いる場合、文字が読みにくくならないよう注意が必要です。

キャッチコピー

お店のキャッチコピーも大切です。
わかりやすく伝わりやすいものにします。

例えば、爽快ドラッグさんでは「いつものをおトクに」、ここでいんくさんでは「高品質インクが安い」などが目につきます。
この“目につく”という点もすごく大切です。
キャッチコピーが埋もれてしまわないようにレイアウトやデザインのバランスが要求されます。

送料無料の掲載エリア

お店によっては掲載していないところもありますが、必ず載せるようにしましょう。
送料のことを気にされているユーザーはけっこう多いです。
もし、送料無料の企画等がない場合は検討したほうがよいでしょう。

何を売っているお店かを把握してもらう

ネットショップに訪れた時に、何の商品が売られているのかを瞬時に判断してもらうことは大切です。
例えば、ヘッダーエリアをイチオシの商品画像などを用いて作成するのも良いと思います。

たまに、ロゴマークを大きく作り、お店とは関連性がない画像や写真を使った、ヘッダー画像を見かけます。
この場合、何のお店なのかわかりづらく、ユーザーが離脱してしまう可能性があるので注意が必要です。

ヘッダー画像を作る上で必要なツール

フォトショップ編集画面

では実際に、ヘッダー画像を作る上で必要なツールのご紹介です。
主に以下のものが必要になるかと思います。

  • パソコン
  • 写真素材、商品画像など
  • 画像編集ソフト

 

もちろんパソコンは必須ですが、画像編集ソフトを使う場合、低スペックなものだとパソコンが固まってしまうこともあるので、ある程度の高スペックなパソコンを使うと作業をスムーズにおこなうことができます。

商品画像などはヘッダー画像として使用する場合のものです。
また、ヘッダーエリアに入れる場合の商品バナー等を作る際にも必要となりますね。

画像編集ソフトについては、様々なものがありますが有名なところだとPhotoshopなどが挙げられます。
Adobeが提供している月額制の画像編集ソフトです。

また、WEBマーケティングで有名なウェブライダーが提供されている「バナープラス」も人気のようです。

Photoshopなどは使い方を覚えてから画像を作成するまで時間を要しますが、バナープラスは、出来る限り初心者の方でも直感的に使えるよう工夫がされています。
また、初めからクオリティの高いバナー等が作れるのも人気のひとつです。

人気バナープラス公式サイトはこちら

最後に

今回は、初心者の方向けにヘッダーエリアのご説明と、ヘッダー画像(看板・バナー等)を作成する際のポイントについてお話をいたしました。

初めて作る場合のコツとしては、「かっこよく作る」「綺麗に作る」ということはあまり意識せず、ユーザー(訪問者)が何を必要としているか、もしくはあったら嬉しいかを意識して作成すると、意味のあるヘッダー画像(看板)になるかと思います。

参考ヘッダー画像1