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

更新日: 2020年12月16日

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

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

メリット

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

デメリット

・ ブロックが多すぎると情報過多になり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の概要