アイコングリッドテンプレート作成｜配置ガイド付き透過PNGを書き出すグリッド設計ツール

列数・行数・マスのサイズ・パディング・ガター（隙間）をピクセル単位で指定すると、配置ガイド線付きの透過PNGテンプレートをその場で書き出せます。アイコンシートやスプライト、UIキットの下書きグリッドを、外部ソフトを開かずに整えられます。

💡 このツールについて

複数のアイコンを等間隔に並べたいとき、「1辺64px、隙間8px、外周16px」のような数値を頭の中で足し算しながらキャンバスサイズを決めるのは地味に手間です。1マスでもずれると全体の整列が崩れ、書き出し後に気づいて作り直すこともよくあります。

このツールは、列数・行数・マスのサイズ・パディング・ガターを入力するだけで、全体の幅と高さ、アイコンの総数を自動で計算します。プレビューには各マスの枠線、外周パディング、マス間のガター、中心線が重なって表示されるため、書き出す前に「どこに何が入るか」を目で確かめられます。書き出しは透過PNGなので、デザインツールに読み込んで背景レイヤーの上に重ね、各マスの中心に実際のアイコンを置いていく下地として使えます。ガイド線の表示をオン・オフで切り替えると、その状態のまま書き出されるので、ガイド入りの作業用と枠線のみの仕上げ用を1つのボタンで使い分けられます。

🧐 よくある質問

書き出されるPNGの背景は透明ですか？ はい。書き出しPNGの背景は透過です。プレビュー内の市松模様は透明部分を見やすくするための表示で、画像には含まれません。

ガターとパディングの違いは何ですか？ パディングはグリッド全体の外周に確保する余白、ガターは隣り合うマスとマスの間に空ける隙間です。両方を0にすると、アイコンが隙間なく密着した状態になります。

書き出すPNGにガイド線を入れるかどうかはどう決めますか？ 「ガイド線を表示」のオン・オフで切り替えます。オンのときは中心線やパディング線が入るので位置合わせの下書き向き、オフのときは各マスの枠だけが残るので仕上げに近いテンプレートになります。プレビューと書き出しPNGの両方にこの切り替えが反映されるため、ダウンロードボタンは1つだけです。

出力サイズはどう決まりますか？ 幅は「パディング×2＋マスのサイズ×列数＋ガター×(列数−1)」で計算されます。高さも同じ考え方で行数から求められ、入力を変えるたびにプレビュー上の出力サイズ表示が更新されます。

アイコン画像そのものを並べられますか？ このツールが作るのは配置の下地となる空のグリッドテンプレートです。各マスには枠線だけが描かれ、実際のアイコン画像はデザインツール側で各マスに重ねて配置します。

📚 グリッドとガターの基礎知識

等間隔に要素を並べる「グリッドシステム」は、印刷物のレイアウト設計から受け継がれた考え方です。マスとマスの間に空ける隙間を「ガター」と呼ぶのもその名残で、もとは製本時にページの綴じ側に確保する余白を指す言葉でした。アイコンやUIパーツのスプライトシートでは、隣のアイコンの輪郭が滲み込むのを防ぐために、あえてガターを取って各マスを独立させる手法が一般的です。外周パディングと合わせて余白を整えておくと、後から1マス追加するときも全体の比率が崩れにくくなります。