Softonic

SVGグリッドジェネレーター

ステップ 1 / 3
次へ

グリッド背景は、デザインツール（Figma、Framer）、開発者向けのランディングページ（Linear、Vercel）、設計図や方眼紙の雰囲気を狙うあらゆるインターフェースの定番です。同時に、出荷できる中で最も軽い背景の1つでもあります。2本の線を持つ繰り返しの<pattern>で、たいてい300バイト未満です。このジェネレーターは、任意のセルサイズ、線の太さ、色でグリッドを作るので、控えめなFigma風グリッドにも、大胆な設計図風にも調整できます。

グリッドを作る方法

  1. 1

    キャンバスの寸法を設定

    幅と高さは50〜3,000 pxで設定します。セルサイズの倍数にすると、端に中途半端なセルが出にくくなります。

  2. 2

    セルサイズを選ぶ

    5〜500 pxで選びます。控えめな背景には20〜40 px、方眼紙には8〜12 px、強いワイヤーフレームには60〜80 pxが目安です。

  3. 3

    線幅と色を選ぶ

    0.5〜1 pxの線はきれいな線に見えます。2 px以上は描き込んだように見え始めます。

  4. 4

    背景を設定

    SVGが出力する単色の背景色を選びます。重ねて使う場合は、SVGをコピーして自分のコード内で背景の`<rect>`を変更または削除します。

  5. 5

    SVGをコピー

    マークアップに貼るか、CSSのデータURLにインラインで入れて、タイル可能なbackground-imageにします。

pattern要素

各セルは右端と下端を描く1本の<path>です。このタイルを繰り返すと、セルあたり4本ではなく2本の線分だけでグリッド全体を組み上げます。

<defs>
  <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
    <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#cccccc" stroke-width="1"/>
  </pattern>
</defs>
<rect width="100%" height="100%" fill="#ffffff"/>
<rect width="100%" height="100%" fill="url(#grid)"/>

肝はパスM 40 0 L 0 0 0 40です。(40, 0)から始まり、(0, 0)へ、さらに(0, 40)へ。これは上の線を左上の角までだけ描き、その後左側を下ります。タイル化すると、重複した線なしで完全なグリッドができます。

パターンのサイズ指針

用途 セルサイズ 線 色の印象
Figma風キャンバス 20-30 px 1 px #e5e7eb / #fafafa
方眼紙 10-12 px 0.5 px #cbd5e1 / #ffffff
設計図 40-60 px 1 px #bfdbfe / #1e3a8a
ワイヤーフレーム 80 px 1.5 px #9ca3af / #ffffff
レトロターミナル 16 px 1 px #22c55e / #000000

主グリッド＋副グリッド

細かいグリッドと、Nセルごとの強い主グリッドという設計図風にしたいなら、2つのSVG背景を重ねます。

.grid {
  background:
    url("data:image/svg+xml,<svg>... major grid ...</svg>"),
    url("data:image/svg+xml,<svg>... minor grid ...</svg>");
}

ブラウザは両方を1回の描画で合成します。パフォーマンスの低下はありません。

アクセシビリティ

グリッドは純粋に装飾です。擬似要素（::beforeにposition: absolute; inset: 0; z-index: -1;）に当てて、スクリーンリーダーやコンテンツパーサーが背景ではなく実際のコンテンツだけを見るようにします。

よくある質問

サブピクセル幅でレンダリングされたSVGの線はアンチエイリアスがかかります。線幅を整数ピクセル（1、2）にそろえ、（1 pxの線では）パスを0.5 pxずらしてピクセルグリッドに合わせます。

このジェネレーターではできません。六角形グリッドには、縦の√3倍の幅を持つタイルと、六角形の半分を描くパスが必要です。専用の六角形グリッドツールを使うか、Figmaで描いてください。

このエディターは単色背景を出力します。重ねて使うにはSVGをコピーし、自分のコード内で最初の背景<rect>をfill="transparent"に変更するか削除してください。

はい。SVGのグリッドは200〜500バイトで、あらゆるDPRにくっきり拡大し、CSS変数で色を変えられます。PNGのグリッドはたいてい5〜20 KBで、Retinaディスプレイでピクセルが目立ちます。

エディターはSVGを描画するため、現在の寸法と色をサーバーへ送信します。3ステップの流れでは、それらの設定がページURLにも入ります。機密値は入力しないでください。元ファイルのアップロードや保存済みプロジェクトはありません。

関連ツール

マテリアルデザイン カラーピッカー

Material Designのカラーパレットを閲覧できます。任意の色調（50からA700）を1タップでHEX、RGB、HSL形式でコピーできます。

方眼紙ジェネレーター

印刷できる方眼紙をオンラインで作成：方眼またはドット罫を選び、間隔をmmで設定し、A4かLetterと好きな線の色を指定して、印刷または鮮明なSVGでダウンロードできます。

旗作成ツール

6種類のレイアウト、色、文字、シンボルで、シンプルな3:2のカスタム旗をブラウザ内でデザインします。SVGまたはPNGをダウンロードするか、ブラウザの印刷ダイアログを開けます。

画像アップスケーラー

AI超解像または従来の補間処理で、低解像度画像を2×、3×、4×に拡大しながら重要なディテールを保ちます。

罫線入り用紙ジェネレーター

印刷できる罫線入り用紙を無料で作成。カレッジ罫、広め罫、狭め罫を選び、行間をmmで設定し、用紙サイズとマージン線を決めて、印刷またはSVGでダウンロードできます。

画像ピクセルレーター

調整可能なブロックサイズで画像全体または選択した領域をピクセル化し、顔、ナンバープレート、またはレトロな8ビットアートの遮蔽に使用できます。

このツールは他の言語でも利用できます