設定・環境構築
【実装】ブログのUI/UXを30項目以上改善した全記録 — Zenn/Qiita/dev.toを参考に
Share
概要: Zenn/Qiita/dev.toを3サイト分析し、50件以上の改善候補からDB不要の30件以上を実装。コードブロックのライト/ダーク対応、RSS、OGP動的生成、PWAまで。
はじめに
個人技術ブログを主要プラットフォームと比較してUI/UXの差を埋めた記録。
この記事でわかること
-
主要ブログのUI/UX機能比較
-
コードブロックのライト/ダーク対応方法
-
RSS/OGP動的生成/PWAの実装
-
DB不要で実装できる機能一覧
対象読者
-
個人ブログのUI/UXを改善したい方
-
Next.jsでブログを運用している方
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
-
DB不要の機能だけでも十分成熟したブログになる
-
CSSの
.darkプレフィックスでテーマ切替が簡単 -
Copyボタンは
useEffectでDOM操作が簡単
参考リンク
まとめ
-
3サイト分析で50件+の改善候補を特定、30件+を実装
-
ライト/ダーク対応が最も効果大
-
OGP動的生成とRSSでSNSシェア時の見栄え向上
この記事が役に立ったら共有しよう
Share
Koki
フルスタックエンジニア / React, Next.js, TypeScript
