Softonic

SVGドットパターン生成

ステップ 1 / 3
次へ

ドットパターンは、現代のウェブ背景において最も実用的でベーシックな要素です。Notionページの背景にある繊細な点状グリッド、ヒーローセクションのポルカドット、カード上の粒状のテクスチャなどがその代表例です。このジェネレータはインラインの<pattern>定義を用いて単一のSVGファイルを生成するため、ファイルサイズが非常に小さく（通常500バイト未満）、あらゆるサイズで見事に配置可能です。キャンバスの形状、点間の間隔、半径、ドットの色および背景を自由に設定できます。

ドットパターンの作成方法

  1. 1

    キャンバスを設定します

    幅と高さ（ピクセル単位）。CSS背景の場合、この値は小さく設定しても（例：800×600）タイリングすることが可能です。

  2. 2

    間隔を選択します

    隣接する点の中心間の距離。20～40pxではクリアに見え、10pxではノイズが発生します。

  3. 3

    ドットの半径を設定します

    1～3pxで微妙なテクスチャを、4～8pxで意図的にポルカドットを表現します。

  4. 4

    色を選択してください

    ドット塗り（前景）とキャンバス背景。完全なオーバーレイパターンにするには、背景を`transparent`に設定してください。

  5. 5

    SVGをコピーします

    HTMLに貼り付けるか、CSSで`background-image: url("data:image/svg+xml,...")`として使用してください。

パターンの定義方法

ジェネレータは<defs>内に<pattern>要素を出力し、フルキャンバスサイズの<rect>領域にfill="url(#dots)"を配置します。

<defs>
  <pattern id="dots" width="30" height="30" patternUnits="userSpaceOnUse">
    <circle cx="15" cy="15" r="2" fill="#6366f1" />
  </pattern>
</defs>
<rect width="100%" height="100%" fill="#ffffff" />
<rect width="100%" height="100%" fill="url(#dots)" />

patternUnits="userSpaceOnUse"はタイルサイズをピクセル単位で固定しているため、親SVGをスケーリングしてもドットが歪むことはありません。

パターンチューニングのチートシート

見た目 間隔 半径 コントラスト
ささやき（ほとんど見えない） 30–40 1–1.5 不透明度5–10％
控えめな背景 25-30 2 不透明度15-20％
はっきりしたドットパターン 20 2～3 全色
意図的なドット柄 40～60 8～15 全色
ハーフトーン効果 10 1 グラデーション塗りつぶし

CSSの背景として使用する

SVGをデータURLとしてエンコードし、任意の要素に適用します：

.bg-dots {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' ...");
  background-repeat: repeat;
}

SVGをCSSでタイリングする方法は、PNGファイルを送信するよりも高速です。ブラウザが最終表示サイズでラスタ化を行うため、すべてのDPR（1倍、2倍、3倍の表示）において鮮明な画像品質が保たれます。

ポイントが可読性を損なう場合

本文の直後にあるドットパターンは、細かいテキストに対してきらめくモアレ効果を生じさせます。上部にテキストを配置する必要がある場合は、以下のいずれかを選択してください：

  • 間隔を40px以上に広げると、ドットが行の間に配置されます。または
  • パターンの不透明度を10％未満に下げる、または
  • パターンの上にテキストを実線カード内に入力します。

よくある質問

背景色をtransparentに設定すると、塗りつぶされるのはドットのみとなります。SVGファイルを表示したい色または画像の上に配置してください。

このジェネレータではできません。方形のグリッドが生成されるためです。六角形のレイアウトには、幅のsqrt(3)倍の高さを持つパターンタイルが必要であり、各タイルには半分ずつ離れた位置に2つの円を配置する必要があります。SVGパスビルダーや専用の六角形ジェネレータをご利用ください。

SVG自体はどのサイズでも鮮明に表示されますが、パターンタイルよりも低い解像度でラスタ化するとアレアシングが発生します。表示サイズの2倍または3倍でエクスポートしてください。

円内のfill="#hex"をfill="url(#gradient-id)"に置き換え、同じ<defs>の内部に<linearGradient>の定義を追加します。これにより、各ドットはそのグラデーションでレンダリングされます。キャンバスに数千個のドットがある場合、この処理は非常に負荷が大きくなります。

通常のエディターでは、プレビューを描画するためにキャンバス、間隔、半径、色がサーバーへ送信されます。ガイド付きのフローでは、これらの設定もページ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ビットアートの遮蔽に使用できます。

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