mizuame.dev をはじめました
2026-07-04
ブログをはじめました。ここでは開発の話や、作ったものの裏話、小ネタなどを気ままに書いていく予定です。
水色にした理由
2026-07-01
サイトのテーマカラーを水色にしました。mizuame という名前から着想を得て、水飴のような透明感のある色合いを意識しています。
View Transitions API がおもしろい
2026-06-27
ページ遷移のときに背景の水玉がふわっと分裂して移動するアニメーション、実はほとんど CSS だけで実現しています。同じ view-transition-name を複数ページで揃えるだけで、ブラウザが勝手にいい感じの補間をしてくれるのが面白くて最近ずっと触っています。
ブロブアニメーションの作り方
2026-06-20
border-radius を4つの値でランダムっぽく変化させ続けると、あの「ぷにょぷにょした水玉」が作れます。回転とスケールも一緒に animate すると、より有機的な動きになって水飴っぽさが増しました。
Astro + Bun に移行しました
2026-06-14
素の HTML を手書きしていたこのサイトを Astro + Bun 構成に移行しました。見た目や挙動は変えずに、ビルド周りだけ整理した形です。記事の追加も Markdown を置くだけになって、だいぶ書きやすくなりました。
goo フィルターでカーソルをとろとろにする
2026-06-05
SVG の feGaussianBlur と feColorMatrix を組み合わせると、複数の丸がくっついて溶け合うような表現ができます。カーソルに追従する水滴っぽいエフェクトはこれで作りました。タッチデバイスではカーソルという概念自体がないので、pointer: fine のときだけ出すようにしています。
水飴という名前について
2026-05-22
mizuame というドメイン名、特に深い由来はないのですが、なんとなく口に出したときの響きが好きで選びました。透明感があって、ちょっと粘度のある感じが自分の作るものの雰囲気に合っている気がしています。
個人サイトを持つ理由
2026-05-10
SNS だと流れていってしまう話や、ちょっとした実験、作ったものの記録を置いておく場所が欲しくて個人サイトを作りました。誰かに読まれることよりも、自分用のメモ帳に近い感覚で更新していくつもりです。
小さい実験を積み重ねる
2026-04-30
このサイトのトップページはこれまでにいくつもパターンを試してきました。丸文字フォント、波のアニメーション、カーソル追従エフェクトなど、うまくいかなかったものも含めて全部が今の形につながっています。作っては壊してを繰り返すのが結局いちばん近道な気がしています。
水飴色のグラデーションの作り方
2026-04-18
サイト全体で使っている水色のグラデーションは linear-gradient(135deg, #c2eeff, #7ed4f5 60%, #aee9ff) というシンプルな指定です。中間色の位置を少しずらすだけで、単調にならずに奥行きのある水色になります。