皆さんこんにちは！

この記事では、ウェブページの基本的な構造についてまとめています。

ウェブサイトを制作する時、ますはデザインをしますよね。

そのためには、どういう構成でページが作られているか知る必要があります。

「ウェブページを作りたいけど構造を知らない・・・」

「もう１度おさらいしたい」

という方の参考になれば嬉しいです。

それでは見てみましょう。

基本的な構造を解説！

ここでは、

トップページの構造を解説します。

トップページ構成（例）

ヘッター

ヘッターとは、サイトの頭の部分にあり、ロゴや電話番号、社名などを配置します。

また、サイト内どのページにも使われる共通部分です。

グローバルナビゲーション

グローバルナビゲーションとは、サイト内全てのページに表示される共通部分で、主要ページのリンクのことです。

項目が多すぎると見えづらくなるので、３本線のアイコン「ハンバーガーメーニュー」からプルダウンさせて表示させるサイトも多いです。

メインビジュアル

メインビジュアルとは「トップページにある大きな画像領域」つまりそのサイトの表紙の役目を果たす非常に重要な部分です。

そのサイトの伝えたいことを、画像やスライダー近頃は動画を用いて表現されています。

コンテンツエリア

コンテンツエリアとは、そのページの主題となる内容を記述するエリアのことです。

上から順にコンテンツに優先順位をつけて配置します。

レイアウトには人の視線の流れに合わせ、Z型の法則・F型の法則が用いられます。

また、誘導したい他サイトやページへのコンテンツを配置する場合もあります。

フッター

フッターはページの最後に位置してるエリアです。

会社やサイトの基本情報（連絡先・住所・ロゴ・社名など）やナビゲーション・著作権表示などを記載します。

サイト全体に共有される部分です。

まとめ

今回はトップページを例に、配置について解説しました。

私も初めは、サイトを作るにもどこに何を配置していいか全く分からず困ったこともありました。

基礎を覚えれば、デザインの幅も広がるので次回は、ウェブページで使用するデザインパーツのまとめを紹介させていただきます。

最後までご覧いただきありがとうございました。