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

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

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

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

編集者の作業は、通常の 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）の利用料、保守をご契約いただく場合の保守費用です。保守の範囲と契約条件は契約・お支払い・保守の条件に準じます。