ブログをフルリニューアルしましたのアイキャッチ画像

2024.09

ブログをフルリニューアルしました

プログラミング

転職に伴う有給消化期間に入りました。
せっかくの機会なのでブログをフルリニューアルしました。

採用技術は基本的にそのままにしつつ、UI/UXと記事の管理方法を大きく見直しました。

Before

トップページ（ライトモード）

旧ブログのトップページ ライトモード

トップページ（ダークモード）

旧ブログのトップページ ダークモード

記事詳細（ライトモード）

旧ブログの記事詳細ページ ライトモード

記事詳細（ダークモード）

旧ブログの記事詳細ページ ダークモード

記事詳細（ライトモードかつSP）

旧ブログの記事詳細ページ スマートフォン表示 ライトモード

記事詳細（ダークモードかつSP）

旧ブログの記事詳細ページ スマートフォン表示 ダークモード

抱えていた課題

  • トップページのデザインは個人的に気に入っていたものの、個人が気まぐれに投稿するブログとしてはタグやジャンルの管理が重かった
  • microCMSだと投稿内容のプレビューがしづらかった
  • 記事詳細のデザインはスマートフォン向けには大きな不満がなかったものの、PC向けでは画像が全面に出るなど読みづらかった
  • 目次がないため、記事が長い場合に読みづらかった
  • フォントにこだわりすぎて読みづらかった
  • ビルド時に通信が発生するため、記事とプロジェクトを行き来する際に時間がかかった

これらの課題を解決するために、今回リニューアルを行いました。

After

トップページ（ライトモード）

新ブログのトップページ ライトモード

トップページ（ダークモード）

新ブログのトップページ ダークモード

記事詳細（ライトモード）

新ブログの記事詳細ページ ライトモード

記事詳細（ダークモード）

新ブログの記事詳細ページ ダークモード

記事詳細（ライトモードかつSP）

新ブログの記事詳細ページ スマートフォン表示 ライトモード

記事詳細（ダークモードかつSP）

新ブログの記事詳細ページ スマートフォン表示 ダークモード

改善点

今回、リポジトリを新たに作成。
主に以下の点を改善しました。

  • 記事の管理方法をmicroCMSからMDXに変更
  • GitHubで記事を管理
  • UI/UXの改善
  • 記事詳細ページに目次を追加
  • 記事詳細ページのデザインを見やすく変更
  • ホスティングをAWS AmplifyからVercelに変更
  • DNSをRoute 53からVercelに変更

よかったこと

  • フォントを標準フォントに変更したことでかなり読みやすくなった
  • ホットリロードの恩恵もあり、執筆しながらのプレビューが楽になった
  • GitHubで記事管理することで、記事のバックアップが取りやすくなった
  • MDXの導入によりAPI通信が不要になり、記事とプロジェクトを行き来する際の待ち時間が減った
  • 記事詳細ページに目次を追加したことで、長い記事でも読みやすくなった
  • 今の自分にはしっくりくるデザインにできた
  • Vercelの使い勝手がよく、デプロイも楽

懸念点

  • すべてをGit管理にすることで、プロジェクトが肥大化する

今後の課題

  • やっぱりタグ管理は欲しくなるか？
    今後検討します

おわりに

今回のリニューアルで、自分のブログに対するモチベーションが上がりました。
これからも記事を書きながら、少しずつ改善していきたいです。

おすすめ記事