「ヘッドレスCMS」という言葉を最近よく耳にするかもしれません。

近年ヘッドレスCMSは、Webサイトの構築において徐々に流行の兆しを見せています。しかし、ヘッドレスCMSの導入はすべての人に向いているとは限りません。

今回はヘッドレスCMSの特徴と、導入によるメリットとデメリットについて解説していきましょう。

最近人気のヘッドレスCMSとは？

ヘッドレスCMSがどんなものかを理解するには、まず「CMS」について理解する必要があります。

CMSにもさまざまな種類があります。CMSとはどのようなものであるのか、CMSにはどんな種類のものがあるのか、また従来のCMSとヘッドレスCMSとの違いについてそれぞれ見ていきましょう。

ヘッドレスCMSの意味

ヘッドレスの「ヘッド」は表示する画面の見た目であるビューのこと、CMSはコンテンツ管理システム「Content Management System」のことを指します。CMSはWEBメディアの記事コンテンツや企業サイトのページ、ECサイトの商品情報の管理などに幅広く使われています。

その中でも内容を管理する機能のみを持ち、テーマやCSSなどの見た目（ヘッド）を持たないCMSが、ヘッドレスCMSです。

CMSの代表例

ヘッドレスCMSについて知る前に、まずCMSとはどんなものかについて見ていきましょう。

CMSは、誰でも自由に利用できる「オープンソース型のCMS」と、主にベンダー企業が開発する「独自開発型のCMS」の2種類に大きく分けることができます。それぞれについて、どんな特徴があるのか、代表例とあわせてご紹介します。

オープンソース型のCMS

「オープンソース」とは、ソースコードが無償で一般公開されていて、誰でも自由に利用できるソフトウェアのことを指します。

オープンソース型CMSの代表例として、世界シェアNo.1のCMSである「WordPress」が挙げられます。コンテンツの管理や、テーマと呼ばれるテンプレートの集まりを自由に編集することができ、内容と見た目の両方を一括管理することができます。

オープン型CMSには他にも、世界で2番目のシェアを誇る「Joomla」や大規模サイトでよく利用されている「Drupal」などがあります。

独自開発型のCMS

独自開発型CMSは、Web制作会社のようなベンダー企業が一社ごとにカスタマイズして開発するCMSツールです。独自開発型CMSには、CMSサーバー等のハード設備を自社に設置する「オンプレミスタイプ」と、クラウド事業者がCMSサーバーを管理する「クラウドタイプ」があります。

オンプレミスタイプの代表例には「SiTEMANAGE」「Movable Type」、クラウドタイプの代表例には「Wix」「ペライチ」などが挙げられます。

従来のCMSとの違い

ヘッドレスCMSとは従来のCMSとどのような違いがあるのでしょうか。

従来のCMSは、コンテンツを入稿・管理するシステムとコンテンツを表示するビューが合わさったものとなっていました。しかし、ヘッドレスCMSでは、この2つは切り離されています。

そのため、ビューをCMS外で自作する必要があります。APIを用いて必要なコンテンツを取得し、表示させたい場所に表示させる方法をとるのです。

ヘッドレスCMSのメリット

ヘッドレスCMSはそれまでのCMSと違って、コンテンツを管理する機能のみを持ち、ビューの部分はCMSの外で別途作成する必要があるということがわかりました。このことによって、実際に運用するうえでさまざまなメリットが生まれます。

次にヘッドレスCMSにはどのようなメリットがあるのか、具体的なシチュエーションと合わせてみていきましょう。

マルチデバイス対応が可能

ヘッドレスCMSを使用すると、コンテンツをWeb、iOSアプリ、Androidアプリなど複数のデバイスに表示することが可能になります。専用のWebViewを作ってアプリ内に表示するのではなく、APIを経由してコンテンツを取得し、アプリのネイティブ機能で表示するため、画面を表示する時間を短縮できます。

システム側に集中できデザインも自由に

従来のCMSでは、フロントエンド（直接ユーザーに見える部分）とバックエンド（データベースのシステムなどユーザーからは見えない部分）が同じCMS上で管理されていました。そのためどちらか一方を改修したいという場合でも、それぞれのシステムに影響が出ない範囲でしかシステムを変更することができませんでした。

しかし、ヘッドレスCMSではフロントエンドとバックエンドが分離しています。つまり、フロントエンドでシステム変更が必要な場合でもバックエンド側に影響が出てしまうということがないのです。

ユーザーからの見え方を気にすることなく、システム側に集中して改修が行えるといったメリットがあり、反対に、システム側を気にせず見た目を重視しての構成を選べるためデザインの自由度も高まります。

CMS機能の後付けが可能

従来のCMSでは、すでに静的ページとして作成してあるWebサイトに、後からページを指定してCMS機能を追加することはできませんでした。ヘッドレスCMSを使用することで、静的ページをいじることなく、後から部分的にCMS機能を使うことが可能となります。

たとえば「企業のホームページを静的ページで制作しており、それとは別に都度コンテンツを入稿し更新していく『新着情報』のページを追加したい」という場合、従来のCMSではサイト全体を作り直す必要がありました。しかしヘッドレスCMSを使えば、すでにあるページをいじることなく「新着情報」の部分のみをAPIから取得してサイトに表示することが可能になります。

また、ヘッドレスCMSでは入稿フォーム自体をサービス上で作成するため、その都度最適なUIを適用することができます。

サーバコスト削減が可能

通常のCMSでは、閲覧用のファイル生成のためにファイルのやり取りをする工程があります。ヘッドレスCMSでは静的ファイルそのものを表示することが出来るため、サーバ処理にかかる工数軽減することが可能です。

また、高スペックのWebサーバを準備する必要もないため、サーバーコストを抑えることが可能となります。たとえば、複数のサイトにまたがるコンテンツをCMSで一元管理したい場合、サーバごとにCMSやコンテンツを入れるとサイト数に応じてコストもその分かかってしまいます。

それをコンテンツ本体をヘッドレスCMSでまとめて管理し、サイトにアクセスがあった際に、都度サイトからヘッドレスCMSのコンテンツをAPIで呼び出す仕組みに変えることで、コストを抑えることができるのです。

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

続いて、ヘッドレスCMSのデメリットについて見ていきましょう。ヘッドレスCMSは、フロントエンドの自由度が高いというメリットがありますが、そのかわりヘッドにあたる部分をすべて自前で作成する必要があるということを念頭に置いて置くことが必要です。

メリットだけでなく、デメリットも考慮してヘッドレスCMSの導入を決めると良いでしょう。

プレビュー表示が複雑になる場合も

多くのヘッドレスCMSでは、下書き情報を取得する機能自体は備わっています。一方で、ビューについては完全に自作する必要があるため、下書き情報のパラメータをビュー側で受け取り、プレビューで確認する環境を用意する必要があります。

パラメータの受け渡しが構成と合わない場合などは、プレビュー表示のための構成が複雑化してしまうことがあるため注意が必要です。

技術的難易度が高くなりがち

Webサイト運営者には、APIに関する知識の習得が必要となります。ヘッドレスCMSから外部のフロントエンドへコンテンツデータを出力する際は、APIを利用するためです。

また、Webサイト制作の段階ではエンジニアがAPIのスキーマ設定などを行ったとしても、コンテンツの入稿は非エンジニアが行う場合が多く、非エンジニアにとって難しいシステムとなってしまいがちです。また、APIベースでデータのやりとりを行うため、セキュリティ対応も慎重に行う必要があります。

注目したいヘッドレスCMS 3選

注目のヘッドレスCMSについて見ていきましょう。ここでは、ドイツ発のヘッドレスCMS「Contentful」、フェイスブックが開発したAPIを活用した「GraphCMS」、国産のヘッドレスCMS「MicroCMS」の3種類をご紹介します。

適用したいWebサイトや実際に使用する技術者によって向き不向きがあるので、それぞれの特徴を知っておきましょう

ドイツ発のヘッドレスCMS「Contentful」

まず1つ目に紹介するのは「Contentful」。こちらは ドイツのヘッドレスCMSで、Spotifyなど大手の顧客を抱えています。

デスクトップやモバイル以外にも、デジタルサイネージやスマートウォッチなどへのコンテンツ配信ができるAPIがあることが特徴です。日本語の対応をしていないので、英語で使いこなす必要があります。

ドイツ発のヘッドレスCMS「Contentful」
https://www.contentful.com/

フェイスブックが開発したAPIを活用「GraphCMS」

2つ目に「GraphCMS」が挙げられます。「GraphCMS」は、フェイスブックが開発したAPIである「GraphQL」を活用しています。

コンテンツフィルタリングの機能が充実している点や、バッチ処理が可能な点が特徴となっています。アプリ開発などでGraphQLをすでに扱ったことがある場合には、特に使いやすいでしょう。

フェイスブックが開発したAPIを活用「GraphCMS」
https://graphcms.com/

国産のヘッドレスCMS「MicroCMS」

そして3つ目が「MicroCMS」です。日本で作られているヘッドレスCMSであるため、英語の管理画面を読み解く必要などがありません。

またスキーマ（データベースの構造）を自由に組み合わせることが出来るため、Webサイトをはじめ、ECサイトやSaaSサイトなど様々な種類のWebサイトの構築ができます。

国産のヘッドレスCMS「MicroCMS」
https://microcms.io/

まとめ

ヘッドレスCMSがどんなものがイメージできましたか。ヘッドレスCMSにはメリットもありますがデメリットもあります。使いたいWebサイトによっても向き不向きがあるようです。

導入にあたっては、実際に適用させたいサイトの使われ方や、実際にヘッドレスCMSを触るエンジニアの知識などを総合的に考慮したうえで、導入を検討すると良いでしょう。