ヘルプ

グリッド作成ツール（透過PNG・SVG・CSS）

このグリッド作成ツールは、指定したピクセルサイズの透明な背景に、等間隔の線を描きます。列数・行数・線の太さと色を決めて、グリッドをPNGまたはSVGでダウンロードするか、CSSの背景としてコピーできます。作品やレイアウト、スクリーンショットの上に重ねるガイド用のレイヤーとして使えます。処理はブラウザ内で行われ、ファイルはアップロードされません。

グリッド作成の手順

グリッドはページ上でそのまま描かれます。手順は4つです。

  1. キャンバスの幅 (px)とキャンバスの高さ (px)を入力します。どちらも10〜5000で、初期値は1920×1080です。
  2. 列数（1〜200、初期値12）と行数（1〜200、初期値6）を設定します。
  3. 線の太さ (px)を1〜50で設定し、線の色を選びます。初期値は赤の#FF0000です。
  4. プレビューを確認して、PNGをダウンロード、SVGをダウンロード、CSSをコピーのいずれかを押してください。

適用ボタンはありません。入力するたびにプレビューが描き直されます。背景の市松模様は、ファイルのどの部分が透明かを示すためのもので、ダウンロードには含まれません。

セルのサイズはキャンバスと列数・行数で決まります

キャンバスは均等に分割されます。1マスの幅はキャンバスの幅を列数で割った値、高さはキャンバスの高さを行数で割った値です。プレビューの下の「1マスのサイズは … × … px です」で、値を変えるたびに結果を確認できます。正方形のマスにしたいときは、縦横で同じサイズになる数値を選んでください。1920×1080のキャンバスを16列・9行にすると、120×120 pxのマスになります。

線は内側の各分割位置の中心に引かれます。キャンバスが割り切れない場合、線が2つのピクセルの間にかかり、PNGで少しぼやけて見えることがあります。くっきりした線にするには、幅を列数の倍数、高さを行数の倍数にしてください。

グリッド画像作成でよく使うサイズ

よく使われるサイズは次のとおりです（幅×高さ、列数×行数、マスのサイズ）。

線の太さ・線の色・詳細オプション

線の太さはキャンバスのピクセル単位の線幅です。大きなキャンバスで画像を縮小して使う場合、細い線は見えなくなるので、大きめの値にしてください。線の色の欄はブラウザの色選択を開き、横に16進数の値を表示します。下地とコントラストの出る色を選びましょう。暗い作品には白、明るい作品には暗い色が向いています。

詳細オプションには3つのチェックボックスがあります。通常のグリッドは内側の分割位置にだけ線があり、ファイルの端は空いています。

グリッドSVGの保存とグリッドCSS背景のコピー

PNGをダウンロードすると、キャンバスと同じサイズの透明な画像がグリッド-1920x1080.pngのような名前で保存されます。SVGをダウンロードすると、同じグリッドが背景なしのベクター線としてグリッド-1920x1080.svgのような名前で保存されます。CSSをコピーすると、background-image: url("data:image/svg+xml,...")の行とbackground-sizeの行がクリップボードに入るので、画像ファイルを別に用意せずにページの上へグリッドを重ねられます。

背景は初期設定では繰り返されます。タイル状に並べる場合、通常のグリッドは外側の端に線がない点に注意してください。外枠をオンにすると、つなぎ目で2本の枠線が重なり、設定した値のおよそ2倍の太さに見えます。

写真に重ねるグリッドや、CSSレイアウトのコードが必要なとき

すでにある画像の上にグリッド線を描き込みたい場合は、グリッド画像生成ツールを使ってください。写真に重ねるグリッドオーバーレイではなく、ページのレイアウトを組んでgrid-template-areasのコードがほしいときは、CSS Grid ジェネレーターが向いています。このツールは、透明で何も描かれていないグリッドのファイルそのものを作るためのものです。

よくある質問

透過PNGのグリッドはどうやって作りますか？

「キャンバスの幅 (px)」と「キャンバスの高さ (px)」を入力し、「列数」と「行数」を設定して「線の色」を選び、「PNGをダウンロード」を押します。ファイルの背景は透明です。プレビューの市松模様は、それを示すためだけのものです。ファイルは、ご自身のサイズが入った「グリッド-1920x1080.png」のような名前で保存されます。

3×3のグリッドはどう作りますか？

「列数」を3、「行数」を3にします。縦線と横線が2本ずつ引かれ、キャンバスが9つの同じ大きさのマスに分かれます。端にも枠がほしいときは、「詳細オプション」の「外枠」をオンにしてから「PNGをダウンロード」を押してください。

9:16のグリッドPNGは何pxにすればよいですか？

全画面の縦長画像なら、「キャンバスの幅 (px)」を1080、「キャンバスの高さ (px)」を1920にします。2160×3840は同じ9:16の形で、細かさが2倍です。どちらも上限の5000 pxに収まります。プレビューの下の表示で、1マスのサイズを確認できます。

白いグリッドのオーバーレイPNGはどう作りますか？

「線の色」で白の#FFFFFFを選びます。白い線はプレビューの市松模様の上では見えにくいことがありますが、ダウンロードしたPNGでは透明な背景の上に保たれているので、写真や暗いレイアウトの上に置くとはっきり見えます。

SVGのグリッドも作れますか？

はい。「SVGをダウンロード」を押すと、同じグリッドがベクターファイル（例：グリッド-1920x1080.svg）として保存されます。線は選んだ色のストロークで、背景の塗りはありません。どれだけ拡大しても鮮明で、ブラウザやベクター編集ソフトで開けます。

グリッドをCSSの背景として使うには？

「CSSをコピー」を押して、結果をスタイルの記述に貼り付けます。グリッドをインラインSVGにしたbackground-imageと、キャンバスと同じサイズのbackground-sizeが入ります。background-sizeを変えると拡大縮小でき、小さなキャンバスにして背景を繰り返すこともできます。「外枠」がオフのときは、タイルの端に線がありません。

IllustratorやFigmaでグリッドを追加するには？

どちらにも独自のグリッドとガイドがあります。正確なサイズのファイルとしてグリッドがほしいときに、このツールを使ってください。Illustratorでは、SVGを開くと線がベクターのまま使えます。PNGは透明なレイヤーとして作品の上に置けます。Figmaでは、どちらのファイルもフレームに追加できます。

iPhoneやiPadでPNGが小さくなるのはなぜですか？

iPhoneとiPadのSafariは、約1600万ピクセルを超えると空白の画像を返します。そのためPNGは収まるサイズに縮小され、保存したサイズが表示されます。SVGは指定した元のサイズのまま保存されるので、正確な寸法が必要なときはSVGを使ってください。

おすすめ

無料でツールを続ける支えになります。✨

画像はイメージです。 Amazonのアソシエイトとして、Capsule Toolsは適格販売により収入を得ています。

関連ツール

コードフォーマッター

JS、JSON、HTML、CSS、Pythonコードを整形

CSS自動ベンダープレフィックス付与

CSSを貼り付けてベンダープレフィックスを自動付与。無料。

CSSミニファイア

CSSをオンラインで圧縮。コメントと空白を削除。無料。

日時文字列ジェネレーター

現在時刻をSQL・ISO 8601・UNIX時間でコピー

CSSボタンジェネレーター

ボタンをデザインしHTML/CSS/Tailwindコードをコピー