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

通常のWordPressサイトでは、WordPressが「編集」と「表示」の両方を担います。訪問者がページを開くたびにデータベースを読み込み、PHPで画面を組み立てて表示する仕組みです。ヘッドレス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）の利用料、保守をご契約いただく場合の保守費用です。保守の範囲と契約条件は契約・お支払い・保守の条件に準じます。