HeadlessCMSとは？WordPressに取って代わる「新定番のCMS」となるか

Web制作の場ではお馴染みとなったCMS（コンテンツ管理システム）。WordPressをはじめとする従来タイプのCMSは「CoupledCMS（カップルドCMS）」と呼ばれています。

それに対して新しく登場したのが「HeadlessCMS（ヘッドレスCMS）」です。

今回は新タイプのCMSである、HeadlessCMSについてご紹介します。

HeadlessCMSは「プレビュー機能のない、コンテンツ管理に特化したCMS」

HeadlessCMSとは「プレビュー機能がないCMS」のことです。コンテンツを管理画面の外に見せるプレビュー機能がない、あくまでコンテンツ管理のみに特化したCMSといえます。なお「Headless」は、「（Webサイトの顔とも言える）プレビューを持たない」という意味で使われています。

なおHeadlessCMSのコンテンツは、APIで配信可能です。HeadlessCMSで管理したコンテンツをAPIで外部配信するには、HeadlessCMSとは別にフロントエンド部分を作成する必要があります。

従来のCMS（CoupledCMS）との違い

HeadlessCMSと、従来のCoupledCMSの違いは、おもに以下の4点です。

＜HeadlessCMSと従来のCoupledCMSの違い＞

• プレビュー機能がない
• 既存のWebサイトに利用できる
• マルチデバイスに対応している
• PAとの相性がよい

違い1. プレビュー機能がない

従来のCoupledCMSは、コンテンツを登録／編集するバックエンド（管理画面）と、コンテンツを公開するためのフロントエンドがひとつに集約されていました。

対してHeadlessCMSは、前述のとおりコンテンツ管理（バックエンド）に特化しており、公開するための画面（フロントエンド）は持ちません。つまりプレビュー機能がないということです。HeadlessCMSを使ってコンテンツを公開する場合は、フロントエンド部分をCMSの外で別途作成する必要があります。

CoupledCMSならコンテンツを公開するだけでフロントエンド部分が自動作成されるため、「フロントエンドを別に作成する」のは手間に感じるかもしれません。しかし「別途作成する」ことになる分、フロントエンドの自由度は格段に増します。

CoupledCMSでフロントエンドをカスタマイズする場合、CMSごとに特有のコードを書かねばならなかったり、依存関係の問題で使える技術が限られたりなど、バックエンド側の事情に左右されます。一方で、HeadlessCMSはフロントエンドとバックエンドが完全に切り離されているため、フロントエンドをどのように作っていくかを自由に決められるのです。

違い2. 既存のWebサイトに利用できる

フロントエンドが自由なHeadlessCMSは、既存のWebサイトに利用できます。

PHPやRubyなどのプログラミング言語を使わず、HTMLとCSSだけでコーディングした昔ながらのWebサイトに用いることも可能。WordPressサイトの一部分のみに、HeadlessCMSから取得したコンテンツを表示させることもできます。

APIから取得したコンテンツをレンダリングすることさえできれば、どんな環境でも利用できるのがHeadlessCMSの利点のひとつです。

違い3. マルチデバイスに対応している

HeadlessCMSのコンテンツは、プラットフォームに縛られずに利用できます。Webはもちろん、iOSやAndroidなどOSごとに作られるアプリケーションや、IoT機器での利用も可能です。

これまでアプリケーション上にCMSのコンテンツを転載する場合には、WebViewを使ってアプリケーション上にWebページを表示させる方法が多く取られていました。このWebViewは実際のブラウザと比べると処理が遅く、そのためコンテンツを表示させる速度も遅くなる難点があります。

HeadlessCMSの場合はAPIで取得したコンテンツをネイティブで表示させられるため、マルチデバイス対応も簡単です。

違い4. SPAとの相性がよい

SPA（Single Page Application）は、Webアプリケーションでありながらネイティブアプリケーションと同等の機能を実装でき、より高度なWeb体験をユーザーへ提供できる技術です。

2020年時点での普及率は低く、Web業界のスタンダードというには早い印象ですが、Googleの各サービスやTwitter、Huluは既にSPAの技術を採用しています。今後、他の有名サービスも次々とSPA技術を採用していくと推測されます。

HeadlessCMSは、そんなSPAとも相性バツグン。SPAはページ内容を更新するのにAPIを利用しており、HeadlessCMSが提供するコンテンツもAPIで作られているため、SPA採用と同時にHeadlessCMSの導入も検討できるのです。

WordPressは、HeadlessCMSに取って代わられるのか？

HeadlessCMSが魅力的な分、気になるのが「これまで活用してきたWordPressは、HeadlessCMSの台頭によりなくなってしまうのか？」というところ。

世界の3分の1以上を占める「WordPress」

WordPressは、Webコンテンツを初めて配信する方にも扱いやすいことから普及が進みました。2020年現在、全世界のWebサイトのうち37.6％がWordPressで作られているというデータもあり、使い方やカスタマイズの情報も多く提供されているCMSです。

Webエンジニアのいない企業サイトから個人ブログまで、多くの分野でWordPressが活用されてきた背景があります。

また大半のメディアサイトがWordPressで作られていることから、多くのWebエンジニアやWebライターは「WordPressを扱えるのが当たり前」とされてきました。

非エンジニアには扱いにくい「HeadlessCMS」

対してHeadlessCMSの普及率はまだまだ低い現状があります。利用者が少ないため資料も情報も少なく、やっと見つけても英語の資料だったり、高度で分かりにくい書き方をされていたりすることも少なくありません。管理画面が日本語対応していないケースもあります。

またHeadlessCMSは「コンテンツをAPIで配信する」ため、非エンジニアにとって分かりにくい、API設定に関する専門用語が入稿画面に集まりがちです。

ロールを設定することでAPI設定を非表示にするCMSもありますが、WordPressほど馴染みがないため工数がかかるなどの問題も起こるでしょう。

HeadlessCMSやSPAを扱えるエンジニアも未だ不足傾向です。人材確保に苦労する点から、費用も多くかかることが予想されます。

小〜中規模案件では、まだまだWordPressが活躍する

普及面や扱える人の少なさから、小～中規模開発の場ではまだまだWordPressが活躍すると考えられます。完全にHeadlessCMSに取って代わられてしまう日は、しばらくやって来ないでしょう。

しかし大規模サイトへのHeadlessCMS普及率が高まるにつれ、HeadlessCMSこそがCMSのスタンダードとなっていく可能性はあります。いまのうちから情報をキャッチアップしておき、その波が来たらすぐに乗れるような備えはしておくべきです。

ちなみにWordPressには、すでに投稿されているコンテンツをHeadlessCMSのようにAPIとして配信できる「WP REST API」という仕組みもあります。

HeadlessCMSの今後に注目していこう

HeadlessCMSにはプレビュー機能がありません。WordPressなどのCoupledCMSとは異なり、管理しているコンテンツを表示させるWebページは自作する必要があります。

ただしコンテンツはAPIで配信されるため、流行りのSPAとの相性は抜群です。マルチデバイスへの対応も容易ですし、既存のWebサイトの一部に取り入れることもできます。

HeadlessCMSは日本語の資料も少なく、習得しているエンジニアの数も多くはありません。学習するのは比較的難しい部類となりそうですが、逆にチャンスと捉えていち早く挑戦するのもよいですね。

ReactやVueなどのSPA向けフレームワークが盛り上がりを見せるなか、SPAとの相性がよいHeadlessCMSも同様に注目を集めていくことが予想されます。

今後の展開に期待の技術ですので、ぜひキャッチアップしてみてくださいね。

（執筆：fuzuki　編集：Kitamura Yuu、Sato Mizuki）