ヘッドレスWordPress｜Next.js+WP連携で高速サイト構築

表示速度が圧倒的に速い（SSG生成）

Next.jsのSSGでビルド時にHTMLを静的生成することで、PHPの実行が不要になります。Lighthouse・Core Web Vitalsのスコアが大幅に向上します。

セキュリティリスクの大幅低減

フロントエンドがNext.js（静的HTML）になるため、WordPressのPHP脆弱性・プラグイン脆弱性を攻撃されるリスクが低下します。APIサーバーとしてのWPは非公開にできます。

WordPressの管理画面はそのまま

担当者は慣れたWordPressの管理画面で記事更新・画像追加を行います。技術的な変更は一切不要です。「更新しやすい」という既存メリットを保ちつつ速度を改善できます。

Next.jsによるSEO最適化

ページごとの適切なmetadata・構造化データ・サイトマップ・ページ速度の完全コントロールが可能です。WordPressテーマの制約から解放されます。

Vercelによる高速CDN配信

Next.jsをVercelにデプロイすることで世界規模のEdge Networkから配信されます。国内外からのアクセス速度が大幅に改善します。

開発の自由度が高い

WordPressテーマのHTML・CSS制約がなく、デザインと機能を完全に自由に実装できます。Tailwind CSS・Framer Motionなど最新技術を使ったサイト制作が可能です。

WordPressで管理しているコンテンツをそのまま使いたいが表示が遅い

通常WordPressのPHPレンダリングはリクエストのたびにサーバー処理が発生するため、速度に限界があります。ヘッドレス構成でNext.jsのSSG・ISRを採用すれば、既存コンテンツを活かしながら高速化できます。

WordPressのセキュリティリスクが怖い

WordPressはCMS市場のシェアが高いため、脆弱性を狙った攻撃も多いです。ヘッドレス構成でフロントエンドを静的HTMLにすることで、PHPインジェクション・ブルートフォース攻撃などの攻撃対象面を大幅に縮小できます。

非エンジニアがコンテンツ管理できる環境が必要

エンジニアに依頼しないと記事更新できない環境は運用コストが高くなります。ヘッドレス構成でもWordPress管理画面はそのまま使えるため、非エンジニアが従来通りにコンテンツ管理できます。

通常WordPressとヘッドレスの違いが分からない

「ヘッドレス」という言葉の意味が分かりにくく、何が変わるのか見えにくいです。シンプルに言えば「WordPressはデータ管理・Next.jsは画面表示」に役割を分離する構成です。管理者の操作は変わりません。

REST APIとGraphQLの選び方が分からない

WP REST APIは追加プラグイン不要で即時利用でき、シンプルな構成に向いています。WPGraphQLは複雑なデータ取得を1回のクエリで効率化できますが、プラグイン導入と学習コストが発生します。

WordPress管理画面をそのまま使えるか心配

ヘッドレス化してもWordPress管理画面は一切変わりません。記事・固定ページ・メディアライブラリ・カスタム投稿タイプの操作は従来通りです。技術的な変更は開発者側にのみ生じます。

CMSを移行せずにフロントだけ刷新したい

「WordPressは慣れているので変えたくないが、サイトのデザインと速度を改善したい」という要望にヘッドレス構成は最適です。コンテンツはそのままにフロントエンドだけ全面リニューアルできます。

ISR（Incremental Static Regeneration）の設定が難しい

ISRはNext.jsのfetch関数のrevalidateオプションで設定します。記事の更新頻度に合わせて数十秒〜数分の再生成間隔を設定するだけで、キャッシュの自動更新が機能します。

画像管理をWordPressで続けたい

WordPressメディアライブラリで管理した画像URLをAPIで取得し、next/imageで最適配信できます。自動WebP変換・適切なサイズでの配信・Lazy Loadが適用されるため、画像パフォーマンスも向上します。

ヘッドレスCMS移行のコストが不明

コンテンツ量・カスタム投稿タイプ数・フォーム・会員機能などの複雑度によって工数が変わります。サイプレスでは既存サイト調査の上で詳細な見積もりを提示します。初期投資と長期的なメンテナンスコストを合わせてご説明します。

要件整理（コンテンツ更新頻度・管理者スキル）

更新頻度（日次・週次・月次）・管理者のITリテラシー・カスタム投稿タイプの必要数・フォーム要件などを整理します。これによりISRのrevalidate秒数やAPIの選定方針が決まります。

WordPress REST API or GraphQL（WPGraphQL）選定

シンプルなサイトはWP REST API（追加プラグイン不要）を推奨します。複数の投稿タイプを一度に取得する・複雑なリレーションがある場合はWPGraphQLプラグインを導入してGraphQLで効率的に取得します。

Next.jsプロジェクト設定

create-next-appで新規プロジェクトを作成し、TypeScript・Tailwind CSS・App Routerを有効化します。WordPressのAPIエンドポイントURL（WORDPRESS_API_URL）を環境変数に設定します。

WordPressからのデータ取得実装

app/posts/[slug]/page.tsxなどでfetch関数を使ってWP REST APIから投稿データを取得します。generateStaticParamsで全スラッグを静的生成対象として登録します。

ISR設定（revalidate秒数）

fetchオプションにnext: { revalidate: 60 }を設定することで、最大60秒ごとにページが再生成されます。更新頻度が低いページは3600（1時間）、頻繁に更新するページは30〜60秒に設定します。

カスタム投稿タイプ設計

WordPress側でregister_post_typeを使って施工事例・スタッフ・物件などのカスタム投稿タイプを作成します。show_in_rest: trueを設定してREST APIで取得可能にします。

ACF（Advanced Custom Fields）連携

ACFプラグインでカスタムフィールドを設定し、ACF to REST API（またはACF to WPGraphQL）プラグインでAPIから取得できるようにします。フロントエンドで動的にコンテンツを組み立てます。

画像最適化（next/image + WP Media）

WP REST APIから取得した画像URLをnext/imageのsrcに渡します。next.config.jsのimages.remotePattersにWordPressドメインを追加することで最適化配信が有効になります。

Vercelデプロイ設定

VercelにNext.jsプロジェクトを連携し、WORDPRESS_API_URLなどの環境変数をVercel EnvironmentsのProductionに設定します。デプロイ後にAPIからデータが正常取得できるか確認します。

WordPress側のWebhook設定

WordPressのpost_updated・publish_postアクションフックでVercelのOn-Demand ISR APIへHTTPリクエストを送信します。これにより記事保存のほぼ即時にフロントエンドが自動更新されます。

ページ表示速度（WP直接比較）

Google PageSpeed InsightsまたはWebPageTestで移行前後の速度を比較します。通常WordPressからのヘッドレス移行でLCP（最大コンテンツ描画）が50〜70%改善するケースが多くあります。

Lighthouseスコア（90+）

Chrome DevToolsまたはPageSpeed InsightsでPerformance・SEO・Accessibility・Best Practicesの4項目を測定します。ヘッドレス+Vercel構成では全項目90+を目標とします。

CMS更新からの反映時間（ISR）

WordPress管理画面で記事を更新してから、フロントエンドに反映されるまでの時間を計測します。ISRのrevalidate設定値と実際の反映時間を確認し、Webhook設定でほぼリアルタイム反映の実現を目指します。

WordPressセキュリティインシデント（0）

WordPressの管理画面ログイン試行・不審なリクエストをサーバーログとセキュリティプラグイン（Wordfence等）で監視します。フロントエンドの静的化でインシデントリスクが低下することを定量的に確認します。

コンテンツ更新の非エンジニア対応率

月次の更新作業のうちエンジニア依頼なしに担当者が完了した割合を記録します。ヘッドレス構成はWP管理画面が変わらないため、移行後も高い非エンジニア対応率を維持できます。

開発工数（移行後の保守）

移行後の月次保守工数（プラグイン更新・フロントエンド依存パッケージ更新・不具合対応）を記録します。フロントとバックエンドの関心が分離されることで、デザイン変更がCMSに影響しない保守のしやすさを実感できます。

オーガニック流入数推移

Google Search Consoleで移行前後のオーガニック検索クリック数・表示回数を比較します。Lighthouseスコア向上・Core Web Vitals改善がGoogle検索順位に与える影響を数ヶ月単位で追跡します。