ヘッドレス CMS 構築｜Next.js × WordPress で速く安全なサイトを

通常の WordPress サイトでは、WordPress が「編集」と「表示」の両方を担います。訪問者がページを開くたびに、WordPress がデータベースを読み、テーマの PHP で HTML を組み立てて返します。ヘッドレス CMS 構成では、この「表示」の役割を WordPress から切り離します。WordPress は記事や制作実績を編集・保管する場所（ヘッド = 見た目を持たない CMS）になり、表示は別のアプリケーション ―― このサイトでは Next.js ―― が担当します。

Next.js はビルド時に WordPress から WPGraphQL でデータを取り出し、全ページを HTML ファイルとして書き出します。訪問者に届くのはその静的ファイルで、WordPress には訪問者からのアクセスが届きません。 ページの表示に PHP の実行もデータベースの読み取りも発生しないため、速く、アクセス集中や CMS 側の障害の影響を受けにくくなります。

一方で、公開までに「ビルドして配信先に置く」工程が挟まること、表示側は WordPress のテーマやプラグインではなくコードで作ることになるため、すべてのサイトに向くわけではありません。向き不向きを先に整理します。

編集者の作業は、通常の WordPress と同じです。お知らせや記事は「投稿」、制作実績は専用のカスタム投稿タイプ（portfolio）に、アイキャッチ・カテゴリ・本文を入力して公開します。制作実績にはお客様の声（評価・本文・投稿者）の項目があり、入力すると実績ページとトップページの「お客様の声」に反映されます。

AI チャットボットの回答に使うコンテキストも、WordPress のカスタム投稿タイプ（rag_context）で管理します。サービス内容や FAQ を WordPress に書けば、チャットボットがそれを根拠に答えるようになります。コードを触らずに回答内容を更新できるのは、CMS を「知識の置き場」として使えるヘッドレス構成の利点です。

訪問者に届くのは、ビルド時に書き出した HTML・CSS・画像です。WordPress の管理画面や PHP は公開サイトから直接見えず、攻撃対象になる面が小さくなります。公開後にご自身でできること・ご依頼が必要なことの線引きは、通常の制作と同じく公開後の作業分担の表に準じます。

数値以外に、この構成で得られているものが 3 つあります。1 つ目は、WordPress が停止してもサイトの表示が止まらないこと。2 つ目は、表示側が TypeScript のコードなので、見出し構造・構造化データ・メタ情報の回帰を自動テストで検出できること（このサイトでは SEO の回帰チェックを 60 項目以上、スクリプトで実行しています）。3 つ目は、公開サイトから CMS の管理画面と PHP が見えないことです。

制作実績の詳細ページも同じ仕組みで生成しています。実例として、美容室サイトのNext.js + WordPress による制作実績をご覧ください。

工程の骨格は通常のホームページ制作と同じで、KPI 策定・現状分析から始まり、ワイヤーフレーム、コンテンツ、環境構築、CMS、お問い合わせ機能、テスト・公開の順に進めます（制作の流れ 8 工程）。ヘッドレス構成で変わるのは「環境構築」と「CMS」の中身です。

• 環境構築: WordPress（編集用）と Cloudflare Pages（配信用）の 2 系統を用意し、WPGraphQL などのプラグインを設定します。既存の WordPress を使う場合は、データはそのまま、プラグインの追加だけで済みます
• CMS: WordPress のテーマを作る代わりに、Next.js のページとコンポーネントを実装します。投稿タイプごとに「取得 → 変換 → 生成」の 3 層を用意します
• テスト・公開: ビルドが通ること、生成されたページの見出し・メタ情報・構造化データが想定どおりであることを自動テストで確認してから、CI またはローカルからデプロイします
• 移行の場合: 既存の URL 構造は維持し、変更が必要な URL はリダイレクトで引き継ぎます。検索評価を落とさないための手順はリニューアルの進め方と同じです

ヘッドレス構成で増えるのは、表示側の実装だけです。ページ数が同じでも、WordPress のテーマを当てる代わりに画面をコードで起こす分、一般的なレイアウトの WordPress 制作（見積例: 5 ページ・336,000 円・税別）より高くなります。どれだけ増えるかは作る画面の数で変わるので、要件を伺ってからお見積りします。

公開後に継続してかかる費用は、WordPress を置くサーバーとドメインの実費、配信先（Cloudflare）の利用料、保守をご契約いただく場合の保守費用です。保守の範囲と契約条件は契約・お支払い・保守の条件に準じます。