婚活LABより、ブライダルネットの期間限定クーポン配布中!!

第3回 WEBサイト作成講座 『サイトの構造とデザイン』

第3回 WEBサイト作成講座 『サイトの構造とデザイン』

 今回は『サイトの構造とデザイン』について解説します。本来であればサイトの構造とデザインは一番先に決めておくことが必要ですが、まずはHTMLに触れてもらうことが重要であると思い今回は後回しました。

 前回記事は以下よりご覧ください。

第1回 WEBサイト作成講座 『HTMLの基礎中の基礎』

第2回 WEBサイト作成講座 『必須要素の解説』

WEBサイトの構造、サイトマップについて

 まずはサイトの構造について解説します。一般的にはサイトマップと呼ばれるものを予め考えておくことが重要です。自分が作成しようとするWEBサイトにいくつのページが必要でどのような構造で構成させるべきか考える必要があります
 理解しやすく企業ホームページなどによくみられるツリー型サイトマップについて解説していきます。

ツリー型サイトマップについて

 サイトマップの構造についてはまずは以下の図を見てください。

ツリー型サイトマップ
 企業ホームページを例に、上記ツリー型サイトマップは、『トップページ』を上層に配置し、下層には『業務案内』ページ、『求人』ページ、『会社概要』ページ、『お問合せ』ページが配置されている。さらに『会社概要』ページの下層に『代表挨拶』ページが配置されています。ページ数は少ないですが最低限の企業ホームページとしてツリー型サイトマップにより構造化されていいます。
 この様にツリー型サイトマップとは、ある階層に属するページから、下層に枝分かれしてページを配置していく構造の事を指します。
 
 サイトマップを作成してサイトの骨格や導線を明確に設計しておくことにより、ユーザーにとって見やすいWEBサイトの制作が可能となります。

WEBサイトのデザインについて

 サイトのデザインについても、予め決めておくことが肝心です。WEBサイトの制作現場ではワイヤーフレームというサイトの設計図をコーディング前に作成するのが一般的ではありますが、難しく考える必要はわりません。個人でWEBサイトを作成する場合には『どこに』、『何を』、『どの様に』配置したいか紙に書くだけでも良いです。

 WEBサイトのデザインを明確化しておくことにより、コーディングしていく際に躓くことが少なくなります。WEBサイトのレイアウトについて解説していきます。

 以下の図は簡単なレイアウト案です。

簡単なワイヤーフレーム

 本来は各要素のピクセル数等も記述しておくと後で楽ですが、今回は初めてWEBサイトを作成する方が対象なので上記の図ぐらい簡単で構いません。紙に殴り書き程度でも大丈夫です。powerpointやexcel等で作成することもできます。中にはオンライン上で簡単に作成するツールも存在します。興味がある方は『ワイヤーフレーム 作成 ツール』等で検索してみてください。
 
 上記のレイアウト案は、メインとなるコンテンツが2カラム構造になっている為、マルチカラム(2カラム)レイアウトと呼ばれています。。カラムとは縦の列を表しています。他にはシングルカラムレイアウト、グリッドレイアウト、フルスクリーンレイアウト、リキッドレイアウト等も存在します。

 配色等も、本来この段階で決めておきますが当講座ではHTMLのマークアップについて簡単に理解して頂くことに主点をおいていますので割愛します。。

 次回は上記のサイトマップと簡単なデザイン案をもとにHTMLを記述してサンプルサイトを作成していこうと思います。

第4回 WEBサイト作成講座『レイアウト案に沿った記述』

グループサイト。婚活LABより!婚活無料診断実施中!

CTA-IMAGE 簡単な質問に答えるだけですあなたに最適な婚活タイプが丸わかり!