前回のレッスンでは、WEBページの役割・ページ内に配置される要素を学びました。
今回は、その配置方法として典型的な４つのカラムレイアウトについて学びます。
WEBデザインでのカラムの意味と代表例を抑えておきましょう。フロントページはシングルカラムにしてください…などディレクション時にもよく使われる言葉ですよ。
Webデザインでの「カラム」について
カラム (column)という言葉にはいろいろな意味があります。
カラムは直訳すると「列」を意味する言葉。
例えば、表計算ソフトのエクセルでも列をカラムと言いますし、Bootstrapのグリッドシステムではブロック要素が縦方向に占める割合を決めるときにcol-5（column-5の意味）などのクラスを使いました。
WEBデザインでは基本的に、カラムはページ全体の「段組み」のことを指す言葉として使います。
ページを全体的に見たときに、どのような区分けで要素を配置するかを示すためにシングルカラムや２カラムという言い方をします。
代表的なカラム構成
Webサイトの目的・コンテンツ量によって使われるレイアウトは異なります。
よく使われている、代表的なカラム構成は下記の４つです。vv なかでも近年はシングルカラムレイアウトが多く使われています。
1.マルチカラムレイアウト
メインコンテンツとローカルナビゲーション等を横並びで配置したレイアウトです。 ECサイトやコーポレートサイトなどで、ユーザーが頻繁にナビゲーションを利用してサイト内を操作する際に利用されます。
上図のようなコンテンツ部分が２つに分けられている場合は２カラムレイアウト、左右にサイドバーがあり３つに分けられている場合は３カラムレイアウト、とカラム数で呼び分けることもあります。画面幅との兼ね合いもありますから、基本的には３カラムレイアウト以上に増やすことはありません。
【例】
Yahoo!トラベル
2.シングルカラムレイアウト
左右の力ラムを取り去ったレイアウトです。vv 不必要な視線の動きを減らし、よりコンテンツに没入してもらうことができます。
タブレットやスマートフォンの場合も段組みを変更せず、そのままの構成で見ることが出来る点も大きなメリットです。スマホの普及に寄って最近では、スタンダードなレイアウトとなりつつあります。
【例】リンナイ公式通販
3.タイル型レイアウト
並列な情報を沢山表示する方法で、主にトップページのみに用いられるレイアウトです。カードのようなレイアウトで要素を配置することも多いため、カード型レイアウトとも呼ばれます、
メディア系・ニュース系サイトなど、情報量の豊富さや賑やかさを演出する際に利用されることが多いです。また、リンク先のページを把握しやすいため、小規模なECサイトでも使われることもあります。
【例】pinterest
4.フルスクリーンレイアウト
1画面の中に自由に要素を配置するレイアウトです。
比較的小規模、かつグラフィカルな表現が求められるキャンペーンサイトで利用されます。
フロントページや特定のLPのみをフルスクリーン型にすることが多いです。
ページ数が多いサイトで、全てのページをフルスクリーンレイアウトで構成することはありません。制作にも手間がかかりますし、ユーザーが迷子になってしまう可能性も高いためです。
