プロフィールサイトとかパーソナルサイトとかポートフォリオとかホームページとかよばれるあれをリニューアルしました。
やりたかったこと
必要な情報にさっとアクセスできること以上にウェブサイトに重要なことはなく、この世のすべてのウェブサイトは阿部寛のホームページになるべきと思っているタイプのインターネットおじさんなのですが、令和にもなってそんなことばかり言っててもな…みたいな気持ちもあり、それならと前々から気になっていた CSS アニメーションに挑戦してみようと思ったのが発端でした。
加えて、リニューアル前がモバイルファーストで縦長ページな作りだったので揺り戻しでパソコンファースト（？）でワンページな作りにしました。
やったこと
CSS アニメーション
動きはすべて CSS で作り、タイミングの調整を JavaScript でやっています。本当は JavaScript を一切使わないで仕上げたかったのですが、どうせアクセス解析入れるじゃんと気がつきどうでもよくなりました。インターネットおじさんはデザインのための不要なマークアップにも否定的な立場だったのですが、令和なので空 <div> 100 連発とかやってます。レンダリングが遅くなるかと思ったけどそんなこともなく。令和すごい。
CSS アニメーションをやっていて痛感したのは動画的な見せ方の知識が僕にまるでないということで、ウェブ制作にも動画の知識が必要な時代か～と思いました。来年はバーチャルユーチューバーになります。
Pug & SaSS
デザインを決めた時点で空 <div> 100 連発する必要がありそうだったので Pug を使ってみたものの、空 <div> 100 連発以外の部分であまりメリットを感じられず途中で放棄しました。Pug に合わせて Sass (SCSS) も初めて使いました。セレクタを最短距離で引けるよう記述することで少しでも高速に…みたいな時代のインターネットおじさんにはネストから生み出される無駄に隔世の感を覚えます。どうせコンパイルするならもっと賢くやってほしい。mixin が使えるのは便利でした。
アニメーション png
キラッと光るバナーを CSS で実装したところやたら重たくなってしまったのでアニメーション png にしました。Safari がサポートして、LINE スタンプが採用して、いよいよ Chrome がサポートして、もうええんちゃうか。しかし圧縮 png から生成した apng より無圧縮 png から生成した apng の方が軽くなるなどとてもむずかしいです。調べてもよくわかりませんでした。
CDN
index.html にすべてのコンテンツを詰め込んだためロードが激重になってしまい Cloudflare に泣きついてみました。思ったほど速くはなりませんでしたが 5G なのできっと大丈夫。年に二、三回しか更新しないサイトなので次回の更新時にキャッシュの更新を忘れて反映されない～って泣いてる自分が見えます。
