--- title: "SVGブロブジェネレーター - ブロブ形状のSVGを作成" description: 有機的なブロブ形状のSVGを生成できるツールです。色、滑らかさ、頂点数を調整し、背景や装飾用のSVG素材を作成したいときに便利です。 canonical_url: "https://web-toolbox.dev/tools/svg-blob-generator" meta: author: K "og:description": 有機的なブロブ形状のSVGを生成できるツールです。色、滑らかさ、頂点数を調整し、背景や装飾用のSVG素材を作成したいときに便利です。 "og:image": "https://web-toolbox.dev/og/ja/tools/svg-blob-generator-114e93ee.png" "og:image:alt": SVGブロブジェネレーター "og:image:height": "630" "og:image:width": "1200" "og:title": "SVGブロブジェネレーター - ブロブ形状のSVGを作成" --- > Index of every page on this site: [llms.txt](https://web-toolbox.dev/llms.txt) # **SVGブロブジェネレーター** 有機的なブロブ形状のSVGを生成 ## **Blob設定** **fillカラー** 滑らかさ 値が大きいほど丸く滑らかな形になります（ランダム性が小さくなります） エッジ数 ## **プレビュー** ## 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 です。 ```html ``` HTML に直接埋め込むことも、SVG ファイルとして保存して使うこともできます。 ## 活用シーン - ヒーローエリアやカード背景の装飾 - Web サイトやアプリのアクセント図形 - ロゴやキービジュアルの下敷き - SNS 画像やスライド用の有機的な装飾 ## 使うときの注意点 - シャッフルすると同じ設定でも別の形になります - 出力は単色のパス 1 つで構成されるシンプルな SVG です - グラデーションや複数レイヤーが必要な場合は、出力後に手作業で調整する必要があります **使ってみてどうでしたか？** 最終更新: 2025年11月21日 ### **関連ツール** - [

**ダミー画像ジェネレーター**

](https://web-toolbox.dev/tools/dummy-image-generator) - [

**角丸画像ジェネレーター**

](https://web-toolbox.dev/tools/rounded-corner-image-generator) - [

**画像Base64デコード**

](https://web-toolbox.dev/tools/base64-decode-image) - [

**画像リサイズ**

](https://web-toolbox.dev/tools/image-resizer) - [

**JPG変換**

](https://web-toolbox.dev/tools/jpg-converter) - [

**ピクセルアート変換**

](https://web-toolbox.dev/tools/pixelart-converter) - [

**PNG変換**

](https://web-toolbox.dev/tools/png-converter) - [

**QRコードジェネレーター**

](https://web-toolbox.dev/tools/qrcode-generator) ```json {"@context":"https://schema.org","@graph":[{"@id":"https://web-toolbox.dev/#website","@type":"WebSite","description":"アカウント登録不要で使える無料Web開発ツール80種類以上。JSON整形、Base64変換、カラーコード変換、QRコード生成などをブラウザ上で瞬時に実行。開発者の作業効率を大幅に向上させます。","inLanguage":"ja-JP","name":"Web ToolBox","url":"https://web-toolbox.dev/","workTranslation":{"@id":"https://web-toolbox.dev/en#website"}},{"@id":"https://web-toolbox.dev/tools/svg-blob-generator#webpage","@type":"WebPage","description":"有機的なブロブ形状のSVGを生成できるツールです。色、滑らかさ、頂点数を調整し、背景や装飾用のSVG素材を作成したいときに便利です。","name":"SVGブロブジェネレーター - ブロブ形状のSVGを作成","url":"https://web-toolbox.dev/tools/svg-blob-generator","isPartOf":{"@id":"https://web-toolbox.dev/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://web-toolbox.dev/tools/svg-blob-generator"]}]},{"@id":"https://web-toolbox.dev/tools/svg-blob-generator#/schema/web-application/1","@type":"WebApplication","applicationCategory":"UtilityApplication","description":"有機的なブロブ形状のSVGを生成できるツールです。色、滑らかさ、頂点数を調整し、背景や装飾用のSVG素材を作成したいときに便利です。","name":"SVGブロブジェネレーター - ブロブ形状のSVGを作成","operatingSystem":"Windows, macOS, Linux, Android, iOS"}]} ``` ## Sitemap See the full [sitemap](https://web-toolbox.dev/sitemap.md) for all pages.