今さら聞けない！Webデザインの定番とも呼べるレイアウト方法「グリッドレイアウト」の基本

更新日: 2020年12月16日

マイページにお気に入り

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

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

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

グリッドレイアウトとは

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

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

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

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

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

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カラム、といった表示画面の大きさに応じたデザインが可能になります。

グリッドデザインのメリット・デメリット

グリッドデザインには良いところもたくさんありますが、どんな場合でも有効かといえば、そういうわけでもありません。
グリッドデザインのメリット・デメリットをしっかりと把握して、使いわけていくことが大切です。

メリット

・ 一度にたくさんの情報を見せることができる
・ コンテンツのブロックが並んでいると、情報が整理されてクリックもしやすい
・ ホームページの全体的な統一感が出しやすい
・ 情報更新の手間が省ける

デメリット

・ ブロックが多すぎると情報過多になりUXが悪くなる
・ 更新頻度が高いと、過去記事が見つけづらくなる
・ ブロックの大きさが同じだと、コンテンツごとの重要度が出しづらい

概してグリッドデザインは、情報量が多いホームページに向いています。
情報量が少ないと、そもそものコンテンツのブロックが成立しないため、そういった場合はシングルカラム(1カラム)でのレイアウトを検討しましょう。

すぐに使えるフレームワーク

定型グリッドの定番「Foundation」

http://foundation.zurb.com/

2016年10月に5周年を迎えたのが、もはや定番となったCSSフレームワーク「Foundation」です。12カラムのグリッドレイアウトやレスポンシブにも対応するほか、カスタマイズに便利なSassにも対応しています。

可変レイアウトの定番「Masonry」

http://masonry.desandro.com/

MasonryはjQueryを使ったグリッドシステムで、ウィンドウのサイズを変えるとPinterestのようにカードがアニメーションで動きながら画面サイズに合わせた配置になります。ブロックのサイズを変えずに、余白と位置で動的にグリッドを作るのは、JavaScriptならではと言えるでしょう。

フレームワークを使わない方法

CSSフレームワークを使うのは便利ですが、外部ファイルを使っているため、仕様が変わってしまうと書き換えが必要になる場合があります。

もっと汎用的にグリッドレイアウトでのデザイン構築を行いたい場合には、CSS3の新しいプロパティを活用する方法があります。
具体的に、2つの方法を解説していきます。

1.「display: flex」を使う

グリッドレイアウトでのデザイン構築を行う場合には、「display: flex」、つまりFlexboxを使う手法を好んで使う人もいます。
FlexboxとはFlexible Box Layout Moduleといって、CSSを1行プラスするだけで横並びにできる大変便利なプロパティです。Flexboxを使えば％やpxの指定は必ずしも必要ではないため、不要な計算をせずにレイアウトを行うことができます。

Flexboxの基礎知識、特にFlexboxをグリッドレイアウトとして使いたい場合は下記記事が参考となります。

参考：
これからのCSSレイアウトはFlexboxで決まり！｜Webクリエイターボックス
 CSS3のFlexboxを基本から理解して、使い倒そう！｜LIG inc.

▲ Flexboxを使うなら知っておきたい「flexアイテム」の幅の計算方法

Flexboxを使うと、Mediaqueryでデバイスの幅ごとに横並びか縦並びかを指定することもできるため、簡単にレスポンシブデザインのホームページを作成することもできます。

2.「display: grid」を使う

グリッドデザインをもっと簡単に行おうということで、「display: grid」というプロパティも登場しました。こちらは、「display: flex」と同じように、カラム数や割合を指定することで簡単にグリッドを実装することができます。
ただし、2016年11月時点でほとんどのブラウザでは標準で実装されておらず、Google Chrome「試験運用機能」の「試験運用版のWebプラットフォームの機能」項目（chrome://flags/#enable-experimental-web-platform-features）を有効にすることで、コードを確認することができます。

▲ これからのグリッドレイアウト - 第1回 Grid Layout Moduleの概要