1-トップバナーの作成方法

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

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

 

下層ページが未完成の状態でトップページを作成しようとしてもうまくいかない事が多いです。これはトップページに下層ページのリンクが集中し「リンク元」になる事が理由です。それとトップページはコンテンツを代表するページになるので、下層ページを作成していく過程で、トップページのイメージやレイアウトが変る可能性が高くなるためです。

 

トップページ作成では当初とは違った良いアイディアが浮かぶ可能性もあります。

 

また、ページ数が確定しないままでトップページを先に作成してしまうと、ホームページが完成する寸前でサイト構成の変更が必要になる事が多くなります。このような事からトップページの作成作業としては、トップバナーだけを先に簡単に作成しておきます。これはサイトの色のイメージを決めるためで、この時点では細かいデザインに凝る必要はないです。

 

 

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

 

トップバナーの重要性

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

 

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

 

トップバナーにテキストがデザインされている場合、バナーで自分にメリットがあるホームページかどうかの判断の70%程度は占めるので、バナーテキストにはキーワードが必須です。そのハードルを越えると閲覧者の視線はコンテンツメニューに移ります。ホームページの内容をグローバルメニューやサイドメニューなどのリンクタイトル名で確認するわけです。

 

 

上記からSEO的に見ても、トップバナーの仕上りが、直帰率やページビュー数、またページ滞在時間に影響するのです。この事から、検索でクリックした閲覧者を逃がさないためのトップバナーのデザインを考える重要性が解ります。

 

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

トップバナーの作り方

トップバナーの基本形

ホームページの基本カラーは決まっているはずです。まずはそこから大きく外れないような背景色で作成します。次からのコンテンツは私が基本にしているバナーデザインの位置関係です。まずはこの当初の段階で、背景を色付きにしてテキストを白抜き、または色付きにするのか、あるいは白下地で着色文字にするかも検討します。

 

 

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

 

トップバナー内のテキストは、「検索キーワード」と深く関連させます。閲覧者さんはタイトルやH1のテキスト、すなわち検索結果で表示されるキーワードに関連したホームページを探しています。なので画像バナーのメインタイトルのテキストは検索キーワードと直接関連している必要があり、これらのキーワードがズレると閲覧者さんは混乱してしまいます。

 

極端な例ですが、グーグル検索で「日本一おいしいラーメン屋」と検索表示されているのに、クリックで開いたホームページのトップバナーのテキストが「オムライス」と書かれていたら、ページはすぐに閉じられ直帰率が高くなる訳です。

 

下の[�E会社名]でも書いていますが、間違ってもこのスペースに会社の名前を書かないようにして下さい。検索者さんにとって会社名は何の意味も持ちません。（会社名自体がキーワードの場合は別です。）

 

 

上記のように「法律」から、細かくキーワードを絞り込み、それに合わせてバナーテキストも、「誰でも」「何でも」ではなく、より絞り込んだ記述の方が信頼感と安心感が高くなり、コンバージョンに至る確率は高くなります。

 

バナーテキストではどんな案件に強いのかを的を絞って訴えると言う事です。このような記述は、検索されてホームページが開かれるという事と、その先閲覧してもらえるかという事は別に考える必要があるという事に繋がります。

 

それと地域性ですが、沖縄の人が北海道の法律事務所に交通事故の相談はしません。これはホームページタイトルキーワードと合わせて考えます。どのようなカテゴリーのホームページでもそうなのですが、特に個人経営やお店のホームページは、どこまでの範囲の地域でサービスが可能であるのかを考えて訴求したほうが反応が良くなります。

 

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

 

このような事を避けるため「タイトルテキスト」や「H1テキスト」は対象をできるだけ絞り、その内容でキーワードも絞り込みます。そしてバナーの画像タイトルテキストは、その絞込んだキーワードを反映させるのがコツになります。

 

また、訪問者さんがホームページを開いた時、当初視線は左上です。なのでタイトルテキストも左上から始まるようにデザインするのが王道です。そしてバナー全体としては、文字を詰め込み過ぎない事も重要です。「間」の取り方に気を使い、うまく空白部分も利用するという意識でデザインします。これを誤るとチープなデザインになってしまいます。

 

 

�A キャッチコピー

 

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

 

タイトルテキストの次の2番目に見られる場所なので、簡潔にサービスのメリットをアピールします。内容としては、価格の安さ、地域の利便性、サービスの充実度、他にない特徴、お勧めの商品、などが考えられます。

 

あくまでもタイトルが一番なので、色使いは控えめにします。例えば文字色を黒にする場合はグレーに近い色を選択する事です。バナー制作全般に言える事ですが、文字色に純粋な黒を使うと「きつく」感じる傾向があります。

 

 

 

�B イメージ画像

 

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

 

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

 

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

 

 

 

�C 店舗所在地

 

グーグル検索は検索者の位置情報を考慮して検索結果を表示させます。最近ではグーグルが位置情報を考慮して検索結果表示している事が知れ渡り、店舗で検索するユーザーが、検索窓に地域名を入れない事も多いです。

 

しかし「地名無しの検索」により地域で表示されるには、タイトルで地名をキーワードとして記述する事が前提です。もちろんコンテンツの中で地域名をキーワードとした文章を記述した場合でも有効ですが、小規模店舗のホームページの場合では、やはりサイトタイトルに地名を記述しておく事が重要になります。またグーグルビジネスの登録は必須になります。

 

このような事から訪問者さんは検索された結果が地域内のホームページであると認識しています。なのでトップバナーに特に大きな文字で店舗の住所は掲載する必要はありません。右下くらいの位置に電話番号と共に小さく書いておく事がデザイン的にもまとまりやすいです。それよりグーグルマップをホームページ上で公開しておく事の方が優先されます。

 

 

�D 電話番号

 

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

 

 

上記の画像を作成する場合では、その大きさをメインコンテンツの全幅にするか、または2列にして他のバナーと組み合わせます。現在ではスマホ画面の最適化は、サイト作成ソフトシリウス2のようにレスポンシブウェブが主流です。

 

この場合2列、3列のバナーは「縦一列」に自動で配置調節されます。

 

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

 

トップバナーに電話番号を記述しない場合は、サイドバーに載せるか、電話タップバナーを作成します。

 

 

�E 会社名

 

トップバナー作成で「会社名」はユーザーに一番メリットの無い情報です。ホームページが名刺代わりという場合では必要ですが、会社の名前自体は検索者にとっては重要ではないと言う事です。訪問者さんは会社名をキーワードにして検索しているのではなく、ほとんどの場合が自分にメリットのある、質が良いサービスを検索しています。

 

会社名や店舗名は、最終的に「お問い合わせ」などの場面で確認するくらいで、そもそもお店の名前を知らない検索者が「店舗名」や「会社名」で検索する事はありえません。もし店名で検索されたとしても、店名は独自性が高いため会社、店舗概要などのページを作成しているのなら検索結果には表示されます。

 

このような事から特に「会社名」はホームページのファーストビューで「一番不要な情報」と言えるので、トップバナーで会社名を全面的にアピールする必要はありません。トップバナーに大きな文字で「店舗名」や「会社名」を掲載しても、訪問者さんは何のメリットも感じる事はなく、これはサイト作成者の自己満足になるだけだと言う事です。

 

但し、店舗名がお店のサービス内容を表している場合や、飲食店などでの地域検索では有効です。

 

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

 

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

 

 

�F タイトルの補足説明

 

キャッチコピーを補足する程度の文章を記述しますが無くても良いです。記述するなら多くても2行くらいにしておくのがコツで、ココにダラダラと文章を書いても訪問者さんは読んでくれません。あくまでもサービスの内容や特徴が解るくらいで40文字程度が限界です。そもそも携帯端末とPCが同じバナーを使っている場合では、この場所の文字は読めません。

 

トップバナーの要素の平均的な位置関係

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

 

 

トップバナー制作のコツ

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

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

 

なので、ある程度イメージで作成してしまって、後で変更する方が、デザイン的にも訴求力的にも完成度が高くなります。このような理由からトップバナー作成をホームページ作成で一番最初に作業する事をお勧めしています。

 

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

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

 

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

 

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

シリウスで作成

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

 

 

 

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

 

画像作成解説動画トップバナー背景素材

 

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

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

トップバナーを作成するタイミングで各ページの一番下に設置する電話番号バナーも一緒に作成してしまいます。このバナーはお問い合わせフォームのあるページにリンクさせる「リンク画像バナー」として設置する事で「コンバージョン率」「デザインの統一性」「イメージ拡大」またページボリュームを上げるなどの効果があります。

 

色使いは「トップバナーで使っている色のみ」で構成します。ここで他の系統の色を多用するとホームページのデザインがチープになります。当サイトの場合も、画像に使われている色を除くと、3色しか使っていません。

 

また、このリンクバナーはカーソルが画像の上に乗ったときに画像が変化するようにします。下記の参考画像では、画像の上にカーソルが乗ると画像が薄くなると共に1ピクセル「下と右」に移動させて、リンク画像である事を強調しています。このような工夫もクリック率を上げるのに効果があります。

 

 

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

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

 

 

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

なぜ画像を最適化する必要があるのか？

ページの読み込み速度に対する影響

サイトの表示速度性能

サイトの表示速度を速くするには画像ファイルサイズは最小限に抑えて、読み込み速度を向上させなければいけません。読み込み速度が遅い画像はSEOに悪影響を及ぼします。画像の読み込み速度が遅いという事は、サイトを開いて表示されるまでの時間が長いという事になり、グーグルのアルゴリズムはユーザビリティに欠けると判断します。

 

表示速度の遅延はHTMLやCSSなどの記述も原因になります。その中でも画像の重さはページの読み込み速度に対する影響が顕著に現われます。ホームページは動作が軽い方がSEOに有利であり、このような施策を積極的に行う事が検索順位を上げる要因になります。まずはトップバナーの画像やコンテンツのページの読み込み速度は高速化して下さい。

 

シリウス2の表示速度性能

下記画像のようにシリウス2では7項目にわたって表示速度を向上させる機能が標準装備されています。CSSなどの高速化の技術が無くても、シリウス2ではなんとワンクリックで作業完了です。

 

 

画像ファイルの記述

画像ファイルのalt属性

画像を記述する際、alt属性を適切に設定して、検索エンジンがコンテンツを理解できるようにする必要があります。画像自体を検索アルゴリズムが理解できないために「alt属性」でどのような画像であるかをグーグルに伝えます。

 

 

 

画像ファイル名

 

このような細かい作業の積み重ねが検索上位表示させる要因になるのです。

 

カラーとブランディングとデザイン

トップバナーはシンプルでわかりやすいデザインが効果的です。過剰な情報や複雑なデザインは避け、主要なメッセージや画像をクリアに表示させた方がブランディングにも有効になります。そしてトップバナーのデザインを芯として他のバナーや見出しなども作成します。デザインを統一させる為にも、このような作業はまとめて行なう事が有効です。

 

行き当たりばったりの作業はデザインに統一感がなく、時間のロスも多くなってしまいます。バナー画像は訪問者に重要な情報を提供し、SEOにも影響を与える要素であることを認識して効果的なトップバナーを作成するようにしてください。

 

その他、Google検索エンジンのガイドラインに従い、SEO最適化のベストプラクティスを守りましょう。