複雑さ・いびつさ・回転を調整するだけで、水滴のようになめらかな輪郭のブロブシェイプを自動生成。 単色・グラデーション、塗りつぶし・アウトラインに対応し、SVG・PNGやCSSコードとして書き出せます。
形状パラメータ
プリセットから選ぶ
書き出し
PNGサイズ
※ clip-pathはpx単位で書き出されます。要素サイズを200×200px前後にするか、transform: scale()で調整してご利用ください。
カラー
カラー1
カラー2
配色プリセット
塗り方式
ADVICE
頂点数といびつさのバランスが良い状態です。シャッフルを押して気に入った形を探してみましょう。
ブロブシェイプとは？Webデザインで定番の有機的な装飾図形
ブロブ（Blob）シェイプとは、直線や均一な曲線で構成される図形とは異なり、水滴やアメーバのように不規則で有機的な輪郭を持つ図形のことです。フラットデザイン以降のWebデザインでは、ヒーローセクションの背景装飾や画像の縁取り、セクションの区切りなど、さまざまな場面で使われる定番の素材となっています。
本ツールは、「複雑さ（頂点数）」と「いびつさ（ランダムな振れ幅）」というシンプルな2つのパラメータを調整するだけで、無限に近いバリエーションのブロブシェイプをその場で生成できます。内部的には、ランダムに配置した頂点をCatmull-Romスプラインという手法でなめらかな閉曲線につなぐことで、角のない自然な曲線を実現しています。
単色・グラデーションの配色、塗りつぶし・アウトラインの切り替えにも対応しており、生成した形はSVG・PNG形式でのダウンロードのほか、CSSのclip-pathやbackground-imageとしてそのままコピーして使うこともできます。
こんなシーンで便利です
LP・ヒーローセクションの背景装飾として
ランディングページやトップページのヒーローセクションで、単調な背景に動きと柔らかさを加える装飾図形として活用できます。
プロフィール写真やアイキャッチ画像の縁取りとして
四角形や円形ではない、ブロブ形にくり抜いた写真フレームとしてCSSのclip-pathと組み合わせて利用できます。
資料・バナー・SNS投稿画像のワンポイント装飾に
プレゼン資料やSNS投稿画像の背景に、さりげないアクセントとして配置することで、無機質になりがちなデザインに柔らかい印象を加えられます。
ロゴ・アイコンのベース図形のたたき台として
有機的な形状のロゴマークやアイコンを検討する際の、ラフスケッチ代わりのベース図形としても活用できます。
使い方は簡単 4ステップ
- 「複雑さ（頂点数）」と「いびつさ」のスライダーを動かして、大まかな形の雰囲気を決めます。
- 「シャッフル」ボタンを押して、同じ設定のまま別のランダムな形を探します。気に入った形が見つかったらシード値をメモしておくといつでも再現できます。
- 「カラー」で単色・グラデーションや配色プリセットを選び、「塗り方式」で塗りつぶし・アウトラインを切り替えます。
- 完成した形を、SVG・PNGとしてダウンロードするか、CSSのclip-path・background-imageとしてコピーして利用します。
※すべての形状計算・書き出し処理はブラウザ内で完結し、外部サーバーへの送信は一切行われません。
ご利用時の注意点
- 同じシード値・複雑さ・いびつさの組み合わせであれば、常に同じ形が再現されます。デザインの一貫性を保ちたい場合はシード値を記録しておくと便利です。
- CSSのclip-path（path()形式）はピクセル単位の座標を基準にするため、要素のサイズによっては見た目が変わることがあります。要素サイズを200×200px前後にするか、transform: scale()で調整してください。
- いびつさを強くしすぎると輪郭が交差して見えることがあります。整った印象にしたい場合は30〜50%程度を目安に調整してください。
- 完全無料・安全：入力内容やダウンロードしたファイルが外部に送信されることはない、ブラウザ完結型のツールです。
ブロブシェイプを使いこなすためのポイント
デザインに取り入れる際に押さえておきたい調整のコツと活用アイデアを解説します。
結論：頂点数は「少なく」、いびつさは「控えめ」が扱いやすい
背景装飾として汎用的に使いたい場合は、頂点数5〜7・いびつさ30〜45%程度の組み合わせが、丸みがありながらも個性の出すぎない扱いやすい形になりやすい傾向があります。頂点数が多すぎたり、いびつさが強すぎたりすると、輪郭が複雑になりすぎてほかのコンテンツとぶつかって見えることがあるため注意しましょう。
グラデーションの角度で「動きのある印象」を演出する
単色よりもグラデーションを使うことで、形そのものに奥行きや動きが生まれます。ページ内の他の要素（ボタンやアイコン）と同じグラデーション角度・配色に揃えることで、デザイン全体に統一感を持たせやすくなります。
clip-pathとbackground-image、どちらを使うべきか
写真やコンテンツを図形の内側にはめ込みたい場合はclip-path、単なる背景の装飾として画像を敷きたいだけの場合はbackground-imageとしてコピーするのが適しています。用途に応じて使い分けることで、無駄なマークアップを増やさずに実装できます。
よくある失敗と対策
いびつさを最大にしたまま使い、輪郭が交差して不自然な形になる
いびつさを100%近くまで上げた状態で採用してしまい、頂点の振れ幅が大きすぎて輪郭の一部が交差し、意図しない不自然な凹みができてしまう失敗です。
💡 対策・解決策を見る▼
clip-pathを異なるサイズの要素にそのまま適用し、形が崩れる
200×200pxを基準に生成したclip-pathの座標を、実際には400×200pxなど比率の異なる要素にそのまま適用してしまい、意図した形からゆがんで表示されてしまうケースです。
💡 対策・解決策を見る▼
背景色と近い配色を選び、装飾として目立たなくなってしまう
ページの背景色とブロブのカラーが近い色味になってしまい、せっかく配置した装飾がほとんど目立たない仕上がりになってしまう失敗です。
💡 対策・解決策を見る▼
よくある質問（FAQ）
Q.ブロブ（Blob）シェイプとは何ですか
A. ブロブシェイプとは、円や四角形のような幾何学的な形ではなく、水滴やアメーバのように輪郭がなめらかに波打った有機的な曲線図形のことです。近年のWebデザインでは、ヒーローセクションの背景装飾やアイキャッチ画像の縁取りとして頻繁に使われています。
Q.「複雑さ」と「いびつさ」はそれぞれ何を調整するパラメータですか
A. 「複雑さ（頂点数）」は形を構成する基準点の数を指し、数値を上げるほど凹凸の多い複雑な輪郭になります。「いびつさ」は各頂点の半径のランダムな振れ幅を指し、数値を上げるほど不規則で個性的な形に、下げるほど円に近い滑らかな形になります。この2つを組み合わせることで、繊細な曲線から大胆な曲線まで幅広く調整できます。
Q.同じシード値からは、いつでも同じ形を再現できますか
A. はい。本ツールは表示されている「シード値」をもとに形を計算しているため、同じシード値・同じ複雑さ・同じいびつさの組み合わせであれば、何度生成しても同じ輪郭を再現できます。気に入った形のシード値をメモしておけば、後から同じ形を呼び出すことができます。
Q.生成したブロブをCSSのclip-pathとして直接使えますか
A. はい。「CSS clip-pathをコピー」ボタンを押すと、そのまま貼り付けて使える`clip-path: path('...');`形式のCSSコードをコピーできます。ただしpath()のCSS clip-pathはピクセル単位の座標を基準にするため、適用する要素のサイズを200×200px前後にするか、transform: scale()で表示倍率を調整してご利用ください。
Q.アウトライン（線のみ）のブロブも作成できますか
A. はい。「塗り方式」を「アウトラインのみ」に切り替えることで、内部を塗りつぶさない輪郭線だけのブロブを作成できます。線の太さも自由に調整できるため、囲み枠やアクセントラインとしても活用できます。
Q.入力した内容やダウンロードしたファイルが外部に送信されることはありますか
A. ありません。本ツールは形状の計算からSVG・PNGの書き出しまで、すべての処理をブラウザ内だけで実行する完全ローカル処理型です。操作内容が外部サーバーに送信・保存されることはありません。
あなたの声で、
このツールをより鋭く。
「こんな機能が欲しい」「ここを直してほしい」といったご意見や、新しいツールのリクエストを募集しています。エンジニアが直接目を通し、開発の参考にさせていただきます。