プロフィールサイトsunoho.comをリニューアルしました

f:id:sunoho:20200930192457p:plain
プロフィールサイトとかパーソナルサイトとかポートフォリオとかホームページとかよばれるあれをリニューアルしました。
sunoho.com

やりたかったこと

必要な情報にさっとアクセスできること以上にウェブサイトに重要なことはなく、この世のすべてのウェブサイトは阿部寛のホームページになるべきと思っているタイプのインターネットおじさんなのですが、令和にもなってそんなことばかり言っててもな…みたいな気持ちもあり、それならと前々から気になっていた 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 なのできっと大丈夫。

年に二、三回しか更新しないサイトなので次回の更新時にキャッシュの更新を忘れて反映されない~って泣いてる自分が見えます。

その他
  • Noto Sans JP を正式版にしたらめっちゃ速くなった
  • ボケっとしてたら CSS ファイル単体で 500 KB くらいになった
    • なんやかんやで半分まで減らしたけど十分でかい
    • 5G なので大丈夫
  • iOS 13 からスクロールバーをいじる系の CSS が効かなくなってた
    • それどころかスクロールバーが表示されない
  • スプラッシュ画面のアニメーションにウェイトを入れたせいで Google PageSpeed Insights のスコアが真っ赤になった
    • なにが SEO だ知るかバカ