グリッドシステム設計ツール — カラムグリッド・ベースラインプレビュアー

使い方

1. デバイスサイズを選択 — スマホ(375px)・タブレット(768px)・PC(1440px)から対象ビューポートを選択します。
2. プリセットを選択（任意） — 12カラムグリッド・8ptグリッド・黄金比などのプリセットを選んで素早く設定できます。
3. スライダーで調整 — カラム数・ガター・マージン・ベースライン間隔をドラッグして設定し、右のキャンバスにリアルタイム反映されます。
4. コードをコピー — CSS変数またはTailwind設定をボタンでコピーし、プロジェクトに貼り付けます。
5. PNG出力 — グリッドガイド画像をダウンロードし、FigmaやIllustratorのデザインファイルに重ねて使えます。

グリッドシステムとは

グリッドシステムとは、Webサイトやアプリの画面をカラム（縦の列）・ガター（カラム間の余白）・マージン（左右の外側の余白）に分割した設計ルールです。一貫したグリッドを使うことで、コンポーネントの配置が規則的になり、デザインの統一感と開発効率が向上します。

Bootstrapは12カラム・30pxガター・15pxマージンが標準です。Material Designは4dpまたは8dpグリッドを基本とし、UIコンポーネントのサイズや余白が8の倍数になるよう設計されています。本ツールはAdobe InDesignなどの有料ソフト不要で、ブラウザだけで即座にグリッドを可視化・コード化できます。

ベースライングリッドとは

ベースライングリッドは、テキストの行の下端が揃う水平方向のガイドラインです。印刷物では昔から使われており、Webデザインでもタイポグラフィの一貫性を保つために活用されます。ベースライン間隔には8px・4px・行高の倍数が一般的に使われます。