【CSS】美しい波形の作成ガイド | Figmaデザインから実装、アニメーションまで

波形シェイプは、下層のビジュアルエリアとコンテンツの繋ぎ目として機能し、セクションが繰り返し表示されるページでもデザインを質素に感じさせない装飾的な役割を果たします。

この記事では、Figmaでの波形シェイプの作成方法から、CSSやSVGを使った実装方法、そしてユーザーの目を引くCSSアニメーションによる応用テクニックまでを、実践的な視点から詳細に解説します。

波形のシェイプとは

波形シェイプは、Webページのデザインにおいて、下層のビジュアルエリアとコンテンツの繋ぎ目の役割を担う要素です。このシェイプを用いることで、セクションが繰り返し表示されるようなページ構成であっても、単調さを避け、装飾としてページを質素に感じさせない効果を生み出します。

セクション区切りの活用シーン

セクション区切りは、情報の整理やサイトの雰囲気の切り替えに非常に効果的です。
特に以下のシーンでの利用が推奨されます。

• LP（ランディングページ）
  商品説明、口コミ、CTA（Call to Action）といったコンテンツの流れをスムーズにつなぎ、ユーザー導線を作り出します。
• コーポレートサイト
  会社概要からサービス紹介へなど、コンテンツの切り替えの境界線として機能します。
• 採用サイトやイベントサイト
  セクションごとの雰囲気を切り替え、ページ全体に演出を加える際に有効です。

---

波形シェイプのセクション区切りを使用しているサイト

以下のサイトは、自社の卵を販売・紹介するEC・Webサービスサイト
『でたまご | 養鶏場 | 雲仙 | 島原 | 長崎 | たまらん堂 | 株式会社松本ポートリー』です。

全てのページのセクションで、波形シェイプのセクション区切りを確認することができます！

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

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

Figmaで波形シェイプを作ってみよう！

Figmaではシェイプをオートレイアウトで複数回リピートすることでこの波を簡単に再現できます！
早速作っていきましょう！

1. シェイプの作成

まず、波形のベースとなるシェイプを作成します。
この工程では、ガイド線を用意しておくことで、綺麗な波形を作りやすくなります。

以下の画像にあるように、①から④のステップで調整を行えば基本は完了ですが、この時点では連続して繋げた場合に綺麗に見えるかまだ不安が残るかもしれません。

---

2. 手書き風に調整

ルールに従って基礎的な波形を構成する場合は、作成したシェイプのアンカーポイントから伸びるベジェハンドルの位置を調整し、等間隔に配置するようにしましょう。

---

3. シェイプの配置

完成したパーツはコンポーネントを作成して、以下の画像のようにオートレイアウトで複数並べてみましょう！

これでFigmaでの波形の作成は完了です！
作成したシェイプを書き出し、backgroundプロパティでリピート読み込みすることで、Web上でも再現が可能です！

波形シェイプを作れるプラグインの紹介

波形シェイプを効率的に作成したい場合は、以下のFigmaプラグインの利用が役立ちます。

Get Waves

「ランダムで自然なウェーブ」を1クリックで生成。
Get Wavesは、より有機的で不規則な波形を作ることが得意なプラグインで、レイアウトの背景として活用できます。

Wave & Curve

「規則正しい波」や「幾何学的な曲線」を作れます。
Wave & Curveは、波の高さ、長さ、そして「角の丸み」をスライダーで細かく調整できるプラグインです。

波形シェイプをWeb上でも再現しよう！

1. CSS 背景画像を使って実装する

書き出した波形シェイプ（例: SVGファイルなど）を背景画像として利用し、CSSのbackground-repeatプロパティで水平方向（repeat-x）に繰り返し表示させます。

See the Pen knowledge_wave-shapes_001 by Yugo Harima (@yh-kasou-knowledge) on CodePen.

---

2. インラインSVGを使って実装する

SVG（Scalable Vector Graphics）をHTML内に直接記述（インラインSVG）することで、画像ファイルの読み込みを不要にし、レスポンシブなデザインにも柔軟に対応できます。

See the Pen knowledge_wave-shapes_002 by Yugo Harima (@yh-kasou-knowledge) on CodePen.

波線・曲線SVGジェネレーターの紹介

波線・曲線SVGジェネレーターは複雑な不規則な波形シェイプが必要な場合や、手動でのコーディング作業を避けたい場合に役立つ、便利なSVGジェネレーターツールです。

1. Haikei

多機能で美しい背景を生成できる高機能ツール。
波形だけでなく、バブル状や多重レイヤーなど、モダンな背景素材を豊富に生成できるデザインツールです。

2. Shape Divider App

直感的な操作で上下の境界線を一瞬で作成。
Webサイトのセクションの「上部」または「下部」に特化した、セクションディバイダー専用のツールです。

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

軽量な波線をサクッと作りたい時に 日本のサイト「ウェブスペ」が提供している、非常にシンプルで使いやすい国産ジェネレーターです。

【補足】CSSアニメーションで波線に動きをつけてみよう！

@keyframesを利用したCSSアニメーションを適用することで、セクション区切りの波線に動きを持たせ、ページに躍動感を与えることができます。

ここでは、背景画像としてリピート読み込みした波形を、水平方向にスクロールさせるアニメーションを実装します。

See the Pen knowledge_wave-shapes_003 by Yugo Harima (@yh-kasou-knowledge) on CodePen.

まとめ

波形のシェイプは、Webサイトのデザインにおいて、情報の区切りを明確にし、ページ全体の質感を高める重要な装飾要素です。

Figmaなどのデザインツールを利用する際は、ガイド線を用いてシェイプのベースを作成し、特にベジェハンドルを等間隔に、全体の4分の1の長さの位置に調整することで、手書き風の美しい波形が作成できます。

完成したシェイプは、コンポーネント化した後にオートレイアウトで連続配置することで、簡単にセクションディバイダーのデザインを完成させられます。

このシェイプをbackgroundでリピート読み込みするか、SVGとして実装することで、CSSでの再現が可能となります。