SVGブロブジェネレーターとは？

有機的なブロブ形状の SVG を生成できるツールです。色、滑らかさ、エッジ数を調整しながらプレビューを確認でき、生成した SVG コードはそのままコピーまたはダウンロードできます。

背景装飾、カードのアクセント、ロゴ案のベースなど、柔らかい形の SVG 素材を手早く作りたいときに便利です。

使い方

1. fill カラーを選びます。
2. 滑らかさ を調整します。
3. エッジ数 を調整します。
4. 必要なら シャッフル で別の形を生成します。
5. SVG コードをコピーするか、ファイルとしてダウンロードします。

設定を変えるとプレビューも更新されるため、見た目を確認しながら形を決められます。

主な設定項目

滑らかさ

値が大きいほど丸みが強くなり、ばらつきの少ない形になります。値を下げると、より不規則でラフな輪郭になります。

• 0 〜 3: 崩れた印象を出しやすい
• 4 〜 7: 背景や装飾に使いやすい標準的な範囲
• 8 〜 10: 丸く整った印象に寄せやすい

エッジ数

形を構成する頂点数です。少ないとシンプルな形、多いと複雑な輪郭になります。

• 3 〜 5: シンプルで図形寄りの形
• 6 〜 10: 有機的で扱いやすい形
• 11 〜 20: 細かなうねりが増えた形

出力イメージ

出力は viewBox="0 0 200 200" を持つシンプルな SVG です。

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <path fill="#f05672" d="..." />
</svg>

HTML に直接埋め込むことも、SVG ファイルとして保存して使うこともできます。

活用シーン

• ヒーローエリアやカード背景の装飾
• Web サイトやアプリのアクセント図形
• ロゴやキービジュアルの下敷き
• SNS 画像やスライド用の有機的な装飾

使うときの注意点

• シャッフルすると同じ設定でも別の形になります
• 出力は単色のパス 1 つで構成されるシンプルな SVG です
• グラデーションや複数レイヤーが必要な場合は、出力後に手作業で調整する必要があります