グリッドと余白の関係とは?カラム・ガター・マージンとFigmaでの設定を解説

Webサイトをデザインするとき、要素と要素の間を何pxにするか、毎回その場の感覚で決めていませんか。

感覚で決めた余白は、見た目はそろっているようでも少しずつずれていて、どこか落ち着かないレイアウトになりがちです。

この記事では、余白の決め方の土台になる「グリッド」と余白の関係を、カラム・ガター・マージンの3つの要素から初心者向けに解説し、Figmaのグリッド(レイアウトガイド)の表示・設定方法も紹介します。

グリッドと余白の基本

まずは、グリッドとは何か、そしてグリッドの中で余白がどんな役割を持っているのかを押さえましょう。

グリッドとは

グリッドとは、画面を縦の列で等しく区切り、要素を規則正しく並べるための「見えない基準線」のことです。

ノートの罫線に沿って文字を書くとまっすぐそろうように、グリッドに沿って文字や画像を置くと、ページ全体の位置がそろいます。

グリッドはデザインを作る人だけが見る補助線なので、完成した画面には表示されません。

それでも、グリッドに沿って作られた画面は、見る人に「整っている」「まとまっている」という印象を与えます。

グリッドを作るカラム・ガター・マージン

Webやアプリで使われるグリッドは、「カラム」「ガター」「マージン」の3つでできています。

このうちガターとマージンの2つは「余白」なので、グリッドを決めることは、そのまま余白の一部を決めることでもあります。

要素	意味	余白との関係
カラム(列)	文字や画像などの中身を置く縦の区画	中身を置く場所(余白ではない)
ガター	カラムとカラムのあいだの空き	要素どうしを横に並べたときの余白になる
マージン	いちばん外側のカラムと画面の端のあいだの空き	画面の左右の余白になる

Googleのデザインガイドライン「Material Design」でも、レイアウトのグリッドはカラム・ガター・マージンの3つで構成されると説明されています(Material Design「Responsive layout grid」(英語))。

次の見本は、スマートフォンの画面を4つのカラムに区切ったグリッドと、そのグリッドに沿って要素を置いた状態です。

見本A:グリッドだけを表示した状態。黄色の帯がカラム、帯と帯のあいだの白い隙間がガター、両端の白い部分がマージン

見本B:見本Aのグリッドに沿って、見出しの帯(4カラム分)とカード(2カラム分ずつ)を置いた状態

見本Bでは、カード同士の横の間隔がガターの幅、カードと画面の端の間隔がマージンの幅に、自然とそろっています。

このように、グリッドを先に決めておくと、横方向の余白はいちいち測らなくても決まっていきます。

グリッドがあると余白が「逆算」で決まる

グリッドを使う一番のメリットは、余白の数値を行き当たりばったりではなく、レイアウト全体の構造から逆算して決められることです。

要素ごとに「ここは12px、ここは15px」と感覚で余白を決めていくと、少しずつずれた位置や間隔が積み重なり、全体がガタガタに見えてしまいます。

次の見本は、同じ見出しとカード3枚を、グリッドを使わずに置いた場合と、3カラムのグリッドに沿って置いた場合です。

NG:グリッドを使わず感覚で配置。見出しとカードの左端、カードの幅や間隔が少しずつずれている

OK:3カラムのグリッドに沿って配置。左端・カードの幅・間隔がそろっている

NGの見本は、一つひとつのずれは数pxですが、全体としては「なんとなく雑」な印象になっています。

OKの見本は、見出しとカードの左端がそろい、カードの間隔もすべてガターと同じ幅なので、すっきりと整って見えます。

ガターの幅が一定だと、横に並んだ要素の間隔が等しくなり、横方向の余白に規則正しいリズムも生まれます(余白のリズムについては余白のリズムとはで解説しています)。

グリッドを使った余白の決め方とFigmaでの設定

ここからは、画面サイズに合わせたグリッドの考え方と、Figmaでグリッドを表示・設定する方法を紹介します。

画面サイズに合わせてカラム数を変える

Webのグリッドは、1つの設定をすべての画面で使うのではなく、画面の幅に合わせてカラムの数を変えるのが一般的です。

スマートフォンのように狭い画面を12個に区切ると、1つのカラムが細くなりすぎて使いにくいためです。

Material Design(旧バージョンのガイドライン)では、画面幅に応じて次のようなカラム数の例が示されています。

画面	カラム数の例	ガターの例
スマートフォン	4カラム	16dp
タブレット	8カラム	24dp
PC	12カラム	画面幅に応じて設定

dp(ディーピー)はAndroidアプリで使われる長さの単位で、Webのpx(CSSピクセル)とほぼ同じ感覚で考えてかまいません。

12カラムがよく使われるのは、12が2・3・4・6で割り切れるため、「2等分」「3等分」「4等分」のどの並べ方にも対応しやすいからです。

2等分:6カラム＋6カラム
3等分:4カラム＋4カラム＋4カラム
4等分:3カラム＋3カラム＋3カラム＋3カラム
メイン＋サイドバー:8カラム＋4カラム

このように、同じグリッドのままいろいろな並べ方を作れるのが、12カラムが便利な理由です。

ただし、これらはあくまで一例です。
サイトの内容に合わせて、使いやすいカラム数とガターを選びましょう。

ガターとマージンは役割を分けて考える

グリッドを作るときは、カラム間の余白(ガター)と画面端の余白(マージン)を、別々の役割として区別しておくことが大切です。

ガターは「並んだ要素どうしを分ける余白」、マージンは「画面の端から中身を守る余白」で、受け持っている仕事が違うからです。

たとえばスマートフォンではガターとマージンを同じ16pxにすることもよくありますが、PCで画面が広くなったときは、ガターはそのままでマージンだけを広げる、といった調整が必要になります。
ガターまで広げるとカード同士が離れすぎて、同じ仲間に見えにくくなるためです(近くにあるものが仲間に見える性質は近接の原則とはで解説しています)。

最初から2つを区別しておけば、画面サイズが変わってもどちらを調整すればよいか迷いません。

Figmaでグリッド(レイアウトガイド)を表示する

Figmaでは、フレーム(画面の枠)に「レイアウトガイド」を追加すると、カラム・ガター・マージンのグリッドを表示できます。

以前は「レイアウトグリッド」という名前でしたが、2025年5月に「レイアウトガイド」へ名称が変わりました(Figmaヘルプ「レイアウトガイドを作成」)。
古い解説記事で「レイアウトグリッド」と書かれているのは、この機能のことです。

カラムのグリッドは、次の手順で追加します。

グリッドを付けたいフレームを選択する
右サイドバーの「レイアウトガイド」の欄で、追加ボタンを押す
最初はマス目状の「均等グリッド」が追加されます。
レイアウトガイドの設定アイコンを開き、種類を「列」に切り替える
「数」(カラム数)、「余白」(マージン)、「ガター」に数値を入れる

たとえばスマートフォン向けの画面なら、Material Designの例にならって「数:4」「余白:16」「ガター:16」から始めると分かりやすいでしょう。

種類を「ストレッチ」にすると、カラムの幅がフレームの幅に合わせて自動で伸び縮みし、「余白」の欄でマージンを指定できます。
「左」「中央」「右」を選ぶと、カラムの幅を固定した数値で指定する設定になります。
画面の幅に合わせて伸び縮みするWebサイトの画面を作るなら、まずは「ストレッチ」を選んでおけば十分です。

作業中にグリッドが邪魔になったら、キーボードのShift+Gで、すべてのレイアウトガイドの表示・非表示を切り替えられます。
「グリッドを追加したのに見えない」というときも、まずこのショートカットで非表示になっていないかを確かめましょう。

CSSでグリッドとガターを作る

ここからはコーディングする人向けの補足です。
デザインツールだけを使う人は読み飛ばしてもかまいません。

CSSでは、display: gridでカラムを作り、gap(またはcolumn-gap)でガター、左右のpaddingでマージンを指定できます。

次のコードは、スマートフォン向けに4カラム、ガター16px、マージン16pxのグリッドを作る例です。

.layout {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 同じ幅のカラムを4つ */
  column-gap: 16px;   /* ガター */
  padding-inline: 16px; /* 左右のマージン */
}

1frのfrは「fraction(分数・割合)」の略で、空いている幅を割合で分ける単位です。
repeat(4, 1fr)は、ガターを除いた残りの幅を4等分する、という意味になります。

gapはグリッドの行や列のあいだの隙間を指定するプロパティで、デザインのガターにそのまま対応します(MDN「gap」)。

デザインで決めたガターとマージンの数値を、そのままCSSに写せるのもグリッドを使う利点です。

実践のポイント

グリッドと余白を扱うときに陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

グリッドを表示しないまま要素を自由に置くと、そろっているように見えても数pxずつずれていることがあります。
配置が終わったら一度グリッドを表示して、要素の端がカラムの線にそろっているかを確かめましょう。
ガターとマージンを同じものとして扱うと、画面幅が変わったときに、どちらの余白を調整すればよいか分からなくなります。
数値が同じでも、役割は別のものとして名前を分けておきましょう。
グリッドを設定すると、縦方向の余白まで決まったように感じてしまうことがあります。
グリッドで決まるのは、横方向の位置と余白だけです。
見出しと本文の間など縦方向の余白は、8の倍数から選ぶなど、別のルールで決めておきましょう(余白のルールの作り方は余白の間隔のルールとはで解説しています)。
すべての要素を必ずグリッドに沿わせる必要はありません。
写真を画面いっぱいに広げるなど、あえてグリッドからはみ出させる表現もありますが、それは基本をそろえたうえでの「例外」として使いましょう(写真や背景だけを画面の端まで広げ、文章は決めた幅に収める作り方はコンテンツ幅とはで解説しています)。

よくある質問

Q. グリッドは必ず12カラムにしないといけない?
A. いいえ、決まりではありません。
12カラムは分け方の自由度が高いのでよく使われますが、スマートフォンでは4カラムなど、画面とコンテンツに合った数を選べば大丈夫です。
Q. Figmaでグリッドを追加したのに表示されません。
A. まずShift+Gで、レイアウトガイドがまとめて非表示になっていないかを確認しましょう。
右サイドバーのレイアウトガイドの欄でも、ガイドごとに表示・非表示を切り替えられます。
Q. ガターは何pxにすればいい?
A. 正解の数値はありませんが、スマートフォンなら16px前後から試すと失敗しにくいでしょう。
余白の数値を8の倍数でそろえる考え方と組み合わせると、ほかの余白とも統一しやすくなります(8の倍数で余白を決める考え方は8pxグリッドとはで解説しています)。