12カラムグリッドとは?なぜ12なのか・ガターの役割とFigmaでの設定

Webデザインの解説で「12カラムグリッド」という言葉を見かけるけれど、なぜ12なのか、どう使えばいいのかが分からない、と感じたことはありませんか。

12カラムグリッドは、2等分・3等分・4等分といったいろいろな並べ方を、1つの土台の上で作れるようにするための仕組みです。

この記事では、12カラムグリッドとは何か、なぜ12で区切るのか、カラムとカラムのあいだの「ガター」の役割、そしてFigmaでの設定方法を、見本を使って初心者向けに解説します。

12カラムグリッドの基本

まずは、12カラムグリッドとは何か、そしてなぜ「12」という数が選ばれているのかを押さえましょう。

12カラムグリッドとは

12カラムグリッドとは、画面の横幅を12本の縦の列(カラム)に等しく区切り、その列に沿って文字や画像を配置するためのグリッドのことです。

グリッドとは、要素の位置をそろえるために引く「見えない補助線」のことで、完成した画面には表示されません。

グリッドは、中身を置く「カラム」、カラム同士のあいだの空きである「ガター」、画面の端の空きである「マージン」の3つでできています(3つの用語の詳しい説明はグリッドと余白の関係とは?で解説しています)。

12カラムグリッドでは、要素を「何カラム分の幅にするか」で考えます。

たとえば、メインの記事を8カラム分、サイドバー(ページの横に置く補助的な列)を4カラム分にすれば、8+4=12で横幅がぴったり埋まります。

見本A:いちばん上の黄色い帯が12本のカラム。その下は、同じ12カラムの上で作れる並べ方の例(数字は使うカラム数)

ヘッダー

メインビジュアル

メイン(8)

サイド(4)

カード(4)

フッター

見本B:見本Aの並べ方を組み合わせて、1枚のページを作った例。「8+4」と「4+4+4」が同じグリッドの上に乗っている

見本Bでは、メインとサイドバーの「8+4」と、カード3枚の「4+4+4」という違う並べ方が、どれも同じ12本の線の上にそろっています。

そのため、カードの端とサイドバーの端のように、別々のブロックの端同士も縦にぴったりそろい、ページ全体がまとまって見えます。

なぜ「12」で区切るのか

12という数が選ばれるのは、2・3・4・6のどれでも割り切れて、よく使う並べ方をすべて同じグリッドで作れるからです。

Webページでは「2つ並べる」「3つ並べる」「4つ並べる」が特によく登場しますが、グリッドの数が割り切れないと、どれかの並べ方で幅が中途半端になってしまいます。

ほかの分割数と比べると、12の便利さがよく分かります。

カラム数	等分できる数(1と自分自身以外)	できない並べ方の例
10カラム	2・5	3等分・4等分
12カラム	2・3・4・6	5等分
16カラム	2・4・8	3等分・6等分

10カラムでは3つ並べると1つあたり3.33…カラムになり、カラムの線に乗らなくなります。

12カラムなら、2つ並べれば6カラムずつ、3つなら4カラムずつ、4つなら3カラムずつ、6つなら2カラムずつと、どれも整数になります。

この使いやすさから、12カラムはWeb制作の現場で広く使われています。

たとえば、Web制作でよく使われるCSSフレームワーク(よく使う見た目や配置の設定をまとめた部品集)のBootstrapは、12カラムのグリッドを採用しています(Bootstrap「グリッドシステム」日本語版)。

また、Webユーザビリティの調査で知られるNielsen Norman Groupの記事の日本語訳でも、デスクトップ(PC)の画面では12カラムにすると、ほとんどのデザインに対応できる柔軟さが得られると紹介されています(インタフェースデザインにおけるグリッドの利用・U-Site)。

要素の端はカラムの線にそろえる

12カラムグリッドを使うときは、要素の左右の端を、必ずどれかのカラムの端にそろえます。

カラムの途中で要素を切ったり、割り切れない幅で並べたりすると、グリッドを引いた意味がなくなり、ほかのブロックと端がそろわなくなるためです。

次の見本は、同じカード3枚を、カラムの数を意識せずに並べた場合と、4カラムずつ並べた場合です。

NG:カードの幅がばらばらで、端が薄い黄色のカラムの線とずれている

OK:カードを4カラムずつにし、端がすべてカラムの線にそろっている

NGの見本は、カードの幅が少しずつ違ううえに、端がカラムの途中で切れているため、同じ仲間のカードなのに大きさの差に意味があるように見えてしまいます。

OKの見本は、3枚とも4カラム分の幅で、端がカラムの線にそろっているので、対等な3つの選択肢として落ち着いて見えます。

なお、「5カラム+7カラム」のように、左右で幅を変えた組み合わせも12カラムの線には乗るので使えます。

大事なのは数字がきれいかどうかではなく、要素の端がカラムの線にそろっているかどうかです(端をそろえる考え方そのものは整列の原則とは?で解説しています)。

12カラムグリッドとガターの使い方

ここからは、12カラムグリッドで欠かせないガターの役割と、実際の幅の決め方、Figmaでの設定方法を見ていきます。

ガターはカラム同士を区切る余白

ガターとは、カラムとカラムのあいだに入れる一定の幅の余白のことで、横に並んだ要素同士がくっつかないように区切る役割を持っています。

ガターがないと、隣り合うカードや画像が1つのかたまりのように見え、どこからどこまでが1つの要素なのかが分かりにくくなるためです。

ブレンドA

ブレンドB

ブレンドC

NG:ガターが0で、3枚のカードが1枚の大きな板のように見える

ブレンドA

ブレンドB

ブレンドC

OK:カードのあいだに同じ幅のガターを取り、3枚が別々の商品として見分けられる

NGの見本では、カードの境目が細い線だけなので、3つの商品が1つの表のように見えてしまいます。

OKの見本では、カードのあいだにガターがあることで、「別々の商品が3つ並んでいる」とひと目で分かります。

ガターはすべてのカラムのあいだで同じ幅にするのが基本で、同じ幅が繰り返されることで、横方向の間隔に規則正しいリズムが生まれます(リズムの考え方は余白のリズムとは?で解説しています)。

カラムとガターが横方向の位置をそろえるのに対して、文章の行の縦方向の位置を横線でそろえる考え方はベースライングリッドとは?で解説しています。

カラムとガターの幅を計算する

12カラムグリッドの幅は、「コンテンツの幅」と「ガターの幅」を先に決めると、カラム1本の幅が計算で決まります。

12本のカラムのあいだにはガターが11本あるので、コンテンツの幅からガター11本分を引き、残りを12で割ればカラム1本の幅になります。

手の指で考えると分かりやすく、指は5本でも、指と指のすき間は4つです。

同じように、カラムが12本ならあいだのガターは1本少ない11本になり、左右の外側の空きはガターではなくマージンとして別に数えます。

たとえば、PC向けに幅1440pxの画面を作り、左右のマージンを120pxずつ、ガターを24pxにした場合は、次のようになります。

項目	計算	結果
コンテンツの幅	1440 − 120 × 2	1200px
ガター11本分	24 × 11	264px
カラム1本の幅	(1200 − 264) ÷ 12	78px

この数値は一例で、正解の値が決まっているわけではありません。

幅1440pxは、Figmaのフレームに用意されているデスクトップ用のサイズ(1440×1024)と同じ幅で、PC向けのデザインを作るときの基準としてよく使われます。

1280pxや1920pxで作ることもあり、どの幅を選んでも計算の手順は同じです。

参考までに、Bootstrapのグリッドでは、ガターの初期値が1.5rem(文字サイズの基準が16pxの場合は24px)に設定されています(Bootstrap「ガター」日本語版)。

なお、要素が複数のカラムにまたがるときは、あいだのガターも幅に含まれます。

上の計算例で4カラム分のカードを作ると、カラム4本(78×4=312px)とガター3本(24×3=72px)で、幅は384pxになります。

文章を読ませるブロックの幅をどこまで広げてよいかはコンテンツ幅とは?、画面の端の余白の決め方はページ左右の余白とは?で解説しています。

Figmaで12カラムグリッドを設定する

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

PC向けの画面に12カラムグリッドを設定する手順は、次のとおりです。

フレームツールで、PC向けの幅(たとえば1440px)のフレームを作る
フレームを選択し、右サイドバーの「レイアウトガイド」の欄で追加ボタンを押す
追加したガイドの設定を開き、種類を「列」に切り替える
「数」を12、配置の種類を「ストレッチ」にする
「余白」(マージン)に120、「ガター」に24など、決めた数値を入れる

「ストレッチ」は、フレームの幅に合わせてカラムの幅が自動で伸び縮みする設定で、「余白」と「ガター」を数値で指定できます(Figmaヘルプ「レイアウトガイドを作成」)。

つまり、前の節で計算したカラム1本の幅(この例では78px)は、余白とガターを入れればFigmaが自動で割り出してくれます。

あとからフレームの幅を変えても、カラムが一緒に伸び縮みして12本のまま画面に収まります。

種類を「左」「中央」「右」にした場合は、カラム1本の幅を自分で数値で指定し、フレームの幅を変えてもカラムの幅は変わりません。

設定できたら、要素の端をカラムの端に合わせながら配置していきます。

キーボードのShift+Gでレイアウトガイドの表示・非表示を切り替えられるので、配置が終わったらガイドを消して、仕上がりの見た目も確かめましょう(スマホ向けの4カラムの設定例や、レイアウトガイドの基本操作はグリッドと余白の関係とは?で紹介しています)。

CSSで12カラムグリッドを作る

ここからは、Webサイトを自分でコーディングする人向けの補足です。

デザインツールだけで作る人は、「12本の列を作って、要素ごとに何本分使うかを決める」という考え方が、そのままコードにもなると分かれば十分です。

次のコードは、ガター24pxの12カラムグリッドを作り、メインを8カラム分、サイドバーを4カラム分にする例です。

.layout {
  display: grid;
  grid-template-columns: repeat(12, 1fr); /* 同じ幅の列を12本 */
  column-gap: 24px;                        /* ガター */
}
.main    { grid-column: span 8; } /* 8カラム分 */
.sidebar { grid-column: span 4; } /* 4カラム分 */

grid-template-columnsで列の数と幅を決め、grid-columnのspanで「何本分の列を使うか」を指定します(MDN: grid-template-columns、MDN: grid-column)。

実践のポイント

12カラムグリッドを使うときに陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

スマートフォンの画面にも12カラムをそのまま使うと、1本のカラムが細くなりすぎて扱いにくくなります。
狭い画面では4カラムなど、カラムの数自体を減らすのが一般的です。
ガター(カラム同士のあいだ)とマージン(画面の端)を同じものとして扱ってしまうことがあります。
数値が同じになることはあっても役割は別なので、画面幅が変わったときにどちらを調整するかを分けて考えましょう。
要素の端をカラムの途中で止めたり、ガターの中に要素の端を置いたりしてしまうことがあります。
配置のたびにグリッドを表示して、端がカラムの線に乗っているかを確かめましょう。
目立たせるために、意図してグリッドから外す方法はグリッドをあえて崩すデザインとは?で解説しています。
12カラムの数値だけをまねて、ガターやマージンを感覚で決めてしまうことがあります。
ガターやマージンも、ほかの余白と同じ数値の一覧から選ぶと統一しやすくなります(余白の数値を8の倍数でそろえる考え方は8pxグリッドとは?で解説しています)。

よくある質問

Q. 12カラムでないといけない?
A. いいえ、決まりではありません。
12カラムは並べ方の自由度が高いのでPCの画面でよく使われますが、内容がシンプルなら、もっと少ないカラム数でもかまいません。
Q. 5等分したいときはどうすればいい?
A. 12は5で割り切れないので、12カラムの線には乗りません。
5つ並べたい場面が多いなら、その部分だけ5等分の並べ方を別に用意するか、10カラムのグリッドを検討しましょう。
その部分だけ5等分にする場合も、ブロック全体の左右の端は12カラムのコンテンツの幅(上の計算例なら1200px)にそろえておくと、ページの端はそろったままになります。
CSSなら、そのブロックだけgrid-template-columns: repeat(5, 1fr)のように5列のグリッドにします。
ただし、カラムの線から外れた部分が増えるほど、ほかのブロックと端がそろいにくくなる点には注意が必要です。
Q. 「8pxグリッド」とは何が違う?
A. 12カラムグリッドは、画面の横幅を12本の列に区切って、要素の幅や位置を決めるための仕組みです。
8pxグリッドは、余白や大きさの数値を8の倍数でそろえるための仕組みです。
役割が違うので、両方を組み合わせて使うことがよくあります。
たとえば、メインを8カラム分・サイドバーを4カラム分という大枠を12カラムで決め、カードの中の画像と文字のすき間は16px、ボタンの高さは48pxのように、細かな数値を8の倍数で決めるという使い分けです(上の計算例のガター24pxも8の倍数です)。