1-検索者を逃がさないホームページのトップバナー作成

ホームページを作成する前の注意点！

トップページは最後に作成する

 

下層ページが未完成のままでトップページを作ろうとしてもうまくいかない事が多いです。これはトップページに下層ページのリンクが集まり、各下層ページの代表（核）となるためです。

 

それとトップページはホームページ内のコンテンツを代表するページになりますので、その他のページを作成していく過程で、トップページのイメージが変ったり、当初とは違う良いアイディアが浮かぶ可能性もあります。（下層ページへのリンクバナーなど。）

 

また、ページ数がはっきりしないままでトップページを先に作成してしまうと、ホームページが完成する寸前でサイト構成の大幅な変更が必要になる事が多いで、トップページの作成作業としては、トップバナーだけを先に作成しておきます。

 

このようにバランスの良いホームページにするため、また、作成作業に手戻りが無いようにするためには「下層ページから作成するのが鉄則」になります。

 

そもそもURLやタイトル、キーワードすら決まっていない「下層ページへのリンク」をトップページに設定できるはずがありません。グローバルメニューも決まらない状態でトップページを作成できるわけがないのです。

 

トップバナーの重要性

3秒ルールについて！

 

訪問者さんが検索であなたのホームページをクリックで開いた場合、そのホームページを閲覧するか！しないか！は、3秒で判断します。要するに閲覧者さんは、自分が探しているホームページかどうかを、ほんの数秒程度で見極めていると言う事です。

 

その際に閲覧者さんの目に一番最初に飛び込んでくるのが、トップバナーです。

 

このバナーで自分にメリットをもたらすホームページかどうかの判断の90%くらいは占めています。そのハードルを越えると閲覧者さんの視線はコンテンツメニューに移ります。ザッとホームページの内容をグローバルメニューやサイドメニューなどのリンクタイトル名で確認するわけです。

 

なのでSEO的に見ても、このトップバナーの仕上がりの出来ばえが、直帰率やページビュー数、またページ滞在時間に影響し、最終的に検索順位に反映されるのです。

 

このような事から、ホームページをクリックしてくれた閲覧者を逃がさないようにするためのバナーのデザインを考える重要性がご理解頂けると思います。

 

またトップバナーについては、ホームページが仕上がっていくと共に、良いアイディアも浮かんできますので、先に作っておいて、その後変更しながらベストになるよう調節するのが一番であると経験上感じています。トップバナーは「一回の作業で終わらない」と考えてください。

 

トップバナーの作り方

トップバナーの基本形

 

色に関してですが、トップバナーを作成する時点で先にホームページの基本カラーが決まっているはずです。まずはそこから大きく外れないような背景色で作成します。

 

私が基本にしているバナーデザインの位置関係です。この時点で、文字を白抜きにするか、白下地で着色文字にするかも検討します。

 

 

 

トップバナーの画像テキストですが、「ヘッダー内のタイトルテキスト」と深く関連します。

 

閲覧者さんはタイトルやH1のテキスト、すなわち検索結果で表示されたキーワードに関連したホームページを探しているわけです。なので、画像バナーのメインタイトルのテキストはヘッダー内テキストと連動、関連している必要があります。

 

大袈裟な話ですが、ヘッダー内テキストに「日本一おいしいラーメン屋」としているのに、トップバナーのテキストが「餃子」について書かれていたら、「なんでやねんっ！」っと思いますよね。

 

ズレているのです！

 

このようなズレがあると、見た瞬間にページを閉じられる可能性がでてきます。直帰率が高くなるわけです。解っていてもやってしまいがちなので、注意しましょう！

 

要するに、あなたが作成するホームページが、何について書かれているのかを、キーワードと連動させて閲覧者さんが、「ハッキリとスグに解る」ような名前を付けたほうが良いです。

 

とにかくひと目でサービスの内容が解るって事が絶対条件です。

 

下の[�E会社名]でも書いていますが、間違えてもココに会社の名前をデン！と書かないように。検索者さんには会社名なんて何の意味もありませんので。（会社名がキーワードになっている大企業は別です。）

 

 

タイトルキーワードにあわせて顧客を絞り込む。「どちらの方でも、何でも」ではなく、キーワードは絞り込んでいった方がコンバージョンは高くなります。

 

上記の例では自分のビジネスは法律事務所でも、どんな案件に強いのかを、的を絞って訴えるべきです。それと地域性ですが、沖縄の人が北海道の法律事務所に相談しませんよね。このような事はホームページタイトルとあわせて考えます。

 

どのようなカテゴリーのホームページでもそうなのですが、特に個人経営やお店のホームページは、どこまでの地域で勝負できるのかを考えて訴求したほうが反応が良いです。

 

WEBマーケティングの基本は、「言葉」を幅広くし、何もかもを取り入れようとすると、とんでもなくたくさんあるホームページに、自分のホームページが埋もれてしまうって事で、すなわち「検索されなくなる」という事態に陥ります。

 

タイトルキーワードやH1テキストはマーケティングを考える上でキーワードを絞り込みます。そしてバナーの画像タイトルテキストは、その絞込みを反映させるのがコツです。

 

視覚的に訪問者さんがホームページを開いた時、まず視線は左上にいきます。なので、タイトルテキストも左上から始まるようにデザインするのが王道です。

 

そして全体的なポイントとしては、文字をバナーいっぱいに詰め込み過ぎない事も重要です。「間」の取り方に気を使って、うまく空白の部分も使うという意識でデザインします。

 

私の作成したホームページトップバナーの例

（すべてシリウスのバナー画像作成機能で作成しました）

 

最短ホームページテンプレートでのトップバナー

当サイトでご紹介しているソフトでの画像作成解説動画

 

 

 

キャッチコピーは�@のタイトルテキストの下に、その半分以下の文字ポイントで表示させます。タイトルの補足や、ビジネスの特徴など、多くても3行くらいまでにまとめるとスッキリします。「文章」ではなく、一瞬で内容が解るようなテキストを考えて下さい。

 

訪問者さんがホームページを開いたときに、タイトルテキストの次の2番目に見られる場所なので、簡潔にサービスのメリットをアピールします。

 

内容としては、「価格の安さ」「地域の利便性」「サービスの充実度」「他にない特徴」「おすすめの商品」などになると思いますが、同種のホームページをググってみて言葉使いなどは参考にすると作りやすいです。

 

あくまでもタイトルが一番なので、色使いについては控えめが良いです。コツとしては、文字色を黒にする場合はグレーに近い色を選択する事です。純粋な黒をバナーで使うと「きつく」感じる傾向があります。グレーに近い黒を一度つかってみて下さい。

 

 

 

 

ワンポイントで画像やイラストを使いたい場合は、この位置に配置するとバランスが良くなります。バナー右側に寄せると作成しやすく、まとまりが良くなります。店舗所在地や電話番号を記述する場合は、文字ポイントを小さめにして、このイメージ画像の下に配置します。

 

バナー下地自体に画像を使うと、どうしてもバナーがゴチャゴチャした感じになってしまいます。また文字も重なるため載せにくかったりします。なので当初は無地の下地に対して画像やコンテンツを配置していくほうがスッキリするでしょう。

 

基本的にホームページで使う画像は暗いと見栄えが悪くなります。スマホなど携帯端末カメラの画像でも十分対応できますが、撮影に適した時間帯を考えてください。

 

 

 

ご自身で企業や店舗を経営していらっしゃる方は、きっと地元を大切にしていらっしゃると思います。ヘッダー内のタイトルテキストに地域名は入れましたか？ほとんどのホームページ訪問者さんが、検索エンジンで地域名を入れています。

 

なので検索された結果は、当然地域内のホームページであると訪問者さんは考えています。この事から店舗などの住所は大きくトップバナーに掲載する必要はありません。右下くらいの位置に電話番号と共に小さく書いておく事がデザイン的にもまとまりやすいです。

 

 

 

電話番号は�Cの住所の下に、住所と同じくらいの文字ポイントで掲載しておきます。

 

 

画像の大きさは、パソコン画面を重視する場合はメインコンテンツの幅に合わせるのが良いと思いますが、スマホ画面に最適化させるなら横幅300px程度が見やすくなります。

 

サイト作成ソフトシリウスでは自動調節されるので加工不要です。

 

トップバナーにドンと大きく電話番号を書くよりも、お問い合わせページに誘導するリンク画像の方がコンバージョンには有効です。お問い合わせはホームページを閲覧した結果です。なので、トップバナーでの電話番号の記載はデザインを重視して小さくまとめるのがコツです。

 

 

 

会社名は一番どうでもよい情報で、無くても大丈夫ないくらいです。ホームページが名刺代わりという体裁があるとは思いますが、ただそれだけで検索者にとっては重要ではないと言う事です。

 

訪問者さんは会社名をキーワードにしてググっているのではなく、ほとんどの場合が質の良い、自分にメリットのあるサービスを探しています。

 

会社名は、最終的に「お問い合わせ」などの場面で確認するくらいで、そもそもお店の名前を知らない検索者が「店名」や会社名で検索する事はありえませんよね。

 

なのでホームページのファーストビューで「一番不要な情報」と言えるので、会社名を全面的にアピールしてはいけません。大きい文字で会社名を書かれても、訪問者さんは何のメリットも感じません。自己満足になるだけです。

 

それより、どのようなメリットのあるホームページであるかが、一発でわかる事の方が重要になります。それでも会社名を載せる必要があるなら、バナー右端の下に小さく電話番号と共に目立たないように書いておくくらいで十分です。

 

会社名、店舗名をトップバナーに記載する事が良くないと言っているのではありません。バナーではサービス内容の情報の方が優先されるべきなので、その他の情報が邪魔になるのなら、控えめにしておく方が良いという事です。

 

 

 

キャッチコピーを補足する程度の文章で良いと思います。多くても3行くらいにしておくのがコツです。ココで長々、ダラダラと文章を書いても訪問者さんは読んでくれません。

 

あくまでもサービスの内容や特徴が解るくらいで十分で、20文字程度が限界です。

 

以上�@〜�Fをまとめて平均化しますと、上の方でも載せていますがトップバナーのデザインは、「下記の画像」のようなレイアウトが基本だと思います。デザイン的にまとまりやすいですし、経験上反応も良かったので、ぜひマネして下さい。

 

トップバナー制作のコツ

一回で仕上げようとしない

トップバナー制作のコツとしては、一回の作業で仕上げようとしない事です。って言うより、なかなか一発で決まりません！これは私の経験ですが、一回で完全に仕上ようとして時間をかけても、後で変更をせまられる事がほとんどでした。

 

なので、ある程度イメージだけで作成してしまって、後で校正、変更する方が、結局デザイン的にも訴求力的にも納得したものが出来ますし、時間も節約できます。このような理由からトップバナー作成をホームページ作成で一番最初に作業する事をお勧めしているのです。

 

画像と文章をあらかじめ用意しておく

バナー制作全般に言えることですが、バナー作成中にデザインに合う画像を探すのではなく、色合いなどを考慮し数枚の画像をあらかじめデスクトップに用意しておきます。文章もテキストエディターなどに保存しておいて、すぐにコピペ貼り付けができるように用意しておきます。

 

こうする事で、いろいろな組み合わせが瞬時にできるため、作業がはかどり、比較なども簡単にできます。スピーディーに綺麗なバナーを作るコツは、先にネタを用意しておきデザインに集中できるような環境を作っておく事です。

 

各ページ下部の電話番号バナー

コンバージョン率を上げる

上記コンテンツ�Dでお伝えしましたが、トップバナーを作成するタイミングで各ページの一番下に設置する電話番号バナーも一緒に作成してしまいます。

 

このバナーはお問い合わせフォームのあるページにリンクさせる「リンク画像バナー」として設置する事で「コンバージョン率」「デザインの統一性」「イメージ拡大」またページボリュームを上げるなどの効果があります。

 

色使いは「トップバナーで使っている色のみ」で構成します。ここで他の系統の色を多用するとホームページのデザインがチープでゴチャゴチャした感じになり、まとまりません。

 

お問い合わせフォームに誘導するためのバナーなので、マウスのカーソルが画像の上に乗ったとき、画像が変化するような工夫も効果があります。クリック率を上げるという事です。

 

下記の参考画像では、画像の上にカーソルが乗ると画像が薄くなり、1ピクセル下と右に移動させて、リンク画像である事を強調しています。

 

 

私の作成した電話番号バナーの例

（すべてシリウスのバナー画像作成機能で作成しました）

 

 

上記のような画像リンクバナーを各ページの下に貼り付けるようにしましょう！

 

サイト作成ソフトシリウスでは、このように各ページの下に同じ画像やコンテンツを貼る場合、フリースペースの設定やモジュールの一括設定で自動で表示させる事ができます。