ポートフォリオのメインビジュアルに波を追加。

ポートフォリオサイトのメインビジュアルに、
企業サイトなどでよく見かける「波のデザイン」を追加したい！と考えた。

最初はCSSで波を作ろうとしたけど、思うように馴染まず、最終的にSVGを使うことに。

CSSで波を作成

.wave {
  position: relative;
  height: 70px;
  width: 100%;
  background-color: #2f3b34;
}

.wave::before,
.wave::after {
  content: '';
  display: block;
  position: absolute;
  border-radius: 100% 50%;
}

.wave::before {
  width: 55%;
  height: 109%;
  background-color: #fff;
  right: -1.5%;
  top: 60%;
}

.wave::after {
  width: 55%;
  height: 100%;
  background-color: #2f3b34;
  left: -1.5%;
  top: 40%;
}

.wave::before 白いカーブで波の形を演出

.wave::after 補助のカーブでデザイン調整

この時、色を調整しようとすると、

::before の白波 と ::after の重なりが目立つ場合がある。

SVGに変更

SVGとは？

SVG（Scalable Vector Graphics）は、コードで描く絵・図形のこと。

<path d="M0,0 C50,100 150,0 200,100" />

d="..." の部分は、「どこからどこに線を引くか」を指定している部分。

• M = Move（スタート位置）
• L = Line（直線を引く）
• C = Curve（カーブを描く）

数字は、座標（位置）を表している。
もし手軽にSVG波を作りたい場合は、SVG波ジェネレーターというサイトを使うと便利。

まずはSVGの波をCSSを使って自然に馴染ませる方法を試した。

.wave-mask {
  position: relative;
  margin-top: -5px; /* 少しかぶせる */
  mask-image: linear-gradient(to top, black 95%, transparent);
  -webkit-mask-image: linear-gradient(to top, black 95%, transparent);
}

• SVGの上部をグラデーションで透かす
• 動画とSVGが少しかぶるように配置する
• mask-image: 95% にすることで、上の5%だけ透けさせる

この方法で
「動画の真下に波を貼り付けたい」と考え、
.video-wrapper の中に .wave-svg を入れる配置にしてみた。

うまくいかず、HTML構造を修正

ただ、グラデーションの色がうまく馴染まなかったり、波の位置調整が難しくなったため、HTML構造を見直すことにした。

• 波（.wave-svg）を動画の中に入れない
• 動画の外に置きつつ、マイナスmarginでかぶせる
• 動画に直接重ねず、下からくっつけるイメージ

CSSもシンプルに整えた。

.wave-svg {
  position: relative;
  margin-top: -50px; /* 波を少しかぶせる */
  width: 100%;
  height: auto;
  z-index: 2;
}

.wave-svg svg {
  display: block;
  width: 100%;
  height: 100px;
}

あわせて見直したこと

• mask-image や filter を使わない → 透明事故防止
• height: 100px を明示 → 波が表示されないバグ防止
• z-index を調整 → 動画より波を手前に出す

波が復活！でも新たな難しさが…

波自体はきれいに表示できたが、
動画は色が毎秒変わるため、波の色を合わせるのがとても難しかった。

静止画に合わせるより、動画に合わせるほうが何倍も調整が大変だと感じた。

対策としてやったこと

• 動画に黒フィルターをかける
• 波にグラデーションマスクをかけてフェードアウトする

.wave-svg {
  mask-image: linear-gradient(to top, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to top, black 90%, transparent);
}

動画という特性上、完璧に違和感をなくすことは難しかったけれど、波と動画の境目を自然に馴染ませることには成功した。

まとめ

最初は簡単に考えていた波の演出だけど、実際にやってみると、
HTML構造やCSS細かい設定、動画特有の難しさがあって、とても勉強になった。