サイトのデザインを全面的にリニューアルしました。今回の変更は大きく分けて3つの要素に焦点を当てています。
1. 記事のデザインを一新
Markdownから構成される記事デザインには、tailwind/typographyを継続して使用することも選択肢としてありましたが、個人サイトという特性を活かし、自分自身の学びを深めるため、ゼロからスタイリングを構築することにしました。
この過程で「タイポグラフィ」や「バーティカルリズム」といった概念を学習しました。文章にリズムを与えることで読者に心地よさを提供できること、そしてそのリズムを生み出すには一定の規則性が必要であることを理解しました。
しかし、理論を学んだものの、独力では満足のいくリズムを確立することができませんでした。そこで最終的には他の開発ブログ、特に「Zenn」のデザインを参考にしました。具体的には「文字サイズのジャンプ率」と「h2見出しへの下線の追加」という2点を取り入れています。
日本語コンテンツにおいては、h2見出しに下線が入ることで読みやすさが格段に向上します。これは階層構造を視覚的に把握しやすくなるためだと考えられます。
2. トップページの記事一覧デザインを刷新
yuku.devのデザインを参考にしました。ミニマルでありながら機能的なこのデザインは、自分の美学と非常に合致しています。
情報過多な記事レイアウトは読者の疲労を招きがちですが、このシンプルなアプローチは必要な情報だけを効果的に伝えることができます。
3. サイトのHeaderとFooterのデザインを最適化
よりミニマルなデザインへと移行し、要素間の比率を意識した調整を行いました。
「onigiri.w2」というサイト名がシンプルなテキストであるため、ヘッダーとして認識されるためには十分な余白が必要です。そのため、ヘッダー部分の余白を拡大しました。
同様の視点からフッターの余白も拡大し、erenのデザインを参考にしました。このサイトもシンプルさと機能性のバランスが取れており、非常に参考になりました。