ホームページ作成ソフトメニュー

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

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

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

トップページからホームページを作ろうとしていませんか?それは一番最後にしてください。下層ページが未完成のままでトップページを作ろうとしてもうまくいかない事が多いです。これはトップページが各下層ページの代表となるためリンクが集まるからです。

 

それとトップページはホームページ内のコンテンツを代表するページになりますので、その他のページを作成しているうちにトップページに対する良いアイディアが生まれてきます。

 

またページ数がはっきりしないまま、トップページを先に作成してしまうと後で大幅な変更を余儀なくされてしまいます。そして作成していく内にイメージが微妙に変わったりする事もあります。なので、トップバナーだけを先に作成しておきます。

 

このような事が理由でバランスの良いホームページにするため、また、まとまりのあるホームページにするためには「下層ページから作成するのが鉄則」になるのです。

 

トップバナーの重要性

3秒ルールについて!

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

 

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

 

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

 

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

 

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

 

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

 

トップバナーの作り方

 

関連ページ
 

元画像は次のリンク先でご提供しています
バナー用無料画像素材プレゼント

 

当サイトでご紹介しているソフトでの画像作成解説動画
@サイト作成ソフトシリウス
ヘッダー画像を綺麗に作成する
ホームページ作成ソフトシリウスで画像をうまく扱う方法
ロゴ画像を表示させる方法

 

A最短ホームページテンプレート
最短ホームページテンプレートで画像を扱う方法


 

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

 

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

 

 

@ホームページのタイトル

 

ホームページのバナー

 

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

 

なので、画像バナーのメインタイトルのテキストはヘッダー内テキストと連動、関連している必要があるわけなのです。

 

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

 

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

 

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

 

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

 

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

 

悪い例
○○法律事務所(○○に自分の名前だけ)」

 

改善例
「安心!法律事務所が交通事故を解決!」
「離婚の悩み。法律専門家があなたを支えます。」

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

私の作成したバナーの例
シリウスで作成

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

シリウス解説用バナー

ヒーローズくずは校

アイフォン

AJ

さかい点検

ネクストステージバナー

ユタカ園芸バナー

学生寮

コーギーブログ

テクニクス

発達障害支援

フロンティア

LED販売

堺山口病院

葬儀屋

スタンドアップ

便利屋

戸山塗装

スムージー

コーギーサイト

バス会社のホームページトップバナー

ネクスト

エスユー

グッドアーム

ヒーローズ

ホームページ作成

 

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

最短ホームページテンプレート

最短ホームページテンプレート

最短ホームページテンプレート

最短ホームページテンプレート

最短ホームページテンプレート

最短ホームページテンプレート

 

 

Aキャッチコピー

 

ホームページのバナー

 

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

 

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

 

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

 

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

 

<span style="color:#777777"><b>グレーに近い黒</b></span>
<span style="color:#666666"><b>グレーに近い黒</b></span>

 

 

Bイメージ画像

 

ホームページのバナー

 

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

 

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

 

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

 

関連ページ
 

当ホームページ「画像無料サイト」をご活用下さい。
無料画像ソフト
無料画像サイト


 

 

C店舗所在地

 

ホームページのバナー

 

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

 

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

 

 

D電話番号

 

ホームページのバナー

 

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

 

バナー

後で解説しますが、電話番号については右の画像のように住所、会社名などと共に別にバナーを作成し、各ページの一番下にリンク画像として設置するのが王道です。お問い合わせページリンクさせるわけです。

 

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

 

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

 

 

E会社名

 

ホームページのバナー

 

一番どうでもよい情報で、いらないくらいです。訪問者さんは会社名を探しているのではなく、質の良い、自分にメリットのあるサービスを探しています。訪問者さんにとっては会社名は、最終的に「お問い合わせ」などの場面で確認するくらいです。

 

また、お店を知らない人が「店名」で検索する事はまずありえません!

 

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

 

それより、どんなホームページかが一発でわかる事が重要になります。それでも会社名を載せる必要があるなら、バナー右端の下に小さく電話番号と共に目立たないように書いておくくらいで十分です。(社名がメインのキーワードになっている場合は別です。)

 

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

 

 

Fタイトルの補足説明

 

ホームページのバナー

 

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

 

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

 

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

リサイクル業(地域系/広範囲)

 

便利屋

飲食店(地域系)

 

AJ

ブリーダー(全国対応)

 

コーギーサイト

 

トップバナー制作のコツ
一回で仕上げようとしない

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

 

なので、イメージだけである程度で作成してしまって、後で変更する方が、結局デザイン的にも納得したものが出来ますし、時間も節約できます。そのためホームページ作成で一番最初に作業する事をお勧めしているのです。

 

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

バナー制作全般に言えることですが、バナー作成中にデザインに合う画像を探すのではなく、色合いなどを考慮し数枚の画像をあらかじめデスクトップに用意しておきます。

 

こうする事で、いろいろな組み合わせが瞬時にできるため、作業がはかどり、比較なども簡単にできます。また、キャッチコピーなどのテキストもあらかじめ用意しておくことが、スピーディーに綺麗なバナーを作るコツです。

 

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

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

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

 

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

 

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

 

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

 

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

 

 

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

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

 

お問い合わせバナーの例

お問い合わせバナーの例

お問い合わせバナーの例

お問い合わせバナーの例

お問い合わせバナーの例

お問い合わせバナーの例

お問い合わせバナーの例

お問い合わせバナーの例

 

お問い合わせバナーの例

 

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

 

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