画面を縦横で分断した"方眼のブロック"を組み合わせてコンテンツを作り上げていく、Webデザインの定番とも呼べるレイアウト方法を「グリッドレイアウト」と言います。

しかし、一口に「グリッドレイアウト」といっても「リキッドレイアウト」や「レスポンシブレイアウト」のようにグリッドレイアウトから派生したレイアウトも登場し、レイアウトの組み方も刻々と変わってきています。

そこで今回は、「グリッドレイアウト」の基礎をおさらいしながら、実際にどのようにレイアウトをしていくのかを見ていきます。

グリッドレイアウトとは

grid.jpeg

グリッドレイアウト(グリッドデザイン、グリッドシステム)はホームページのデザイン手法の一つで、画面やページを縦横に分断する直線で格子状に分割し、これを組み合わせてブロック内の要素の大きさや配置を決定していく方法のことです。

特に、ページを方眼のように同じ大きさの正方形や長方形に分割し、これをいくつか組み合わせて要素や余白を構成していく手法を指します。

もともとこのようなレイアウト手法は、新聞や雑誌などの印刷物でよく見られるものです。
文章や画像、余白など、内部の構成要素の境界線が必ず格子状の線(グリッドライン)に合うように配置することで、いろいろな大きさの要素を複雑に配置してもすっきりした見やすい構成にすることができます。

グリッドラインはレイアウトの決定時に仮に引かれる線なので、実際のデザイン上は実線として表示されるわけではありません。

グリッドレイアウトの特徴

2016年に68％を占めるモバイル経由でのインターネットブラウジングは、2017年には75％にまで拡大すると予想されています(※)。
グリッドレイアウトでデザインを行うと、デスクトップでの閲覧だけではなく、タブレットやモバイルの閲覧時にも最適化して表示することができます。

それではなぜ、グリッドレイアウトはあらゆるデバイスに対応していると言えるのでしょうか。グリッドレイアウトの特徴に答えがあります。

1. 最大幅とグリッド数

グリッドレイアウトでは、ページの最大幅を決めて、その最大幅を何分割のグリッドにするかを決めていきます。CSSフレームワーク(グリッドやデザインなどを包括的に設定している外部ファイル)では、12分割や16分割のものが一般的です。

メディアクエリと呼ばれる、表示された画面環境によって適用するスタイルを切り替える方法を使ってCSSを記述することで、デスクトップとタブレットやモバイルでグリッド数を変えることができます。

2. ボックスの大きさ

グリッド数が把握できたら、グリッド上にコンテンツを配置していきます。このコンテンツは2カラム分、あのコンテンツは3カラム分、という具合に、カラム単位で大きさを決めていきます。

あるコンテンツのブロックに着目した時、まわりが同じ大きさなのか、それとも様々な大きさのブロックを組み合わせているのかで、レイアウトの種類が大きく3種類にわかれます。

2-1. 定形型

決まった形のブロックを組み合わせてレイアウトをしていく方式です。

2-2. 可変型

様々な大きさのブロックが配置されており、ブラウザの幅に合わせて変化するものもあります。

2-3. ハイブリッド型

デスクトップやタブレットサイズでは可変型を採用しつつ、幅の狭いモバイル端末では1カラムを中心とした定形型を採用するホームページも増えてきました。

3. リキッドとレスポンシブ

グリッドレイアウトは、「リキッド」や「レスポンシブ」といったキーワードとともに語られることがあります。

3-1. リキッドレイアウト

リキッドとは「流体」という意味ですが、ブラウザの表示領域に合わせてコンテンツの幅や位置を可変で表示させるレイアウトです。

リキッドレイアウト自体はCSSが登場して以来の歴史あるレイアウト手法です。グリッドレイアウトに関して言えば、リキッドレイアウトを取り入れることで、グリッドやブロックの幅を固定せずに、ウィンドウのサイズに応じてブロックの大きさを変えることができます。

3-2. レスポンシブレイアウト

レスポンシブレイアウトとは、デスクトップ・タブレット・モバイルなど、複数の異なる画面サイズをホームページ表示の判断基準として、ページのレイアウトやデザインを柔軟に調整するレイアウトです。

レスポンシブレイアウトはJavaScriptやPHPなどのユーザーエージェント(端末情報)によって切り替える方式もありますが、先述したメディアクエリを使ってCSSで切り替える方法が一般的になってきました。モバイルでの閲覧がますます増えてくるこれからの時代には、レスポンシブ対応は必須といってよいでしょう。

グリッドレイアウトにレスポンシブ性を取り入れることで、デスクトップでは8カラム、モバイルでは6カラム、といった表示画面の大きさに応じたデザインが可能になります。