xyz-log.
BACK TO TOP
Info / 2024-10-15 / 2 min ...

xyz-log v4.0 リリース - デザインリニューアル & ダークモード

ZOLXA

ZOLXA

Mastermind

xyz-log v4.0 リリース - デザインリニューアル & ダークモード

Sponsored

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

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

アップデートの背景

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

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

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

v4.0 の新機能

デザインリニューアル

コンセプト: Less is More

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

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

ダークモード

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

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

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

読書進捗バー

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

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

閲覧履歴

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

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

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

目次の自動生成

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

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

デザイン変更のポイント

Before / After

項目BeforeAfter
背景色純白オフホワイト + 微細なノイズ
フォントシステムフォントInter + JetBrains Mono
カードデザイン影ありボーダー + 微細な影
ヘッダー固定なしSticky + Blur

モバイル対応の強化

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

技術的な変更

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

次のステップ

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

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