Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

ヘッドレスWordPressとは何か?

多くのユーザーは、WordPressのバックエンド管理エリアと訪問者が目にするフロントエンドを切り離す強力なコンセプトであるヘッドレスWordPressに興味を持っています。

この設定により、開発者はWordPressの安定性とセキュリティを維持しながら、異なるフロントエンド技術を使用することができます。複雑なサイトでは、より柔軟でパフォーマンスも向上します。

この投稿では、ヘッドレスWordPressとは何か、それを使うべきかどうかを説明します。また、長所と短所についても説明し、十分な情報を得た上で決断できるようにします。

Headless WordPress pros and cons

このガイドで取り上げるトピックの概要は以下の通りです:

ヘッドレスWordPressとは?

ヘッドレスWordPressとは、WordPressをバックエンドソフトウェアとして使用し、データとコンテンツを管理しながら、フロントエンドのデータ表示には区切りの技術を使用しているサイトを指すキーワードです。

バックエンドとは、サイトの管理エリアを指すキーワードです。投稿やページなどのコンテンツを作成したり、プラグインをインストールしたり、コメントを管理したりする場所です。

WordPress admin area

フロントエンドは、あなたのサイトの一般に公開されるエリアです。

これは、ユーザーがあなたのサイトを訪れたときにブラウザーに表示されるものです。

Front-end example

WordPressは通常、1つの強力なソフトウェアパッケージで両方のコンポーネントを処理します。WordPressテーマを使ってサイトを表示するだけです。

しかし、開発者やサイトオーナーによっては要求が異なる場合があり、React.js、Angular.js、Faust.jsなどの他のテクノロジーを使用して、サイトのカスタムフロントエンドを作成する必要があるかもしれません。

ヘッドレス・ワードプレスは、バックエンドでWordPressを使用しながら、これらの技術を使用し、より簡単なコンテンツ管理を可能にする。

ヘッドレスWordPressはどのように機能するのか?

WordPressには、コンテンツを作成し、サイトを管理するための使いやすい管理エリアが用意されています。また、テーマを使用してサイトのフロントエンドを表示するためのテンプレートエンジンも含まれています。

詳しくは、WordPressが舞台裏でどのように機能しているかについての投稿をご覧ください。

WordPressには、WordPress REST APIと呼ばれるAPIも付属しています。

このAPIは、開発者がWordPressサイトのデータにJSON形式でアクセスするためのプログラミングインターフェースを提供します。

ヘッドレスWordPressサイトを作るとき、開発者はREST APIを使ってWordPressからデータを取得する。その後、アプリやReact.js、Angular.js、Faust.jsなどの他のフロントエンド技術でそれを使用し、カスタムサイトを作成することができます。

ヘッドレスWordPressを使うメリットとは?

ヘッドレスWordPressは、いくつかの特定のシナリオにおいて有益です。ヘッドレスWordPressを使用する利点のいくつかについてお話します。

1.ヘッドレスWordPressは、通常のWordPressサイトよりも高速化できる

多くの開発者は、ヘッドレスWordPressを使用することで、より高速なWordPressサイトを作成できると考えている。

React.jsのような技術を使ってサイトのフロントエンドを区切ることで、多くの開発者はほとんどのWordPressテーマよりも効率的なコードを提供しようとしている。

しかし、私たちの経験では、WordPressのパフォーマンスを最適化するシンプルなテクニックは、ほとんどの中小企業のサイトやユースケースでヘッドレスWordPressと同じように機能します。

2.ヘッドレスWordPressのデータを他のアプリに統合する

例えば、あなたがモバイルアプリを持っていて、WordPressサイトのブログやその他のセクションをアプリに統合したいとします。

ヘッドレスWordPressを使えば、WordPressのデータを他のアプリに取り込むことができ、さまざまなテクノロジーを使ってシームレスなユーザー体験を実現できます。

同様に、静的なサイトをお持ちで、ブログ、レビュー、オンラインストアなどの特定のセクションにのみ動的なセクションが必要な場合、ヘッドレスWordPressはWordPressのデータを静的なサイトに統合することができます。

3.ヘッドレスWordPressで複数のプラットフォームに公開する

ヘッドレスWordPressは、WordPressのデータをどこにでも持ち運べるようにします。

データをマーケティング・キャンペーンに利用したり、ソーシャルメディア・プラットフォームに投稿したり、スマート・スピーカーなどのIoT端末に利用したり、人工知能ツールにフィードしたり、バーチャル・アシスタントに接続したりすることができる。

4.ヘッドレスWordPressは、プロプライエタリなヘッドレスCMSよりもはるかに手頃な価格です。

ヘッドレスWordPressは、コンテンツフルのようなプロプライエタリな “エンタープライズCMS “ソリューションよりもはるかに手頃で強力です。

ヘッドレスWordPressサイトのデメリットとは?

ヘッドレスのWordPressサイトを作ることは、あなたのサイトをあるデメリットに直面させるかもしれません。そのいくつかを見てみましょう。

1.ヘッドレスWordPressは、従来のWordPressサイトに比べて高価です。

サイト用にカスタマイザーフロントエンドを作成するには開発者を雇う必要があります。これには数万ドルの費用がかかる。

もしあなたが開発者なら、カスタマイザーフロントエンドを作るのに貴重な時間を費やすことになるだろう。

フロントエンド開発フレームワークを使用しているとしても、サーバー/DNSレベルで適切なキャッシュを備えた既製のWordPressテーマを使用するよりも時間と労力がかかるだろう。

2.WordPressプラグインが動作しない場合があります。

プラグインはWordPressサイトのアプリのようなものです。プラグインを使うことで、新しい機能を追加したり、サイトの機能を拡張したりすることができます。

ヘッドレスWordPressサイトは、WordPressプラグインの一部を利用できない場合があります。

たとえば、WordPressプラグインのデータの中にはREST APIを使用してアクセスできないものもありますし、プラグインの機能が正しく機能するためにはWordPressテーマが必須となる場合もあります。

とはいえ、AIOSEOのような人気のあるWordPressプラグインには、SEOに適したヘッドレスWordPressサイトを作成できるREST APIエクステンションがある。

3.メンテナンスの頭痛

基本的にサイトのフロントエンドとバックエンドに別々のプラットフォームを使うことになり、その両方を別々に管理する必要がある。

時折、どちらか一方が故障することもある。このような問題を解決するためには開発者に頼る必要があり、そうでなければ貴重な時間を修正に費やすことになる。

複雑さが増すと、ビジネスが成長するにつれて難しくなる。

ヘッドレスWordPressサイトを使うべきか?

私たちの意見では、ほとんどのWordPressユーザーは、ヘッドレスWordPressサイトや他のタイプのヘッドレスフレームワークを使用する必要はありません。

高価で、無駄に複雑で、大多数のサイトオーナー、ブロガー、中小企業、オンラインショップには適していない。

例えば、スピードとパフォーマンスが主な関心事であれば、既存のWordPressウェブサイトはヘッドレスWordPressウェブサイトを簡単に凌駕することができます。

WordPressのキャッシュプラグインはすべて、ページキャッシュ、キャッシュプリロード、オブジェクトキャッシュ、gzip圧縮機能を備えています。

これらの機能をオンにすることで、開発者を雇うことなくサイトの速度を大幅に向上させることができます。

これにCloudflareやSucuriのような強力なCDNやウェブアプリケーションファイアウォールを組み合わせれば、サイトはさらに高速化する。

WPBeginnerをヘッドレスサイトよりも高速にロードさせた事例をご覧ください。

統合に関しては、利用可能なほぼすべてのサードパーティのプラットフォームとの統合を提供する59,000以上のWordPressプラグインがあります。

Uncanny Automatorのように、WordPressサイトやZapierを使ったサードパーティツールとの統合を可能にするツールもある。

既存のWordPressプラグインで利用できない統合が必要な場合は、カスタムプラグインを作成するために開発者を雇う必要があります。

カスタマイザーによる WordPress ソリューションで開発者のサポートが必要ですか? プレミアムオンデマンド WordPress サポートサービスをご利用ください。プロの WordPress エキスパートが、あなたのサイトのカスタマイザーの構築をお手伝いします。

これなら費用もかなり抑えられるし、他のWordPressユーザーにデジタル・ダウンロードとして販売することで、オンラインでお金を稼ぐこともできる。

誰がヘッドレスWordPressを使うべきか?

私たちは、ヘッドレスWordPressは非常に特殊なシナリオでのみ使用されるべきだと考えています。

まず、ヘッドレスCMSの真の必要性があるかどうかを評価する必要がある。

例えば、カスタムサイトやアプリを構築した企業。彼らは、より簡単なコンテンツ管理機能のためにWordPressを必要とするかもしれません。そのようなシナリオでは、ヘッドレスWordPressを使用することは理にかなっています。

第二に、開発者を雇い、維持する予算があるか、ヘッドレスCMSを維持するために必須のスキルセットを持っている必要がある。

ヘッドレスWordPress CMSは、新規のカスタムアプリを作成する場合や、WordPressを使用してコンテンツ作成と管理を簡単にする場合に使用されることを覚えておいてください。

ヘッドレスWordPressで注意すべき重要なこと

技術に疎い経営者としては、本当にヘッドレスWordPressが必要なのかどうかわからないことがある。

WordPress開発者や代理店の中には、ヘッドレスサイトをあなたに押し付けようとするところもある。彼らのインセンティブは、より多くのお金を請求することであることを忘れないでください。

ヘッドレスWordPressを提案する理由がスピードやSEOだけであれば、サイトのスピードを最適化するためにすでに何を行っているのか、ヘッドレスWordPressに切り替えることでどの程度の影響があるのかを聞く必要がある。具体的な答えが得られない場合は、セカンドオピニオンを求めるべきだ。

大半のサイトにとって、改善点はごくわずかだが、ヘッドレスWordPressサイトの開発と維持にかかるコストははるかに高いことに驚くだろう。

何をするにしても、WordPressからContentfulのようなものに乗り換えるよう誰かに説得されないように。きっと失望することになる。

私たちは、多くのビジネスオーナーがWordPressに乗り換えたものの、その間違いに気づき、またWordPressに戻したという話を聞いてきました。

とはいえ、ヘッドレスWordPressサイトが必要だと100%確信しているのであれば、以下に簡単なステップバイステップガイドを紹介しよう。

ヘッドレスWordPressサイトの作り方

フロントエンドに使いたいツールにもよるが、ヘッドレスWordPressサイトを作る方法はたくさんある。

このチュートリアルでは、WordPressが生成する静的ページのみを使用して、ヘッドレスWordPressサイトを作成する方法を紹介します。これは、ヘッドレスWordPressサイトを作成する最も柔軟な方法ではありませんが、初心者にとって最も簡単な方法です。

まず、ヘッドレスCMSとして使いたいWordPressサイトを作る必要がある。

これは、独自のドメイン名とウェブホスティングサービスアカウントを持つライブサイトである必要があります。

SiteGroundを お勧めします。最速のWordPressホスティングサービスの1つで、公式推奨プロバイダー です。

SiteGroundサーバーはGoogleクラウドを利用しており、パフォーマンス最適化ツールが多数ビルトインされています。

あるいは、もう少し時間をかけられるのであれば、WP Engineを見てみよう。同社のAtlasプランは、大規模なヘッドレスWordPressサイト向けで、開発者をターゲットにしています。

Atlasは、無料のサンドボックスアカウント、カスタムコンテンツモジュール、ワークフローをスピードアップするための設定済みブループリント、WPGraphQLプラグインとのより深い統合を備えています。

また、自分のコンピューターでローカルのWordPressサイトを作ることもできます。

その後、投稿やページを追加することで、サイトに取り掛かることができます。WordPressのテーマを選び、デザインすることもできます。

サイトの準備ができたら、Simply Staticプラグインをインストールして有効化する必要があります。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

有効化した後、プラグインを設定するためにSimply Static ” 設定ページにアクセスする必要があります。

Simply Static general settings

ここから、静的ファイルで使用するURLパスを選択できます。

例えば、静的ファイルをホスティングサービスするURLやドメイン名がわかっている場合、そのURLを「Absolute URLs(絶対URL)」フィールドにプロバイダーすることができます。

よくわからない場合は、「相対URL」オプションを使用することができます。

次に、「Include/Exclude」タブに切り替えます。ここから、インクルードまたは除外するページを追加できます。

Exclude URLs

正規表現を使って、特定のパターンに一致するURLを除外することもできる。

変更を保存」ボタンをクリックして、設定を保存することを忘れないでください。

これで、ヘッドレスサイト用の静的ファイルを生成する準備ができました。Simply Static ” ジェネレータページに行き、’静的ファイルを生成’ボタンをクリックするだけです。

Generate static files

プラグインは、あなたのサイトをクロールし、一時フォルダに静的ファイルを格納し始めます。サイトのページ数によっては時間がかかる場合があります。

完了すると、成功通知が表示され、ZIPアーカイブ形式でコンピューターにファイルをダウンロードするためのリンクが表示されます。

Download files to your computer

zipファイルをダウンロードしたら、解凍する必要があります。

これで、解凍したファイルをあなたのサイトまたはヘッドレスウェブサイトをホスティングしたいサーバーにアップロードする準備が整いました。

FTPクライアントまたは ホスティングサービスコントロールパネルのファイルマネージャーアプリを 使用してサイトに接続 できます。

接続が完了したら、先ほどダウンロードした静的ファイルをサイトにアップロードします。

Upload static files

その後、静的なサイトにアクセスして、実際に動作しているところを見ることができる。

注:静的サイトを更新するには、WordPressインストールで新規コンテンツを作成し、ユーザーに提供される静的ファイルを置き換えるために、すべてのプロセスを再度繰り返す必要があります。

これは、静的なWordPressサイトを作成する最も柔軟な方法ではないことに注意することが重要です。

WP Engine Atlas のようなヘッドレス WordPress ソリューションを使用すると、より優れた開発者ツール、スターターサイト設計図、ハウツーガイド、よりスマートな本番デプロイソリューションなどを利用できます。

大規模サイトや企業向けソリューションでは、ヘッドレスWordPress CMSのフルパワーを引き出すために、WPGraphQLとともにWP Engine Atlasを使用することをお勧めします。

とはいえ、もしあなたが中小企業のオーナーで、SEOランキングを向上させるにはヘッドレスWordPressサイトが必要だとどこかで読んだとしても、それは間違ったアドバイスに過ぎません。WordPressを高速化する方法についてのガイドに従ってサイトのパフォーマンスを改善することで、同様の結果を得ることができます。

この投稿が、ヘッドレスWordPressについて、またあなたのサイトに使用すべきかどうかを 知る一助となれば幸いです。また WordPressスピードテストの方法や、WordPressホスティングサービスのエキスパートが選ぶ最速のホスティングサービスもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

アバター

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

6件のコメント返信を残す

  1. Kushal Phalak

    As a designer and a frontend developer, it is very interesting to see these changes. It is awesome that I can use wordpress as a CMS and use NextJS on the fontend and the perks of increased performance and flexibility. It is a shame that some plugins are not supported currently, but I guess they will be in near future. Though it may not be suitable for those who do not understand code.

    • WPBeginner Support

      It’s not a solution for everyone so there are no guarantees that every plugin will add support for this in the future.

      管理者

  2. Jiří Vaněk

    Thank you for the article. I had no idea that something like headless WordPress existed, and it didn’t even occur to me that the backend wouldn’t necessarily be connected to the frontend. Once again, I’ve learned something new. Awesome.

    • WPBeginner Support

      Glad we could share :)

      管理者

  3. James Winfield

    Headless WordPress is an interesting solution if you are an engineer/developer and want to learn technologies like NextJS and GraphQL, which you can use to create fast loading React-style websites.

    Not sure there is much performance benefit (though Lighthouse loves the two sites I’ve made through NextJS’ headless template), though also you can then deploy via Vercel which is free, to a limit anyway. I am loving this technology, and is a great way for me to practice the most in-demand skills of a f/e engineer.

    Otherwise I agree with your comments, especially if non-developers are being bumped into this by agencies/developers!

    • WPBeginner Support

      Thanks for sharing your experience :)

      管理者

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。