【CSS／SVG】波線背景の作り方と使い分け｜サンプルコード付

wavy-line-background css
2025.06.30
記事内に広告が含まれています。

Webデザインで波線の背景を取り入れると、ページ全体に柔らかな印象やダイナミックな動きをプラスできますよね。しかし、いざ実装しようとすると「cssで波線の背景を作るにはどうすればいいの？」「スマホで表示が崩れたり、キレイな曲線を描けなかったりして困っている」と悩んでしまう方も多いのではないでしょうか。実は、波線背景の実装手法には「CSSのみで再現する方法」と「SVGを活用する方法」があり、目的やデザインに合わせて正しく使い分けることが美しいデザインを実現するカギとなります。

この記事では、初心者の方でもすぐに実践できる波線背景の実装テクニックを分かりやすく解説します。

この記事を読んでわかること

  • CSSのみで作る波線背景とSVGを使う方法の違い・選び方
  • コピペで使えるCSSグラデーションやborder-radiusを使ったコード例
  • SVGと@keyframesを組み合わせた滑らかな波アニメーションの実装手順
  • レスポンシブ対応やスマホでの表示崩れ（横スクロール・位置のズレ）を防ぐポイント
  • パフォーマンスやアクセシビリティ（prefers-reduced-motion）に配慮した実装方法

プロジェクトの要件にぴったりな実装手法を見つけて、ぜひサイト制作に役立ててみてください！

CSS波線背景を作る方法と実装手法の選び方

Webデザインでグラフィック要素としてよく使われる波線背景や波型セクション区切りは、見た目の印象を大きく左右するデザインパーツです。

波線背景をWebサイトに実装する方法には、主に「CSSのみで制作する方法」と「SVGを使用する方法」の2つが存在します。また、静止した波型だけでなく、CSS animationを利用して「波を動かす（波アニメーション）」表現も可能です。

実装を開始する前に、それぞれの技術的特徴、表現力の違い、得意とするユースケースを理解し、プロジェクトの要件に最適な手法を選択することが重要です。

CSSだけで作る方法とSVGを使う方法の違い

CSSのみで実装する方法とSVGを併用する方法には、表現できる波型の自由度やコードの管理面で明確な違いがあります。

評価軸CSSのみで作成（gradient / border-radius）SVGを使用（インライン / 外部ファイル）
波型の自由度限定的（直線状のジグザグ・ギザギザ・単層の半円波など）無制限（滑らかなベジェ曲線、不規則な波、多層グラデーション波など）
滑らかさ・再現性アンチエイリアスや描画計算の限界で、鋭利なカーブでジャギーが発生しやすいベクター形式のため、どんな画面解像度・倍率でも滑らか
レスポンシブ対応背景サイズや要素寸法の計算が必要viewBox や preserveAspectRatio により柔軟に伸縮可能
コードの保守性CSSのグラデーション記述が長くなり、直感的な修正が難しいベクターツール（FigmaやIllustrator）やジェネレーターの出力コードをそのまま利用可能
レンダリング負荷比較的軽量（複雑なCSSグラデーションの重ね合わせを除く）単純な波型なら非常に軽量。非常に複雑なパスでない限りパフォーマンス影響は極小

CSSのみによる波線の実装は、linear-gradient() や radial-gradient() などのグラデーション関数、あるいは疑似要素（::before / ::after）と border-radius を組み合わせて表現します。外部アセットを一切読み込まないため、シンプルな幾何学的パターンや単色のアーチ状区切りであれば効率的に構築できます。

一方で、デザインツールで描かれるような「うねりのある自然で滑らかな曲線」や「複数重ね合わされた波」をCSSのグラデーションだけで再現しようとすると、計算が複雑化し、ブラウザによる描画の潰れ（ジャギー）の原因となります。そのため、自然で美しい曲線を描く場合は、SVGを利用するのがWeb標準的なアプローチです。

波線背景・セクション区切り・波アニメーションの使い分け

デザインの目的や配置場所に応じて、適切な実装技術を選択してください。

1. シンプルな模様・装飾パターンとしての波線背景（CSS向き）

  • 用途: テキストの背景模様、カード要素のヘッダー装飾、繰り返し模様のアンダーラインなど。
  • 最適な手法: CSSグラデーション（linear-gradient / radial-gradient）
  • 理由: 一度クラスを定義しておけば、要素の広さに合わせて背景画像として自動ループできるため管理が容易です。

2. セクション間の曲面・波型境界デザイン（SVG向き）

  • 用途: ヒーローエリアと本文エリアの境界、フッター上部のWave区切りなど。
  • 最適な手法: インラインSVG または 背景画像としてのSVG
  • 理由: 画面幅が変わっても波のカーブの美しさを保持でき、レスポンシブ対応（アスペクト比の固定やレスポンシブな縦横伸縮）が容易に制御できます。

3. 視線を引き付ける演出・ヒーローエリア（波アニメーション向き）

  • 用途: ファーストビューの背景、ブランドサイトのヒーローイメージ、リラックス感や動きを表現したいセクション。
  • 最適な手法: SVG + CSS @keyframes による横滑り移動アニメーション
  • 理由: SVGで描いたループ可能な波型パターンをCSSの transform: translateX() で移動させることで、低負荷かつ滑らかな動きを実現できます。
国内シェアNo.1のエックスサーバーが提供するVPSサーバー『XServer VPS』

CSSだけで波線背景を作る方法【コピペOK】

CSSのみで波線や曲線的な背景を表現する場合、主に linear-gradient() や radial-gradient() などのグラデーション関数、あるいは疑似要素と border-radius を組み合わせる手法を使用します。

ここでは、外部の画像やSVGファイルを使わずに、CSSのコードだけで実装できる具体的なパターンと、それぞれの制約や調整方法を解説します。

linear-gradientで繰り返す波線を作る

CSSのグラデーションを複数重ね合わせることで、規則的なギザギザ模様や、三角・半円を連続させたような幾何学的な波線を背景パターンとして描画できます。

ただし、CSSのグラデーションだけで滑らかなベジェ曲線（うねりのある波形）を直接描くことは仕様上できません。 ここで紹介する方法は、斜線や円弧を巧みに組み合わせて波線に見せるアプローチです。

以下のコードは、背景に繰り返し適用できるシャープな波状（ギザギザ）パターンの実装例です。

<div class="wavy-bg-linear">
  <div class="content">
    <h2>CSSグラデーションによるパターン</h2>
    <p>CSSの背景グラデーションを繰り返してパターンを描画します。</p>
  </div>
</div>

.wavy-bg-linear {
  position: relative;
  width: 100%;
  min-height: 250px;
  background-color: #f0f4f8;
  /* 2つのグラデーションを組み合わせて連続的なギザギザパターンを形成 */
  background-image:
    linear-gradient(135deg, #3b82f6 25%, transparent 25%),
    linear-gradient(225deg, #3b82f6 25%, transparent 25%);
  background-position: 0 0;
  background-size: 40px 40px;
  background-repeat: repeat;
}

.wavy-bg-linear .content {
  position: relative;
  z-index: 1;
  padding: 40px;
  color: #1e293b;
  text-align: center;
}

実際の表示

See the Pen wavy-line-background-sample-01 by watashi-xyz (@watashi-xyz) on CodePen.

  • 表示効果: 青色の斜線グラデーションが交差し、規則正しい幾何学的パターンが背景全体にタイル状に繰り返されます。
  • 調整方法: background-size: 40px 40px; の数値を変更すると、パターンの幅や高さを拡大・縮小できます。カラーコード（#3b82f6）を変更すれば、波線の色を自由に変更可能です。

疑似要素とborder-radiusでセクションの境界を曲線にする

セクションとセクションの境界を大きな弧や半円で切り替えたい場合は、要素の疑似要素（::after または ::before）に対して border-radius を適用する方法が効果的です。

この手法は、ページのヒーローエリアの下部にダイナミックなアーチ状の境界線を入れたい場合に適しています。

<section class="hero-section">
  <div class="hero-inner">
    <h2>セクション境界のアーチ表現</h2>
    <p>border-radiusと疑似要素を利用した曲線レイアウトです。</p>
  </div>
</section>

.hero-section {
  position: relative;
  background-color: #1e293b;
  color: #ffffff;
  padding: 80px 20px 120px;
  text-align: center;
  overflow: hidden; /* はみ出た疑似要素を隠す */
}

.hero-section::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: #ffffff;
  /* 左右に大きく広げた楕円の曲線を下部に配置する */
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  transform: scaleX(1.5); /* 画面幅に対して余裕を持たせて滑らかな曲線にする */
}

.hero-section .hero-inner {
  position: relative;
  z-index: 1;
}

実際の表示

See the Pen wavy-line-background-sample-02 by watashi-xyz (@watashi-xyz) on CodePen.

  • 表示効果: ブロックの下部に、白く滑らかなドーム状のアーチ境界が浮かび上がります。背景色の切り替え境界として活用できます。
  • 調整方法: height: 60px; で曲線の高さを変更できます。また、transform: scaleX(1.5) の倍率を調整することで、曲線の傾きや緩やかさをコントロール可能です。

複数の波を重ねて背景をデザインする

CSSの背景プロパティでは、カンマ（,）区切りで複数のグラデーションや画像を重ね合わせることができます。これを利用して、異なるサイズや透明度のパターンを立体的に重ねることで、単調ではない奥行きのある背景表現が可能です。

<div class="multi-wavy-bg">
  <div class="content">
    <h2>多層グラデーションの背景</h2>
    <p>複数の背景グラデーションを重ね合わせて奥行きを演出します。</p>
  </div>
</div>

.multi-wavy-bg {
  position: relative;
  width: 100%;
  min-height: 280px;
  background-color: #0f172a;
  /* レイヤーを重ねて複雑な幾何学模様を構築 */
  background-image:
    linear-gradient(45deg, rgba(59, 130, 246, 0.15) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(16, 185, 129, 0.15) 25%, transparent 25%);
  background-size: 60px 60px;
  background-position: 0 0, 30px 30px; /* 位置をずらして重なりを作る */
  background-repeat: repeat;
}

.multi-wavy-bg .content {
  position: relative;
  z-index: 1;
  padding: 50px;
  color: #ffffff;
  text-align: center;
}

実際の表示

See the Pen wavy-line-background-sample-03 by watashi-xyz (@watashi-xyz) on CodePen.

  • 表示効果: 青色と緑色の半透明なパターンが互いに重なり合い、深みのある幾何学的背景が生成されます。
  • 調整方法: background-position の2つの値（0 0 と 30px 30px）のオフセットを調整することで、模様の交差具合や視覚的なズレを自由に変更できます。

波線の色・高さ・幅・位置を調整する

CSSで実装した波線・背景パターンのデザインを調整する際は、以下のCSSプロパティを対応させて変更してください。

調整したい項目変更するCSSプロパティ挙動とポイント
波線の色linear-gradient() 内の色指定 または background-colorグラデーションのカラーコードを変更することで、配色のトーンを調整します。半透明（rgba / hsla）を指定すると背景となじみやすくなります。
波の高さ・振幅height（疑似要素） または background-size の縦の数値セクション境界の高さや、パターンの垂直方向のサイズを広げることで、波のダイナミックさを変更できます。
波の幅・周期background-size の横の数値パターンの繰り返し周期を変更します。数値を小さくすると細かい波に、大きくするとゆったりとした波になります。
波の位置・ズレbackground-position複数の背景を重ねる際の位相のズレや、背景パターンの開始位置を微調整します。

※ CSSのみによる表現は、シャープな幾何学模様や単色のアーチ境界においては非常に軽量で優れた手法ですが、自然な連続曲面や複雑なうねりを表現したい場合は、次項で解説するSVGを使用するアプローチが最適です。

◆◇◆ 【衝撃価格】VPS512MBプラン！1時間1.3円【ConoHa】 ◆◇◆

SVGで滑らかな波線背景を作る方法

CSSのグラデーションや疑似要素では表現が難しい「有機的で滑らかな曲線」や「複雑なうねりを持つ波線」を実装する場合、SVG（Scalable Vector Graphics）を利用するのが最も確実で美しいアプローチです。

SVGはベクター形式のため、スマートフォンの高解像度ディスプレイ（Retinaディスプレイ）から大型モニターまで、どれだけ拡大・縮小しても輪郭がジャギーを起こさず鮮明に描画されます。

SVGのpathで波形を描画する基本

SVGで波形を形作る中核となるのが <path> 要素です。d 属性にコマンドと座標のデータを記述することで、直線やベジェ曲線による自由な図形を描画できます。

波線を表現する場合、主に M（移動）コマンドと、三次ベジェ曲線を描く C コマンド、あるいは二次ベジェ曲線を描く Q コマンドを組み合わせて滑らかなうねりを作ります。

以下のコードは、画面上部に配置できる単層の波型SVGの基本構造です。

<div class="svg-wave-section">
  <!-- SVG波形コンポーネント -->
  <svg class="wave-svg" xmlns="<http://www.w3.org/2000/svg>" viewBox="0 0 1440 320" preserveAspectRatio="none">
    <path fill="#3b82f6" fill-opacity="1" d="M0,160L48,144C96,128,192,96,288,106.7C384,117,480,171,576,181.3C672,192,768,160,864,133.3C960,107,1056,85,1152,96C1248,107,1344,149,1392,170.7L1440,192L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"></path>
  </svg>
  <div class="content">
    <h2>SVGによる滑らかな波線表現</h2>
    <p>ベジェ曲線を用いたベクターデータにより、高解像度でも美しい曲線を維持します。</p>
  </div>
</div>

.svg-wave-section {
  position: relative;
  background-color: #f8fafc;
  color: #1e293b;
  padding-top: 60px;
}

.wave-svg {
  display: block;
  width: 100%;
  height: 120px; /* 表示上の高さを指定 */
}

実際の表示

See the Pen wavy-line-background-sample-04 by watashi-xyz (@watashi-xyz) on CodePen.

  • 表示効果: ブロックの上部に青色の滑らかな波形が配置され、境界線が美しく装飾されます。
  • 調整方法: <path> の fill 属性を変更すると波の色を変えられます。また、CSS側で .wave-svg の height を変更することで、波全体の縦方向のボリュームを調整可能です。

SVGをHTMLに埋め込む方法と背景画像として使う方法

SVGをWebページに組み込む主な方法には、HTMLに直接記述する「インラインSVG」と、CSSの background-image や <img> タグのソースとして読み込む「外部ファイル・データURI利用」の2つがあります。それぞれの特性を理解して使い分けます。

比較項目インラインSVG（HTMLに直接記述）背景画像としての利用（CSS / Data URI）
CSSからの制御fill や stroke などのSVG内部要素をCSSで直接スタイリング・アニメーション化可能内部の個別要素をCSSから直接変更できない（全体の拡大・縮小・配置のみ）
HTMLの可読性パスのコードが長いため、HTMLファイルの構造が冗長になりやすいHTMLがすっきりと保たれる。複数のセクションで共通のSVGを再利用しやすい
キャッシュ効率ページごとに読み込まれるため、個別ページのコード量が増加する外部ファイルやData URIとしてCSSにキャッシュさせることが可能
適した用途色の動的変更や、後述する複雑なCSSアニメーションを組み合わせたい場合単なる装飾用の背景や、変更頻度の低いセクション境界の区切り

動的なカラー変更やアニメーションを実装する場合は、柔軟性の高いインラインSVGを採用するのが最も確実です。

Haikeiなどのジェネレーターで波形を作る手順

自力で複雑なパス座標を計算せず、直感的な操作で高品質なSVG波形データを取得したい場合は、公式Webツールである Haikei などのSVGジェネレーターを活用するのが効率的です。

ジェネレーターを利用して波形を作成し、Webサイトに組み込むまでの標準的な手順は以下の通りです。

  1. ジェネレーターへのアクセス: 公式サイト（Haikei など）を開き、デザインカテゴリーから「Wave（波）」や「Blob」「Layered Waves」などのジェネレーターを選択します。
  2. パラメータの調整: 画面上のプレビューを見ながら、波の密度、振幅の高さ、レイヤーの重なり具合、カラーパレットを好みの状態に調整します。
  3. SVGコードのエクスポート: 調整完了後、エクスポートメニューからSVGコード、またはSVGファイルをダウンロードします。
  4. HTML/CSSへの組み込み: 取得したSVGコードから不要なメタデータを削除し、インラインSVGとしてHTMLに貼り付けるか、適宜 fill 属性をCSS管理しやすいように置き換えて利用します。

外部ツールを活用することで、デザインの試行錯誤にかかる時間を大幅に削減できます。

Haikei

SVGの横幅と高さを調整してレスポンシブに対応する

SVGをレスポンシブデザインに対応させるためには、SVGタグに設定する viewBox 属性と preserveAspectRatio 属性の挙動を正しく理解する必要があります。

  • viewBox="0 0 1440 320": SVG内部の仮想的な描画座標系を定義します。この比率を基準にして、親要素の幅に合わせて全体が自動的に拡大・縮小します。
  • preserveAspectRatio="none": 通常、SVGは縦横比を維持したまま拡大・縮小しますが、この値を指定すると、親要素の幅と高さの比率に合わせて縦横独立して引き延ばされます。セクションの全幅に波形をフィットさせたい場合に有効です。
/* レスポンシブ対応のSVGスタイル例 */
.wave-svg-responsive {
  width: 100%;
  height: auto;     /* アスペクト比を保持して高さを自動計算する場合 */
  max-height: 150px; /* モバイルでの過度な拡大を防ぐ上限設定 */
}

スマートフォンなどの狭い画面幅で表示する際、波の縦幅が広がりすぎてコンテンツ領域を圧迫する場合は、メディアクエリや max-height を組み合わせて高さを制限することで、あらゆるデバイスでバランスの取れたレイアウトを維持できます。

新世代レンタルサーバー『シンレンタルサーバー』

CSS波アニメーションを実装する方法

静止した波線背景に流れるような動きを加えることで、Webサイトにダイナミックな躍動感やリラックスした印象を与えられます。

CSSアニメーション（@keyframes）とSVGを組み合わせることで、負荷を抑えながら、途切れることのない滑らかな波のループアニメーションを実装できます。

SVGと@keyframesで波を連続的に動かす

SVGのパス要素を横方向に無限ループでスライドさせる手法が、最も美しくパフォーマンスに優れた波アニメーションの実装方法です。

波形を横に並べて配置するか、SVG要素の幅を2倍にして transform: translateX() でループさせることで、継ぎ目のない連続アニメーションを実現します。

<div class="animated-wave-section">
  <svg class="animated-wave" xmlns="<http://www.w3.org/2000/svg>" viewBox="0 0 1200 120" preserveAspectRatio="none">
    <path d="M0,0 C150,90 350,-40 500,45 C650,130 900,10 1200,60 L1200,120 L0,120 Z" fill="rgba(59, 130, 246, 0.4)"></path>
    <path d="M0,30 C200,110 400,0 600,60 C800,120 1000,20 1200,75 L1200,120 L0,120 Z" fill="rgba(59, 130, 246, 0.8)"></path>
  </svg>
  <div class="content">
    <h2>流れる波のアニメーション</h2>
    <p>SVGと@keyframesを組み合わせて滑らかなループを実現します。</p>
  </div>
</div>

.animated-wave-section {
  position: relative;
  background-color: #0f172a;
  color: #ffffff;
  padding: 80px 20px;
  overflow: hidden;
}

.animated-wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%; /* ループ幅を確保するために2倍の幅にする */
  height: 100px;
  animation: wave-slide 10s linear infinite;
}

/* パスごとにアニメーションのタイミングや遅延をずらすと立体感が出る */
.animated-wave path:nth-child(2) {
  animation: wave-slide 7s linear infinite reverse;
  opacity: 0.7;
}

@keyframes wave-slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%); /* 自身の幅の半分だけ移動してループ */
  }
}

.animated-wave-section .content {
  position: relative;
  z-index: 1;
  text-align: center;
}

実際の表示

See the Pen wavy-line-background-sample-05 by watashi-xyz (@watashi-xyz) on CodePen.

  • 表示効果: 2層の青い波が異なる速度や方向で左右に滑らかに流れ、奥行きのあるアニメーション背景が展開されます。
  • 調整方法: animation: wave-slide 10s linear infinite; の時間（10s）を短くすると高速に、長くするとゆったりとした動きになります。

CSSだけで動きのある波背景を作る

SVGを使わず、CSSのグラデーション背景プロパティに対して background-position を変化させることでも、動く幾何学的な背景パターンを作ることができます。

ただし、この手法は幾何学的なパターンの移動やストライプ・チェック柄のスクロールには適していますが、前述したような「有機的なうねる曲線」をCSSグラデーションだけで滑らかに動かすことは困難です。うねる波を動かしたい場合は、必ずSVGとの組み合わせを選択してください。

.css-animated-pattern {
  width: 100%;
  min-height: 200px;
  background-image: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 25%, transparent 25%);
  background-size: 40px 40px;
  animation: pattern-scroll 5s linear infinite;
}

@keyframes pattern-scroll {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 40px 40px; /* パターンのサイズ分移動してシームレスにつなぐ */
  }
}

アニメーションの速度・方向・色を変更する

CSSアニメーションの制御プロパティを変更することで、波の挙動をサイトのトーン＆マナーに合わせてカスタマイズできます。

制御項目変更するCSSプロパティ詳細と調整のコツ
アニメーション速度animation-duration（例: 7s, 15s）秒数を小さくするとキビキビした動き、大きくするとゆったりとしたリラックス感のある動きになります。
移動方向animation-direction または reverse の付与複数の波を重ねる際、片方を normal、もう片方を reverse に設定すると、互い違いに交差する立体的なうねりを表現できます。
イージング（変化の加速）animation-timing-function: linear波の流れる速度を一定にするためには必ず linear を指定してください。ease-in-out 等を指定すると、ループの接続部分で速度が変化して不自然なカクつきが生じます。
波の色と透明度fill 属性 または rgba() のアルファ値背景色とのコントラストに合わせて、不透明度（0.3〜0.9など）を調整し、コンテンツの視認性を保ちます。

波のループが途切れるときに確認するポイント

アニメーションが1周して元に戻る瞬間（ループの継ぎ目）に、画面が「カクッ」と一瞬止まったりズレたりする場合は、以下の設計ミスが原因です。

  1. SVGの幅と移動量の不一致: CSSで width: 200%; に設定し、transform: translateX(-50%); で移動させる場合、SVG内部のパスの形状がちょうど半分（左右対称、または完全に周期が一致する構造）でデザインされているか確認してください。
  2. イージングの指定ミス: 前述の通り、アニメーションの加速・減速が入ると継ぎ目で不連続になります。必ず linear を維持してください。
  3. パスの終端座標のズレ: SVGの path の書き始めのX座標と終わり側のX座標が、パターンの周期計算と一致していない場合、ループの瞬間に線がジャンプします。ジェネレーター等で出力した正しい幅のデータをそのまま利用するのが最も安全です。

prefers-reduced-motionで動きを抑制する

アクセシビリティへの配慮として、OSやブラウザの設定で「視差効果やアニメーションを減らす（動きの軽減）」が有効になっているユーザーに対しては、アニメーションを自動的に停止または抑制する必要があります。

以下のメディアクエリをCSSに追加することで、ユーザーの環境設定に配慮した実装になります。

@media (prefers-reduced-motion: reduce) {
  .animated-wave {
    animation: none; /* 動きを完全に停止させる */
    /* または transform: translateX(0); で静止状態の位置を固定する */
  }
}

これにより、前庭運動障害を持つユーザーなどが画面酔いや不快感を覚えるのを防ぎ、アクセシビリティの要件を満たした実用的なWebサイトを構築できます。

WEBCOACH｜副業・フリーランス特化型のオンラインWebデザインスクール

CSS波線背景の表示崩れを防ぐポイント

波線背景や波型セクション境界を実装する際、デスクトップ環境では意図通りに表示されても、スマートフォンの画面幅に縮小されたり、ブラウザのウィンドウサイズが変更されたりした際に「形が潰れる」「不要な横スクロールが発生する」「コンテンツと重なって読めなくなる」といった表示崩れが起こりがちです。

ここでは、現場で直面しやすい代表的なトラブルの原因と、確実な解決方法を解説します。

スマホで波線の高さや形が崩れる場合の調整

スマートフォンなどの狭い画面幅（ビューポート）では、SVGのデフォルトのアスペクト比がそのまま維持されると、波の縦幅が不自然に引き伸ばされたり、逆に押しつぶされたりする現象が発生します。

  • 原因: 親要素の幅が縮小した際、SVGの高さが固定値や過剰な比率で計算されているため。
  • 解決策: メディアクエリやCSSの clamp() 関数を活用し、デバイスの画面幅に応じてSVGの最大高さを制限します。
.wave-svg {
  width: 100%;
  height: auto;
  max-height: 120px; /* デスクトップでの最大高さを制限 */
}

/* スマートフォン向けの調整 */
@media (max-width: 768px) {
  .wave-svg {
    max-height: 60px; /* 画面幅が狭いときは波の高さを低くしてコンテンツ領域を確保 */
  }
}

また、CSSの border-radius を用いたアーチ表現で transform: scaleX(1.5) のように横方向を引き伸ばしている場合も、スマホの狭い画面で曲線の歪みが強くなりすぎることがあるため、画面幅に応じたスケール値の調整や、タブレット・スマホサイズでのSVGへの切り替えを検討してください。

波線とコンテンツが重なる場合のz-index・overflowの設定

波線背景やセクション境界のSVG・疑似要素を position: absolute で配置する際、レイアウトの重なり順（スタッキングコンテキスト）や親要素の溢れ処理を誤ると、テキストの上に波が被って読めなくなったり、画面の右側に意図しない空白（横スクロール）が生じたりします。

  • overflow: hidden の適切な適用: 疑似要素を transform: scaleX(1.5) などで大きく拡大して配置する場合、親要素からはみ出た部分が原因でページの横幅が広がり、不要な横スクロールバーが出現します。波を配置している親セクション（またはラッパー要素）には必ず overflow: hidden; を指定してください。
  • z-index による重なり順の制御: 背景要素、波線、テキストコンテンツの上下関係を明確にします。単に z-index の数値を大きくするだけでなく、親要素でスタッキングコンテキストが意図せず切断されていないかを確認してください。
.section-with-wave {
  position: relative;
  background-color: #0f172a;
  overflow: hidden; /* はみ出した波やスケール変形による横スクロールを防止 */
}

.section-with-wave .wave-element {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 1; /* 背景側の下層に配置 */
}

.section-with-wave .content {
  position: relative;
  z-index: 2; /* テキストやボタンは必ず上に重ねる */
  padding: 80px 20px;
}

表示速度とアニメーションの負荷に配慮する

「動く波線背景」や複雑なSVGを実装する際、パフォーマンスや描画負荷への配慮が不足していると、モバイル端末でスクロール時にカクつき（フレームレートの低下）やバッテリーの消耗を引き起こす原因になります。

  • SVGパスの軽量化: デザインツール（IllustratorやFigma）から書き出したSVGには、不要なメタデータ、過剰な小数点座標、使われていないレイヤーが含まれていることが多くあります。SVGのパスデータは極力簡素化し、制御点（アンカーポイント）の数を抑えてファイルサイズを最小化してください。
  • アニメーションプロパティの選定: 波を動かす際は、レイアウトの再計算（リフロー）を引き起こすプロパティ（width、height、top、left など）ではなく、GPUアクセラレーションを活用できる transform: translateX() を必ず使用してください。
  • will-change の過剰な付与を避ける: アニメーションの滑らかさを期待してすべてのSVG要素に will-change: transform; を指定すると、ブラウザが常にGPUメモリを消費し続け、かえってモバイル端末の動作に悪影響を及ぼす場合があります。アニメーションがカクつく実測上の問題が発生した場合にのみ、対象の要素に限定して適用してください。

よくある質問

CSSだけで滑らかな波線背景を作れますか？

完全な「ベジェ曲線による滑らかなうねり」をCSSのグラデーションだけで作るのは難しいため、SVGの利用をおすすめします。

CSSの linear-gradient や radial-gradient を使うと、幾何学的なジグザグ模様や半円を並べたパターンは作成できます。また、疑似要素と border-radius を使えば大きな単一のアーチ状境界を作ることも可能です。

ただし、波のように滑らかに連続する有機的な曲線を描く場合は、ベクターグラフィックであるSVGを使うのがWeb制作における最も標準的で確実な手法です。

波線背景をセクションの境界に配置するにはどうすればよいですか？

対象セクションの上下に position: absolute で配置するか、背景画像としてセットします。

最も自由度が高いのは、セクション内に波のSVGを配置し、CSSで配置と配置順序（z-index）を制御する方法です。

.hero-section {
  position: relative;
  overflow: hidden; /* はみ出し防止 */
}

.hero-wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 1; /* コンテンツより下に配置 */
}

.hero-content {
  position: relative;
  z-index: 2; /* テキストを上に配置 */
}

この構造を作ることで、文字と波が重なっても視認性を保ちながら美しく背景をレイアウトできます。

スマートフォンでも波形をきれいに表示できますか？

はい。SVGに viewBox を正しく指定し、CSSで幅を100%・高さをレスポンシブに制御することで綺麗に表示できます。

SVGはベクターデータのため、スマートフォンの高画質ディスプレイ（Retinaディスプレイなど）でも輪郭がぼやけたりジャギーが発生したりしません。

スマホで波が縦に伸びすぎたり押しつぶされたりする場合は、CSSの max-height やメディアクエリを用いて、画面幅に応じた適切な高さを設定してください。また、preserveAspectRatio="none" を併用すると、アスペクト比を固定せずに親要素の横幅いっぱいに引き延ばすことも可能です。

波線のアニメーションを途切れずにループさせるにはどうすればよいですか？

アニメーション対象の横幅を2倍（200%）にし、自身幅の半分（-50%）だけ移動させて animation-timing-function: linear を指定します。

動きの途切れ（一瞬のカクつき）を防ぐには、以下の点を確認してください。

  1. 移動量の指定: transform: translateX(-50%); で1周期分ピッタリずらす。
  2. イージング: ease や ease-in-out ではなく、速度が一定の linear を指定する。
  3. パスの連続性: SVGのパスデータ自体が、左端と右端で周期が滑らかにつながる構造になっているか確認する。

SVGを背景に使うと表示速度は遅くなりますか？

単純な波型SVGであればファイルサイズは数KB程度と極めて軽量なため、表示速度への悪影響はほとんどありません。

ただし、デザインツールからエクスポートした生のSVGには、不要なメタデータや極端に複雑なアンカーポイントが含まれていることがあります。軽量化ツール（SVGOなど）を使ってパスデータを最適化することをお勧めします。

また、動かす場合は top や left ではなく transform プロパティを使うことで、ブラウザのGPUレンダリングが有効になり、軽量かつスムーズに描写できます。

CSSとSVGのどちらを選ぶべきですか？

作りたいデザインの「曲線の複雑さ」と「動きの有無」で判断してください。

  • CSSのみで作成: 直線的なギザギザ・チェック模様、単色の大きな弧、外部アセットを一切読み込みたくないシンプルな装飾。
  • SVGを使用: 滑らかなうねりを持つ波線、グラデーションがかった複雑な波、多層の重ね合わせ、波を動かすアニメーション表現。

迷った場合は、解像度に依存せずデザインの調整も容易なSVGの採用を推奨します。

業界最安級、実績・口コミ多数！仕事に繋がるWebスキルを身につけるなら『デイトラ』

まとめ

CSSやSVGを用いた波線背景の実装方法について、技術的な特徴や用途別の選び方を解説しました。

記事の要点を振り返ります。

  • 実装手法の選択: 幾何学的でシンプルな模様や単色のアーチ状境界であればCSS（グラデーションや border-radius）で十分に対応できますが、有機的で滑らかな曲線や多層の波を表現する場合はSVGの利用が最適です。
  • 効率的な制作: 複雑なSVGのパス座標を自力で計算するのではなく、Haikei などのジェネレーターやベクターツールを活用することで、高品質な波形データを素早く取得できます。
  • ループアニメーションの実現: SVGとCSSの @keyframes を組み合わせ、transform: translateX() と一定のイージング（linear）を指定することで、継ぎ目のない滑らかな波アニメーションを実装可能です。また、prefers-reduced-motion を用いたアクセシビリティ配慮も欠かせません。
  • 表示崩れの防止: スマートフォン表示時の最大高さの制限（max-height）、レイアウトの横揺れを防ぐ overflow: hidden、コンテンツとの重なりを制御する z-index の適切な設計が、実務における品質を担保します。

Webサイトのデザインや目的に合わせて最適な手法を選択し、コピペ可能なコードと調整方法を参考に、自身のプロジェクトへ波線背景を取り入れてみてください。

あわせて読みたい

初心者でもすぐできる！CSSだけでキラッと光るエフェクトの実践サンプル・応用技まとめ
CSSで要素や文字を「光らせる」表現をしたい方向けに、box-shadowやtext-shadowから、animationや擬似要素を使った応用まで実装方法を解説。ネオン風の文字やhover時に光るボタン、流れる光の演出など実務で使えるコード例を豊富に紹介。光るエフェクトを取り入れたい方に最適な記事です。
watashi.xyz
2025.08.16
ConoHa AI Canvas｜ブラウザだけでできる本格的なAI画像生成
タイトルとURLをコピーしました