ウェブサイトをリニューアルした

突然だが、ウェブサイトをリニューアルした。

4 年前に「月に 1 本は書くぞ〜」と豪語したのに、結局書けたのは片手で数えるどころか 1 本である。約束は守れない方の人間だ。それでもこのドメインだけは更新料を払い続けてきたので、せめて器ぐらいは綺麗にしておきたい。

ウェブサイトの誕生 のときは、Notion をヘッドレス CMS にして OSS テンプレートに乗っかった。気軽に書ける反面、デザインは「OSS のまま」で、4 年経っても自分のものになっている感じがしなかった。AI に背中を押されたこともあって、今回は一から書き直すことにした。

ヘッダーをやめた

リニューアルで一番悩んだのはヘッダーだ。サイトの一番上にナビがあるのは「礼儀」みたいなもので、無くすと不安になる。けれど、ロゴ＋メニューが乗っていると、それだけで一気に「業務的」になってしまう。

割り切ってヘッダーを完全撤去し、Notes / About / RSS は全部フッターに移した。何もない上の余白の方が、自分にとっては大事だった。

葉影、シェーダーから動画へ

トップに置きたかったのは、白い壁の上で葉影がゆっくり揺れる背景だった。最初はかっこつけて WebGL から書こうとした。

ogl で fragment shader を書き、fbm ノイズで葉のシルエットを procedural に生成しようとした。出力は「煙」になり、パラメータをいじると今度は「顕微鏡で見た微生物」になった。手を動かすほど主張が強くなって、侘び寂びから遠ざかっていく。

途中で procedural に作るのは諦めた。実物の葉影が風で揺れている動画を、<video> で mix-blend-mode: multiply で薄く重ねるだけ、に切り替えた。

// components/leaf-shadow-video.tsx (抜粋)
<video
  src="/video/leaf-shadow.mp4"
  autoPlay muted playsInline loop
  style={{
    objectFit: "cover",
    mixBlendMode: "multiply",
    opacity: 0.3,
  }}
/>
TypeScript ReactLines: 10UTF-8

素材は Pexels で見つけた CC0 の葉影動画を、ffmpeg で 720p / グレースケール / シームレスループ加工した 400KB ほどの MP4。xfade で末尾と先頭を 1.5 秒重ねるとループの継ぎ目がほぼ見えなくなる。

ffmpeg -i leaf-cut.mp4 -filter_complex \
  "[0:v]split=2[a][b];[b]trim=start=0:end=1.5,setpts=PTS-STARTPTS[head];\
   [a][head]xfade=transition=fade:duration=1.5:offset=8.0[v]" \
  -map "[v]" -an -c:v libx264 -crf 28 -movflags +faststart \
  public/video/leaf-shadow.mp4
BashLines: 5ASCII

procedural で出来ない領域を体感したから、「実物を薄く重ねるだけ」という落としどころに納得できた。WebGL で書いていた数日が無駄だったかというと、そうでもない。

「月に 1 本」は前回も果たせなかったけれど、書く理由を見つけ直したい気はしている。