グリッドシステム:デザイナーのためのガイド

グリッドシステムは、デザインの中で最も多くの仕事をこなし、最も評価されない部分です。あなたが敬意を払うプロダクトにはどれもグリッドがあり、スクロールして素通りするプロダクトにはありません。グリッドは装飾ではありません。タイポグラフィ、ヒエラルキー、リズムをひとつに束ねる契約であり、ユーザーはページを解読するのではなく、ひと目で読めるようになります。

スイス派は60年前に、印刷の世界でこれを証明しました。ミューラー=ブロックマン、ホフマン、ルダー、グリッドをレイアウトの近道ではなく思考の道具として扱った世代のデザイナーたちです。この教訓は、ほかのほとんどのデザイン理論よりもうまく年を重ねました。LinearからStripe、New York Timesまで、現代のプロダクトのグリッドはすべて同じ発想の子孫です。これは2026年のグリッドのための実務リファレンスです。

ミューラー=ブロックマンが現代のグリッドに文法を与えた

ヨゼフ・ミューラー=ブロックマンが1981年に著した『Grid Systems in Graphic Design』は、今もこの分野の背骨です。 あの本以前にもグリッドは存在しましたが、語彙がありませんでした。あの本以後、デザイナーはカラム、ガター、マージン、モジュールについて、スタジオも学校も時代も越えて通じる共通言語を手に入れました。

スイス派はグリッドを制約のエンジンとして扱いました。システムを選び、守り抜き、変化は即興ではなくコンテンツから生まれるようにする。ミューラー=ブロックマンのチューリッヒ・トーンハレのポスターが2026年のプロダクトUIのスクリーンショットに見えるのは、同じロジックで動いているからです。

固定グリッド上の力強いタイポグラフィ。余白は余ったスペースではなく構造要素。同じロジックは、2026年にSaaSがどれも同じに見える理由のような話にも現れます。均質化とは、グリッドが勝ち、そして牙を失った姿なのです。

ウェブはこの文法をゆっくり受け継ぎました。CSSはまずfloatを、次にFlexboxを、そしてついにCSS Gridを与えてくれました。段階を踏むたびに、1961年の印刷デザイナーにできたことと、ブラウザ上のフロントエンドデザイナーにできることの差は縮まりました。

語彙は変わっていません。カラムは今もカラムです。ツールがようやく追いついただけです。

グリッドが機能する理由、ひと段落で

グリッドが機能するのは、デザイナーから無数の小さな判断を取り除き、それを予測可能性としてユーザーに返すからです。目はページの最初の1秒でリズムを学び、そのリズムを頼りに以降のすべてをナビゲートします。

グリッドがなければ、レイアウトの判断はすべて初めての問題になります。見出しはどこに置くのか、画像はどこで止めるのか、本文の幅はどれくらいか、サイドバーはメインカラムとどう関係するのか。グリッドがあれば、これらの答えはあらかじめ決まっています。

デザイナーはすべてのブロックを測り直す代わりに、ヒエラルキーとコンテンツに注意を使えます。ユーザーは構造を解読する代わりに、メッセージに注意を使えます。取引はそれがすべてです。

5つのグリッドタイプを一覧で

ほとんどのチームは「グリッド」をひとつの決定として扱います。実際には5つです。それぞれ異なるレイアウト課題を解き、異なる理由で失敗します。選び間違えると、ページは永遠にあなたと戦い続けます。

この表はブックマークしておくべきものです。レイアウトをめぐる議論の大半は、チームがこの5つのどれで動いているかに合意した瞬間に終わります。

カラムグリッドは働き者の定番

カラムグリッドは、ウェブで出荷するほぼすべてのもののデフォルトです。 縦のカラム、固定のガター、任意のマージン。コンテンツはカラムに流れ込み、レイアウトブロックは1つ以上のカラムをまたぎ、リズムはキャンバスを何カラムに分割するかで決まります。

Stripeはマーケティング面全体で12カラムグリッドを走らせています。Linearのアプリシェルはカラムグリッドの上に作られていて、モバイルでは1本のレールに収まり、デスクトップではサイドバーとメインカラムに展開します。Vercelのマーケティングページは、意図的なネガティブスペースを伴う12カラムグリッドを使っていて、ダッシュボードの料金マトリクスやデプロイログのレイアウトを目を細めて見ればカラムが見えてきます。1961年にポスターを動かしたのと同じグリッドが、2026年にはマーケティングサイトを動かしています。違いは、下にメディアクエリがあることだけです。

カラムグリッドを使わなくてよいのは、レイアウトが根本的に非矩形のときだけで、ウェブではほぼありません。このグリッドの上に載るフレームワークの選択は、2026年のマーケティングサイトスタックで解説しています。

モジュラーグリッドはエディトリアルの密度のため

モジュラーグリッドは、キャンバスを縦横の両方向、つまりカラムと行でセルに分割します。 方眼紙のように見えますし、方眼紙のように振る舞います。レイアウトブロックはセルの境界にスナップし、密度は偶然ではなくデザインのレバーになります。

New York Timesのホームページは、ウェブにおける代表的なモジュラーグリッドです。見出し、写真、要約、広告がすべて、見た目の構成は多様でも一貫した幅と高さを共有するセルに収まっています。Bloomberg Terminalはモジュラーグリッドを極限まで押し進めていて、厳格なセルの規律がなければ崩壊するほどの情報密度です。Notionのギャラリービューは、より柔らかいモジュラーグリッドを採用していて、カードは固定のセル幅にスナップし、中身は内側で適応します。

モジュラーグリッドは、比較可能な小さな単位が多数あり、ひとつのシステムとして読ませたいページで使いましょう。コンテンツが1つか2つの大きなブロックなら使わないこと。カラムグリッドがより少ない儀式で同じ仕事をします。カードが2枚しかないモジュラーグリッドは、衣装を着たカラムグリッドにすぎません。

ベースライングリッドはリズムのエンジン

ベースライングリッドは、垂直リズムを制御する水平のグリッドです。 テキストの各行はベースラインの罫線上に乗り、見出しはその倍数に着地し、ページはユーザーが感じるけれど名前をつけない静かな音楽的律動で読めるようになります。

Appleのマーケティングページは厳格なベースライングリッドで動いています。どの製品ページでもいいので開いて、見出し、サブヘッド、画像、本文がどれも共通の垂直リズムを共有している様子を見てください。Mediumは長文テンプレートでベースライン整列を採用していて、4000語のエッセイでも読み心地が楽なのはそのためです。出版部門のStripe Pressは、印刷するすべてのページ、ウェブに公開するすべてのページでベースラインリズムを走らせています。

ウェブでの計算はシンプルです。基準単位を選びます。通常は8ピクセルです。本文のline-heightをその倍数に設定します。16ピクセルの本文なら1.5倍の24ピクセルが定番です。

見出しも倍数に着地させるので、48ピクセルのH1に56ピクセルのline-heightでも、同じリズムにスナップします。ページ全体がひとつの拍で鳴ります。

ヒエラルキーグリッドは読む順序のため

ヒエラルキーグリッドは、コンテンツ固有の優先度を軸に組み立てるカスタムグリッドです。 カラムと行から始めるのではなく、何を1番目、2番目、3番目に読ませるかから始めます。レイアウトは汎用テンプレートではなく、その判断にスナップします。

Appleの製品発表ページは、現実世界のヒエラルキーグリッドです。ヒーロー要素には不釣り合いなほどのスペースが与えられ、二次的なコンテンツは密なクラスターに収まり、三次的なコンテンツは終盤のより狭いカラムに置かれます。New York Timesの大型特集、つまり長尺スクロールのマルチメディア作品は、シーンごとに設計されたヒエラルキーグリッドです。Anthropicのホームページは、ひとつのステートメントが支配し、ほかのすべてがそれを支えるサイズになっているヒエラルキーグリッドで動いています。

ヒエラルキーグリッドは、最も編集上の判断を要求するグリッドタイプです。カラムやモジュラーグリッドの規律を省く言い訳として使われたとき、失敗します。ヒエラルキーグリッドは「グリッドなし」ではありません。優先順位がジオメトリを決めるグリッドです。

ヒエラルキーが間違っていれば、グリッドも間違っています。優先順位のより深い論理はビジュアルヒエラルキーのデザインにあります。

マニュスクリプトグリッドは長文のため

マニュスクリプトグリッドは1カラムです。 グリッドはそれがすべて。ページを流れ落ちる1本のテキストブロックに、考え抜かれたマージンと意図的な行長があり、目を奪い合うものは何もありません。

Stripe Pressの本は、紙の上のマニュスクリプトグリッドです。Notionのドキュメントページは、ブラウザ上のマニュスクリプトグリッドです。Substackのリーダービュー、Apple Newsroomのロングリード、1カラムモードのNew York Times Magazineの記事、どれも同じグリッドで動いています。本は5世紀にわたって長文の読み物の出し方を知っていました。ウェブが追いついたのは、4000語のエッセイの隣にサイドバーを置こうとするのをやめた瞬間です。

制約は行長、つまり1行の長さです。65〜75文字を目安にしましょう。それより広いと、目は改行で行を見失います。それより狭いと、リズムがぶつ切りになります。

もうひとつの制約はマージンです。たっぷりした左右のマージンは無駄なスペースではなく、読者の目を休ませる額縁です。それらのマージンがなぜ実際に役立つのかは、ホワイトスペースの用語集で解説しています。

12カラムシステムが現代のウェブを動かす

12カラムグリッドがデフォルトなのは、12が最も約数の多い小さな数だからです。 1、2、3、4、6、12にきれいに分割できます。マーケティングサイトやプロダクトUIが必要とするほぼすべてのレイアウトパターンを、端数に頼らずカバーできます。

Bootstrapは2011年にウェブ向けの12カラムグリッドを体系化し、その選択を謝る必要は一度もありませんでした。Tailwindのグリッドユーティリティはデフォルトで12カラムです。Material Designのレスポンシブグリッド、Carbon Designのグリッド、ShopifyのPolarisも、すべて12カラム。この選択は偶然ではなく、算数です。

多くのチームが使うか、下手に再発明している12カラムの早見表がこちらです。

• 12 全幅のヒーロー、バナー、フッター、端から端までのコンテンツ
• 8 + 4 サイドバー付きのメインコンテンツ、定番のプロダクトアプリシェル
• 6 + 6 2列のコンテンツブロック、マーケティングのフィーチャーロウ、比較セクション
• 4 + 4 + 4 3列のカード、料金プラン、3カラムのフィーチャーグリッド
• 3 + 3 + 3 + 3 4列のロゴ、チーム紹介グリッド、画像ギャラリー
• 9 + 3 細いメタカラム付きのコンテンツ、エディトリアルレイアウトで一般的
• 2 + 8 + 2 余白をたっぷり取った中央寄せコンテンツ、マーケティングの詳細ページで使用

これらのパターンを早めに固定すれば、チームはデザインレビューでレイアウトを議論しなくなります。パターンがスパンを決め、スパンが計算を決め、計算がページを出荷する。デザインシステムはいらないで続く主張は、一部には、きっちりしたグリッドがデザインシステムの主張する仕事の大半をこなす、というものです。

紙だけでなく画面上のベースラインリズム

ベースライン整列は、ブラウザが強制しないため、ウェブでは多くのチームが飛ばすグリッド理論の一部です。飛ばすと、ページはユーザーが名前をつけられない理由でガタついて感じられます。守れば、ページは完成したプロダクトに感じられます。

コツは、ピクセルではなく垂直方向の単位で考えることです。8ピクセルを基準にします。すべてのパディング、マージン、line-height、コンポーネントの高さが8の倍数になります。

16ピクセルの本文に24ピクセルのline-heightは、リズムにスナップします。48ピクセルのH1に56ピクセルのline-heightもスナップします。24ピクセルのカードパディングもスナップ。96ピクセルのセクション間隔もスナップ。ページ全体がひとつの音に調律された楽器になり、目はひっかかり一つなく動けます。

Linearはイシュー一覧でベースラインリズムを出荷しています。Notionはドキュメントリーダーで。FigmaのSlidesは、スライドのサムネイルとエディタのキャンバスの両方でリズムを保っています。リズムを守るチームは、タイポグラフィをスタイルシートの上書きではなく、システムとして扱うチームである傾向があります。

パニックにならないレスポンシブグリッド

レスポンシブグリッドとは、同じグリッドを異なる幅で動かすことです。 ブレークポイントごとに別のデザインをするのではなく、ビューポートが縮むにつれて同じ構成が賢く折りたたまれることです。

標準的なアプローチは、デスクトップで12カラム、タブレットで8カラム、モバイルで4カラムです。デスクトップの4 + 8レイアウトは、タブレットで4 + 4になり、モバイルでは1カラムになります。3 + 3 + 3 + 3の4列レイアウトは、タブレットで4 + 4(2列を2段)に、モバイルで4 + 4 + 4 + 4(4つを縦積み)になります。カラム数がきれいな分数で減るので、計算は一貫しています。

Stripeのサイトは、本番環境における教科書的なレスポンシブグリッドです。Linearのマーケティングページは、3つのブレークポイントを通ってリフローしても、窮屈に感じるレイアウトがひとつもありません。Vercelの料金マトリクスは、横並びの比較を縦積みのアコーディオンに折りたたむことでリフローします。これは多くのチームが気づかないレスポンシブのコツで、「レスポンシブ」とは時に「カラムではなくコンポーネントを変える」ことを意味します。この判断は料金ページの問題で詳しく扱っています。

間違いは、モバイルとデスクトップを無関係な2つのレイアウトとしてデザインすることです。構成が乖離し、ブランドがスマートフォンとノートPCで違って読まれ、チームは2つのプロダクトを維持する羽目になります。まずグリッドをデザインし、次にブレークポイントをそのグリッドの折りたたみとしてデザインしましょう。すべてのブレークポイントでユーザーが最初に目にするグリッドの部分は、ヒーローセクションの用語集で解説しています。

CSS Gridの時代:印刷品質のツールがついに到着した

CSS Gridは、1961年に印刷デザイナーができたことに匹敵するレイアウトプリミティブを、ブラウザが初めて手にした瞬間です。 CSS Gridの前、ウェブデザイナーにあったのはfloatとFlexboxと、たっぷりの忍耐でした。今や本物のグリッド線、名前付きエリア、gapの制御があり、ミューラー=ブロックマンがポスターを組んだようにページを組めます。

この変化が重要なのは、以前はビルド時の判断(どのフレームワークのグリッドを使うか)だったものが、ブラウザに組み込まれたレイアウトプリミティブになったからです。display: grid に grid-template-columns: repeat(12, 1fr) と gap: 24px を足せば、12カラムグリッドです。フレームワークは不要。ユーティリティクラスも不要。CSSが10年前にやるべきだったことを、ただやっているだけです。

Tailwindのグリッドユーティリティは、今やCSS Gridの上に載った薄い糖衣にすぎません。Bootstrapのグリッドは、もう存在しない問題のための互換性シムがほとんどです。CSS Gridを最大限に活かすチームは、それをFlexboxの代替ではなく、デザインツールとして扱っています。

Linearのエディタは、イシューパネルのレイアウトにCSS Gridを使っています。Figmaのウェブエディタは、キャンバスのクロームに使っています。Vercelはマーケティングサイトの大半で使っています。道具は道具箱に入っています。問題は、デザインシステムがそれを使っているのか、2026年のインフラで2018年のパターンを走らせているのかです。

学ぶ価値のある実際のプロダクトグリッド

グリッドシステムを体得する最速の方法は、それをうまく出荷しているプロダクトを調べることです。じっくり見る価値のある5つを挙げます。

Linearは、アプリシェルでは引き締まったカラムグリッド、マーケティングサイトでは12カラムグリッド、そして両方にまたがるベースラインリズムで動いています。イシュー一覧、プロジェクトビュー、ドキュメントパネルのすべてが、同じ縦横のグリッドにスナップします。現在のプロダクトUIで最もクリーンなカラムグリッドの実装です。

Vercelは、意図的なネガティブスペースを備えた12カラムグリッドで動いています。マーケティングページは呼吸し、ダッシュボードはより高密度のモジュラーグリッドで動き、ローディング状態こそがプロダクトであるで取り上げたデプロイビューは、ビルドログが支配し、ほかのすべてがそれに場所を譲るヒエラルキーグリッドで動いています。

Stripeは、マーケティング面では代表的な12カラムグリッド、ダッシュボードではモジュラーグリッドです。ダッシュボードのカードは一貫した幅にスナップし、メトリクスのブロックは高さを揃え、プロダクト全体が30以上の画面にわたってひとつの構成として読めます。そのグリッドが実装している思想は、アンチダッシュボードの解説で扱っています。

Appleは、製品ページではヒエラルキーグリッド、あらゆる場所でベースラインリズム、App StoreとNewsroomではモジュラーグリッドを出荷しています。Appleのグリッドの規律は、ウェブ上でスイス派の印刷に最も近いもので、多くのプロダクトチームはブランド印象のどれだけがグリッドだけから生まれているかを過小評価しています。

エディトリアルグリッド:NYT、Figma、Anthropic

New York Timesは、ホームページではモジュラーグリッド、大型特集ではヒエラルキーグリッド、ロングリードではマニュスクリプトグリッドで動いています。同じ媒体が、編集上のタスクに応じて意図的に3つのグリッドを切り替えています。それが教訓です。グリッドタイプはグローバル設定ではなく、面ごとのデザイン判断なのです。

Figmaは、ファイルブラウザではカラムグリッド、チームライブラリではモジュラーグリッド、キャンバス内部ではカスタムグリッドで動いています。Notionは、ドキュメントにはマニュスクリプトグリッド、データベースにはモジュラーグリッドを出荷しています。比較的新しいプロダクトのLoopsとResendは、クリーンな12カラムのマーケティンググリッドと、アプリ内のより引き締まったカラムグリッドを出荷しています。Anthropicのサイトは、各セクションをひとつのステートメントが支配するヒエラルキーグリッドで動いていて、プロダクトUIよりもエディトリアルレイアウトを手本にしています。オンボーディングなきオンボーディングの記事は、グリッドの規律が、単発のレイアウトとして扱われがちな初回体験フローにまで通用することを示しています。

グリッドを(意図的に)破るとき

グリッドを破ることが機能するのは、グリッドがはっきり見えていて、その破れが意図的な選択として読めるときだけです。 破れの背後にグリッドがなければ、破られた要素はページ上でただズレているものにすぎません。

ヒーロー画像をマージンの外まで伸ばすAppleの製品ページは、ほかのあらゆる場所できっちり守られているグリッドを破っています。エッセイの途中で写真が全幅に溢れ出すNYTの特集は、上下で規律あるモジュールを走らせているグリッドを破っています。Anthropicのホームページは、ときどき1つの引用を軸から外し、想定の2倍のサイズで置きますが、それが効くのは周囲のすべてがきっちり整っているからです。

ルールは、1つの面につき破れは1回。2回破れば、グリッドがないように読まれます。破れはページで最も記憶に残る瞬間であるべきです。その要素が破っているグリッドを指差せないなら、あなたはグリッドを破っているのではなく、構造のないレイアウトを飾っているだけです。どのグリッドにコミットするかという初期段階の判断は、ワイヤーフレームの用語集で解説しています。

設定ページの問題で扱った設定パネルの規律も、関連する教訓です。設定ページは、個々の設定がそれぞれ違って見えて別のレイアウトに値するように感じられるため、グリッドの規律が崩れやすい場所です。値しません。グリッドを守り、コンテンツはその内側で変化させましょう。

グリッドこそブランド、誰も指差さなくても

この記事で触れたどのプロダクトからも、色、書体、イメージを取り去ったとしても、グリッドは見分けがつくままでしょう。Linearのグリッドは、やはりLinearらしく感じられるはずです。Stripeのグリッドも、Stripeらしく。グリッドは、プロダクトが出荷する最も深いブランド資産です。ユーザーが意識して見ることなく感じ取るものだからです。

グリッドタイプを選び、カラム数を選び、ベースライン単位を選びましょう。それらをすべての面で1年間守り続ければ、ブランドは表面的な処理ではなく、構造から立ち上がり始めます。これがスイス派が教えた秘密のすべてであり、多くのプロダクトチームが何度も学び直していることです。仕事をするのはグリッドです。残りは装飾にすぎず、グリッドがそれを支えているかどうかで成功も失敗も決まります。

FAQ

カラムグリッドとモジュラーグリッドの違いは何ですか?

カラムグリッドは、キャンバスを縦のカラムだけに分割するので、レイアウトブロックは1つ以上のカラムをまたぎ、リズムは水平方向になります。モジュラーグリッドは、キャンバスを縦横の両方向、つまりカラムと行でセルに分割するので、ブロックはセルにスナップし、密度がデザインされた特性になります。カラムグリッドはマーケティングサイトやほとんどのアプリシェルに向いています。モジュラーグリッドは、ダッシュボード、エディトリアルレイアウト、そして多くの小さな比較可能な単位をひとつのシステムとして読ませたいあらゆるUIに向いています。

なぜ12カラムグリッドが標準なのですか?

12は最も約数の多い小さな数だからです。1、2、3、4、6、12にきれいに分割でき、端数なしで(全幅、2分割、3分割、4分割、6分割など)ほぼすべてのレイアウトパターンをカバーします。Bootstrapが2011年に体系化し、Tailwindがデフォルトとして採用し、それ以降のすべての主要なデザインシステムが同じ選択に追随しました。算数は算数だからです。

CSS Gridがある今でも、CSSフレームワークは必要ですか?

レイアウトに関しては不要です。display: grid に grid-template-columns: repeat(12, 1fr) と gap を足せば、CSS 3行で12カラムグリッドになります。BootstrapやTailwindのようなフレームワークは、コンポーネントの慣習、ユーティリティの省略記法、チーム全体の一貫性で価値を加えますが、レイアウトプリミティブそのものは今やブラウザの機能です。チームが速くなるならフレームワークを使いましょう。グリッドのために必要だと思い込んで使うのはやめましょう。

FAQ:グリッドを出荷し、破る

実際のプロダクトでベースラインリズムを保つにはどうすればいいですか?

基準単位を選びます。通常は8ピクセルです。すべてのパディング、マージン、line-height、コンポーネントの寸法をその単位の倍数にします。16ピクセルの本文に24ピクセルのline-heightです。

見出しは32、40、48、56で、line-heightは40、48、56、64。セクション間隔は96か128。規律は退屈ですが、結果は下書きではなく完成したプロダクトのように読めるページになります。

いつグリッドを破るべきですか?

1つの面につき1回、グリッドがはっきり見えていて、破れが意図的に読めるときです。破れはページで最も記憶に残る瞬間であるべきです。その要素が破っているグリッドを指差せないなら、そのページにはまだグリッドがなく、あるのはレイアウトだけです。まずグリッドを直し、破るのはその後です。

CTA

グリッドシステムを、ローンチ前の後付けではなくプロダクトの背骨としてデザインするチームをお探しなら、Brainyに依頼してください。私たちは、グリッドが仕事をし、ブランドがひと目で読み取れ、リズムがあらゆる面で保たれるプロダクトを出荷します。ミューラー=ブロックマンも認めたはずです。ユーザーも同じでしょう。どのグリッドを見ているのか、決して知ることがなくても。