ホームページ作成ソフトでトップバナーを作る

無料ツールソフトの使い方ホームページの作り方Hpで集客する方法グーグルサービス
 
初めてのHP作成の動画高齢者のホームページの作り方よくある質問
 

閲覧して貰えるホームページのトップバナーの作成のコツ

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

トップページからホームページを作ろうとしていませんか?

それは一番最後にしてくださいね。

 

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

 

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

 

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

トップバナーの重要性

3秒ルールについて!

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

 

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

 

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

 

なのでSEO的に見ても、このトップバナーの仕上がりの出来ばえが、最終的に検索順位にも影響すると考えて大袈裟ではありません!

 

ホームページをクリックしてくれた閲覧者を逃がさないようにデザインを考えて下さい!

 

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

トップバナーの作り方

当サイトでご紹介しているソフトでの画像作成解説動画
サイト作成ソフトシリウス
最短ホームページテンプレート
トップバナーの基本形
色に関してですが、トップバナーを作成する時点で先にホームページの基本カラーが決まっているはずです。まずはそこから大きく外れないような背景色で作成します。

 

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

 

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

 

ホームページのバナー

 

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

 

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

 

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

 

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

 

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

 

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

 

下の[E会社名]でも書いていますが、間違えてもココに会社の名前をデン!と書かないように。何の意味もありませんので、、会社名なんて。

 

  • 悪い例

     

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

  •  

  • 改善例

     

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

私の作成したバナーの例

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

アイフォン

AJ

さかい点検

ネクストステージバナー

コーギーブログ

テクニクス

発達障害支援

スタンドアップ

便利屋

戸山塗装

スムージー

コーギーサイト

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

ネクスト

エスユー

グッドアーム

ヒーローズ

ホームページ作成

 

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

 

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

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

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

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

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

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

 

A キャッチコピー

 

ホームページのバナー

 

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

 

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

 

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

 

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

 

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

 

B イメージ画像

 

ホームページのバナー

 

デザインする事自体が初心者さんで、イメージ画像を使う場合は右に寄せると作成しやすく、まとまりも良いです。店舗所在地や電話番号もバナーに記述する場合は、文字ポイントを小さめにして、イメージ画像の下に配置するとバランスがとりやすいです。

 

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

 

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

 

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

 

C 店舗所在地

 

ホームページのバナー

 

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

 

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

 

D 電話番号

 

ホームページのバナー

 

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

 

バナー

 

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

 

 

もちろん画像の大きさは、メインコンテンツの幅に合わせます。

画像の廻りに枠を付けない場合
  • シリウス・・・580px程度。
  • 最短ホームページテンプレート・・・500px程度。

 

お問い合わせに対する誘導ですね。トップバナーにデカデカと電話番号を書いてもあまり効果があると言えません。お問い合わせはホームページを閲覧した結果なので、トップバナーではデザインを重視して小さくまとめるのがコツです。

 

E 会社名

 

ホームページのバナー

 

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

 

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

 

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

 

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

 

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

 

F タイトルの補足説明

 

ホームページのバナー

 

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

 

あくまでもサービスの内容や特徴がわかるくらいで十分です。私の場合は30文字程度までが基本になっています。

 

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

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

便利屋

飲食店(地域系)
 

AJ

ブリーダー(全国対応)
 

コーギーサイト

 

トップバナー制作のコツ

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

トップバナー制作のコツとしては、一回の作業で仕上げようとしない事です。って言うより、、一発でなかなか決まりません!

 

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

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

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

 

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

 

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

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

 

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

 

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

 

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

 

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

 

 

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

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

 

お問い合わせバナーの例
お問い合わせバナーの例
お問い合わせバナーの例
お問い合わせバナーの例
お問い合わせバナーの例
お問い合わせバナーの例
お問い合わせバナーの例
お問い合わせバナーの例
お問い合わせバナーの例

 

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

 

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

企業お店ホームページ作成|トップバナー作成の注意点の関連ページ

お問い合わせページの作り方
ご自身の会社のホームページを作成する場合にお問合せのページに必要な情報を解説します。このお問い合わせページはホームページの出口であるため、各ページからのリンクバナーなどを作成して、うまく誘導しましょう。
会社概要ページの作り方
ホームページ作成で会社概要のページはSEO的にみても情報開示という面で非常に重要になります。会社概要について必要なコンテンツとプロフィールの書き方について解説します。
料金ページの作成とテーブルタグの基本的な記述方法
企業やお店のホームページでは、サービス料金や価格についてのコンテンツが必ず必要です。画像付きの料金表示の基本的なタグと、テーブル枠について解説します。
サービス内容のページを作る
ホームページで企業や店舗のサービス内容のページのキーワードは、ホームページタイトルと関連させ、独自のビジネスの特徴を出していくべきです。小規模な企業ホームページでコンバージョンを獲得するコツを解説します。
お申し込みページの作り方
集客につながる効果的な「お問い合わせページ」「お申し込みページ」を作成するときの注意点を解説します。このようなページは閲覧者さんに確実にコンタクトして頂けるよう解りやすい構成にする必要があります。その極意とは!
トップページの作り方
ホームページ作成の最終段階はトップページを造る事です。運営者からのお知らせ欄やイメージ画像、重要コンテンツへの誘導リンクバナーなどをうまく配置しましょう!検索エンジンへの登録などホームページを作成した後の重要な作業についても解説します。
ホームページの改善とSEO
ホームページは完成したら、それが始まり!作りっぱなしで、お問い合わせはありませんし、売り上げも伸びません!一発で完全なホームページできませんので検証して改善していきましょう!そのキッカケとなるコンテンツです。

トップページ ソフトの概要 Hp公開の方法 SEO対策基本編 アクセス解析 特典のご案内 購入者メルマガ お問い合せ