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

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

ホームページ作成の超基本!サイト構成と名称

各部分の名称と機能

ホームページをブラウザで開いた画面では、エリアごとにそれぞれに名称があり個別の機能を持ち、役割が与えられています。これらはSEO対策の基本部分になりますし、また作成ソフトの取り扱い説明などでも頻繁にこのような用語が使われていますので覚えるようにして下さい。このページではエリアごとの呼び名と機能を解説します。


シリウス2のサンプルページから抜粋したデザインです

ホームページトップ画面


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

利用している作成ソフトによって変わりますが、多くのテンプレートではこの位置にホームページのタイトルが表示されることが多いです。一般的にヘッダー部分はSEOで一番重要な記述がされています。その記述はサイトタイトルやH1テキスト、またメタディスクリプション(サイト説明文)であり、検索結果順位とクリック率に大きく影響します。


作成ソフトでは選択できるテンプレートに色々な種類があり、上記画像のサンプルサイトではDのエリアのメインコンテンツ部分の上にサイト説明文が表示されています。シリウス2ではこのような配置が自由に変更できるようになっています。


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


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


関連ページ
このリンクは [別窓で開きます]


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

グローバルメニューで情報量をアピールする

サイト作成では、色々なHTMLファイルや画像などを、ひとつのフォルダの中に入れて管理します。そのサイトフォルダの中には、トップページであるindex.htmlの以外にも、ページ数の分だけ「他のページのHTMLファイル」が存在します。


しかし、グーグル検索では「トップページ」が表示される事が多いため、「他のページHTMLファイル」は、トップページに比べて検索によって直接閲覧して頂ける機会が少ないはずです。このためトップページでは他のページに移動してもらうためのリンクの集合体を用意しているわけです。これがグローバルメニュー、またはメインメニューと呼ばれるものです。


閲覧者さんはこのグローバルメニューを見る事によって、検索したホームページにどのようなコンテンツがあるのかを予測する事ができ、ホームページの規模も大まかに把握できます。このようにグローバルメニューはホームページの情報量をアピールする大切な要素になるため、通常目立つようにトップバナーの上下どちらかに表示されているはずです。


メニューリンクはサイト構成をアピールできる

サイトのメニューがサイドバーだけの場合では、サイトが開かれた時にメニュー自体が隠れてしまいます。サイトメニューはスクロールしなくても表示される部分に設置する必要があります。そのためにグローバルメニューは必須の表示と言えるわけです。サイトが開かれた直後にサイトの構成を閲覧者に遡求するのはSEO上重要になります。


サイドバーのサイドメニューはグローバルメニューに入りきらなかったメニューリンクを設置します。トップページのデザインをすっきりさせるために、グローバルメニューの数は多くても8個ぐらいにとどめておくのが理想です。


当然ですがトップページから、ホームページ内の「すべてのページ」に対してリンクしている必要があります。そしてトップページから最低2回のクリックで、すべてのページに飛べることが理想です。また、グーグルがホームページの価値を判断するクローラーは、主にグローバルメニューのリンクを介して、トップページから他のページに移動し巡回します。


グローバルメニューのリンクは本で例えると目次のような存在でもあり、SEO対策では最も重要なリンクになります。ご自身の店舗などのホームページ作成では、まずどのようなグローバルメニューが必要か書き出して下さい。


ホームページ作成では当初のサイト構成の計画が重要になるので、他の競合相手となるホームページを参考にしください。その際、自分がお客さんの立場になってグーグル検索をする事は検索キーワードの勉強にもなります。


B イメージ画像

イメージ画像は、メインになるサービスの概要を直感的にアピールできるようなデザインにします。またイメージ画像はホームページのトップページの最上部に位置するメインビジュアルであるためサイトの第一印象を決定づけます。


閲覧者がページを開いてから「自分にメリットのあるサイトか」を判断するのにかかる時間は、ほんの数秒で、この一瞬を制するのがバナーの役割です。そして、高品質な画像はプロフェッショナルで安心できるという印象を閲覧者に与えるので画質、デザインについては充分考慮するべきです。店の看板であることを意識して作成してください。


シリウス2では次このようなイメージ画像が百数十種類用意されています

※ クリックで拡大 [画質は落としています]


C サイドバー

サイドバーは、トップバナー、グローバルメニューに次いで閲覧者さんの目に止まる場所であり、ホームページではヘッダー部分の次に重要なスペースになります。グローバルメニュー(メインメニュー)に記述しきれなかったページのリンク、その他のコンテンツ、ページに対するリンクをすべて記述します。メニューリンクを並べる順番も充分考慮します。


サイドバーのリンク
  • グローバルメニューのリンクすべてを上段に記述
  • グローバルメニューに記述しきれなかったページのリンク
  • ダウンロードページなどその他のページのリンク
  • サイトマップへのリンク
  • X、インスタグラムなどSNSへのリンク
  • ブログなど関連する外部リンク


サイドバーのリンクからホームページのすべてのページに対して飛べるようにしておく事が必須です。また店舗や企業のホームページで「アクセスページ」に配置しているGoogleマップの部分に直接リンクさせている事もよく見られます。


サイドバーの配置の原理は「人間の心理、行動を調査した結果」から導き出されたものであり、どのような業種のホームページであっても、類似系なっているはずです。現在では1カラムのホームページが主流で、サイドバーを配置していないサイトもよく見られますが、SEOで不利になるはずなので私の作成したのサイトでは全てサイドバーを配置しています。


D メインコンテンツ

トップページのメインコンテンツでは、サイトの概要や、トップバナーで表記した「サービスの内容」をより詳しく遡求するのが定石です。なので、下記画像のようにホームページの中でも重要度が高く、閲覧者さんにより見て欲しいコンテンツが掲載されているページに対して、補足説明や画像を添えて、リンクで飛べるように配置、構成する事が有効です。


ホームページトップページリンク


上記は私が運営するホームページ作成提供サイトのトップページのメインコンテンツのリンクです。このようなリンクを付ける事で、重要なページに閲覧者さんを誘導できます。トップページではホームページ内の色々なコンテンツを満遍なく閲覧者さんに見てもらうための工夫が必要になります。


メインコンテンツの誘導リンク
  • サービス内容
  • 料金に関するページ
  • プロフィールページ
  • 会社・店舗概要
  • Googleマップへのリンク
  • お問い合わせフォーム


E フリースペース

フリースペースではブログやSNSなど、運営するサイトに関連するコンテンツに飛ばすためのリンクが良く設置されています。サイドバーの下の方にありますので、目立つ部分ではありませんが、「お知らせ」「運営者情報」「広告」などが配置されている場合が多いです。サブコンテンツ系への外部リンクを貼るのに適している場所です。


F フッター

メニューや店舗会社情報、ロゴマークの表示

フッターは本来ホームページがどこの誰によって運営されているかを明らかにする場所です。このような記述があることで経験・専門性・権威性・信頼性の面でグーグルに評価されます。また、主要サービスページなどの重要なページへのリンクや、特に読ませたい記事へのリンクを整理して配置することが「※ コンバージョン」に対しても有効です。


フッター表記でSEOに有効な表記
  • 会社名・店舗名
  • 住所(Googleマップ表記と完全一致させる)
  • 電話番号(携帯番号表記はSEOで有効 )
  • ロゴマーク(信頼性を高めるのに有効)
  • Googleマップ
  • お問い合わせフォームリンク
  • 資料請求
  • 無料相談
  • 主要サービスページリンク
  • 関連サイトリンク

※ コンバージョン・・・サイトの目標を達成させること。


著作権表示 [コピーライト]
フッターは通常1行で表示し著作権の存在、アップロードの西暦を記載する

フッターの記述


Copyright (C) [西暦] [サイト名] All Rights Reserved.


必要な要素だけを書く場合

(C) [西暦] [サイト名]

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


ホームページ作成ソフトでは、雛形が準備されていて、[西暦] と [サイト名]が記述しやすくなっている場合が多いです。シリウス2ではCopyrightが全自動で記述されます。フッターではホームページを無断でコピーしたり等、他のコンテンツで引用する事を禁ずるという警告文を記述しておくと言う法的な表記であるという事です。


[2020-2026] のように期間で書かれていることがありますが、これは2020年に公開し、2026年現在も更新を継続しているという意味で使われます。このようにコピーライトは「このサイトはちゃんと更新されているな」という信頼感を閲覧者に与えられます。法律上は最初の発行年さえあれば十分ですが、慣習として期間で書くのが一般的です。


当サイトのトップページの構成


2026/02/28 13:53:46
SIRIUS2 OFFICIAL PAGE
SIRIUS2 OFFICIAL PAGE
リンク先公式サイトからのご購入でシリウス2を快適に始めるための
ユーチューブ動画アクセス権 [全4本-計67分] を特典としてプレゼント!

さらに電話、メールサポートや画像集、Wordテンプレートもお渡ししています。
また、特典ユーザーズページではシリウス2に必要なSEOに関連する記事を閲覧できます。