Webサイトのレイアウトの種類

Webサイトのレイアウトには、いろいろな種類があります。
それを説明する前に、まず知っておいてほしいのが「カラム」です。
Webサイトのデザインをするにあたっては、情報をまとめるために要素同士の段組みを作ることがあります。この段組みをカラムと言います。
そして、このカラムがどのように組み合わされているかで、レイアウトの呼び方も変わってきます。

一つ目は、「シングルカラムレイアウト」。
これは、一つのカラムだけを使い、1列の段組みで作られたレイアウトです。
昨今はスマートフォンでWebサイトを閲覧する人が増えているので、不要な情報を表示せずに済むシングルカラムレイアウトのWebサイトも増加傾向にあります。

二つ目は、「マルチカラムレイアウト」。
これは、コンテンツの横にサイドバーが設置されているというように、いくつかの列に分けられたレイアウトです。
「2カラムレイアウト」の場合、コンテンツの左もしくは右にサイドバーが置かれることになります。
「3カラムレイアウト」の場合、コンテンツの左右にサイドバーが置かれることになります。
情報量が多いサイトや、ポータルサイトなど回遊性が重視されるサイトで用いられることが多くなっています。

三つ目は、「カード型レイアウト」。
Pinterestなどのように写真が主なコンテンツとなる場合、上記のレイアウトとは異なる、カードを並べたようなレイアウトが用いられることがあります。
シングルカラムやマルチカラムよりも高い技術を要するレイアウトですが、素材を引き立たせるには非常に効果的です。

四つ目は、「ブロークングリッドレイアウト」。
これは、規則性を持った境界線(グリッド)を無視して作られたレイアウトです。
大きな写真やイラストを雑誌のようにレイアウトすることで、独自性を打ち出すことができます。
ただし、コンテンツの差し替えなどをする場合、規定の画像サイズなどを満たすためには保守費用がかさみやすいので、キャンペーンのサイトなどのように、更新が不要なサイトで使うようにしましょう。

Webサイトのレイアウトの種類
トップへ戻る