【簡単】 Figmaで波線を作る方法｜CSS・SVGでWebに実装する方法も解説

波線や波形のシェイプは、Webサイトのセクション同士を自然につなぐ装飾としてよく使われるデザイン表現です。直線で区切るよりも柔らかく親しみやすい印象を与えられ、セクションが繰り返し表示されるページでも、単調さを抑えながらページ全体にリズムや動きを加えることができます。

この記事では、Figmaで波線を作る方法から、CSSの背景画像やSVGを使ってWeb上に実装する方法、波線を効率よく作れるFigmaプラグインやSVGジェネレーター、さらにCSSアニメーションで波線を動かす応用方法まで、実践的に詳しく解説します。

Webデザインで使う波線・波形シェイプとは

波線・波形シェイプは、Webページのデザインにおいて、セクション同士の境界を装飾しながらつなぐ役割を持つ要素です。

背景色が切り替わる場所や、コンテンツのまとまりが変わる場所に波線を配置することで、単純な直線で区切るよりも柔らかく、親しみやすい印象をつくることができます。

特にLPや採用サイト、イベントサイトのように複数のセクションが連続するページでは、波形を取り入れることでページ全体の単調さを抑え、視覚的なリズムをつくることができます。

波線をセクション区切りに使うシーン

波線を使ったセクション区切りは、情報を整理しながらサイトの雰囲気を切り替えたい場合に効果的です。
特に以下のようなWebサイトで活用しやすい表現です。

• LP（ランディングページ）
  商品説明、特徴、口コミ、CTA（Call to Action）など、異なる役割を持つコンテンツの境界を柔らかくつなぎ、ページ全体の流れを作れます。
• コーポレートサイト
  会社概要からサービス紹介、実績紹介からお問い合わせなど、セクションが切り替わるタイミングを視覚的に分かりやすくできます。
• 採用サイトやイベントサイト
  セクションごとの雰囲気を切り替えながら、サイト全体に遊びや親しみやすさを加えたい場合に向いています。

波線・波形シェイプをセクション区切りに使っているサイト

以下は、波線をセクションの区切りとして活用しているWebサイトの事例です。

自社の卵を販売・紹介するEC・Webサービスサイト「愛でたまご」では、各セクションの境界に波形を取り入れることで、背景色やコンテンツが切り替わる箇所を柔らかくつなげています。

ページ全体で同じ波形デザインを繰り返し使用しているため、装飾としての統一感を保ちながら、セクションごとの変化も感じられる構成になっています。

愛でたまご | 養鶏場 | 雲仙 | 島原 | 長崎 | たまらん堂 | 株式会社松本ポートリー

愛でたまご | 養鶏場 | 雲仙 | 島原 | 長崎 | たまらん堂 | 株式会社松本ポートリー

商品のコンセプトに合った暖かいデザインですね 😊 個人的にはフッターのデザインが好きです🐓

Figmaで波線を作る方法

Figmaでは、波線のベースとなるシェイプを1つ作成し、それを複製して並べることで、連続した波形を簡単に作ることができます。

Webサイトの横幅いっぱいに波形を使用したい場合でも、最初から長いパスを作る必要はありません。1つの波形パーツを整えてから、コンポーネントやオートレイアウトを使って繰り返し配置すると効率的です。

ここからは、実際にFigmaで波線を作成する流れを順番に解説します。

1. 波線のベースとなるシェイプを作成

まず、波線の1単位となるベースシェイプを作成します。

この工程では、あらかじめガイド線を用意しておくと、アンカーポイントや波の高さを揃えやすくなり、複数のパーツを横に並べた際にも綺麗につながる波形を作りやすくなります。

以下の画像のように、①から④の順番でアンカーポイントや曲線を調整していけば、基本的な波形を作成できます。

ただし、この時点では1つのパーツとして綺麗に見えていても、横に繰り返して配置した際につなぎ目が不自然になる場合があります。左右の始点・終点の高さや角度を揃えておくことが重要です。

2. ベジェハンドルを調整して自然な波形にする

波線のベースができたら、アンカーポイントから伸びるベジェハンドルの位置や長さを調整します。

規則正しい波形を作りたい場合は、各アンカーポイントのベジェハンドルを同じ方向・同じ長さになるよう調整し、等間隔に配置すると滑らかな波線を作りやすくなります。

一方で、少し手書き感のある自然な波線にしたい場合は、波の高さやベジェハンドルの長さをわずかに変化させることで、機械的すぎない表情を加えることができます。

ただし、変化を付けすぎると横に並べた際につなぎ目が目立ちやすくなるため、左右端の位置やカーブの角度は揃えておくのがおすすめです。

3. 波形シェイプを複製して横に配置

波形の1パーツが完成したら、コンポーネントを作成し、オートレイアウトを使って横方向に複数並べます。

この方法であれば、元の波形を修正した際にも各パーツへ変更を反映しやすく、ページ幅に合わせた調整もしやすくなります。

以下の画像のように複数配置した際、つなぎ目にズレや不自然な段差がなければ、連続した波線として完成です。

これでFigmaでの波線作成は完了です。

完成した波形はSVGや画像として書き出し、CSSのbackgroundやbackground-repeatを使って繰り返し表示することで、Webサイト上でも再現できます。

Figmaで波線を作れるプラグイン

Figma上で波線を効率的に作りたい場合は、波形を自動生成できるプラグインを使う方法もあります。

手作業でパスを調整するより短時間で作成できるため、複雑な波形やランダムな形状を作りたい場合に便利です。

Get Waves

ランダムで自然なウェーブを簡単に生成できるプラグインです。

Get Wavesは、規則正しい波線というよりも、有機的で不規則な波形を作ることを得意としています。

Webサイトのセクション区切りだけでなく、ヒーロービジュアルや背景装飾など、柔らかく動きのあるレイアウトを作りたい場合にも活用できます。

Wave & Curve

規則正しい波や幾何学的な曲線を作成しやすいプラグインです。

Wave & Curveでは、波の高さや長さ、角の丸みなどをスライダーで細かく調整できます。

均一な波線や、セクション区切りに使いやすい整ったウェーブを作りたい場合に向いています。

CSS・SVGで波線をWeb上に実装する方法

Figmaで作成した波線は、画像として配置するだけでなく、CSSやSVGを使ってWebサイト上に実装することもできます。

代表的な方法は、SVGを背景画像として繰り返し表示する方法と、SVGコードをHTML内に直接記述する方法です。

実装方法によって、レスポンシブ対応や色変更、アニメーションのしやすさが変わるため、用途に合わせて使い分けるとよいでしょう。

1. CSSの背景画像で波線を繰り返す

Figmaなどから書き出した波形シェイプをSVGファイルとして用意し、CSSの背景画像として指定する方法です。

background-repeat: repeat-x;を使用すると、波形を水平方向に繰り返して表示できるため、画面幅が変化してもページ横幅いっぱいに波線を配置できます。

1つの波形パーツだけを用意すればよいため、画像サイズを抑えながら横長のセクション区切りを実装できる点もメリットです。

2. インラインSVGで波線を実装する

SVG（Scalable Vector Graphics）をHTML内に直接記述するインラインSVGでも波線を実装できます。

インラインSVGを使うと、外部画像ファイルを読み込まずに表示できるだけでなく、CSSから色やサイズを変更しやすくなります。

また、viewBoxを適切に設定しておけば、画面幅に合わせてSVGを伸縮できるため、レスポンシブデザインにも柔軟に対応できます。

波線の色をページごとに変更したい場合や、SVGそのものにアニメーションを加えたい場合は、背景画像として使用する方法よりもインラインSVGの方が扱いやすい場合があります。

波線・曲線を作れるSVGジェネレーター

Figmaやコードを使って手作業で波線を作るのが難しい場合は、波線や曲線を自動生成できるSVGジェネレーターを活用する方法もあります。

ブラウザ上で波の高さや形状を調整し、そのままSVGコードや画像として書き出せるため、コーディングに慣れていない場合でも使いやすいのが特徴です。

不規則な波形を作りたい場合や、複数パターンを比較しながらデザインを検討したい場合にも便利です。

1. Haikei

波形だけでなく、さまざまなSVG背景を生成できる高機能なジェネレーターです。

波線のほか、バブル状のシェイプや多重レイヤー、グラデーションを使った背景など、モダンなWebデザインに使いやすい素材を生成できます。

複数の装飾パターンをまとめて検討したい場合にも使いやすいツールです。

2. Shape Divider App

Webサイトのセクション上下に配置する境界線を簡単に作成できるジェネレーターです。

波線やカーブなど、セクションディバイダーとして使いやすい形状に特化しており、画面上で高さや反転、色などを調整できます。

セクション区切り用の波線を短時間で作りたい場合に特に便利です。

3. 【境界線に使える】波線・曲線SVG画像ジェネレーター

シンプルな操作で波線や曲線のSVGを作成できる国産ジェネレーターです。

複雑な設定を行わなくても波の形状を調整できるため、軽量な波線をサッと作ってWebサイトへ実装したい場合に向いています。

日本語で利用できるため、SVGジェネレーターを初めて使う場合にも扱いやすいツールです。

【補足】CSSアニメーションで波線を動かす方法

静止した波線だけでなく、CSSアニメーションを組み合わせることで、波が流れているような動きを付けることもできます。

@keyframesを使って背景画像の位置を水平方向に変化させると、波形が横方向へ連続して移動するアニメーションを表現できます。

セクションの境界にゆるやかな動きを加えることで、ページ全体に躍動感を与えたり、ユーザーの視線を自然に誘導したりする効果も期待できます。

ただし、動きが速すぎたり、常に大きく動き続けたりするとコンテンツよりも装飾が目立ってしまうため、実際のWebサイトではゆっくりとした動きに設定するのがおすすめです。

ここでは、背景画像として繰り返し表示した波線を、水平方向にスクロールさせるCSSアニメーションを実装しています。

まとめ

波線や波形シェイプは、Webサイトのセクションを分かりやすく区切りながら、ページ全体に柔らかさや視覚的なリズムを加えられる装飾表現です。

Figmaで作成する場合は、ガイド線を使って波形のベースを整え、アンカーポイントとベジェハンドルの位置や長さを調整することで、滑らかな波線を作ることができます。

完成した波形は、コンポーネント化してオートレイアウトで連続配置しておくと、デザインの修正や横幅への対応もしやすくなります。

Web上では、SVGをCSSのbackgroundで繰り返し表示する方法や、インラインSVGとして直接実装する方法があります。

手作業で作るのが難しい場合は、Figmaプラグインや波線・曲線SVGジェネレーターを活用することで、より短時間でさまざまな形状を作成できます。

さらにCSSの@keyframesを組み合わせれば、波線を動かしたアニメーション表現も可能です。デザインの雰囲気やページの目的に合わせて、Figma・CSS・SVG・ジェネレーターを使い分けてみてください。