トップページの外観！サイト構成と名称

ホームページをブラウザで開いた画面では、それぞれに名称があり個別の機能を持ち、ホームページの表示上でのSEO対策の基本部分でもあります。

 

また作成ソフトの取り扱い説明などでも頻繁にこのような用語が使われていますので覚えるようにして下さい。それぞれの呼び名と機能を解説します。

 

 

�@ トップバナー [ヘッダー]

検索エンジンを利用する閲覧者さんは、このバナーを見て、自分が探しているホームページに相応しいか判断します。なので、会社名や電話番号、住所などの会社自体の細かい情報より、発信しているサービスの内容がひと目で解るデザインにするべきです。

 

色相については、医療系、士業系、学習塾、なら青系統、美容系なら薄ピンク、また飲食店の場合ではメニューの料理の画像がボケないように白を多く取り入れるなど考慮されているはずです。最近の飲食店では[黒]が主流になってきています。

 

あなたはグーグル検索などでホームページを開いた瞬間に「戻るボタン」を押した事はないですか？トップバナーの役目は、せっかく開いて頂いたホームページを、すぐに閉じられないようにする事を第一にデザインを考える必要があるのです。

 

�A グローバルメニュー [メインメニュー]

ひとつ前のコンテンツ前半でお伝えした通り、ホームページ制作では、色々なHTMLファイルや画像などを、ひとつのフォルダの中に入れて管理します。

 

そのサイトフォルダの中には、トップページであるindex.htmlの以外にも、ページ数の分だけ「他のページのHTMLファイル」が存在します。

 

この「他のページHTMLファイル」は、通常のグーグル検索で「トップページ」が表示される事が多いため、直接的に閲覧する事ができない可能性が高くなります。

 

このためトップページでは他のページに移動してもらうためのリンクの集合体を用意しているわけです。これがグローバルメニューと呼ばれるものです。

 

閲覧者さんはこのグローバルメニューを見る事によって、検索したホームページにどんなコンテンツがあるのかを「予測」する事ができ、ホームページの規模もおおまかに把握できます。

 

このようにグローバルメニューはホームページの情報量をアピールする大切な要素になるため、通常トップバナーの上下どちらかに表示されているはずです。

 

このように配置する事で使いやすいホームページになります。

 

当然ですがグローバルメニューから、ホームページ内のすべてのページに対してリンクでつながっていなければいけません。そしてトップページから最低2回のクリックで、すべてのページに飛べることが理想です。

 

またグーグルのホームページの価値を判断するクローラーは、このグローバルメニューなどのリンクを介して、トップページから他のページに移動し巡回します。

 

グローバルメニューのリンクは本で例えると目次みたいな存在でもあり、ホームページの顔として、またSEO対策では最も重要なリンクになります。

 

ご自身のお店などのホームページ作成で、どのようなグローバルメニューが必要か書き出してみましょう。この場合、他の競合相手となるホームページを参考にして、サイト構成なども一緒に研究してみてください。グーグル検索をする事はキーワードの勉強にもなります。

 

�B イメージ画像

イメージ画像は、メインになるサービスの概要を直感的にアピールできるようなデザインにします。またイメージ画像に替えて、タップすると電話発信画面に飛ぶ画像リンクなど配置する場合もありますが、この場合はある程度コンテンツを記述した後になります。

 

このイメージ画像はトップバナーの補助的な役割として考えるのが定石で、必要ない場合は特に無くても構わないです。画像を掲載する場合は印象に残るデザインにします。

 

�C サイドバー

このサイドバーは、トップバナー、グローバルメニューに次いで閲覧者さんの目に止まる場所であり、ホームページでは相当重要なスペースになります。

 

必要な情報としては重複しますが、グローバルメニュー（メインメニュー）に記述しきれなかったページのリンク、その他のコンテンツ、ページに対するリンクをすべて記述します。この記述はホームページ作成の基本と言えます。

 

• グローバルメニューのリンクすべて
• グローバルメニューに記述しきれなかったページのリンク
• その他のページのリンク
• ブログなど関連する外部リンク
• 更新履歴リンク

 

基本的に、このサイドバーのリンクからホームページのすべてのページに対して飛べるようにしておくことが重要になります。

 

サイドバーの配置の原理は人間の心理、行動を調査した結果から導き出されたものであり、どのような業種のホームページであっても、似たような形になっているはずです。

 

�D メインコンテンツ

トップページのメインコンテンツについては、ホームページ自体の概要や、トップバナーで表記した「サービスの内容」をより詳しく記述するのが定石です。

 

それと、下記画像のようにホームページの中でも重要度が高く、閲覧者さんにより見て欲しいコンテンツが掲載されているページに対して、補足説明や画像を添えて、リンクで飛べるように配置、構成する事も有効です。

 

 

上記は私が運営するホームページ作成提供サイトのトップページのメインコンテンツのリンクです。このようなリンクを付ける事で、重要なページに閲覧者さんを誘導できます。

 

トップページではホームページ内の色々なコンテンツを満遍なく閲覧者さんに見てもらうための工夫が必要になるって事です。

 

• グローバルメニュー
• サイドバー
• メインコンテンツのリンク

 

�E フリースペース

このスペースでは、ブログやSNSなど、運営するホームページに関連するコンテンツに飛ばすためのリンクが良く設置されています。

 

サイドバーの下の方にありますので、あまり目立つ部分ではありまあせんが、「お知らせ」「相互リンクの募集リンク」「運営者情報」「広告」などが配置されている場合が多いです。

 

サブコンテンツ系への外部リンクを貼るのに適している場所です。

 

�F フッター

フッターは通常1行で表示し、主に著作権の存在、初回のアップロードの西暦、等を記載し、会社名をリンクとしてトップページに飛ばす事が基本になっています。

 

 

通常ホームページの著作権の表記は上記のように記述されている事が多いのですが、実際に必要な要素だけを書く場合は、下記のようになります。

 

 

• (C)・・・・・・著作権という意味
• [西暦]・・・・ホームページをアップロードした年
• [サイト名]・・著作者の氏名またはホームページのタイトル

 

ホームページ作成ソフトでは、雛形が準備されていて、[西暦]と[サイト名]が入れ替えできるようになっている場合が多いです。要するに、フッターではホームページを無断でコピーしたり等、他のコンテンツで引用する事を禁ずるという警告文を記述しておくって事です。