SVGシェイプジェネレーター

本ツールは、波線（ウェーブ）やブロブ（有機的な円形）といったSVGシェイプを直感的なスライダー操作で簡単に生成できる無料ツールです。Webサイトのデザインで最近トレンドとなっている「セクション間の波線区切り」や「ヒーロー画像の背景に配置する有機的な図形」を、専用のデザインソフトがなくても一瞬で作成できます。

生成されたグラフィックは、非常に軽量で高解像度ディスプレイでも画質が劣化しない「SVGデータ」として出力されます。HTMLに直接埋め込むためのInlineコード、CSSの背景画像として使うためのCSSコードやTailwind CSS用のユーティリティクラスも自動生成されるため、フロントエンド開発の作業効率が大幅に向上します。

すべてのグラフィック生成処理はお使いのブラウザ内で行われるため、機密情報を含む環境での作業も安全であり、商用・非商用問わず自由に素材として活用していただけます。

SVG (Scalable Vector Graphics)

画像を点と線と数式で表現するベクター形式の画像データ。JPEGやPNGと異なり、どれだけ拡大しても粗くならず、ファイルサイズも非常に小さいためWebデザインに最適です。

Blob（ブロブ）

ITやデザイン業界においては「アメーバのような有機的な柔らかい図形」を指す言葉として使われます。Webサイトの背景アクセントや、写真の切り抜きマスクとして近年人気の高いデザイン要素です。

viewBox

SVGタグに指定する属性で、SVG画像を描画するための「キャンバスの比率と座標」を定義します。これを適切に設定することで、HTMLに埋め込んだ際に要素の幅に合わせて柔軟に拡大・縮小することが可能になります。

Tailwind CSS

クラス名をHTMLに直接記述することでスタイルを適用するユーティリティファーストなCSSフレームワーク。本ツールでは、Data URI化したSVG画像を背景に設定するTailwindの `bg-[url('...')]` 形式のコードを直接出力できます。

パーリンノイズ

自然で滑らかな乱数を生成するアルゴリズム。本ツールの内部でも、ランダムでありながら滑らかで美しい波線やブロブの曲線を計算するために類似のノイズ生成・補間アルゴリズムが応用されています。

Q.PNGとSVGのどちらを使うべきか？

Webデザインにおいては、解像度に依存せず高画質を保ち、ファイルサイズも軽いSVG形式の使用を推奨します。一方で、SVGを直接アップロードできないシステムや、OGP画像などの用途ではPNG形式をご利用ください。当ツールからダウンロードできるPNGはRetina（高画素密度）ディスプレイに対応した2xサイズで出力されます。

Q.波線を画面幅に合わせて伸縮させるには？

SVGコードやCSSを出力して使用する際、デフォルトでは波線が自動的にレスポンシブ対応（画面幅に合わせて伸縮）するよう設計されています。内部的にはSVGの preserveAspectRatio="none" という設定が使用されています。

Q.作成した形状のデータはサーバーに送られますか？

送信されません。形状の生成からSVGコードの出力、PNG画像の生成（描画）まですべての処理はお使いのブラウザ（パソコンやスマートフォン）内で完結しています。安全にご利用いただけます。

Q.生成した形状は商用利用できますか？

はい、本ツールで作成したSVG形状やPNG画像は商用・非商用を問わず無料でご利用いただけます。クレジット表記も不要です。

Q.作成したSVGをWordPressなどのCMSで使用するには？

SVG画像をそのままメディアにアップロードできるプラグインを使用するか、本ツールの「Inline」コードや「CSS」コードをそのままHTML/CSSの編集画面に貼り付けてご使用ください。

生成したSVGシェイプは、Webデザインの様々な場面で活用できます。以下は代表的な活用例です。