余白計算・グリッドメーカー

デザインレイアウトの余白・カラム・グリッドを自動計算できるツール。
印刷・Webデザインのレイアウト設計を、数値入力だけで直感的に作成できます。

基本設定

外側余白

カラム設定

カラム:青色 / コンテンツ幅:黄色 / 外側余白:白色
免責事項
本ツールはレイアウト設計の参考情報として提供しています。実際の制作や印刷の際は、利用する印刷会社や制作環境の仕様・ガイドラインをご確認ください。

このツールでできること

余白計算・グリッドメーカーは、デザインレイアウトの余白設計やグリッドシステムを自動で計算できる無料ブラウザツールです。ページサイズ・余白・カラム数・行数などの数値を入力するだけで、レイアウト構造を瞬時に算出し、視覚的なグリッドとして確認できます。

印刷物の誌面設計、Webサイトのレイアウト設計、UIデザインのグリッド作成など、デザイン制作に欠かせない「余白と構造の設計」を効率的に行うことができます。A判・B判・名刺サイズなどの印刷規格や、Webの標準サイズにも対応しており、px と mm の単位切り替えも可能です。
数値を変更するとプレビューがリアルタイムで更新されるため、余白バランスやカラム構成を直感的に調整できます。作成したグリッドは画像として保存することもでき、デザインガイドや制作資料としてそのまま活用できます。

使い方

1. サイズの設定
ページサイズを入力するか、A3〜A6、B3〜B6、名刺サイズ、Webサイズなどのプリセットから選択します。

2. 単位の選択
px または mm を選択して、制作環境に合わせた単位で設計できます。

3. グリッドの設定
カラム数(列)と行数を入力し、レイアウト構造を設定します。

4. 余白の調整
上下・左右の余白を個別または連動して設定できます。コンテンツ有効幅も自動計算されます。

5. プレビュー確認
入力した数値に応じてグリッドがリアルタイムに更新され、レイアウト構造を視覚的に確認できます。

6. データ出力
作成したグリッドガイドをPNG画像として保存したり、計算結果の数値をテキストとしてコピーできます。

こんな人におすすめ

・誌面レイアウトを設計するグラフィックデザイナー
・Webデザインのグリッド設計を行うUI / UXデザイナー
・ポスターやパンフレットのレイアウトを作るクリエイター
・余白設計やグリッドシステムを効率よく計算したいデザイナー