Webサイトのページのレイアウトについて書いています。レスポンシブデザインについては、取り上げていません。
よくあるレイアウト
サイトのレイアウトでシングルカラムやマルチカラムといった呼び方があると思います。カラム(column)とは、列のことです。シングルカラム(1カラム)は1列、マルチカラム(2カラム、3カラムなど)は2列以上のレイアウトのことを指します。ヘッダーとフッターに挟まれた部分が、分割されていなければシングルカラム、分割されていればマルチカラムと判断して良いと思います。
下図のようなレイアウトがよくあるパターンだと思います。この形をベースに変形したレイアウトもあります。
サイトのレイアウトでよく見られるのは、ヘッダーとフッターを横幅いっぱいに表示しているサイトです。※ヘッダーとフッターを横幅いっぱいに作っていないサイトもあるので、その限りではありません。
1カラム
スマホ向けのレイアウトです。スマホの画面幅は狭いです。狭い表示領域をさらに分割すると文字が読みにくくなります。読みにくさを回避するため、1カラムでページを制作するのが主流のようです。
パソコン向けのサイトでも画像を使ってビジュアルで見せる場合には、1カラムで制作します。特にランディングページ(LP)は、1カラムで制作することが多いと思います。
2カラム
様々なサイトで見るレイアウトです。当ブログもPC向けの表示は2カラムです。サイドバーにサイト内リンクを設けて、サイト内を回遊してもらえるようにしています。
3カラム
ポータルサイト(Yahoo!のトップページ)、ECサイトなどでよく見るレイアウトです。ブログでもあります。情報量の多いサイトでは、3カラムが使われているように思います。トップページのみ3カラムで、他のページは2カラムというサイトもあります。
レイアウトの基本的な考え方
一言で言うと「サイトの目的」と「ユーザビリティ」を念頭において、レイアウトします。ユーザビリティとは、使いやすさや見やすさのことです。
まず、サイトを制作する前に「目的」を決めると思います。「宣伝のためのサイト」「資料を請求してもらうためのサイト」「何かを販売して利益を得るためのサイト」何かしらの目的があると思います。その目的に合うようにレイアウトします。同じ内容でも目的が違えば、レイアウトは変わります。
レイアウトは自由
レイアウトは基本的に自由です。「絶対にこの場所にこのパーツを置かなければいけない」という決まりはありません。しかし、様々なサイトを見るとある程度決まった配置というのがあります。これは検証の結果やユーザビリティを考慮した上での配置となっていると考えられます。
仕事としてサイトを制作する場合は、目的に沿ってレイアウトすることになります。一方で個人で制作する場合は、自由にレイアウトしても構いません。
HTML入門のまとめ記事なら... » HTML入門まとめ
