【実装】ブログのUI/UXを30項目以上改善した全記録 — Zenn/Qiita/dev.toを参考に

概要: Zenn/Qiita/dev.toを3サイト分析し、50件以上の改善候補からDB不要の30件以上を実装。コードブロックのライト/ダーク対応、RSS、OGP動的生成、PWAまで。

はじめに#

個人技術ブログを主要プラットフォームと比較してUI/UXの差を埋めた記録。

1. コードブロックのライト/ダーク対応#

元々github-dark-dimmedテーマのみでライトモードでも暗い背景だった。CSSの.darkプレフィックスでテーマを分離:

/* Light: GitHub Light */
.hljs { color: #24292e; background: #f6f8fa; }
.hljs-keyword { color: #d73a49; }

ダークモード用:

/* Dark: GitHub Dark Dimmed */
.dark .hljs { color: #adbac7; background: #22272e; }
.dark .hljs-keyword { color: #f47067; }

CopyボタンはDOM操作でpreタグに注入、言語ラベルはCSSの::beforeで自動表示。

2. サイドバーSP対応#

SPではgrid-cols-2のグリッドに変更。最新記事は横スクロールカード、カテゴリ/アーカイブは2カラム横並び、タグは15件以上で折りたたみ。

3. 記事詳細の機能追加#

• 読了時間: 文字数/600で計算
• 更新日表示: createdAtとupdatedAtが異なる場合に表示
• 前/次ナビ: allPostsからindex計算
• 画像lightbox: クリックで全画面拡大
• 著者カード: 記事末にプロフィール表示
• はてブ/Pocket: シェアボタンに追加

4. SEO・アクセシビリティ#

RSSフィード、OGP動的生成、PWA、スキップナビ、フォーカスリング、テキスト選択色を追加。

5. その他#

検索ハイライト、NEWバッジ、見出しアンカー、外部リンクアイコン、Aboutタイムライン等。

Tips#

参考リンク#

• Zenn
• Qiita
• DEV Community
• Notionブログのレイアウト崩れ対策（別記事）
• SEO完全対策 — sitemap動的生成からAI検索対応まで（別記事）

まとめ#

• 3サイト分析で50件+の改善候補を特定、30件+を実装
• ライト/ダーク対応が最も効果大
• OGP動的生成とRSSでSNSシェア時の見栄え向上