ブログのデザインを刷新した
このサイトのデザインを刷新しました（1 年半ぶり 2 回目）。
変更した理由
最近 Vercel のエンジニアが開発している Nextra という静的サイトジェネレーターをよく見かけるようになりました(出来たばかりのツールではなく、自分が意識的に見るようになったという意味)。このツールで実装できるサイトのダークモードデザインがめちゃくちゃ好きで憧れがありました。
また Vercel の CEO が次のようなツイートをしています。
これは最近の Server Actions がフロントエンドエンジニアとバックエンドエンジニアの境界が曖昧になっていくことの示唆ですが、ついでにデザインとエンジニアリングの境界もまた曖昧になっていくことに言及しています。
僕はこの考えにとても共感しています。というのも前からずっと、Web デザインはエンジニアがやるべきと感じていたからです。
Web デザインは単なるお絵描きやパズルゲームではなく、UI としての操作性の担保や HTML の意味を理解した上で行う必要があります。また、特に Web アプリケーションではその画面やアプリ全体で扱うデータ構造を理解していないと、後から「こんな値取れないんだけど」となる可能性があります。これらを正確に理解しているのはエンジニアサイドなので、エンジニアがデザインもできるべきだと考えます。
といってもある日突然デザインセンス ◯ がつくわけでもないので、練習のために何度も自分のブログサイトを改造しています。
こだわりポイント
ダークモードとライトモードのコンセプト違い
先述の通り Nextra のダークモードデザインがかなり好みなので、自分のサイトのダークモードデザインも Nextra のドキュメントサイトや Nextra を使って実装されたサイトを参考に色遣いを考えました。めちゃくちゃかっこよくデザインできたと思います。
一方でライトモードデザインも Nextra を参考に試行錯誤しましたが、あまりしっくり来ませんでした。そこで、ライトモードについてはダークモードとはまったく印象が異なる色合いやデザインコンセプトにすることにしました。
ダークモードは Nextra インスパイアのクールなブラックですが、ライトモードはコントラスト強めのキャッチーなデザインになっています。あまり使用頻度の高くないカラーモード切り替えスイッチですが、押すのが楽しくなりますね。ページの最下部にカラーモードの切り替えスイッチを設置しているのでテーマを切り替えて違いを感じてみてください。デフォルトは OS に従う設定になっています。
特にヘッダーの違いにはこだわりました。ヘッダーは position: sticky で貼り付いているのでコンテンツに重なっているのですが、ライトモードのときは背景は白色塗りつぶしでダークモードのときは透けた黒色になっています。この違いはそれぞれのテーマの違いを強く表現できていると思います。めっちゃ良くない？良い。
記事一覧のサムネイル
記事一覧のサムネイルには Twitter などでシェアされたときに表示される og:image を流用しています。og:image は Next.js の標準機能の opengraph-image.tsx で画像を生成しています。それもあってテーマカラーによる出し分けはできません(クエリパラメータ使えばできるのかな？)。
og:image はぱっと見はブラック背景ですが、よく見るとパープルのグラデーションがわずかに含まれています。ライトモードで見ると背景はほとんど黒一色にしか見えませんが、ダークモードで見るとパープルが滲んで見えてとてもかっこよいです。めちゃくちゃ気に入っています。
フォント
フォントは Next.js の next/font を使って、Google Fonts の Inter と Noto Sans JP を適用しています。
Inter は Vercel がよく使っていて create-next-app のテンプレートにも使われています。Nextra っぽさというか Vercel っぽさを出したかったので採用しました。
Noto Sans JP は脳死で採用しています。それ以外に良い日本語フォントを知らないだけです。
技術的な話
Nextra 未使用
Nextra っぽさはもちろん出したかったのですが Nextra は使っていません。ブログは自作したほうが楽しいので。
ただ、ライブラリ等のドキュメントサイトを構築する機会があれば絶対に採用したいと思っています。MDX ビルドが標準搭載されていて見た目もかっこいいサイトをサクッと構築できるのは良いですね。
スタイリング方法
Next.js App Router 移行のタイミングで CSS Modules にしていましたが、その後 Tailwind CSS にハマり、このブログも Tailwind CSS で書き直したいなと思っていました。が、それはやらずに引き続き CSS Modules でデザインを刷新しました。
その理由は Tailwind CSS のダークモードの使い勝手が肌に合わないためです。今回はテーマによって大きく色や場所によってはボーダーの太さなども変更するので、1 つのファイルですべての色のパラメーター設定ができるようにしたかったのです。しかし Tailwind CSS はユーティリティファーストなので、ダークモードもクラスの文字列で表現されて HTML に渡されます。
<p className="text-primary dark:text-primary-dark">Themed Paragraph</p>テーマによって文字色を変更したい箇所全てでこの書き方をする必要があります。以前、 text-primary だけ渡しておいてダークモードかライトモードで勝手に文字色が変化するようにできないか調べたことがありますが、Tailwind CSS が意図していない hacky なやり方しかできなさそうだったので諦めたことがあります。hacky が嫌い。
ということで CSS Modules でテーマカラー次第で CSS Variables を書き換える方法を採用して、1 つのファイルで色の管理が完結できるようになりました。リポジトリでは次のファイルがそうです。
まとめ
ブログのデザインを刷新しました。また飽きたら大きく変えるかもしれません。その度にデザインの練習になって楽しいですね。
記事の最後なのでフッターにあるカラーモード切り替えスイッチが近いですね。押してみてください。楽しいぞ。
それでは良いブログライフを！