CSSに熱狂した結果、全部消した

2026/05/15

先日、#CSS_findy に参加しました。

そこでCSSの熱気を思い返し、このブログサイトもリッチにしてやるぞーと燃えました。

カーテンアニメーションを実装してみた

そこで取り入れようと思ったのはカーテンアニメーション。下記のようなカーテンアニメーションを実装してみたいなお願いをCodexに投げて実装してもらいました。そのデモが下記の通り。

最初はおーいーじゃん、文字もカーテンアニメーションで切り替わっててかっこいい…！って思いました。しかし、ブログを自分で巡回しているうちに、あれ、なんか重くない？鬱陶しくない？って思いました。アニメーション速度も違和感のない程度まで上げましたが、どうしてもノイズになりました。

当初大切にしていたこと。それは爆速のブログサイトを構築することでした。確かに処理自体は重くないのですが、このワンクッションが画面を重たく見せてしまいます。

じゃあこれならいいんじゃないかと取り入れたのがフェードインするアニメーション。（下記の通り）

これならいい感じ！だったのですが、ブログ記事内では、記事の読み込みが一瞬発生するせいか点滅するように見えてしまうのでした。これはサイトが重いような印象を与えるためボツにしました。

色々試した結果、元の通りに戻りました。せっかく作ったのに勿体無い…という気持ちもあったのですが、増やすことよりも捨てる勇気がUIで大切だったりすると思います。多分。

最近ミニマリズムがマイブームでして、とにかく部屋のものを捨てまくってるんですが。捨てるコツは、せっかくお金をかけて買ったのに、捨てるのは勿体無い・・・と思わないことです。これも同じだと思います。

同じ失敗を繰り返さぬよう、DESIGN.mdを作成してこのブログサイトブランドイメージを記述しておきました。あとトークンの使い方も明記しました。

DESIGN.mdについて興味深い記事があるので貼っておきます。

嫌なUIを書いておくことも大切なんだとか。そう思う。