グリッド（見えない格子）を無視して要素を配置した画面は、まるで基礎工事が手抜きされた建物のようになります。 「左端の余白が微妙に違う」「カードの幅がバラバラ」「スマホで見るとレイアウトが崩壊する」といった問題が生じ、ユーザーは本能的に「このサービスは不安定で安っぽい（＝信頼できない）」と感じ取ります。 結果として、コンテンツそのものへの信頼やブランド価値が大きく損なわれます。
1. 原則の定義
画面を見えない格子（カラム・ガター・マージン）で分割し、すべての要素をそのルールに沿って配置するレイアウトシステム。
本質は「制約」による「自由」の獲得です。あらかじめ配置のルール（グリッド）を決めておくことで、デザイナーごとにレイアウトがブレるのを防ぎ、結果的に美しく一貫性のあるデザインを高速に作り出すことができます。
2. いつ使うか（適用場面）
特に重要になるケース
- ダッシュボードやカードリスト: 複数の情報ブロックを同じ画面に敷き詰める時。
- レスポンシブデザイン: PC、タブレット、スマートフォンと異なる画面幅に合わせて、レイアウトを自動的に再構成（可変）させる時。
- デザインシステム運用: 複数のデザイナーやエンジニアが同じプロジェクトに関わる時のルールとして。
トレードオフが起きる場面
- クリエイティブな表現（ブロークングリッド）: ガチガチにグリッドを守りすぎると、退屈で単調なレイアウトになることがあります。あえてグリッドを崩すことで躍動感を生む手法もありますが、基礎となるグリッドを理解せずに崩すと、ただの「散らかった画面」になります。
3. なぜ重要か（設計判断の核）
グリッドシステムは「見た目の美しさ」のためではなく、「情報の予測可能性」を高める構造である。
設計判断の基準
- 「要素の幅と位置は、グリッドのカラムに乗っているか？」→ YESならOK。要素をグリッドの中途半端な位置（溝の上など）に置かない。
- 「余白のサイズはルールの倍数になっているか？」→ 「8の倍数ルール（8pxグリッド）」を用い、適当な数値を手入力しない。
優先順位の考え方
- マージン（Margin）: 画面全体の左右の余白。ここは絶対に破らない。
- カラム（Column）: 要素を配置する列（PCなら12カラムが標準的）。
- ガター（Gutter）: カラムとカラムの間の溝。
例外条件
- ヒーローイメージ（ページトップの巨大な画像）など、あえて画面の端から端まで（フルブリード）表示させる要素。
4. 具体の設計ルール（チェックリスト）
最低ライン（Must - これ守らないと危険）
ここをクリアしていないと、製品として「使えない」「素人っぽい」レベルになります。
理想ライン（Better - できると強い/プロの品質）
UXをさらに高め、洗練された印象を与えるための基準です。
5. UI例
同じ情報量でも、グリッドに乗っているか否かで「整頓された印象（プロの仕事）」か「散らかった印象（素人の仕事）」かが明確に分かれます。
改善プロセス
- デザインツールのグリッド表示機能をオンにする（またはCSSフレームワークの
gridやcontainer設定を確認する）。 - 画面端のマージン、および要素間のガター（隙間）の数値を明確に決める（例：マージン24px、ガター16pxなど）。
- すべての要素の幅や余白を、そのグリッドルールに乗るように微調整する。適当にドラッグしてサイズを決めるのをやめる。
6. 関連リンク
- 関連リファレンス（理論）: ゲシュタルト要因 (近接・閉合)
- 用語集（定義）: グリッドシステム, UI
- 関連するUI原則（横）: 整列 (Alignment), 余白 (Whitespace)
7. まとめ
今日から直せる一手
実装されているコンポーネントの margin や padding、width の数値設定を見てください。「13px」や「27px」といった中途半端な数字を、すべて「8の倍数」に直してみてください。
チームに共有するなら一言 「要素は『置く』のではなく、『グリッドに嵌める（はめる）』んだ。」
