【WEBデザインを独学で学ぶ】WEBページの構成要素を学ぶ

どーも。学長です!

 

 

【WEBデザインを独学で学ぶ】

WEBページの構成要素を学ぶ

 

 

WEBサイト作る前に構成要素を整理しておく必要があります。

ここではトップページについて説明していきます。

 

 

それでは授業を始めたいと思います。

 

WEBページを構成する領域について

WEBサイトの構成はいろいろあります。

今回は、当サイトをサンプルとして製作します。

1つ1つ説明していきますので、わからない場合は理解するまで読んでください。

 

構成

 

ヘッダー領域とは?

Aの箇所は「ヘッダー」と言う領域です。

基本的には企業のロゴや、ブランド名などを記載します。

 

 

またWEBサイト全体で共通の「サイト内検索」や「サイトマップ」への

リンクをここに掲載することもあります。

 

ナビゲーション領域とは?

Bの箇所は「ナビゲーション」と言われる領域です。

WEBサイト内で自由に閲覧できるように、

ナビゲーションやメニューボタンなどを掲載しています。

 

 

ナビゲーションは用途に合わせて様々な種類があります。

どのナビゲーションを採用するかは、そのサイトのレイアウトデザインによって

大きく変わります。

 

コンテンツ領域とは?

Cの箇所は「コンテンツ」と言われている領域です。

WEBサイトでは、メインとなる情報を掲載します。

掲載する内容ですが、用途や目的によって様々です。

 

 

訪問ユーザーに対して、インパクトある画像を掲載したり、

WEBサイトやリンクメニューを多数掲載しているWEBサイトなど、

様々です。

 

フッター領域

Dの箇所は「フッター」と言われる領域です。

基本的には「著作権の情報」やメインコンテンツを

補足するような内容のページへのリンクを掲載します。

 

 

「利用規約」や「プライバシーポリシー」に関するページへのリンクも

フッターに掲載されることが多いです。

 

構成要素とレイアウトの関係

これらの4つの領域とレイアウトデザインは深い関係です。

例えば、レイアウトの対象がヘッダー領域やナビゲーション領域、

フッター領域であれば、反復の原則を利用します。

 

 

反復の原則を利用して、

WEBサイト全体で同じレイアウトデザインを採用した方が、

一貫性のあるWEBデザインを実現することができます。

 

 

一方、コンテンツ領域であればある程度自由にレイアウトデザインができます。

どちらが良いというのはないので、領域ごとの特徴を加味してレイアウトデザインを、

考えるようにしましょう。

 

 

さて今日の授業はここまでです。

不明な点は学長までお願いします。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ABOUTこの記事をかいた人

1979年生まれ群馬県在住のグラフィックデザイナー兼ウェブデザイナー。 2014年からデザイン情報発信サイト『デザガク』を開設。 主にクチコミとウェブからの集客で受注し、一切営業しないスタイルを貫いている。 制作実績では3,000万円以上稼ぐアフィリエイターのLP、数千万の売り上げを達成した教材LP、さらに、メジャー格闘技団体「RIZIN」のスポンサーポスターや、ブランディングデザインにおいても好評を得ている。 公益社団法人日本グラフィックデザイナー協会(JAGDA)正会員。