はじめに

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

今回のリニューアルでは、デザインの刷新だけでなく、フロントエンドやホスティング環境も見直しています。長年運用してきたブログのコンテンツ資産を活かしながら、より保守しやすく、改善を続けやすい構成へアップデートしました。

この記事では、今回のリニューアルで変わったことやリニューアルの裏側をご紹介します。

今回のリニューアルで変わったこと

フレームワーク：Nuxt → Astro へ

フレームワークを Nuxt から Astro へ変更しました。

採用理由や移行の背景については後ほど詳しくご紹介します。

ホスティング：Netlify → Vercel へ

ホスティングは Netlify から Vercel へ変更しました。

社内の他サイトでも採用実績があり、環境を統一することで運用や改善を継続しやすい体制を整えることを目的としています。

microCMSの本文フィールド：旧リッチエディタ → 新リッチエディタへ

本文フィールド（この文章が表示されているエリア）を 旧リッチエディタから新リッチエディタへ移行 しました。

2023年5月に新リッチエディタが正式リリースされて以降、移行のタイミングを検討していましたが、今回のリニューアルを機に移行を実施しました。

こちらも後ほど詳しくご紹介します。

記事URLについて

原則として、ブログ記事のURLは変更していません。

ページ構成についても大きな変更はなく、カテゴリページやタグページを含め、従来のURLをそのまま引き継いでいます。

リニューアルの裏側

フレームワークの変更

サービスサイトでAstroを採用していることもあり、ヘッダーやフッターなどの共通コンポーネントを流用しやすく、運用コストを下げられることから、ブログもAstroへ移行しました。

また、Astroはコンテンツサイトとの相性が良く、静的生成を前提とした高速なページ配信が可能です。

ブログのように記事コンテンツが中心となるサイトでは、表示速度や保守性の向上が期待できるため、今回のリニューアルのタイミングで採用を決定しました。

コンテンツの移行

新旧リッチエディタの違い

新リッチエディタで追加された機能については、以下の記事で詳しく紹介しています。

旧リッチエディタから新リッチエディタへ移行する場合、表示面では以下のような差分があります。

新リッチエディタでは画像が <figure> 要素でラップされ、width / height 属性が付与されるなど、HTMLがより構造化される
- CSSの調整が必要になる場合がある
改行/段落の扱いが変わる
- 旧リッチエディタでは <br>
- 新リッチエディタでは <p> 要素として出力される
- 見た目の余白が変わる可能性がある

今回は新リッチエディタへの移行と同時にリニューアルも行っているため、フロントエンド側も合わせて調整しています。一方で、フロントエンドはそのままにエディタのみ移行する場合は、上記のようなHTML構造や余白の違いによって見た目が変わる可能性があるため、事前に確認しておくことをおすすめします。

約500件のコンテンツをどう移行したか

移行ツールの作成

今回のリニューアルでは、対象となる記事が約500件あり、手作業での移行は現実的ではありませんでした。
そこで、旧リッチエディタの内容を新しく作成したフィールドへコピーする移行ツール を作成し、自動化を行いました。

microCMSでは、コンテンツの取得（GET）や更新（PATCH）ができるコンテンツAPIが提供されています。
そのため、既存コンテンツを取得し、新しいフィールドへ反映するツールを比較的シンプルに実装できます。

こうしたAPIが提供されていることで、単なるコンテンツ配信だけでなく、

CMS移行
データ整備
一括更新
運用改善

なども柔軟に行えるのが特徴です。

コンテンツ更新時には、更新対象のフィールドのみを送信するようにし、タイトルなど不要なフィールドは送信しない設計にしました。これにより、意図しないデータ更新のリスクを避けています。

また、本番実行前にドライランで確認できるようにし、安全に移行できるよう配慮しました。

APIキーの新規作成

権限を必要最小限にするため、移行専用のAPIキーを作成しました。
対象APIに対してGETとPATCHのみ権限を付与し、不要な権限は持たせていません。

本番環境での実行

ドライランで問題がないことを確認した後、本番環境で実行しました。
バッチ処理として実装していたため、レートリミットに抵触することなく、約10分で500件ほどのコンテンツを移行できました。

参考：コンテンツAPIに関する制限事項

GET APIのレートリミット（サービス単位）：60回 / 1秒
WRITE API（POST / PUT / PATCH / DELETE）のレートリミット（サービス単位）：5回 / 1秒

移行して感じたこと

今回のリニューアルで改めて感じたのは、ヘッドレスCMSの大きなメリットは 「コンテンツ資産と表示システムを分離できること」 だという点です。
従来型CMSの場合、CMS本体・テーマ・プラグイン・表示ロジックが密結合になっているケースも少なくありません。そのため、サイトリニューアルの際に大規模な移行作業が発生したり、既存コンテンツの扱いが課題になったりすることがあります。

一方でmicroCMSでは、コンテンツをAPI経由で独立して管理しています。

そのため今回も、

NuxtからAstroへの移行
NetlifyからVercelへの移行
旧リッチエディタから新リッチエディタへの移行

を進めながら、これまで蓄積してきた約500件の記事コンテンツをそのまま活用できました。

記事URLを維持したまま、フロントエンドやホスティング環境をアップデートできたのも、コンテンツと表示レイヤーが分離されているからこそです。

フロントエンドやインフラは時代に合わせて更新しながら、コンテンツ資産は継続して活かせる。
これは企業サイトやオウンドメディアを長期的に運用していくうえで、大きなメリットだと感じています。

「将来的なリニューアルや技術刷新にも柔軟に対応したい」
「コンテンツを資産として長く活用したい」

そんなケースで、ヘッドレスCMSの価値が発揮されることを改めて実感したリニューアルでした。

おわりに

今回は、microCMSブログリニューアルの裏側をご紹介しました。

フレームワークやホスティング環境の刷新だけでなく、旧リッチエディタから新リッチエディタへの移行も実施し、今後の運用や改善を進めやすい構成へアップデートしています。

また今回のリニューアルを通じて、コンテンツ資産を維持したまま技術スタックを更新できるという、ヘッドレスCMSならではのメリットも改めて実感しました。

旧リッチエディタから新リッチエディタへの移行を検討されている方や、これからサイトリニューアルを予定されている方の参考になれば幸いです。

今後ともmicroCMSブログをよろしくお願いします！