SVG ブロブ生成ツール

SVG ブロブ生成ツールとは？

SVG ブロブ生成ツールは、背景・ヒーローセクション・アバター・装飾アクセントなどに使う柔らかく有機的なブロブ形状を手描きせずに作りたいデザイナーやフロントエンド開発者向けの無料のブラウザ内ツールです。操作する値は 2 つ——複雑さ（形状まわりのアンカー点の数）とコントラスト（各点が完全な円からどれだけずれるか）です。状態に保持されたシードを「再生成」ボタンで増やすことで、複雑さとコントラストを固定したまま無限のバリエーションを循環できます。出力は 1 本の滑らかな閉じたベジェパスとして描画されるので、きれいな SVG コードをコピーしたり、任意の要素をマスクする CSS clip-path() ルールを取得したり、すぐ使える .svg ファイルをダウンロードしたりできます。ブランドに合った装飾を素早く作るのにも、円周上の点からブロブのパスがどう作られるかを学ぶのにも役立ちます。

SVG ブロブ生成ツールの使い方

1. 「設定」を開き、形状の複雑さ（点の数、3〜16）を設定します。
2. コントラスト（0〜100）を設定し、縁の不規則さ・うねり具合を調整します。
3. カラーチップまたは HEX 値の入力で塗りつぶし色を選びます。
4. 「再生成」をクリックして次のシードから新しいランダムなバリエーションを出し、気に入る形になるまで繰り返します。
5. SVG コードまたは CSS clip-path ルールをコピーするか、「ダウンロード」で .svg ファイルを保存します。

使用例

よくある質問

複雑さとコントラストは何を制御しますか？

複雑さは円周上に均等に配置されるアンカー点の数（3〜16）で、点が多いほど輪郭が細かくなります。コントラストは各点が基準半径から内外にランダムに押し出される量（0〜100）で、0 はほぼ普通の円、100 は非常に不規則になります。

「再生成」ボタンはどう動きますか？

各ブロブは数値のシードに複雑さとコントラストを加えて構築されます。再生成はシードを 1 増やして形状を計算し直すため、複雑さ・コントラスト・色はそのままに、クリックのたびに新しいランダムなバリエーションが得られます。

SVG 出力と clip-path 出力の違いは？

SVG 出力は埋め込みやダウンロードができる完結した独立の <svg> ファイルです。clip-path 出力は path() を使った 1 つの CSS ルールで、任意の HTML 要素に適用して同じブロブの輪郭に切り抜けます。

色を変えてファイルをダウンロードできますか？

はい。カラーチップまたは HEX 値で塗りつぶし色を設定すると、プレビュー・SVG・ダウンロードすべてに反映されます。「ダウンロード」をクリックすると、完全にブラウザ内で生成された blob.svg ファイルを保存できます。

形状や設定はサーバーに送信されますか？

いいえ。ブロブはローカルのシード付き乱数関数で生成され、SVG と clip-path の文字列はすべてブラウザ内で構築されます。何もアップロードされないため、オフラインでも動作し、作業内容のプライバシーが保たれます。