SVGウェーブ生成器ガイド
ウェーブ区切りは、ページのセクションを滑らかに分けるSVG図形です——モダンなヒーローセクション、フッター、アプリのランディングページを象徴するディテール。SVGならどの画面サイズでも輪郭がくっきりします。
振幅・波長・レイヤーを調整し、塗り色を選んでSVGをコピー。HTMLにインラインで埋め込むか、.svgファイルとして保存して画像のように使えます。
Pro Tips
- 波の塗り色を次のセクションの背景色に合わせると、2つのセクションがシームレスにつながります。
- 透明度を下げながら2〜3層重ねると奥行きが出ます——明るい層を後ろに置くと、ほのかな海の雰囲気に。
Frequently Asked Questions
Q: ページに波を埋め込むには？
ページに波を埋め込むには？SVGをコピーしてHTMLにインラインで貼り付けるか、コードを.svgファイルとして保存し<img>タグで参照します。
Q: 波の向きを反転できますか？
波の向きを反転できますか？はい——SVGにtransform="scaleY(-1)"を追加するか、パスの始点と終点を入れ替えると反対向きに曲がります。
Q: なぜPNGではなくSVGなのか？
なぜPNGではなくSVGなのか？SVGはどんな解像度でも鮮明で、数百バイトしかなく、CSSで色変更やアニメーションもできます。
Q: 波を全幅にするには？
波を全幅にするには？SVGはpreserveAspectRatio="none"とwidth:100%を使用しているため、どのコンテナ幅にも歪みなく伸縮します。
Q: 波をアニメーションできますか？
波をアニメーションできますか？はい——SVGをoverflow:hiddenのコンテナに入れ、CSSキーフレームで位置を動かすと波が流れる効果になります。
日本の伝統色・和色
和色は平安時代の襲（かさね）の色目に由来する日本の伝統色。桜や山吹、瑠璃など、植物や自然の名前を冠した優しい色合いが特徴で、JIS慣用色名としても制定されています。現代のUIデザインにも落ち着いた配色として人気です。
山吹色 #F8B500山吹の花に由来する黄金色。JIS慣用色名
撫子色 #EEA9A9ナデシコの花の淡いピンク。平安時代から愛される
茜色 #B7282E茜草の根から染めた深い赤。夕焼けの色
若草色 #C3D825春の新芽を思わせる明るい黄緑
瑠璃色 #1E50A2仏教の七宝「瑠璃」に由来する深い青
桜色 #FEF4F4桜の花びらのようなごく淡いピンク
常磐色 #007B43常緑樹の深い緑。永遠を象徴する
Q: 和色とは何ですか？
和色とは何ですか？和色は平安時代の襲の色目に由来する日本の伝統色で、桜・山吹・瑠璃など自然の名を冠した色が多く、JIS慣用色名として269色が制定されています。
Q: 山吹色はどんな色ですか？
山吹色はどんな色ですか？山吹の花に由来する黄金色で、色値は #F8B500。JIS慣用色名の一つで、太田道灌の逸話でも知られる日本の代表色です。