透過とHSLカラーによる自然なレイヤー構造
このツールは、指定されたベースカラーをもとに、HSLカラースペースを用いて明るさ（明度）を自動計算し、透過度の異なる複数の波形パスを生成します。
最大3層までのレイヤーを重ね合わせることで、単調になりがちなWebサイトのセクション境界に奥行きと自然なグラデーションをもたらします。計算やSVGコードの生成処理はすべてお使いのブラウザ内で完結するため、サーバーへの通信待ち時間やデータ流出のリスクはありません。
レスポンシブ対応とアスペクト比の仕様
出力されるSVGコードにはpreserveAspectRatio="none"属性が付与されています。これにより、親コンテナの幅（例えばwidth: 100%）に合わせて波形が水平方向に自動で引き伸ばされ、隙間なく画面の端から端までをカバーします。
ただし、極端に縦長または横長のコンテナに適用すると、波のカーブが不自然に歪むトレードオフがあります。その場合はツールの設定で「波の高さ」や「波の頂点数」を調整し、実際のレイアウトに最適なバランスを見つけてください。
実装時の注意点とフォーマットの制限
生成されたコードはクリップボードにコピーされ、HTMLファイルやReact、Vueなどのコンポーネント内に直接貼り付けて使用できます。CSSの背景画像（background-image）としてData URI形式で埋め込むことも可能です。
なお、本ツールはセクション区切り用のSVGマークアップ生成に特化しているため、PNGやJPEGなどのラスター画像としては書き出せません。また、複雑なアニメーションの自動付与機能はないため、動きをつけたい場合は出力されたSVGパスに対して別途CSSアニメーションを定義する必要があります。
よくある質問
サイトのブランドカラーと波の色を正確に合わせるにはどうすればよいですか？
カラーピッカーにHEXコード（例：#0055ff）を直接入力してください。ツールがその色を基準にして、重なるレイヤーの明るさと透過度を自動的に算出し、自然なグラデーションを作成します。
ReactやVueなどのモダンフレームワークで生成したSVGを使用できますか？
はい、使用可能です。ただし、ReactのJSXに貼り付ける場合は、フレームワークの構文規則に従って属性名（キャメルケースへの変更など）の微調整を行ってください。
波のSVGを配置したときに、上下に不要な隙間ができてしまいます。
SVG要素に対してCSSで<code>display: block;</code>を指定し、親要素の行高などの影響をリセットしてください。また、HTML構造上で余分な改行やスペースが含まれていないかも確認してください。
生成された波のアニメーション（動く波）を作ることはできますか？
ツール自体にはアニメーション出力機能はありません。動かしたい場合は、出力されたSVGコードをHTMLに埋め込み、CSSの<code>@keyframes</code>を使用して複数のパス要素を個別に左右へループ移動させるスタイルをご自身で追加してください。
レイヤー数を増やすとデザインにどのような影響がありますか？
複数の波が重なることで、より立体的でリッチな視覚効果が得られます。一方で、レイヤーごとに異なる透明度と明度が適用されるため、背景色によっては意図しない色合いに見えるケースがあります。
ツールの不具合や改善案はありますか。 フィードバックを送る