グリッドシステム (Grid System)

概要

スイス・タイポグラフィ（インターナショナル・タイポグラフィック・スタイル）にルーツを持つ、レイアウト設計のための構造的枠組み。印刷物のデザインで体系化され、その後WebやUIデザインへと応用された。

画面を規則的な格子状（グリッド）に分割し、その線に合わせて画像やテキストを配置することで、視覚的な秩序と統一感を生み出す。 Webデザインでは、通常「カラム（列）」、「ガター（溝）」、「マージン（余白）」の3要素で構成される。

認知負荷の軽減: 情報が整理整頓されているため、視線の移動が予測しやすくなり、情報探索の負荷を下げることができる。
一貫性の担保: ページを跨いでも同じルールで配置されるため、ユーザーはレイアウトパターンを学習しやすく、迷いにくくなる。
レスポンシブ対応: 画面幅に応じてカラム数を変える（例：PCでは12カラム、タブレットでは8カラム、スマートフォンでは4カラムに再構成するなど、デバイス幅に応じて再配置する）ことで、デバイスを問わず最適な情報密度を提供できる。

ほぼ全てのWebデザインやUIデザインにおいて。特にレスポンシブデザインでは、画面幅に応じたレイアウト変更の基準として必須となる。

グリッドは「ルール」だが、絶対ではない。意図的にグリッドを崩す（ブロークングリッド）ことで、躍動感や注目を生む手法もある。ただし、基本を知った上で崩す必要がある。