5年後、CMSを替えたくなったら何が起きる?(前編)― CMSとデザインを替えるとき
X-tech推進本部 新井「このCMS、5年後も使っていると思いますか?」
CMSを選ぶときは、機能や価格、使いやすさなどを比較検討することが多いと思います。その観点に、「いつか別のものに替えることになったらどうなるか」も加えておくことをおすすめします。この「替えやすさ」は、表示速度やセキュリティと同じく、問題が起きるまでは課題として意識されにくいものです(見落とされがちな課題については、コラム「ヘッドレスCMSでWeb担当者が見落としがちな盲点とは?」でも取り上げています)。
この記事では、5年後にWebサイトの「部品」を交換したくなった場面を想定し、導入の段階で何を準備しておくと後から困らないかを、前編と後編に分けて解説します。前編では「CMS」と「デザイン」を替えるケースを取り上げます。
Webサイトの基盤は「一生もの」ではない
CMSを入れ替えるときには、例えば次のような作業が発生します。
- コンテンツを1つずつ新しいCMSに移し替える
- URLが変わったページに、転送の設定をする
- デザインのひな形(テンプレート)をほぼ作り直す
こうした作業が重なるため、プロジェクトは長期化しやすくなります。それでも、基盤を見直すタイミングはいずれ訪れます。事業や組織の変化、利用しているサービスの料金や方針の変更、技術の世代交代などがきっかけです。
近年はAIの進化により、先を見通すことがいっそう難しくなりました。コンテンツの作り方も、訪問者が情報にたどり着く方法も変わり始めています。CMSの分野でも、例えばmicroCMSでは、AIに話しかけるような言葉でコンテンツを作成・更新できる「microCMS MCP」が提供されています(執筆時点ではベータ版。出典:microCMSドキュメント「microCMS MCP」)。
5年後にどのような技術が主流になっているかを、今の時点で見通すことは困難です。だからこそ、将来どのような変化があっても「必要な部品だけを交換できる」状態にしておくことが大切です。
まずはWebサイトを「部品」に分けて見る
ヘッドレスCMSは、コンテンツを管理する仕組みと、Webページとして表示する仕組みを切り離したCMSです。そのため、ヘッドレスCMSで作ったWebサイトは、1つの大きなシステムではなく、役割の異なる部品の組み合わせでできています。当社の「ヘッドレスCMSパッケージ」の場合、主な部品は次の4つです。
| 部品 | 役割 | 当社パッケージで使っているもの |
|---|---|---|
| コンテンツ管理 | 文章や画像などのコンテンツを登録・管理する | microCMS |
| Webサイトの組み立て | コンテンツとデザインのひな形を組み合わせて、Webページを作る | Astro |
| 配信の仕組み | できあがったWebページを訪問者に届ける | Cloudflare Workers |
| 制作データの保管 | デザインのひな形や設定を保管し、変更の履歴を残す | GitHub |
それぞれの部品の役割は、コラム「古くて新しい『ヘッドレスCMS』の魅力」で、桃太郎とお供に例えて紹介しています。
従来型のCMSでは、これらの役割の多くが1つのシステムにまとまっています。ヘッドレスCMSでは部品ごとに分かれているため、「1つだけ交換」できます。ただし、交換しやすいかどうかは、部品の組み合わせ方だけでは決まりません。どう作るか、つまり設計によって大きく変わります。

ヘッドレスCMSで作ったWebサイトを構成する4つの部品と、そのつながり
シナリオ1:CMSを別の製品に替えたくなったら
2031年、AIとの連携がより進んだ新しいCMSが登場し、社内で「乗り換えを検討したい」という声が上がったとします。
何が起きるのか
交換するのは「コンテンツ管理」の部品です。必要な作業は主に2つです。
- コンテンツと、「どのような入力欄でコンテンツを管理するか」という設計を、新しいCMSに移す
- Webサイトの組み立て側で、CMSからコンテンツを受け取っている部分を、新しいCMSに合わせて修正する
一方で、デザイン、URL、配信の仕組みは、基本的にそのまま使えます。訪問者に、裏側のCMSが替わったことを意識させずに移行することも可能です。
今のうちにしておきたい準備
準備1:コンテンツを「意味のまとまり」で登録する
文字の装飾や画像の配置を自由にできる入力欄(リッチエディター)に、見出しも画像も表もまとめて入れていると、移行の際に中身を分解し直す手間がかかります。「見出し」「本文」「画像」「画像の説明」のように、意味ごとに入力欄を分けておくと、どのCMSにも移しやすくなります。この形は、同じコンテンツをAIなどWebサイト以外の場所で再利用するときにも役立ちます。
準備2:CMSとのやり取りを1か所にまとめる
CMSからコンテンツを受け取る処理がWebサイトのあちこちに散らばっていると、CMSを替えるときの修正箇所が増えてしまいます。
当社パッケージで使っているAstroには、CMSなど外部に保存されたコンテンツを取り込むための「ローダー」という仕組みがあります。ローダーで取り込んだコンテンツは、各ページから共通の方法で呼び出せます。また、コンテンツの形(スキーマ)を定義しておくと、取り込んだデータがその形に沿っているかをAstroが確認します(出典:Astro Docs「Content collections」(英語))。
CMSとのやり取りをローダーに集めておき、新しいCMSから取り込むコンテンツも同じ形にそろえられれば、CMSを替えるときの修正範囲を、基本的にローダーの部分に絞り込めます。
準備3:URLのルールを自分たちで決める
CMSが自動で付ける番号(ID)をそのままURLに使っていると、新しいCMSで別の番号が付いたときにURLが変わってしまいます。検索エンジンからの評価や、ほかのWebサイトからのリンクを守るためにも、URLに使う文字列は自社のルールで決め、入力欄の1つとして管理しておくと安心です。
準備4:コンテンツを持ち出す方法を確認しておく
microCMSには、コンテンツを持ち出す方法が公式に用意されています。表の中の「API」は、システム同士がデータをやり取りするための窓口のことです。
| 持ち出したいもの | 方法 |
|---|---|
| コンテンツ | APIでまとめて取得する(下書きなども含めるには、APIキーに権限の設定が必要) |
| コンテンツ(表形式) | 管理画面から、表計算ソフトで開けるCSVファイルで書き出す(Team、Business、Enterpriseプランで利用可能) |
| 画像やPDFなどのファイル | APIでファイルのURL一覧を取得し、ダウンロードする |
| 入力欄の設計 | JSONというデータ形式のファイルで書き出す |
出典:
- microCMS よくある質問「コンテンツのエクスポート(バックアップ)、インポート方法は?」
- microCMSドキュメント「コンテンツのCSVエクスポート」
- microCMS よくある質問「メディアのエクスポート(バックアップ)、インポート方法は?」
- microCMSドキュメント「APIスキーマのエクスポート/インポート」
大切なのは、困ったときに調べるのではなく、導入の段階で確認しておくことです。必要に応じて、定期的にバックアップを取る仕組みも最初から組み込んでおくと安心です。
シナリオ2:デザインを全面リニューアルしたくなったら
2031年、ブランドの刷新が決まり、Webサイトのデザインも一新することになったとします。ただし、これまでに公開したお知らせや事例の記事は、そのまま残したいという要望です。
何が起きるのか
交換するのは、Webサイトの組み立ての部品のうち、デザインのひな形です。ひな形は新しいデザインで作り直しますが、コンテンツはCMSに入ったままなので、基本的に手を加える必要はありません。更新担当者も、これまでと同じ管理画面でコンテンツを登録し続けられます。コンテンツを新しい仕組みに移し替える作業が発生しないことは、運用チームにとって大きなメリットです。
今のうちにしておきたい準備
ポイントは、コンテンツの中に「見た目」を持ち込まないことです。
よく見られるのが、本文の中で文字の色や大きさを直接指定してしまうケースです。デザインを刷新すると、その色が新しいブランドカラーと合わず、過去の記事を1本ずつ修正することになります。これを「注意事項」という入力欄や、「強調」という意味の装飾として登録しておけば、見た目はデザインのひな形の側でまとめて変更できます。デザインとコンテンツを分けて管理するのは、CMSの基本となる考え方でもあります(コラム「古くて新しい『ヘッドレスCMS』の魅力」)。
使える装飾の種類を、必要な分だけに絞っておくことも効果的です。microCMSでは、リッチエディターに表示する装飾ボタンを設定で選べます(出典:microCMSブログ「リッチエディタの装飾ボタンをカスタマイズできるようになりました」)。今の入力の自由度を少しだけ抑えることが、将来のデザインの自由度を守ることにつながります。
前編のまとめ
| 替えたいもの | 今のうちにしておきたい準備 |
|---|---|
| CMS | コンテンツを意味のまとまりで登録する、CMSとのやり取りを1か所にまとめる、URLのルールを自分たちで決める、コンテンツの持ち出し方法を確認する |
| デザイン | コンテンツの中に見た目を持ち込まない、使える装飾を絞る |
後編では、「配信の仕組み」と「Webサイトを組み立てる道具」を替えるケースを取り上げます。最後に、4つのシナリオに共通する「交換しやすさの条件」もまとめますので、あわせてご覧ください。
※ 記載されている会社名、製品名などの固有名詞は、各社の登録商標または商標です。