ブログデザインを刷新！

前の記事で SSG を Zola に移行した話を書いたのですが、
移行するついでにブログのデザインも刷新したので、今回はそこらのお話を。
技術的な話とかではなく、何を考えて今のこのデザインになったのかという ポエム です。

移行前ブログのデザイン

まずは移行前を載せておきます。

一応ダークモードにも対応していて、その場合はこんな感じです。

新しいデザイン

移行に伴いデザイン刷新を行なったのが今見ているであろうデザインです。
（またデザイン変えるかもなのでこっちもスクショを貼っておく 笑）

だいぶシンプル・スッキリしましたね！？
そう、デザインを刷新するにあたってのテーマは「なるべくシンプルに！スッキリと！」なのです。
その点からも満足な結果になったと思っています。

ライトモード・ダークモードデザイン対応をやめる

今回はダークモード・ライトモードのデザイン対応はしませんでした。
対応しないという理由は単純にめんどくさいと思ったからです。かかる労力を押し切れる以上の動機を思いつかなかったのです。

その場合、どっちよりのデザインをやろう🤔となるのですが、
ライトモードの人が黒背景のページを見るのは特段なにもないけれど、
ダークモードの人が白背景のページを見た時は結構目が痛い（特に暗めの照明のなかでみていると...）という実体験から
1つにするならダークモードよりのデザインでしょうと判断しました。

配色

移行前はちょっとポジティブな印象を出したいとか、あまりみないような？のを採用したくてオレンジを primary color に設定したのですが、
新しい方では、primary を水色系に、accent にピンク系、そして background にダークモード寄りのデザインにすると決めていたので黒系と...
（配色の割合的に primary というより accent その1とその2かもしれない 笑）

おわかりですね？ ミクさん 配色にしました。（ドヤッ

個人的にこの配色がだいぶ好きなのです。採用の理由はそれだけです（笑）
どうせメンテするなら個人の好み丸出しのほうが熱量つづいていいですよね。

画像を極力排除

以前のデザインだと、大きめのロゴがヘッダー中心にあったり（途中から削除しましたが）、アイコン系の素材もいくつかつかっていたのですが、
今回はそこらを極力排除して、ヘッダーのロゴ的なものしかデザインとしては使っていません。

この事と、パッと見の配色が2色（accent のピンク系はリンクの hover で使っているので表立っては見えない）で構成されているのが相まって、見た目的にだいぶシンプルな印象になっているかと思います。

js を排除

以前のデザインでは、ヘッダー部分を固定してスクロールに合わせてそこにタイトルや記事シェアボタンなどを配置し直すということをしたり、
フッター部分には1ページ分余分にスクロールできるようにして、最後まで行くとアニメーションで表示させるなどと、少しだけ凝ったことをしていました。

この文字が svg の path にそってアニメーションで表示されます（笑）

今回はそういう装飾的なものを一切排除しました。
さらに、以前は AddThis や Disqus さらには、Smooch など外部サービスの埋め込みも行なっていましたが、そちらも一切合切排除しました。

ちなみに AddThis は右上のシェアボタン群をよしなにデザイン・使用の計測をしてくれるサービスで、Disqus はブログなどに埋め込めるようなコメントサービスです（これはいろいろなページで使われていると思います）。そして、Smooch は右下にあるチャットサービスの埋め込みです。
（必要だから！っていうより「へーこんなのあるんだ！」と気軽にポンポン採用していった記憶 汗）

話を戻して。
その結果、今回 js は Google Analytics のみになりました。
まぁ Analytics も別に計測して人気の記事を書くとかそういうことはしていないので、いらないっちゃいらないのですが、たまにどんな記事が一番見られてるのかなと振り返ってニヘッと笑うこともあるので残しました（笑）

ちなみに現在人気の記事は NieR Automata のプレイ記事です...テック系ブログじゃなかった...多分レプリカントが発売されて NieR がまたもりあがってるからだと思います...

....ということで！！中身もだいぶスッキリさせることに成功しました。

これで シンプル・スッキリの達成です！ 😤

外部サービスの埋め込み js を排除したというのが大きく寄与していると思いますが、ページスピードを計測した結果、90+ のハイスコアを叩き出しています。

以前は確か、60-70 ぐらいだったと思うので大幅改善ですね。
狙っていたシンプル・スッキリに加えサクサクも加わりホクホクです☺️