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

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

採用技術は基本的にはそのままで、UI/UXの改善や記事の管理方法を大きく変更しました。

Before

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

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

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

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

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

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

抱えていた課題

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

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

After

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

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

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

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

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

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

改善点

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

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

よかったこと

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

懸念点

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

今後の課題

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

おわりに

今回のリニューアルで、自分のブログに対するモチベーションが上がりました。
これからも記事を書いていくことで、自己研鑽をしていければと思います。