Next.js、ACF、再利用可能なコンポーネントアーキテクチャを備えたヘッドレスWordPress CMS
ある企業は、WordPressのコンテンツ編集の柔軟性と、従来のWordPressテーマの制約を受けずに、最新のReactフロントエンドの速度と開発者体験を兼ね備えた、高性能でSEOに最適化されたマーケティングウェブサイトを必要としていました。
プロジェクトを相談する
課題
従来のWordPressサイトは、最新のWebパフォーマンスおよびSEO基準を満たすのに苦労していました。
- モノリシックなWordPressテーマは動作が遅く、重く、メンテナンスが困難でした
- コンテンツ編集者は、コンポーネントレベルの柔軟性がない厳格なページレイアウトに縛られていました
- サーバーサイドでレンダリングされたPHPページは、Core Web Vitals（LCP, CLS, FID）で低いスコアでした
- SEOには手動でのメタタグ管理が必要で、自動化された構造化データがありませんでした
- ページ間でUIパターンを再利用するにはテンプレートコードの重複が必要で、これはずれや一貫性の欠如につながりました
- WordPress REST APIだけでは、複雑なネストされたコンテンツ構造をモデリングする柔軟性に欠けていました
私たちのソリューション
当社は、Advanced Custom Fields (ACF) を柔軟なコンテンツモデリング層として使用し、フロントエンドに再利用可能なコンポーネントシステムを導入し、全体にわたる自動SEO最適化を行った**ヘッドレスWordPress + Next.jsアーキテクチャ**を構築しました。
アーキテクチャ
- CMS：構造化コンテンツモデリングのためのACF Proを備えたWordPress (ヘッドレス)
- API層：GraphQLを介して型付きコンテンツを公開するためのWPGraphQL + WPGraphQL for ACF
- フロントエンド：App Router、React Server Components、TypeScriptを備えたNext.js
- スタイリング：ユーティリティファーストでデザインシステムに準拠したスタイリングのためのTailwind CSS
- SEO：Next.js Metadata API、JSON-LD構造化データ、自動サイトマップ生成
- ホスティング：Vercel (フロントエンド) + マネージドWordPressホスティング (CMS)
- メディア：WordPressメディアライブラリをソースとするNext.js Image最適化
ACFによるコンテンツモデリング
フレキシブルコンテンツフィールド
ACFのフレキシブルコンテンツフィールドを使用すると、編集者は事前に定義されたコンテンツブロックからページを構成できます。各ブロックはフロントエンドのReactコンポーネントに直接マッピングされ、ヒーローセクション、特徴グリッド、お客様の声カルーセル、CTA、FAQアコーディオン、統計カウンター、画像とテキストのレイアウト、動画埋め込み、料金表、ブログフィードなどの一般的なパターンをカバーしています。
リピーター＆グループフィールド
- リピーターフィールド：リスト（チームメンバー、ポートフォリオアイテム、タイムラインエントリ）のため
- グループフィールド：構造化されたネストデータ（住所ブロック、ソーシャルリンク、SEO上書き）のため
- リレーションシップフィールド：投稿、ページ、カスタム投稿タイプをリンクするため
- オプションページ：グローバル設定（ヘッダー、フッター、ソーシャルリンク、ブランドカラー）のため
再利用可能なコンポーネントアーキテクチャ
コンポーネント設計原則
フロントエンドは、明確な層を持つモジュラーアーキテクチャに従っています。
- ブロックコンポーネント — ACFフレキシブルコンテンツブロックごとに1つのReactコンポーネント
- プリミティブUIコンポーネント — ボタン、カード、バッジなどの再利用可能な要素
- レイアウトコンポーネント — ヘッダー、フッター、ナビゲーション、コンテナラッパー
- SEOコンポーネント — スキーマジェネレーターとメタタグユーティリティ
ブロックリゾルバーパターン
中央のリゾルバーがACFブロックタイプをReactコンポーネントにマッピングし、開発者の関与なしに編集者がページを構成できるようにします。
- WordPress編集者はドロップダウンからブロックを選択し、フィールドに入力します
- WPGraphQLはページをブロックタイプとフィールドデータを含む構造化JSONとして公開します
- Next.jsはビルド時（ISR）またはリクエスト時（SSR）にページデータをフェッチします
- ブロックリゾルバーはブロック配列を反復処理し、一致するReactコンポーネントをレンダリングします
- 各コンポーネントは、ACFフィールドデータを型付きプロップとして受け取ります
SEO最適化
テクニカルSEO
- 動的メタタグ — CMSデータからページごとに生成されるタイトル、説明、Open Graph、およびTwitter Cardタグ
- カノニカルURL — 重複コンテンツを防ぐ自動カノニカルタグ生成
- サイトマップ生成 — WordPressのページ/投稿データからビルド時に構築される動的XMLサイトマップ
- robots.txt — 環境を考慮したルールによるプログラム生成
- 構造化データ — Organization、Article、FAQ、BreadcrumbList、ProductタイプのJSON-LDスキーマ
パフォーマンスSEO (Core Web Vitals)
- 静的生成 (ISR) — Webhookを介したコンテンツ変更時にページをプリレンダリングおよび再検証
- 画像最適化 — WebP/AVIFへの自動変換、遅延読み込み、レスポンシブsrcset
- フォント最適化 — レイアウトシフトのないカスタムフォント読み込み
- コード分割 — React Server Componentsによるルートごとの自動コード分割
- エッジキャッシュ — 100ミリ秒未満のTTFBを実現するグローバルエッジネットワーク
コンテンツSEO
- ページごとのSEOフィールド — カスタムフィールドを介したメタタイトル、説明、OG画像の上書き
- パンくずリスト — スキーママークアップ付きの自動生成パンくずナビゲーション
- 内部リンク — リレーションシップフィールドによる構造化された内部リンクの提案
- Altテキスト強制 — すべての画像フィールドでのaltテキストの必須化
WordPressからNext.jsへのデータフロー
- コンテンツ変更 — 編集者がWordPress管理画面でコンテンツを公開または更新
- Webhookトリガー — WordPressがNext.jsの再検証エンドポイントにWebhookを発火
- ISR再検証 — Next.jsは影響を受けるページのみを再生成
- CDNキャッシュ無効化 — 公開から数秒以内に更新されたページがエッジから配信
主な機能
- ビジュアルページビルダー — 編集者はコードに触れることなくACFブロックからページを構成
- 型付きコンテンツAPI — WPGraphQL + ACFが完全に型付けされたGraphQLスキーマを提供
- コンポーネントライブラリ — 一般的なマーケティングページパターンをすべてカバーする10以上の再利用可能なブロック
- ISR + Webhooks — コンテンツの更新が数秒以内にライブサイトに反映
- SEO自動化 — CMSデータから構造化データ、サイトマップ、メタタグを生成
- Core Web Vitals — 画像、フォント、コード分割の最適化によりLighthouseで高スコアを実現
- プレビューモード — WordPressのプレビューボタンでNext.jsフロントエンドに下書きコンテンツを表示
- 多言語対応 — 国際化されたコンテンツのためのACF + WPML/Polylang統合
成果
技術スタック
caseStudyDetail.more ケーススタディ
その他の技術実装事例をご覧ください
Strapi CMS + Next.js を活用した高度な SEO アーキテクチャを持つウェブサイト
成長中のビジネスは、非技術系のマーケティングチームがページ、ブログ記事、ランディングページを独立して管理できる、高速でコンテンツが豊富なマーケティングウェブサイトを必要としていました。同時に、サイトが初日からオーガニック検索で競争力のある順位を獲得できるようにすることが重要でした。
AIを活用したOCRによる請求書処理とQuickBooks連携
毎月数百件の仕入先請求書を処理する中規模企業が、AI/OCRを使用して請求書データを自動抽出し、それを記帳と支払追跡のためにQuickBooksに直接同期させることで、手動データ入力を排除する必要がありました。
よくある質問
MicrocosmWorksは、従来のWordPressテーマからheadless Next.jsフロントエンドへ移行した後、3～5倍の高速なページロード時間を測定しました。これは主に、Next.jsがWordPressのPHPランタイムを介してリクエストごとにページを生成する代わりに、incremental static regenerationを用いた事前レンダリングされた静的HTMLを提供するためです。また、Next.jsフロントエンドは実際に必要なコードのみをロードするため、headlessアーキテクチャは、フロントエンドのJavaScriptとCSSを注入するWordPressプラグインのパフォーマンス上のオーバーヘッドも排除します。
MicrocosmWorksは、ACFフィールドグループがそのデータをWordPress REST APIとWPGraphQLを介して公開するように設定しました。これにより、Next.jsのフロントエンドは、型付きGraphQLクエリを使用して、ヒーローセクション、フィーチャーグリッド、顧客の声、カスタムレイアウトといった構造化されたコンテンツをクエリできるようになりました。これにより、コンテンツ編集者はWordPress管理画面で使い慣れたACFの編集体験をそのまま得られる一方で、フロントエンドは、従来のACFテンプレートレンダリングよりも高速で視覚的にも一貫性のある、目的別に構築されたReactコンポーネントを介してそれらのフィールドをレンダリングします。
MicrocosmWorksは、ACF Flexible Contentのレイアウトに直接マッピングされる25種類以上の再利用可能なReactコンポーネントのライブラリを構築しました。これにより、コンテンツエディターは、開発者の介入なしに、ヒーローバナー、特徴グリッド、料金表、CTAブロックのような事前構築済みのセクションを選択・並べ替えるだけで新しいページを組み立てることができます。最初のコンポーネントライブラリが構築されれば、新しいランディングページはWordPressの管理画面を通じて数分で作成・公開でき、日常的なコンテンツ更新におけるデザインから開発へのサイクルが不要になります。
MicrocosmWorksは、WordPressの組み込みプレビューボタンをNext.jsアプリケーション内のドラフトレンダリングエンドポイントに接続するプレビューモードを実装しました。これにより、編集者は未公開の変更がライブサイトでどのように表示されるかを正確に確認できます。このプレビューシステムは静的キャッシュをバイパスし、WordPress APIからドラフトコンテンツをリアルタイムで直接取得します。また、ACFフィールドプレビューをサポートしているため、編集者は一般的なテキストプレビューではなく、実際のコンポーネントのレンダリングを確認できます。
MicrocosmWorksは、ヘッドレスWordPressへの移行を1時間あたり$15～$35の開発レートで行います。一般的な移行では、ACFコンテンツモデリング、コンポーネントライブラリの開発、Next.jsフロントエンド構築が含まれ、一意のページテンプレートの数とカスタム機能によって2～4ヶ月かかります。継続的なホスティング費用は、従来のWordPressホスティングよりも低い場合が多いです。なぜなら、Next.jsフロントエンドはVercelの無料または低価格ティアにデプロイできる一方、WordPressはフロントエンドのトラフィック負荷なしに軽量なヘッドレスCMSとして動作するからです。