フッター中級

波形イラスト装飾フッター

上辺をなめらかな波で区切り、ゆったり揺れるSVGの波を重ねた装飾的なフッター。やわらかい世界観のブランドや子ども向け・自然派サービスで、親しみのある締めくくりになります。

#footer#wave#illustrative#svg

ライブデモ

使用例（お題: カフェ MOON BREW）

この技法を「カフェ MOON BREW」というテーマのダミーサイトで実際に使った例です。

HTML

<!-- MOON BREW：やわらかな波形装飾のカフェフッター -->
<footer class="fwv">
  <div class="fwv-waves" aria-hidden="true">
    <svg class="fwv-svg" viewBox="0 0 1200 90" preserveAspectRatio="none">
      <defs>
        <path id="fwvWave" d="M0,40 C150,80 350,0 600,40 C850,80 1050,0 1200,40 L1200,90 L0,90 Z" />
      </defs>
      <use href="#fwvWave" class="fwv-w1" />
      <use href="#fwvWave" class="fwv-w2" />
      <use href="#fwvWave" class="fwv-w3" />
    </svg>
  </div>

  <div class="fwv-body">
    <div class="fwv-inner">
      <a class="fwv-logo" href="#" onclick="return false">☕ MOON BREW</a>
      <p class="fwv-tag">夜にひらく、珈琲店。</p>
      <nav class="fwv-nav">
        <a href="#" onclick="return false">メニュー</a>
        <a href="#" onclick="return false">豆を買う</a>
        <a href="#" onclick="return false">店舗</a>
        <a href="#" onclick="return false">物語</a>
      </nav>
      <div class="fwv-sns">
        <a href="#" onclick="return false" aria-label="Instagram">◐</a>
        <a href="#" onclick="return false" aria-label="X">𝕏</a>
        <a href="#" onclick="return false" aria-label="note">✎</a>
      </div>
      <span class="fwv-copy">© 2026 MOON BREW</span>
    </div>
  </div>
</footer>

CSS

/* MOON BREW（カフェ）：波形イラスト装飾フッターの再スキン */
* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", system-ui, -apple-system, sans-serif; }

.fwv { width: 100%; min-height: 380px; display: flex; flex-direction: column; background: #f7f1e7; }
.fwv-waves { position: relative; height: 90px; line-height: 0; }
.fwv-svg { width: 100%; height: 90px; }
.fwv-svg use { transform-origin: center; }
.fwv-w1 { fill: rgba(192, 142, 86, .4); animation: fwv-move 9s ease-in-out infinite; }
.fwv-w2 { fill: rgba(176, 122, 63, .7); animation: fwv-move 7s ease-in-out infinite reverse; }
.fwv-w3 { fill: #5a3a1c; animation: fwv-move 11s ease-in-out infinite; }
@keyframes fwv-move { 0%,100% { transform: translateX(0) translateY(0); } 50% { transform: translateX(-40px) translateY(4px); } }

.fwv-body { flex: 1; background: #5a3a1c; color: #f3e8d8; display: grid; place-content: center; text-align: center; padding: 10px 24px 30px; }
.fwv-inner { max-width: 520px; }
.fwv-logo { font-size: 24px; font-weight: 800; color: #fff; text-decoration: none; }
.fwv-tag { margin: 8px 0 18px; font-size: 13px; color: #d9c4a3; font-family: "Hiragino Mincho ProN", serif; }
.fwv-nav { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; }
.fwv-nav a { color: #f3e8d8; text-decoration: none; font-size: 13.5px; font-weight: 600; padding: 4px 0; border-bottom: 1px solid transparent; transition: border-color .2s ease; }
.fwv-nav a:hover { border-color: #e0c79a; }
.fwv-sns { display: flex; justify-content: center; gap: 16px; margin: 18px 0 14px; }
.fwv-sns a { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; text-decoration: none; font-size: 14px; transition: background .2s ease, transform .15s ease; }
.fwv-sns a:hover { background: rgba(255,255,255,.28); transform: translateY(-2px); }
.fwv-copy { font-size: 12px; color: #c2ad92; }

@media (prefers-reduced-motion: reduce) { .fwv-svg use { animation: none; } .fwv-nav a, .fwv-sns a { transition: none; } }

実装ガイド

使いどころ

やわらかい世界観のブランド、子ども向け・自然派・カフェなどのサイトに。上辺をなめらかな波で区切り、ゆれるSVGの波を重ねた親しみのあるフッターです。

実装時の注意点

1つの波パスを use で3層重ね、塗りの濃淡と translate アニメーションの速度・向きを変えてパララックスを出します。波の下は同色の本体で、境目が自然につながります。

対応ブラウザ

SVG の use・transform アニメーションは全モダンブラウザ対応（use は href 属性を使用）。CSS のみで JS 不要です。

よくある失敗

波パスの両端が本体色と一致していないと境目に隙間が出ます。preserveAspectRatio:none で横に引き伸ばすため、極端な縦横比でも崩れないか確認を。アニメーションは控えめにして酔いを防ぎます。

応用例

波の色や本数の変更、上下に波を付ける、スクロールで波が動く、波を山型やジグザグに変えるなどの装飾展開ができます。

コード