🔒ブラウザ内処理データはサーバーに一切送信されません
SVGシェイプジェネレーターは、波線（ウェーブ）とブロブ（有機的な形状）の2つのモードでSVGシェイプを生成できる無料オンラインツールです。
振幅・複雑度・レイヤー数・グラデーションなどのパラメータをスライダーで直感的に調整でき、リアルタイムでプレビューが更新されます。作成したシェイプはSVGコード、CSSバックグラウンドイメージ、インラインSVGの3形式で出力でき、SVG/PNGファイルとしてダウンロードも可能です。
すべての処理はブラウザ内で完結し、データがサーバーに送信されることはありません。登録不要でご利用いただけます。
モードを選ぶ
波線（Wave）またはブロブ（Blob）モードを選択。波線はセクション区切りに、ブロブは背景装飾やマスクに最適です。
パラメータを調整
振幅、複雑度、カラー、グラデーション、線の太さなどをスライダーやカラーピッカーで微調整。「ランダム生成」ボタンで新しいパターンを探索できます。
コードをコピーまたはダウンロード
SVG・CSS・Inline形式でコードをコピー、またはSVG/PNGファイルとしてダウンロード。そのままWebサイトに組み込めます。
- セクション区切りとしての波線
- Webサイトのセクション間（ヒーロー→コンテンツ、料金表→CTA等）に波線を配置すると、直線的な区切りよりも柔らかく自然な印象を演出できます。近年のランディングページやSaaSサイトでは、波線区切りがほぼ標準的なデザイン手法となっています。
- PNG画像 vs SVGの利点
- 従来のPNG背景画像と比較して、SVGにはファイルサイズが小さい（数KB以下）、拡大してもぼやけない（Retinaディスプレイ完全対応）、CSSで色を動的に変更可能という圧倒的な利点があります。
- レスポンシブ対応のポイント
- SVGの
viewBox 属性と preserveAspectRatio="none"
を組み合わせることで、画面幅に応じて波線が自然に伸縮します。横幅は常に100%に設定し、高さだけを固定することでレスポンシブ対応が完了します。
- ブロブの心理効果
- 丸みを帯びた有機的な形状は、「親しみやすさ」「柔らかさ」「安心感」を閲覧者に与えます。角張ったデザインが「信頼性・堅実さ」を表現するのに対し、ブロブは「カジュアル・フレンドリー」な印象を演出します。
- Webサイトでの活用シーン
- 画像の背景装飾（画像の後ろにブロブを配置）、CTAボタン周りのアクセント、ヒーロー領域の背景パターン、アバター画像のマスク（clip-path）など、多彩な使い方が可能です。
- clip-pathとしてのブロブ
- 生成したSVGのパスデータを
clip-path: url(#...)
として使用すれば、写真やセクション全体を有機的な形状でくり抜くことができます。CSSアニメーションと組み合わせてモーフィング効果も実現可能です。
- SVGの path 要素とは
- SVGの
<path> 要素は、d
属性に描画コマンドを記述することで、線・曲線・閉じた図形などあらゆる形状を表現できます。主なコマンド:
M（移動）、L（直線）、C（3次ベジェ曲線）、Z（パスを閉じる）。
- 3次ベジェ曲線（Cubic Bezier）
C コマンドは、2つの制御点と1つの終端点を指定して滑らかな曲線を描きます。当ツールでは、Catmull-Rom
スプラインを3次ベジェに変換するアルゴリズムを使用し、ランダムなポイントを滑らかに接続しています。- viewBox とレスポンシブ
viewBox はSVGの「仮想座標系」を定義します。例えば viewBox="0 0 1200 200"
なら、1200×200の仮想空間を持ちます。実際の表示サイズはCSSで制御でき、width: 100% とすれば画面幅に合わせて自動でスケーリングされます。
- インラインSVGとして埋め込む
- 「SVG」タブで出力されるコードをHTMLに直接貼り付けます。最もシンプルな方法で、CSSでの色変更やアニメーション追加も容易です。セクションの最後に配置し、
position: absolute; bottom: 0;
で下端に固定するのが一般的です。
- CSSの background-image で使用
- 「CSS」タブで出力されるコードを使えば、
background-image: url("data:image/svg+xml,...")
としてCSSだけで波線を表示できます。HTML構造を変えずにデザインを変更できる利点があります。
- SVG/PNGファイルとしてダウンロード
- ダウンロードボタンでSVGファイルまたはPNGファイル（2xレティナ対応）として保存できます。Figma / Sketch / XD / Illustrator等のデザインツールに読み込んで使用したい場合に便利です。
- デザインデータの保護
- ブランドカラーやデザインの方向性は、クライアントの知的財産に関わる情報です。外部サービスにカラー情報やデザイン意図を送信するリスクを避けるため、ブラウザ内で完結するツールが安心です。
- ネットワーク通信ゼロ
- 当ツールはすべてのSVG生成処理をブラウザ内のJavaScriptで実行しています。
createElementNS によるSVG DOM操作のみで、外部APIへの通信は一切ありません。
- オフラインでも動作
- ページを一度読み込めば、ネットワーク接続がなくてもすべての機能が利用可能です。出張先やWi-Fiが不安定な環境でも安心して使えます。
- Q. 波線をセクション区切りに使う方法は？
- A. SVGタブのコードをHTMLに貼り付け、
position: absolute; bottom: 0; width: 100%; でセクション下端に配置します。preserveAspectRatio="none" で画面幅に合わせて伸縮します。 - Q. ブロブをclip-pathとして使えますか？
- A. はい。生成したSVGのパスデータを
clip-path: url(#...) として使用すれば、写真やセクションを有機的な形状でくり抜けます。 - Q. SVGとPNG、どちらをダウンロードすべき？
- A. Web用途ならSVGが推奨です。ファイルサイズが小さく、Retinaでも鮮明で、CSSで色を変更できます。デザインツールへのインポートにはどちらも対応しています。
- Q. データはサーバーに送信されますか？
- A. いいえ。すべての処理はブラウザ内で完結しています。外部へのデータ送信は一切ありません。
🌊セクション区切り
ヒーロー→コンテンツ、料金表→CTA等のセクション間に波線を配置し、柔らかく自然な印象を演出。
🖼️背景装飾
ブロブを画像の背景に配置してアクセントを追加。CTAボタン周りやヒーロー領域に効果的。
😀アバターマスク
ブロブ形状でアバター画像をclip-pathマスクし、従来の円形とは異なるユニークなプロフィール表示を実現。
🎨デザインツール素材
SVG/PNGダウンロードでFigma・Sketch・XD等に取り込み、ランディングページやプレゼン資料の素材として活用。
