WordPressをヘッドレスCMS化するにあたっての考察

WordPressは管理画面側であるバックエンドと、サイト利用者が訪れるフロントエンドが一体化しているのが従来のインストール型WordPressの利用方法であり、現在最も多く利用されている方法です。
一方で、ここ数年で注目されているヘッドレスCMSとしてのWordPressの利用方法としても価値があり、あえて従来のインストール型のWordPressとして利用するのではなく、ヘッドレスCMSとしてWordPressを利用するという方法があります。

そこで、WordPressをヘッドレスCMS（ヘッドレスWordPress）として利用する場合の特徴、メリットデメリット、注意点などをご紹介します。

ヘッドレスCMSとは？

ヘッドレスCMSは、ウェブサイトのフロントエンドとバックエンドを分離させ、バックエンドであるコンテンツ管理システム（CMS）のみを使用するアプローチです。この方法では、API（主にREST APIやGraphQL）を通じてコンテンツをフロントエンドアプリケーションに配信します。フロントエンドはReact、Vue.js、AngularなどのJavaScriptライブラリやフレームワーク、静的サイトジェネレーター（SSG）で構築されます。

ヘッドレスCMSとして使えるCMSの例

ヘッドレスCMSとして利用できるCMSの例としてmicroCMSやcontentful、Newtなどがあります。そして、WordPressもヘッドレスCMSとして使うことが可能で、使い慣れた管理画面を使い続けながら、フロントエンドは自由に作れるという大きな特徴があります。

どんなウェブサイトがヘッドレスCMSが向いている？

WordPressにあるようなセキュリティ対策や保守を行いたくない場合

WordPressはオープンソースのため、どうしてもセキュリティ対策やPHPといったミドルウェアを含めWordPress本体・プラグイン等のアップデートによる保守の対応をせざるを得ません。ヘッドレスWordPressの場合、バックエンドであるWordPressの更新は必要ではありますが、フロントエンドとバックエンドが分離しているため従来の一体化したWordPressに比べると、主にバックエンド側のセキュリティ対策になるというのと、フロントエンド側のWordPressに関する不具合等が無くなります。

高パフォーマンスなサイトが必要な場合

ヘッドレスCMSにより、フロントエンドの読み込み速度が大幅に向上。これは、静的ファイルをCDNから配信し、必要最小限のJavaScriptのみをロードすることの恩恵です。特に、高トラフィックを処理するサイトや、ユーザーエクスペリエンスを最優先するプロジェクトに適しています。

WordPressのパフォーマンスを改善することが大きな課題の場合、ヘッドレスCMSは一つの大きな解決策になります。

フロントエンドとバックエンドを分離させ、高度なカスタマイズを実装したい場合

従来のWordPressテーマの範囲を超える独自のユーザーインターフェイスやインタラクティブな機能を実装したい場合、ヘッドレスWordPressの自由度は大きいでしょう。React、Vue.js、Angularなどのモダンなフロントエンド技術をフルに活用できるため、高度にカスタマイズされたウェブ体験を提供できます。（もちろんそれを扱える技術が必要ですが）

また、Next.js, Nuxt.js, AstroといったJavaScriptフレームワークも充実しているため、様々なフロントエンドの選択肢があるのも魅力ですね。

異なるプラットフォームにもコンテンツを使いたい場合

ヘッドレスCMSとしてWordPressを利用すると、ウェブサイト用に用意したコンテンツをウェブサイトだけでなくモバイルアプリやプログレッシブウェブアプリ（PWA）にもコンテンツを再利用できます。REST APIやGraphQLを通じて、異なるプラットフォーム間でコンテンツを再利用することが容易に。

ヘッドレスCMSのフロントエンドを表示するための技術

CMS側で作成したコンテンツをフロントエンド側でREST APIやGraphQLといったAPIを通じて取得して表示させます。APIで表示させるだけなので、フロントエンド側は様々な選択肢があります。

• React: インタラクティブなユーザーインターフェースの構築に適しています。
• Next.js: Reactをベースとしており、SSR（サーバーサイドレンダリング）や静的サイト生成に優れており、SEO対策にも効果的です。
• Nuxt.js: Vueをベースとしたフレームワークで、Next.jsとよく比較されますが、比較的小〜中規模が向いていると言われます。
• Gatsby: 静的サイトジェネレーターとして人気があり、高速なサイト構築が可能です。
• Astro: Webアプリケーションというよりは、コンテンツ駆動のウェブサイトを作成するためのフレームワークです。

WordPressの抱える課題

WordPressは世界で最も広く使用されているコンテンツ管理システム（CMS）で、2023年に20周年を迎えた老舗のCMS。一方、その普及と共にいくつかの課題も明らかになってきました。

パフォーマンスが上がりづらい

従来のWordPressサイトは、ページをリクエストするたびにデータベースからコンテンツを取得し、PHPでページを動的に生成します。これは、特に高トラフィック時にサイトの速度を低下させる原因となります。

その一方で、小規模のWordPressにおいても多すぎるプラグイン等によって、フロントエンド・バックエンド含めて表示が遅いといった問題も少なく有りません。

どうしても対応せざるを得ないセキュリティ

WordPressの普及度・オープンソースが故に、プラグインやテーマ、コア自体の脆弱性が攻撃者に悪用されたり、サイバー攻撃の対象となることがあります。デフォルトでは、URL にwp-adminやwp-login.phpと直打ちするとログイン画面に行けてしまいますから。ソースコードにユーザー名が表示されていることもあり、専用のツールで調べればすぐにわかってしまいます。ブルートフォースアタックでパスワードをランダムに組み合わせて攻撃すれば突破されてしまうことも。怖いですね……。

リニューアルが大変

従来のインストール型WordPressでは、バックエンドとフロントエンドが統合されているため、ウェブサイトをリニューアルしたいとなったときに、バックエンドも含めてリニューアルする必要があります。

せっかく更新して積み重ねてきたコンテンツを新しいWordPressに移行しないといけない、ということも。想像通り、記事数が多ければ多いほどこの作業は大変です。

WordPressをヘッドレスCMSとして使う理由

これらの課題に対する解決策として、WordPressをヘッドレスCMSとして利用するという選択肢が登場しました。

パフォーマンスの改善

フロントエンドが動的ではなく静的ファイルのためアクセスの際にデータベースへのリクエスト・PHPの実行がありません。そのためパフォーマンスが圧倒的に良いです。さらにCDNと組み合わせることでページロード時間が大幅に短縮されます。

セキュリティが強化される

WordPressはフロントエンドとバックエンドが一体化していますが、ヘッドレスCMSにより分離。これによりAPIを介してのみ通信するため、直接的なアクセス経路が存在せず、潜在的なセキュリティリスクが軽減されます。

優れたスケーラビリティ

パフォーマンスと重複しますが、静的ファイルの配信とAPIの利用により、サーバーの負荷が軽減され、トラフィックの急増にも柔軟に対応できます。

リニューアルも容易

フロントエンドとバックエンドが分離されているため、デザインの変更・改修等が容易です。
開発者は好きなテクノロジーを使用してフロントエンドを構築でき、WordPressのテーマ開発の制限がありません。

ヘッドレスWordPressの欠点

一方で、インストール型WordPressにはなかった、ヘッドレスWordPressならではのデメリットも存在します。

専門の開発リソースが必要

高度なフロントエンドの知識や経験が求められ、セットアップと維持のためのコストが追加でかかる場合があります。WordPress側のカスタマイズを行う場合はWordPressの知識も必要です。

SEOの課題

ヘッドレスWordPressでは、SEOは基本的にプラグインではなく手動での対応となります。titleタグやmeta descriptionタグといった基本的にはタグに加え、構造化データによるマークアップを行う、OGPの出力、XMLサイトマップの生成と送信、robots.txtの設定といった、WordPressのSEOプラグインが行ってくれている設定を行う必要があります。

WordPressプラグイン互換性

一部のWordPressプラグインがフロントエンドと直接統合されているため、ヘッドレスWordPress環境では使用できないプラグインがあります。

サーバサイドによる動的処理ができない

WordPressでは容易だった、アクセスランキングプラグインやプレビュー機能、フォームプラグインが利用できないといったデメリットがあるため、注意が必要です。

フォームを利用するにはフォームのデータを処理するためのAPIエンドポイントを作成するか、サードパーティのフォームサービスを利用するといった対策が必要です。

ヘッドレスWordPressのセキュリティが向上する理由

攻撃面のリスク低下

従来のWordPressサイトでは、フロントエンドとバックエンドが密接に結合しており、ユーザーがフロントエンドを通じてバックエンドにアクセスできてしまいます。

これをヘッドレス化することで、バックエンドはAPIを介してのみフロントエンドと通信するため、WordPressの管理画面のURLがソースコードに露出せず、直接的な攻撃から保護されます。

ただし、画像ファイルはそのままだと管理画面のURLとなるため、別途サブドメインやAWSのS3にコピーするといった方法で分離させておくとより安心です。

セキュリティ対策はバックエンドに集中

フロントエンドが静的化するため、バックエンドのセキュリティ対策にリソースを集中させることができます。APIエンドポイントのセキュリティ強化、認証トークンの使用、適切なアクセス制御の実装など、効果的なセキュリティに焦点を絞って実施しやすくなります。

ヘッドレスWordPressのバックエンド用サーバーとフロントエンド用サーバーの選び方

フルマネージドのバックエンド

高いセキュリティと信頼性を前提として、フルマネージドでメンテナンスフリーなWordPress専門のホスティングが望ましいといえます。フルマネージドであれば、基本的にWordPressの更新やPHPのメンテナンスといった保守をホスティング側に任せることができます。ただし、影響が大きいとされるメジャーアップデートや一部のプラグイン等はテスト環境でアップデートしてから本番環境に実施といった作業が必要です。

• WPEngine
• Kinsta
• Shifter headless

フロントエンド

規模や目的にもよりますが、高速なCDN配信とスケーラビリティを提供するサービスが適していると言えます。個人利用であれば無料で利用できるというプランもあるためとりあえず使ってみるというのも可能です。

• Netlify
• Vercel
• GitHub Pages
• Amazon S3 + Amazon CloudFront

ヘッドレスWordPressはまだまだこれから

ヘッドレスWordPressは、ウェブ開発の新しい潮流として注目を集めていて、柔軟性とパフォーマンスの向上は多くの開発者や企業にとって魅力的な選択肢です。

しかし、技術的ハードルもあり、公開フローや反映フローも従来のインストール型WordPressと異なることから、導入には慎重な計画と適切な技術選定が必要です。

ヘッドレスWordPressについてまたわかったことがあればお知らせします。