ページを作成する順番とトップバナー作成方法

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

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

 

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

 

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

 

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

 

そもそも当初下層ページはURLやタイトル、キーワードすら決まっていない状態です。

 

このような中で「下層ページへのリンク」をトップページに設定できるはずもありません。グローバルメニューも決まらない状態でトップページを作成できるわけがないのです。

 

トップバナーの重要性

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

 

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

 

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

 

 

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

 

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

 

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

 

トップバナーは「一回の作業で終わらない」と考えてください。

トップバナーの基本形

色に関してですが、トップバナーを作成する時点で先にホームページの基本カラーが決まっているはずです。まずはそこから大きく外れないような背景色で作成します。私が基本にしているバナーデザインの位置関係です。この時点で、背景色の濃さで文字を白抜きにするか、白下地で着色文字にするかも検討します。

 

 

 

 

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

 

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

 

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

 

極端な例ですが、ヘッダー内テキストに「日本一おいしいラーメン屋」として検索されているのに、トップバナーのテキストが「オムライス」について書かれていたら、「なんでやねんっ！」っと思いますよね。

 

ズレてはいけないという事です。

 

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

 

要するに、あなたが作成するホームページが、何について書かれているのかを、キーワードと連動させて閲覧者さんが、「ハッキリとスグに解る」ようなトップバナーにしなければいけません。

 

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

 

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

 

 

検索されるキーワードにあわせて顧客を絞り込み、バナーテキストも「どちらの方でも、何でも」ではなく、テキストはより絞り込んでいった方がホームページを見てもらえる確率は高くなります。

 

検索されてホームページが開かれるという事と、その先閲覧してもらえるかという事は別に考える必要があります。

 

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

 

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

 

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

 

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

 

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

 

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

 

 

�A キャッチコピー

 

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

 

タイトルテキストの次の2番目に見られる場所なので、簡潔にサービスのメリットをアピールします。

 

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

 

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

 

 

 

�B イメージ画像

 

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

 

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

 

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

 

 

 

�C 店舗所在地

 

ご自身で企業や店舗を経営していらっしゃる方は、きっと地元を大切にしていると思います。ヘッダー内のタイトルテキスト（サイト名）に地域名は入れましたか？グーグル検索は検索者の位置情報を考慮して検索結果を表示させますので、サイトタイトルに地域キーワードを入れる事が重要です。

 

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

 

 

�D 電話番号

 

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

 

 

上記の画像を作成する場合の大きさは、パソコン画面を重視する場合はメインコンテンツの幅いっぱいに合わせるのが良いと思います。スマホ画面の最適化は現在ではサイト作成ソフトシリウス2のようにレスポンシブウェブがソフトの主流なので調節は自動という事になります。

 

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

 

 

�E 会社名

 

会社名は一番どうでもよい情報で、無くても大丈夫ないくらいです。ホームページが名刺代わりという体裁があるとは思いますが、会社の名前は検索者にとっては重要ではないと言う事です。訪問者さんは会社名をキーワードにしてググっているのではなく、ほとんどの場合が自分にメリットのある、質が良いサービスを検索しています。

 

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

 

検索されたとしても、会社、店舗概要などのページを作成しているため検索結果には表示されます。

 

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

 

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

 

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

 

 

�F タイトルの補足説明

 

キャッチコピーを補足する程度の文章で良いです。多くても3行くらいにしておくのがコツで、ココにダラダラと文章を書いても訪問者さんは読んでくれません。あくまでもサービスの内容や特徴が解るくらいの20文字程度が限界です。

 

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

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

 

 

トップバナー制作のコツ

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

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

 

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

 

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

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

 

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

 

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

シリウスで作成

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

 

 

 

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

 

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

 

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

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

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

 

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

 

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

 

 

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

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

 

 

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

 

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

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

サイトの表示速度性能

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

 

表示速度の遅延は重い画像が原因になる事の他、HTMLやCSSなどの記述も原因になります。その中でも画像の最適化はページの読み込み速度に対する影響が顕著に現われると言う事です。

 

ホームページは動作が軽くなければならないのです。このような施策を積極的に行う事が健作順位を上げる要因になります。まずはトップバナーの画像やコンテンツのページの読み込み速度は高速化しましょう。

 

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

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

 

 

画像ファイルの記述

画像ファイルのalt属性

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

 

 

画像ファイル名

 

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

 

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

トップバナーのデザインはサイトの基本カラーとブランディングに一致するように配色します。これはブランドの一貫性を保つ事とデザイン性に影響します。また、シンプルでわかりやすいデザインを採用し、ユーザーがバナーからどのように行動すべきかを明確に示すことが大切です。

 

その他、Google検索エンジンのガイドラインに従い、SEO最適化のベストプラクティスを守ってください。そのため画像は訪問者に重要な情報を提供し、SEOにも影響を与える重要な要素であることを認識して効果的なトップバナーを作成するようにしてください。