さていよいよWebページの構成に関する記事です。みなさんがよく閲覧しているWebページの多くは決まったパーツでできています。
それぞれに名称もありますので、今回はWebページの構成とそれに関する用語解説をしていきたいと思います。
目次
Webページの構成
Webページは主に６つのパーツで構成されています。
下の図は一般的なWebページの構成図です。もちろんこの構成通りではないページも多数ありますが、
ここで紹介するそれぞれのパーツの用語は多用しますので覚えておきましょう。
①ヘッダー
ページの最上部にある、ロゴマークやキャッチコピー、連絡先などの画像が入っている部分です。
②ナビゲーション
ホームページのメニュー。
- グローバルナビゲーション
- Webサイトで全てのページに共通して設置されるナビゲーションです。主要なコンテンツが表示されます。
- ローカルナビゲーション
- グローバルナビゲーションに表示されている主要コンテンツ内にどんな内容があるのか示すナビゲーションです。
③メインビジュアル
サイトの顔となる画像を入れ込む部分です。Webサイトを開いたときに最初に目に入る画像と言えます。Webサイトの印象に関わる大事な部分です。
④サイドバー
画像の右側または左側に表示されている縦長の部分です。
バナーやナビゲーションが設置されることが多いです。
⑤コンテンツ
主な情報が掲載される部分です。
トップページではコンセプトや新着情報、誘導バナー、テキストなどが表示されます。
⑥フッター
ページの最下部にあたります。ヘッダーと同様にロゴやナビゲーション、コピーライト、連絡先などが入っています。
Webデザインに関する用語
Webページを作成する上で、様々なデザイン方法があります。ここではそのデザインやレイアウトについて解説します。
①カラムレイアウト
「カラム」とは、ページ垂直方向の区切りの事を指します。
（上記の一般的なWebページの構成図のコンテンツ２、３のような区切りのことを指します。）
この区切りに合わせて各要素を配置します。
②グリッドレイアウト
ページを縦横に分断する直線で格子状に分割し、コンテンツを配置していくレイアウトのことです。
上にある一般的なWebページの構成図はグリッドレイアウトと言えます。
③レスポンシブデザイン
画面のサイズに合わせてホームページを拡大、縮小するデザイン手法です。
近年のスマートフォンの普及に合わせて、レスポンシブデザインは重要視されています。
Webページの制作はPC上で行うことが多いですが、スマートフォンでも閲覧しやすいようなデザインにする必要があります。文字や画像の大きさ、ボタンやメニューの大きさや配置などレスポンシブデザインを意識して制作することが重要です。
④リキッドレイアウト
ブラウザの表示領域に合わせて、コンテンツの幅・位置を可変で表示させるレイアウトのことです。
⑤パララックスデザイン
スクロールなどの動作によって、複数のレイアー（層）にある要素を異なるスピードで動かし、奥行きを表現するデザイン手法のことです。
⑥ピクセルパーフェクト
デザインを1px(ピクセル)のズレもなく完璧にコーディングで再現する手法のことです。
⑦ルックアンドフィール
UIの観点からWebサイトがどのように見える(ルック)か、機能性やインタラクティブ性の観点からどのように感じられる(フィール)か、ということを意味します。
まとめ
今回はかなり簡単ではありましたが、Webページの構成について解説しました。Webページの構成とWebページのデザインの種類はそれぞれ奥が深いですので、今後触れていきたいと思います。
コメント