白い画面を見ていると目が疲れるようになってきました、最近。
そんなわけで幣ブログもそろそろダークモード対応をしようかと思いました。
普通にこれまでのデザインのまま暗いバージョンを作る、みたいな感じにしようとすると全然うまくいかないっぽい気がしたのでいっそのこと丸っと見た目を変えようかなと思い立って色々やってみました。
できた
モードの違いで白と黒が逆転するだけのそれをダークモードと呼んでいいのかというのはちょっとわからないですが。
ちなみにロゴのフォントはこちらを使用させていただいております。
Shotaro V3 - Alphabet & Katakana (Version3.0)
以降、細かいやったことをつらつらと並べていきます。
やったこと
全体的に落ち着かせた
これまでは遊びを出してアニメーションやらグラデーションやらを入れていたのですが、ちょっと目が痛いのでそういうのは全てやめました。
また、リンクには全てデフォルトでアンダーラインが引かれるようにしたり、ホバーしても何かが変わることがないようにしたり(ロゴとかは別)など、強めに落ち着きをアピールしています。
ダークモード対応
対応しました。
基本は OS の設定に従うようにしていますが、ページの一番下までスクロールするとサイトのモードを変える UI を置いてあります。頻繁に触るようなものでもないので一番下に置きました。
いろんなメディアを見てみると、サイト内で変更できるようにはせずに OS の設定に従うだけのものも多かったのですが、動作確認がめんどくさいためこのサイトはダークモードだけどこのサイトはデザイン的にライトモードの方が見やすい、みたいなことが僕はちょいちょいあるので、サイト内で変更できるようにしました。
初期値は OS の設定を反映させつつ、手動で変更した設定は LocalStorage に保存するようにしています。
フォントサイズを大きくした
前のデザインはわりと文字が小さめで読みづらかったので大きくしました。
あとフォントに関して言うと、 font-family を system-ui, sans-serif にして、 OS に任せることにしました。これは社の同僚の影響を受けています。
タグを精査して日本語表示にした
タグというのはこの記事にもついている「#日記」とかのタグ付けのことです。
これまでは雑に #react とか #redux とか #javascript とか気ままにつけていましたが、だんだんとっちらかってきたので精査してタグというよりはカテゴリっぽい感じの意味づけになるようにまとめました。
あとはアルファベットでそのまま出していたシステム的なネーミングもやめて日本語に紐づけるようにしています。
Google Analytics を入れた
これはなぜか今まで入れてなかったのですが、ようやく入れました。
ちょっとはまったのが、僕は全然知らなかったのですが今の GA って Google Analytics 4 というバージョンになっていて、これまで Gatsby において一般的な GA のプラグインである gatsby-plugin-google-analytics が使えなくなっており、 GA4 にも対応している gatsby-plugin-google-gtag を使いました。
トラッキング ID が UA-XXX とかではなく G-XXX という形式になっていたり結構変わっていました。
IE を考慮から外した
これはまあどうでもいい話なのですが、 IE で動作確認をするのをやめて IE を考慮せずにコードを書きました。
やってないこと
以降はまだやれていないけどやっていきたいので順次対応していくことです。
キーボード操作・ WAI-ARIA 対応
これを全て対応した上で今回の変更を公開するかどうか迷ったのですが、時間がかかりそうだったので公開後にやっていくことにしました。
勉強がてらにやっていこうと思います。
コンテンツ最適化
例えば画像とか PC やスマホの違いなど考慮せずにそのまま出しているだけだったり、そういう細かい記事の中身の最適化ができていないので対応していきたいです。
パフォーマンス最適化
Gatsby で SSG してるのでそもそもあまり問題もないのですが、 Service Worker なども入れていきたいですね。
基本的には Gatsby だとプラグイン入れるだけで終わりそうなのですが、個人的にここらへんの理解が浅いのが課題ではあるので理解しつつ進めようと思います。
おわりに
仕事だとスタイルをずっと styled-components でやっていて、今回は CSS Modules でやったのですがネストができなくて困って postcss-nesting を入れたり、ネストした際の正式な書き方がわかんなかったり(styled-components のそれは仕様から外れても大丈夫で緩い)、 CSS の変数の書き方を完全に忘れていたり、普通の CSS を書くのが以前よりだいぶしんどく感じるようになってしまったなと思いました。
さりげにブログのタイトルも変えているのですがこれは以前のブログのタイトルが恥ずかしかったからなので最後にちょこっとだけ触れることにしました。
おわり。