xyz-log v4.0 リリースノート

開設から3年。v4.0では見た目を一新しました。

アップデートの背景

v3.0までのデザインは、開設当初から大きく変わっていませんでした。

• 情報量が多く、読みにくい
• 視覚的な統一感の欠如
• モバイル対応が不十分

「読むこと」に集中できる、クリーンなデザインを目指してリニューアルしました。

v4.0 の新機能

デザインリニューアル

コンセプト: Less is More

余計な装飾を削ぎ落とし、コンテンツを際立たせるミニマルなデザインに刷新しました。

• タイポグラフィの見直し: 可読性を重視したフォント選定
• 余白の最適化: 情報の密度を下げ、読みやすく
• カラーパレットの統一: Zinc系のニュートラルカラーをベースに
• アクセントカラー: Tealを採用し、リンクやボタンを明確に

ダークモード

待望のダークモードに対応しました。

• 3つのモード: ライト / ダーク / システム設定に追従
• トグルボタン: ヘッダーからいつでも切り替え可能
• 設定の永続化: 次回訪問時も設定を記憶

目に優しく、夜間の閲覧も快適になりました。

読書進捗バー

ページ上部に、スクロール位置に応じた進捗バーを表示するようにしました。

• 記事の長さを視覚的に把握
• 読了までの目安がわかる
• 達成感のあるUX

閲覧履歴

過去に読んだ記事を自動で記録し、一覧表示できるようにしました。

• ローカルストレージに保存
• 最大50件まで記録
• 履歴のクリア機能

「あの記事どこだっけ？」を解消します。

目次の自動生成

記事の見出しから目次を自動生成し、サイドバーに表示するようにしました。

• H2、H3を抽出
• クリックで該当箇所へスムーズスクロール
• 長い記事のナビゲーションに便利

デザイン変更のポイント

Before / After

モバイル対応の強化

• ハンバーガーメニューの改善
• タッチターゲットの拡大
• 横スクロールの排除

技術的な変更

• Astro 4.0 へのアップグレード
• View Transitions API の実験的導入
• CSS変数によるテーマ管理

次のステップ

• 多言語対応（日本語/英語）
• PWA対応強化
• 構造化データの拡充

新しくなった xyz-log を、引き続きよろしくお願いします。