はじめに

近年、CMSの中でも特に注目されているのが「ヘッドレスCMS」です。従来のCMSよりも自由度が高く、生産性アップが期待できるとされています。とはいえ、ヘッドレスCMSの利用もサイトや企業の特徴によって、向き不向きがあります。本記事ではヘッドレスCMSについての基礎と、向いているサイトや企業をご紹介します。

ヘッドレスCMSとは

ヘッドレスCMSとは、その名の通り「ヘッド」がないCMSのことです。ヘッドとは「表示」という意味で、見た目の部分がないCMSを言います。

CMSは通常、入稿システムを司るバックエンドと、画面の表示を司るフロントエンドがあります。ヘッドレスCMSは、これらのうちフロントエンド、つまり画面の表示を司る部分がないCMSです。

ヘッドレスCMSの必要性

ヘッドレスCMSが生まれた背景は、オンラインサービスの発展とデバイスの多様化です。

2016年頃から提唱されていたシステムですが、日本で注目されたのは新型コロナウイルスが流行した2020年頃でした。それまでオフラインだったものが、オンラインへとシフトチェンジ。加えて、スマートフォンやウェアラブル端末が普及したことにより、スピーディで堅牢なセキュリティ、マルチデバイスへの対応が求められることになりました。

そういった中で生まれたのが「バックエンドをサーバーで、フロントエンドをデバイス側で処理する」という方法です。そこでバックエンドとフロントエンドを切り離し、これらをAPI経由でつなぐヘッドレスCMSが生まれました。

このような背景から、ヘッドレスCMSはオンラインサービスの強化を考えている企業や、複数デバイス・複数のサイトでの表示を考えているユーザーに向いています。またバックエンドとフロントエンド同士の制約がないため、別々に開発や改修を行いたい企業にもおすすめです。

従来のCMSとの違い

ヘッドレスCMSと従来のCMSとの違いは、先述したように「フロントエンドの有無」です。WordPressなどの従来型のCMSは、バックエンドとフロントエンドがセットになっており、バックエンドにあるコンテンツをフロントエンドとやり取りして表示する仕組みになっています。サイト制作に必要なシステムが整えられているため、知識が豊富でなくてもサイトの制作や更新ができる点がメリットです。

一方、ヘッドレスCMSには表示を司るフロントエンドがなく、デバイスに表示するにはフロントエンドを作成するための専門知識が必要になります。ただ、フロントエンドがない分、バックエンドと別々に管理ができて自由度が高い、セキュリティの強化につながるなどの利点があります。

従来のCMSについては、下記の記事で詳しく解説しています。

CMSとは？種類や仕組み、導入時のポイントをわかりやすく解説！

ヘッドレスCMSの種類

ヘッドレスCMSには「Self-Hosted型」と「CaaS型」の2種があります。これらの大きな違いは「CMSの置き場所」です。

Self-Hosted型

Self-Hosted型は、自身で用意したサーバーやデータベースにCMS置くスタイルです。好きな場所に構築できることからカスタマイズの自由度が高く、コストもかからないことがメリットです。

ただし、基本的にサポートはなく、セキュリティ対策やデプロイメントなどは自身で行う必要があります。安全に運用を行うには、セキュリティ対策やデプロイメントに関する専門的な知識が必要です。

CaaS型

CaaS（CMS as a Service）型は、システム運用会社などが用意したクラウド上のサーバーやデータベースに、CMSを置くスタイルです。サービスとしてヘッドレスCMSが提供されており、保守管理を任せられる、困ったときのサポートを受けられるといったメリットがあります。

一方で、ライセンス料を支払って使用するため、Self-Hosted型よりもコストがかかります。また、サービスが停止となった場合に利用できなくなる点もデメリットです。

ヘッドレスCMSのメリット

ヘッドレスCMSが注目される理由は、現代のシステムに適した多くのメリットがあるためです。ここからは、ヘッドレスCMSのメリットを5つ、ご紹介します。

フロントエンドの自由度が高い

1つ目のメリットは、フロントエンドを自由に作成・改修できることです。従来のCMSでは、バックエンドとフロントエンドがセットになっているため、一方を改修すると一方に影響が出てしまいます。そのため、改修には厳しい制約があり、デザインや機能に制限が出てしまうことが難点でした。

ヘッドレスCMSでは、バックエンドとフロントエンドを分離させて管理することになるため、片方を改修しても、もう片方に影響が出ることはありません。そのため、バックエンドであらかじめ機能を作っておき、必要になった一部だけAPIを通じて表示させるなどの対応も可能です。

マルチデバイス対応がしやすい

マルチデバイス対応がしやすいことも、ヘッドレスCMSの大きなメリットです。従来のCMSでは特にWebを主体としてフロントエンドが作成されており、スマートウォッチなどのウェアラブル端末への対応ができません。ウェアラブル端末に対応するには、APIを別に作成する必要がありました。

ヘッドレスCMSには、こうした制限がありません。APIを経由して、同じコンテンツを別のデバイスで表記することが可能です。パソコンはもちろん、iOSやAndroid、デジタルサイネージなど、さまざまなデバイスで同じコンテンツを利用できます。

コンテンツの表示速度が速い

ヘッドレスCMSは、従来のCMSに比べて表示速度が速いです。従来のCMSは表示のためにデータファイルのやり取りをする必要があり、その分表示速度が遅くなります。一方、ヘッドレスCMSはデータのやり取りがありません。データをそのまま表示するため、従来のCMSよりも表示速度が速くなります。

このスピード感は、これまでオフラインで行ってきたサービスがオンラインになった現代において、非常に重要です。対面時と同じスピード感でサービスを提供することで、ユーザーもストレスなくサービスを利用できます。

CMS機能を後付けできる

ヘッドレスCMSを利用すれば、CMSの機能を後付けすることも可能です。従来のCMSでは、静的ページを作成したら、そのページにCMSを追加することはできません。例えば、トップページを静的ページとして作成し、あとから「お知らせ」などをCMSで追加する場合には、最初からCMSで作り直す必要がありました。

しかし、ヘッドレスCMSではAPIを経由してデータを読み込み、ページやサイトの一部にCMSのデータを表示できます。

特に編集頻度が多い部分は、自社でリアルタイム更新をしたいという要望も多いです。少ない労力でCMS機能を後付けできることは、サイト運用の上でも大きなメリットとなります。

コストを抑えられる

ヘッドレスCMSは、従来のCMSに比べてコストが抑えられる点もメリットです。従来型のCMSは、ページを表示するために動的ファイルをサーバー上で処理する必要があり、スペックの高いサーバーが必須でした。加えてバックエンドとフロントエンドを別物として開発することが難しく、開発環境や言語を合わせる、人材を雇う、逐一連携を取りながら開発を進めるなどの時間や資金が必要です。

一方、ヘッドレスCMSは表示に動的ファイルを必要としないため、スペックの高いサーバーは必要ありません。またフロントエンドとバックエンドが完全に分離していることから、お互いの開発環境や言語を揃える必要がなく、自社の環境に合わせてそれぞれの開発を進められます。バックエンド・フロントエンドが独立した状態で開発できるため、お互いの開発を邪魔することもなく、スピーディな開発が可能です。

ヘッドレスCMSのデメリット

さまざまな利点があるヘッドレスCMSですが、メリットの反面、デメリットもあります。ここからはヘッドレスCMSのデメリットを4つ、ご紹介します。

開発者が必要

1つ目のデメリットは、開発者が必要ということです。ヘッドレスCMSはフロントエンドがないCMSのため、そのままでは表示ができません。デバイス等に表示を行うには、フロントエンドを開発する技術者が必要となります。

加えて、開発者はフロントエンドの自由度の高さを活用できる人材である必要があります。これまでバックエンド側で行っていたプログラムをフロントエンドで組む、APIの知見があるなど、開発者に求められるスキルは高いです。既存社員の教育や高いスキルを持った人材の雇用が必要となります。

APIに関する知識が必要

ヘッドレスCMSを扱うには、APIに関する知識が必須です。ヘッドレスCMSではバックエンドのデータを、APIを経由することでフロントエンドに出力します。そのため、フロントエンドの開発者は、バックエンドにAPIリクエストを送付するためにAPIの知識が必要です。また、開発に直接的に関わらないWeb管理者も最低限のAPI知識がなければ、操作ができないこともあります。

プレビュー表示が難しい

ヘッドレスCMSにはフロントエンドがないため、プレビュー表示が難しいというデメリットもあります。従来のCMSなら、ページをプレビュー表示して公開前の画面を確認できましたが、表示機能のないヘッドレスCMSはプレビュー表示ができません。

公開前の画面を確認するには、プレビューサイトを別途用意するなどして対応する必要があります。

動的ページには外部ツールが必要

動的ページの作成に外部ツールが必要となることも、ヘッドレスCMSのデメリットです。動的ページとは、ショッピングカートや口コミなど、ユーザーが閲覧するタイミングでテキストや画像が変わるページです。一方で、いつ見ても内容が変わらない固定されたページを静的ページと言います。

基本的に動的ページはフロントエンドで管理しているため、バックエンドには静的機能しかありません。つまり、フロントエンドのないヘッドレスCMSは、すべてが静的ページとして管理されているのです。

従来のCMSであれば、バックエンドとフロントエンドがセットになっているため、外部ツールがなくても動的ページ、静的ページの両方が作成できました。しかし、動的機能を持たないヘッドレスCMSではそれができないため、外部ツールを使う必要があります。

ヘッドレスCMSとSEOの関係

ヘッドレスCMSでは、これまでSEO対策がしにくいと言われていました。その理由は、ヘッドレスCMSがAPIベースであるためです。フロントエンドとバックエンドをAPIでつなぐヘッドレスCMSは、SEO対策に制限があるとされており、利用に二の足を踏む人も多かったと思います。

しかし実際のところ、ヘッドレスCMSにおけるSEOについては、それほど気にする必要はありません。ここからはサーバー側・クライアント側の両方から、APIを利用する際のSEOとの関係性についてご紹介します。

サーバー側のAPIを利用する場合

APIベースのSEOについて問題とされているのが、JavaScriptの使用です。Googleは「クローラ」というシステムを使用して、ページを評価し、検索エンジンでの表示順位を決めています。以前、クローラはJavaScriptを使用した動的ページに弱く、変更が認識されない場合がありました。そのため、一部の変更だけで評価がされるという状態が起こっていたのです。現在この問題は解消されましたが、こうした理由からJavaScriptによるページの更新はSEOに向かないとされていました。

ただ、サーバー側からAPIを利用する場合、ページの情報が最初から揃っているため、JavaScriptによる更新をしていることをクローラは認識しません。シンプルな構造のページという認識をするため、ページの評価が高まります。サーバー側からのAPI利用については、SEO対策がしやすいと言えるでしょう。

ただし、これらはあくまで「クローラが認識するか」が基本になっています。サーバーの負荷を軽くするためにクローラの巡回避け等を行っていないか、確認してみましょう。

クライアント側からAPIを利用する場合

先述したように、JavaScriptの使用におけるSEO上の問題は、現在は解消されています。そのため、クライアント側からAPIを利用する場合も、以前と比べてSEO対策が格段に楽になりました。

ただし、クライアント側からAPIを利用する場合、クローラとJavaScriptの実行が別に行われるため、反映までタイムラグがあるようです。また、FacebookやTwitterなど、一部のSNSはJavaScriptを読み込まないため、この点も事前に認識しておく必要があります。

ヘッドレスCMSが向いているケース

ここからはヘッドレスCMSが向いているケースを3つ、ご紹介します。

複数サイトで共通コンテンツを一元管理したい

複数サイトで同じコンテンツを管理したい場合、ヘッドレスCMSが活用できます。ヘッドレスCMSでは共通するバックエンドを、APIを経由してさまざまなデバイスやURLで表示できます。

本来URLが違うサイトで同じコンテンツを使用する場合には、URLごとにコンテンツが必要です。しかしこうした手法ではそれぞれにコストがかかり、大きな負担となってしまいます。

ヘッドレスCMSなら、コンテンツを1つ用意すればAPIを使って別のサイトに呼び出せるため、コストの大幅な削減につながります。

スマホでもCMSを使いたい

スマホでCMSを利用したいという場合も、ヘッドレスCMSが向いています。先述したように、ヘッドレスCMSの強みは「マルチデバイスに対応できること」です。ヘッドレスCMSでコンテンツを用意し、APIを経由して各デバイスに適した表示方法を行うことで、開発の生産性が高まります。

独自開発が多く必要な場合

ヘッドレスCMSは独自開発が多く必要な場合にも適しています。なぜなら、従来のCMSでは、バックエンドとフロントエンドがセットになっているために、開発の自由度が低く、その点が開発者の枷となっていたこともあるためです。

開発者もすべての言語を平等に扱えるわけではありませんし、用意されているプラグインやデザインがすべてのサイトに適しているわけでもありません。必要なプラグインやモジュールがないために、自身でカスタマイズしたくても、得意な言語ではなく開発が進まないということもあります。

フロントエンドがないヘッドレスCMSなら、言語の制約がなく自由な開発が可能です。独自開発が多いという場合には、制約を多く受ける従来のCMSよりも自由度の高いヘッドレスCMSの方が開発しやすいでしょう。

CMSパッケージ「SITEMANAGE」なら、これらの実装が可能に

「SITEMANAGE」は弊社で自社開発したCMSパッケージで、ヘッドレスCMSではなく従来のCMSです。CMS自体を自社開発しているので、お客様の運用に合わせたCMSのカスタマイズも可能です。

先述のように複数サイトをひとつのCMSで一元管理する機能や、従来のCMSで実現できなかった機能の実装、デザインにも制限がなく、オリジナルデザインでCMSを導入することができます。

自社に開発者がおらず、誰でも簡単に操作できる自由度の高いCMSをお探しの方は、是非ご相談ください。

ヘッドレスCMSのまとめ

ヘッドレスCMSは従来のCMSでは限界とされてきた部分を、自由度の高さで解消してくれます。ただスキルが必要になることは留意すべき点です。メリットデメリットを踏まえ、自社のサイトがヘッドレスCMSに適しているのか考えてみましょう。