グリッドレイアウトの作り方｜カラム・ガターの決め方と要素の載せ方

要素を1つずつ動かして、「なんかしっくりこない」を何十分も繰り返していませんか？

その状態から抜け出す方法がグリッドレイアウトです。先に縦の列を用意して、そこへ要素を載せていく作り方です。
置き場所を毎回考えなくてよくなるので、作るのが速くなります。要素が20個あっても散らかりません。
このレッスンでは、カラム・ガター・マージンという3つの部品、何分割にするかの決め方、要素の載せ方の手順を説明します。最後にバラバラの配置を載せ直す課題をやってみましょう。

グリッドレイアウトは縦の列に載せる作り方

グリッドは「格子」という意味です。デザインでは、キャンバスに等間隔の線を引いて作った下地を指します。その線に沿って要素を並べる作り方がグリッドレイアウトです。

線は仕上がりには出てきません。それでも、全部の要素が同じ線に乗っていれば「そろっている」と伝わります。

デジタル庁が公開しているデザインシステムのページを開いてみてください。見出しも本文もカードも、同じ縦線の上から始まっています。下地の線は見えませんが、そろっているのは分かります。

グリッドの効果は、そろえることだけではありません。置き場所の候補を減らすことが本当の効果です。どこにでも置ける状態では判断が終わりません。列に載せると決めた瞬間、選択肢は数個になります。

Webサイトや料金表のように情報量が多いものほど効きます。要素が3つしかないバナーなら、作らなくても整います。

グリッドの部品は3つ

デザインツールのグリッド設定画面には、たいてい3つの入力欄があります。名前を覚えておくと迷いません。

ガターを0にすると、隣の列の中身とくっついて読みにくくなります。マージンを0にすると、画面の端ぎりぎりまで文字が来て窮屈に見えます。どちらも必ず取ってください。

カラムレイアウトとの違い

似た言葉にカラムレイアウトがあります。こちらは、ページを縦にいくつの区画で見せるかという構成の話です。「2カラムのブログ」と言えば、本文とサイドバーが横に並ぶ形を指します。

グリッドは見えない下地、カラムレイアウトは仕上がりに見える区画です。2つは対立しません。12分割のグリッドを下地にして、本文に8カラム、サイドバーに4カラムを割り当てる。この組み合わせがよくある形です。

何分割にするかを決める

分割数に正解の数はありません。並べる要素の数で決めます。とはいえ、迷ったときの目安はあります。

Webサイトなら12分割が扱いやすいです。12は2でも3でも4でも6でも割り切れます。同じ下地のまま、2列にも3列にも4列にも組み替えられます。
途中で「特長を3つから4つに増やしたい」と言われても、下地を作り直さずに済みます。

12分割は世界共通の目安になっています。GoogleのMaterial Designも、パソコン向けの画面を12列で組むように決めています。

作るもの	分割数の目安	理由
バナー・チラシ	3〜4分割	要素が少ないので細かく割る意味がない
Webページ（PC）	12分割	2・3・4列に組み替えられる
Webページ（スマホ）	4〜6分割	幅が狭く、ほぼ1列に並ぶ
スライド資料	6分割	2列と3列を行き来しやすい

分割数を増やすほど判断も増えます。まず12から始めてください。

要素の載せ方

下地ができたら要素を載せます。順番があります。

Afterは3カラムに載せ直しただけです。幅の種類を減らして上端をそろえました。要素は1つも減らしていません。

全部を同じ幅にする必要はありません。使う幅の種類を2〜3種類に絞るのが目的です。幅が5種類あると、そろえたつもりでも散らかって見えます。

ガターとマージンの数値

数値で迷ったときの目安を挙げます。そのまま使って構いません。

	PCのWebページ	スマホ	A4のチラシ
中身の幅	1,100〜1,200px	画面幅から左右を引いた残り	紙幅から左右を引いた残り
ガター	24〜32px	16px	4〜6mm
マージン（左右）	画面の余りぶん	16〜20px	10〜15mm

大事なのは、決めた数値を全部の画面で使い回すことです。ページごとに変えると、同じサイトに見えなくなります。
数値の決め方をもっと細かく知りたい方はマージンとパディングの使い分けと余白の使い方を続けて読んでください。

グリッドから外していい場面

全部を線に乗せると、整いますが単調になります。狙って外す場所を作ると、そこが目立ちます。

外すのは1画面に1か所までです。増えると、外したのか失敗したのか伝わらなくなります。

ミニ実践：バラバラの配置を載せ直す

手を動かすと一気に分かります。所要時間は20分ほど、道具は無料のCanvaかFigma、プレゼンソフトでも大丈夫です。

1. 横1200×縦800くらいのキャンバスを作ります
2. グレーの四角を5個、わざとばらばらの幅と位置で置きます。大きさも高さも変えてください。ここが素材です
3. ガイド機能で縦線を引いて、12分割のグリッドを作ります。左右のマージンは60px、ガターは24pxにします
4. いちばん大きい四角から、カラムの整数ぶんに幅を変えます（6カラムぶん、4カラムぶんなど）
5. 残りの四角も、同じルールで幅をそろえます。使う幅は2種類までに絞ってください
6. 横に並ぶ四角の上端を同じ高さにそろえます
7. グリッドの表示を消して、Beforeの状態と見比べます

2でばらばらに置くのを面倒がらないでください。整った素材から始めると効果が分かりません。過去に自分が作った資料があれば、それを使うのがいちばん勉強になります◎

できあがったら、次のチェックリストで確認してください。

やってしまいがちな失敗

グリッドを作ったのに守らない

線は引いたけれど、要素は目分量で置いている。これでは作った意味がありません。
直し方は、ツールのスナップ機能を有効にします。近づけると線に吸い付くので、目分量でずれることがなくなります。

ガターを詰めて情報を増やす

入りきらないからとすき間を10pxまで詰めると、隣の列の文字とくっついて、どこまでが1つの塊か分からなくなります。
直し方は、ガターは動かさず、載せる情報のほうを減らします。すき間は情報を分けるために必要です。

分割数を途中で変える

上のセクションは12分割、下のセクションは10分割。こうすると、要素の左端の位置が微妙にずれて、そろっていないように見えます。
直し方は、1つの制作物では分割数を1つに固定します。列数を変えたいときは、同じ12分割の中で組み替えます。

よくある質問

グリッドとはどういう意味ですか？

もともとは「格子」という意味です。デザインでは、キャンバスに等間隔で引いた縦横の線と、その線で区切られた下地を指します。
この線は仕上がりには出てきません。要素をそろえるためだけに使う目印です。線に沿って並べると、定規で測らなくても位置がそろいます。

レイアウトグリッドはどう設定しますか？

設定するのは3つです。分割数（カラム数）、カラムとカラムのすき間（ガター）、いちばん外側の余白（マージン）。
PCのWebページなら、12分割・ガター24px・中身の幅1,140pxあたりから始めると扱いやすいです。FigmaならレイアウトグリッドのColumns、Canvaならガイド機能で同じことができます。数値は最初に決めて、全ページで使い回してください。

CSSのグリッドとデザインのグリッドは同じものですか？

考え方は同じで、扱う場所が違います。デザインのグリッドは、作るときにそろえるための下地です。CSSのグリッド（CSS Grid Layout）は、その下地をブラウザで再現するための書き方です。
デザイナーが12分割で作れば、コーダーはそれを12カラムのコードで組み立てます。先にデザイン側で分割数とガターを決めておくと、実装で数値の食い違いが起きません。

グリッドどおりに並べると、つまらない見た目になりませんか？

全部を同じ幅で並べると単調になります。幅に差をつけてください。6カラムぶんの大きな写真の下に、3カラムぶんの小さなカードを2つ。同じ下地でも、こう組めば動きが出ます。そのうえで1画面に1か所だけ外すと、印象が変わります。

次に学ぶこと

このレッスンの要点をまとめます。

• グリッドは、要素をそろえるための見えない下地
• 部品は3つ。カラム（列）・ガター（すき間）・マージン（外側の余白）
• Webページなら12分割。2・3・4列に組み替えられる
• 載せるときは、大きい要素から、カラムの整数ぶんで幅を決める
• 外すのは1画面に1か所まで

次はマージンとパディングの使い分けです。グリッドで位置が決まったら、次は要素の内側と外側をどれだけ空けるかを数値で決めます。
配置そのものの考え方はレイアウトの基本に戻ると整理できます。

ほかのレッスンはデザインの基本コース目次から選べます。