ホームページ自作ガイドホームページ外観の構成と名称を知ろう

トップページのレイアウトを決めるとき、まずは大まかなパーツの配置を決めましょう。
外観的なパーツとその名称を知っておくことで、トップページの構成を考えやすくなります。

こちらの記事を読むことで、ホームページの外観の構成について知ることができます。

各パーツの名称

トップページでの各パーツの名称をご紹介します。
ただし、ホームページ作成機能や制作会社などによって、呼び方が異なる場合があります。

以下の構成はあくまで例なので、デザインによって以下とは配置が違うことがよくあります。
例えば、「グローバルナビゲーションがヘッダー上にある」「サイドバーが無い」などです。

各パーツの役割について

各パーツの役割について解説します。

（1）ヘッダー

ヘッダーは、ホームページ内の全ページ共通で最上部にあるパーツです。
ホームページにアクセスされたときに一番最初に目に入ることが多いので、どんなホームページか知ってもらえるようにすることが大事です。

ほとんどのホームページでは、ヘッダー内にロゴマークが入っています。
そのロゴマークをクリックすると、トップページに移動できることが多いです。

会社やお店のホームページであれば、電話番号や住所、お問い合わせページへのボタンが入っていることが多いです。

最近では、スクロールしても常に最上部に固定で表示されるヘッダーも多いです。
ユーザーが、ページ内のどの箇所を見ていても常にヘッダーは見えるので、いつでも他のページへ移動できるメリットなどがあります。

（2）グローバルナビゲーション

グローバルナビゲーションは、全ページ共通で表示させる、ページのリンクを並べてある箇所です。
「グローバルメニュー」「ページメニュー」などと呼ぶこともあります。

ホームページ全体のページ数が少ない場合は、全てのページがグローバルナビゲーションに入ることが多いです。
しかし、ホームページ内の全てのページをグローバルナビゲーションに載せる必要はありません。
ページ数が多い場合は、特に見てもらいたい重要度の高いページを載せましょう。

また、グローバルナビゲーション内のページ名にマウスを乗せると、そのページの下層にあるページの一覧が、プルダウンで表示される仕様になっている場合もあります。

（3）メインイメージ画像

メインイメージ画像は、ホームページでアピールしたい内容を直感的に表現したり、会社や店舗のイメージを伝える箇所です。
「メイン画像」「メインビジュアル」などと呼ぶこともあります。

メインイメージ画像として、自動的に画像が変わるスライドショーを設置しているホームページも多く見られます。
静止画だと1枚の画像しか見せることができませんが、スライドショーにすることで、同じ箇所で複数の画像を見えることができます。
スライドショーでは、画像にリンクを設定し、クリックすると下層ページに移動する仕組みにしているホームページもあります。

ホームページにアクセスしたとき、最初に目に入るメイン画像は、ホームページの印象に大きくつながります。
メイン画像の印象が、ホームページをしっかり見てもらえるかどうかの分岐点になり得るので、よく考えて設置しましょう。

（4）メインコンテンツ

メインコンテンツはその名の通り、ページ内でメインとなる箇所です。
ユーザーに1番見てもらいたい場所と言えます。

そのページのテーマに沿った内容を、「見出し・文章・画像」を基本要素として載せます。

やみくもに情報を並べるのではなく、ユーザーに見てもらいたい順序や重要度などを考えて、配置させましょう。

（5）サイドバー

サイドバーは、全ページ共通でメインコンテンツの右側、もしくは左側に配置されている箇所です。
横幅はメインコンテンツより大幅に狭くなります。

サイドバーには、グローバルナビゲーションに載せきれなかったページリンクや、見てもらいたいページのバナーなどがあることが多いです。

全ページ共通で見えるパーツなので、ユーザーに見てもらいたい内容、もしくはクリックしてもらいたい内容を載せておくのにも使えます。

最近は、「ワンカラム」と言って、サイドバーが無いホームページも多いです。

（6）フッター

フッターは、全ページ共通で最下部にある箇所です。
重要度は他のパーツに比べると1番低いです。

フッターによくある内容は、コピーライト表記や、ホームページ内のページ一覧です。
会社・店舗の電話番号や住所を載せているホームページも多いです。

ホームページをスクロールさせて上から見て行ったとき、最後に出てくるのがフッターなので、お問い合わせにつなげるための情報（電話番号・お問い合わせフォームのボタンなど）を載せておくと、効果を期待できるかもしれません。

まとめ

ホームページの外観のパーツの役割を理解しておくと、その役割に応じた内容を考えやすくなります。
色々なホームページを見てみて、それぞれのパーツに載せてある内容を見ると勉強になるでしょう。