Grid Maker

画像にグリッド

画像に精密なグリッドを重ねる。列数か、正確なピクセル間隔か。線はすべて設定可能で、フル解像度のPNG/JPGに書き出せます。画像にグリッドを思いどおりに。

JPG・PNG・WebP100%ブラウザ内処理正確な正方形セル無料・登録不要
元画像 1920×1080 → 出力 1920×1080 · 12 × 7 セル
画像にグリッド

すべてブラウザ内で完結します。画像や設定がサーバーへ送信されることはありません。

画像にグリッドを重ねる＝精密さの問題

画像にグリッドを重ねるとき、要点は精密さです。UIモックアップには8ピクセルリズムの間隔システムに合う線が要り、スプライトシートにはタイルサイズどおりのセルが要り、スキャンや図面には既知スケールの計測格子が要ります。列数グリッドは比率に最適で、ピクセルグリッドは「この要素は本当にそこにあるか？」という問いに答えます。

このツールでは、画像にグリッドを両方の方式で重ねられます。列モードは画像を等しい列の本物の正方形に分割します（初期値はサンプルイラストに12列）。ピクセルモードは10〜500の元ピクセルごとに線を引き、グリッドがあなたのデザインシステムやタイルマップに、恣意的な比率ではなく正確に揃うようにします。情報行には、元と出力の正確な寸法とセル数が常に表示されます。グリッドを引いたものが、そのまま受け取れるものです。

線のスタイルは完全に制御できます。任意のHEX色、1〜10ピクセルの太さ、10〜100%の不透明度。画像が参照シートも兼ねるときは A1/B1 ラベルも付けられます。書き出しはブラウザ内でフル解像度。正確なピクセルにはPNG、軽い共有にはJPGです。どの時点でも何もアップロードされません。

列かピクセルか：画像にグリッドを重ねる2方式

比率が絶対サイズより重要なら列モードです。模写参照を区切る、構図を確認する、バナーを均等な区画に分ける。セルは完全な正方形になり、同じ列数を別の画像に使えば同じ構造が再現されます。

画像がシステムの中で生きているならピクセルモードです。Webとアプリのデザイナーは4/8/12pxの間隔スケールで、スプライトとタイルの作者はタイルサイズどおりに、地図や分析画像は注記できるスケールで区切ります。画像にグリッドをこの方式で重ねるのは、必要な場所にちょうど定規を印刷することです。

  • 間隔システムに対してレイアウトを検証
  • スプライトとタイルの寸法を正確に確認
  • 図面やスキャンを画像内で計測
  • 作品を均等な作業区画に分割
  • 画像にグリッドを重ねて座標参照に

線のスタイリング：画像にグリッドを重ねる線のスタイリング：実務から創作まで

技術的な確認には静かな線が合います。中立グレーかスレート、中間の不透明度、1〜2ピクセルの太さで、グリッドの下の画像が読みやすいまま。プレゼン背景、資料図版、SNSテンプレートのような創作的オーバーレイは、色と太さを強くしてもよく、HEX欄とカラーピッカーでブランド色がワンクリックです。

ラベルオプションは区切られた画像を番地付きのシートにします。セルは横に A1、B1、C1、縦に 1、2、3 と呼ばれ、複数人が同じ流れで画像にグリッドを重ねるときも、レビューのコメントと作業メモが曖昧になりません。

画像にグリッドを重ねた出力と正直な数字

ダウンロードの前に、プレビュー下の読み出しが元の寸法・最終出力サイズ・セル密度を示します。大きな画像がブラウザの安全圏（4096ピクセル、1200万画素）のために縮小される必要がある場合、通知は確定の後ではなく前に出ます。

この正直さは幾何にも及びます。線はプレビューと同じ座標から、出力サイズで再レンダリングされ、ピクセル間隔は常に元画像のピクセルを指します。ここで画像にグリッドを重ねれば、100pxのセルは100pxのセルとして届きます。プレビューでも、手元に残るファイルでも。

画像にグリッドを重ねる（4ステップ）

  1. 画像を読み込む

    最大20MBの JPG・PNG・WebP をドロップするか、サンプルイラストから開始。画像はローカルメモリで即座に開き、画像にグリッドを重ねる準備が整います。

  2. 画像にグリッドを重ねる方式を選ぶ

    比率重視なら列、システム整合ならピクセル。数か間隔を設定し、情報行の変化を見ます。

  3. スタイルして確認

    色・太さ・不透明度・ラベルを設定。書き出し前に元・出力・セル数を確認します。

  4. 画像にグリッドを重ねてフルサイズで書き出す

    元ピクセルから最大4096pxのPNGかJPGをダウンロード。ローカル、即時、透かしなし。画像にグリッドを重ねる工程は端末で完結です。

画像にグリッドをここで重ねる理由

ピクセル正確な間隔モード

元画像の10〜500ピクセルごとに線。システムの中の画像にグリッドを重ねれば、タイルも間隔も図面も設計どおりに揃います。

正直な寸法の読み出し

元・出力・セル数は書き出し前に表示。安全圏のための縮小も含めて、画像にグリッドを重ねた結果の数字が示されます。

チームのためのラベル

任意のA1/B1番地は、画像にグリッドを重ねた結果を、全員がセル単位で引用できる参照シートにします。

画像にグリッドを重ねる100%ブラウザのパイプライン

デコード・レンダリング・エンコード、すべて端末上。画像にグリッドをアップロードなしで重ねるのが最も安全な道です。

画像にグリッド FAQ

画像にグリッドを重ねる方式の違いは？

列モードは画像を完全な正方形の等分列に分割します。比率に最適。ピクセルモードは元画像のNピクセルごとに線を引きます。間隔システムやタイルに画像にグリッドを正確に合わせたいときに最適です。

正確なピクセルサイズで区切るには？

ピクセルモードに切り替え、画像ピクセルで間隔を入力します（例：32pxタイルには32）。情報行にセル数が表示されるので、書き出し前に確認できます。

書き出しが縮小されると間隔は変わる？

間隔は元画像ピクセルで定義され、書き出しに比例してスケールします。画像にグリッドを重ねた構造はプレビューとダウンロードで同一で、変わるのはファイルサイズだけです。

線に加えてラベルを付けられますか？

はい。ラベルを有効にすると各セルに線の色でA1形式の住所が付きます。セルが十分読める大きさのときから表示されます。

画像にグリッドを重ねるとき書き出し形式はどちら？

PNGは正確なピクセルを保持し、デザイン・実務の安全な標準です。JPGは完璧なエッジが不要な共有向けの軽いファイルになります。

関連するグリッドツール

同じ精密エンジンを、別の用途に調整したものです。

写真にグリッド

写真にグリッドを重ねる。初期設定は半透明の白線と本物の正方形セル。PNG/JPG書き出し、アップロードは一切なし。写真にグリッドを重ねる最短の道です。

透過グリッド

透過グリッドを本物のアルファチャンネル付きPNGで作成。キャンバス・セル・線のスタイルを指定して、何にでも重ねられるグリッドをダウンロード。

グリッド描画

参照写真を任意のマス割りで区切り、A1/B1ラベルを付けて、PNGまたは印刷対応のPDFとして書き出す。古典的なグリッド描画メソッドのデジタル版です。

グリッドメーカー

2つの機能を1つにした無料グリッドメーカー。どんな画像にも正確な正方形グリッドを重ねることも、ミリ単位で正確な方眼紙PDFを作ることも、すべてブラウザ内で行えます。

方眼紙PDF

完全コントロールの複数ページ方眼紙PDFを生成。用紙・向き・間隔・余白・線のスタイル、そして1回のダウンロードに最大10枚。