グリッドとカラムで整える

グリッドシステムとは

グリッドシステムとは、デザインの要素を配置するための格子状のガイド（補助線）です。
印刷物・Web・UIデザインすべてで使われており、
「プロのデザインがなぜ整って見えるか」の主要因のひとつです。

グリッドを使うと何が変わるか

グリッドなしで配置すると「だいたい揃っているけどどこかバラバラ」な仕上がりになります。
感覚的に揃えたものとグリッドで揃えたものの差は、
拡大表示したときに明確になります。グリッドに揃っていると、
どのサイズで見ても整った印象が保たれます。

なぜグリッドが「安定感・信頼感」を生むのか。
人間の脳は規則的なパターンを認識すると無意識に安心します（秩序は安全のシグナルです）。
グリッドによる整然とした配置は「このデザインには一貫した設計がある」というサインを視覚的に伝え、
見る人に信頼感を与えます。逆に、微妙に揃っていない状態は「何かが変」という違和感を生み、
内容への集中を妨げます。

また修正・変更の速度も上がります。グリッドを基準にしていると「この要素をグリッド2つ分ずらす」という判断ができます。
感覚だけで作ったデザインは修正のたびに全体のバランスを取り直す必要があります。

12カラムグリッドが基本

12は2・3・4・6で割り切れるため、多様なレイアウトに対応できます。
フルワイド（カラム12）、2分割（6+6）、
サイドバー付き（9+3）、3分割（4+4+4）、
4分割（3+3+3+3）など、あらゆる構成に対応できるのが12カラムが標準として使われている理由です。

ガターとマージン

ガター（Gutter）はカラムとカラムの間の空間で、通常16〜24pxです。
ガターが統一されているとグリッドの「揃っている感」が生まれます。

マージン（Margin）はページの左右・上下の余白で、スマホなら16px、
タブレットなら24〜32px、PCなら48〜80pxが目安です。

Canva / Figmaでの活用法

Canvaでは「表示」→「定規とグリッドを表示」でガイドを表示でき、
余白の目安として四辺に均一なガイドラインを引けます。

Figmaではフレームを選択して右パネルの「Layout Grid」から＋ボタンで追加できます。
Columns（カラム）を選択し、カラム数・ガター・マージンを数値で設定するとグリッドが表示されます。

まとめ

グリッドは感覚ではなく数値でレイアウトを整えるための仕組みです。
12カラムグリッドを基本に、ガターとマージンを統一するだけで、
デザインの完成度が大きく上がります。

NEXT STEP