Q.StudioからmicroCMSへ移るとき、サイトのフロントエンド（表示側）はどう作りますか？

ゼロからコードを書かずに素早くブログを立ち上げられるテンプレートはあるのでしょうか。あります。microCMSが出している「シンプルなブログ」というNext.jsの公式テンプレートです。このテンプレートを利用すると、記事の一覧ページ、個別の記事詳細ページ、さらにはキーワードやタグで絞り込む検索結果ページまでが一通り揃ったサイトを手軽に用意できます。microCMS側で管理できる項目も、記事の本文だけでなくタグ情報やライターのプロフィールまで最初から定義されているため、設計の手間を省けます。

始め方は、テンプレートを選んでGitHubにログインするところからです。すると、microCMSのサービスとGitHubのリポジトリが新しく作られます。ここで終わりではなく、そのあと手元で開発環境を整え、Vercelで公開するならリポジトリをつないで環境変数を登録します。ボタンを押しただけでサイトが公開されるわけではありません。

動かすにはNode.js 24以上が要ります。パソコンに古いNode.jsが入っていると最初の起動でつまずくので、バージョンを先に確かめておいてください。要件は更新されることがあるため、使う時点のREADMEに合わせます。

Studioから移る人にとっては、表示側の土台を一から書かずに済むのが大きいでしょう。とはいえ、テンプレートはあくまで標準的なブログの形です。Studioで作ったデザインに寄せる作業や、Studioにあった記事の移し替えは、テンプレートとは別にやることになります。

できます。たとえば、microCMSの記事に「メタ情報」というカスタムフィールドを作り、タイトル・概要・OGP画像の3つを入れる欄を用意します。書き手は記事の編集画面で、本文と一緒にこの欄を埋めるだけです。

Next.jsのApp Router側では、generateMetadataという関数で記事のデータを取り、メタ情報の中のタイトルと概要をtitleとdescriptionとして返します。URLの末尾にある記事IDでmicroCMSから記事を1件取ってくれば、記事ごとに違うtitleとdescriptionがページに入ります。この関数はServer Componentsでしか使えないため、ブラウザ側で動く部品の中に書くと動きません。

記事タイトルや説明文のように改行を含まない文字列であれば、テキストフィールドを配置することでAPIから扱いやすいプレーンな文字列データとして保持できます。descriptionも1行で書く運用にするなら同じでかまいません。

Studioでは記事ごとのSEO設定を画面で入れていた人も多いはずです。microCMSに移っても、入力する欄を作り、表示側でそれを読む処理を書いておけば、同じように記事単位で設定できますね。

「公開前に実際のレイアウトで記事の見栄えを確かめたいけれど、ヘッドレスCMSだと画面の確認が難しいのではないか」と不安に感じるかもしれません。microCMSの画面プレビューとNext.jsのDraft Modeはつなげますが、URLを登録するだけでは動かず、表示側の実装が要ります。

つなぎ方の流れは次のとおりです。

1. microCMSで対象APIの「API設定」から「画面プレビュー」を開き、「遷移先URL」を設定する
2. Next.jsに入口用のルートハンドラを作り、シークレット値と記事IDを確かめてDraft Modeを有効にする
3. 確認が取れたら、その記事のページへ転送する
4. 記事ページでDraft Modeが有効なら、下書きを取る処理に切り替える

遷移先URLには{CONTENT_ID}と{DRAFT_KEY}を、それぞれ1つだけ入れられます。2つ目以降は置き換わりません。

Draft ModeはCookieで有効になるので、入口のルートハンドラと表示ページの両方を作って初めて下書きが見えます。組み合わせとしてはNext.jsとVercelが推奨されていますが、SSRに対応したホスティングならVercel以外でも動きます。その場合、Cookieの扱いは公開先の仕様を確認してください。

なお、現在のNext.jsではdraftMode()の呼び出しが非同期処理に変更されています。Next.js 14以前の記事は同期で呼んでいるので、使っているバージョンに合わせて書き換えます。

ここでは個別の店舗名は挙げず、美容室のサイトをmicroCMSで動かすときの考え方をまとめます。

Studioで美容室のサイトを作っている人が移る場合は、メニューや料金、スタッフ紹介、お知らせのように変わる情報をmicroCMSの入力項目にし、レイアウトは表示側で固定します。

もうひとつ、公開前に見た目を確かめたいなら、その仕組みも表示側に作っておく必要があります。microCMSのプレビューは、表示側で下書きを取ってきて画面に出す処理があって初めて使えるからです。新メニューを出す前にスマホで確かめたい、といった使い方を考えているなら、制作を頼む段階で伝えておきましょう。

マウス操作だけで自由に新しいブロックを配置してデザインを仕上げられるStudioとは異なり、microCMSだけで非エンジニアがゼロからLPの画面を組み立てることはできません。microCMSは見た目を管理しないので、表示側と公開先は誰かが作る必要があります。

ただ、あらかじめエンジニアの手で表示側の枠組みを作っておけば、その後の文言修正や画像の入れ替えを非エンジニアが管理画面から行うことは十分に可能です。単なる文字の打ち替えにとどまらず、microCMSの繰り返しフィールドを活用すれば、お客様の声やキャンペーンの告知バナーといったパーツを新しく追加したり、ドラッグ＆ドロップで並び順を入れ替えたりする柔軟な運用も実現できます。ただし、表示側がその並びに対応して作られていることが前提で、デザインを自由に変えられるわけではありません。

もしデザインの自由度を保ちつつコードを書かずにLPを増やしたいという希望があるなら、Studioを表示側としてそのまま使い続ける選択肢も考えられますね。Studio側でmicroCMSの認証情報と取得先を設定し、取ってきたデータをページの要素に結び付けます。StudioのData Connect APIは、Businessプラン以上で使えます（Data Connect APIの利用プラン、Connect microCMS with the API）。

LPのように1ページで完結するなら、Businessの一覧1つでも足りる場合があります。

機能面を見ると、どちらもAPIを通じてコンテンツをやり取りする日本発のヘッドレスCMSとして設計されています。管理画面に入稿した記事や画像データをAPI経由で取得し、フロントエンド側で自由なデザインを組み立てられる点は共通しています。

ただ、いま比べる意味はあまりありません。Newtは公式からサービス提供終了の告知が出されており、2026年11月24日をもってすべてのサービス提供を終了する予定となっています。終了期日を過ぎると管理画面へのログインだけでなく、サイト側から呼び出しているAPIも利用できなくなります。新しいスペースの作成はすでに2025年5月20日で締め切られていて、これから始める人は選べません。料金表や機能を見比べて移行先を決める段階は過ぎていますね。

Newtを使っている人は、終了日までにデータを取り出しておきます。終了のお知らせには、よくある質問とデータエクスポートの案内へのリンクが載っています。書き出したデータがmicroCMSにそのまま入るかはわからないため、項目の並びを見ながらCSVに整え直す作業を見込んでおいてください。

Studioから移る人がヘッドレスCMSを探していて、比較記事でNewtの名前を見かけることもあるでしょう。古い比較記事では現役のサービスとして紹介されていますが、提供終了が決まっているので候補からは外して考えます。

Web制作の基本がわかる人なら、自分で移行できます。そうでなければ、表示側だけでも外に頼むほうが早く終わります。

Studioにはサイトのデザインデータやページ情報、HTMLのソースコード、さらにはStudio CMS内の記事データを外部へ一括して書き出す機能が備わっていません。見た目をそのまま再現しようとすると、公開中のサイトを見ながら手作業でNext.jsのコードを起こし、記事も手作業やCSVで登録し直すことになります。他のプラットフォームへ移る場合は、移行先の環境でページを一から作り直す作業が発生します。

ノーコードツールとは異なり、画面の構築からエラーの解消まで自前でコードを書いて対処しなければなりません。また、Next.jsの資料はWeb開発の知識がある前提で書かれていて、HTML、CSS、JavaScript、Reactに慣れていると進めやすいとしています。

さらに、サイト移転に伴って各ページのURLが変わる場合は、検索順位の急落やリンク切れを防ぐ対応も発生しますね。URLが変わるなら、新しいサイトを十分に確かめてから旧URLと新URLの対応表を作り、旧URLから新URLへ転送する設定を入れて移転を始めます。ここを省くと、検索から来ていた人が古いURLでエラーページに行き着きます。こうした技術的な段取りを自社で引き受けられる人材がいない場合は、無理に社内だけで進めようとせず、外部の制作会社や開発パートナーへ相談することを視野に入れておきましょう。