こんにちは。元LIGのWebディレクターで、いまはとある事業会社で開発ディレクターをやっているともぞうです。
さっそく本題ですが、みなさんはなんのCMSを使っていますか？ WordPress、Drupal、Movable Typeあたりでしょうか？
最近ではヘッドレスCMSというものも出てきて、CMSの選択の幅が広がりました。
今回はそのヘッドレスCMSに焦点を当て、ヘッドレスとは？ というところから、ヘッドレスCMSのメリットデメリット、各ヘッドレスCMSの比較ができる記事をお届けします。
※この記事は株式会社ディバータの提供でお届けします。
目次
ヘッドレスCMSとは
まずヘッドレスCMSの説明からはじめます。
ヘッドレスCMSとは表示機能を持たないCMSのことを呼びます。「ヘッドレス」で調べてみると以下のような説明がでてきました。
ソフトウェアについてヘッドレスという場合は、通常は用意されている表示・操作画面が存在しないか切り離されており、別の方法で操作・使用できるようになっていることを指す。
例えば、Webブラウザを通常のウィンドウ表示で操作せず、OSのシェルなどからコマンド入力で起動・操作する方式などが該当する。操作をスクリプトなどで自動化しつつ、アクセス先のWebサイトには人間が操作しているかのように装うことができる。
引用：ヘッドレス（IT用語辞典 e-Words）
つまり、ヘッドレスCMSではコンテンツ管理機能だけを提供し、表示は別の方法でおこなうことになります。表示部分は一般的にNext.jsやNuxt.jsといったJavaScriptのフレームワークを用いて構築することが多いです。
ヘッドレスCMSと従来のCMSの違い
ヘッドレスではないCMSの代表である、WordPressと比較するとわかりやすいかもしれません。WordPressでは、管理画面でコンテンツを操作・編集し、表示もWordPress上のテーマファイルが管理しています。
例えば、更新する要素がなく、本来WordPress上で管理しないでもいいようなページも、固定ページとしてWordPressで管理する必要があります。これは表示のフロントエンドと、コンテンツ管理のバックエンドが密な関係にあると言えます。こういったCMSをカップルドCMSと呼びます。
一方でヘッドレスCMSでは、コンテンツ管理と表示が切り離されて管理されます。コンテンツ管理のみがヘッドレスCMSの仕事範囲になります。よくフロントエンドとバックエンドが分離されているなんていいます。
ヘッドレスCMSのメリット・デメリット
ヘッドレスCMSでは、コンテンツ管理と表示が切り離されており、コンテンツ管理のみが仕事範囲だということがわかりました。これだけではヘッドレスCMSのよさがいまいちわかりません。ヘッドレスCMSを採用するとどんないいことがあるのかを見ていきましょう。
メリット
マルチプラットフォーム対応が可能
カップルドCMSでは、表示も管理されてしまうため、対応デバイスが限られてしまいます。例えばWordPressは一般的にWebサイト用の表示を持っています。そのため、ブラウザに限った対応になりがちです。WordPressの投稿データをiOSアプリやAndrodiアプリなどで使用することは難しくなります。
しかしヘッドレスCMSでは、データは一般的にAPIベースでのやりとりになります。APIベースであれば、さまざまなプラットフォームでデータの受取が可能になるため、iOSアプリへの展開などスケールしやすくなります。何か新しいプラットフォームへの対応や、他のサイトにコンテンツの一部を表示させるなんて対応もできます。
システムの責任範囲がわかりやすい
フロントエンドとバックエンドが切り離されるため、システム開発の責任分担をきれいに分けることが可能です。例えば何かシステム上不具合があった場合、それが見た目の問題なのか、データの問題なのかで修正担当がどちらか一目瞭然になります。
また使用しているCMSのバージョンアップがあった場合に、表示とCMSが切り分けられているため、その影響範囲はCMSのみになります。これはリリース作業においても同じことが言えます。フロントエンドとバックエンドを別々にリリースができるため、見た目の改修だけリリースができます。
分離されていると、外部に公開されているのはフロントエンドと必要なAPIのみにすることができるため、セキュリティ対策にも繋がります。
フロントエンドの自由度が高く、ユーザー体験の向上を狙える
コンテンツ管理と表示が切り離されているということは、表示側はCMSの制限を受けません。つまり、フロントエンド側は自由なレイアウトを組むことができ、ユーザーフレンドリーなUI/UXを提供しやくすくなります。
またフロントエンドの技術選定の幅も広がります。前述のとおり、Next.jsやNuxt.jsといったフレームワークがよく選ばれている印象です。また、フロントエンドのみ技術刷新するなど柔軟な対応が可能になります。
これにより、いま流行りのJamstackアーキテクチャにすることが可能です。従来のCMSによる動的なコンテンツ配信では表示速度に限界がありましたが、静的サイトと同様の表示速度を追求できるようになりました。
デメリット
幅広い技術への知見が必要で人材確保が難しい
フロントエンド、バックエンドともに幅広い技術への知見が求められます。フロントエンドではNext.jsやNuxt.jsといったフレームワークの知識、APIを介したデータのやりとりに関する注意も必要です。バックエンドではAPIの設計力が求められます。両方に新しい技術的な知見が求められるため、まだ人材確保が難しい状況です。
非エンジニアの方だけでは導入が難しい
WordPressはテンプレートが販売されていたり、さくらやXserverといったレンタルサーバー上で簡単にインストールができたりと、非エンジニアの方でも比較的簡単に導入することができました。しかし、ヘッドレスCMSはCMSと表示が切り離されているが故に、表示部分を自分の力で構築する必要があります。ヘッドレスCMSを契約することは簡単にできますが、表示部分は開発力が求められます。
Web担当者1人の力だけでの導入はなかなか難しいと思います。ヘッドレスCMSの分業しやすい特性を活かしてチーム編成をお勧めします。
ヘッドレスCMSおすすめ比較13選
ヘッドレスCMSのメリット・デメリットがわかったところで、実際に提供されているヘッドレスCMSのおすすめ13選を紹介していきます。
国産のヘッドレスCMS
microCMS
https://microcms.io/
国産ヘッドレスCMSの中で代表的なものがmicroCMSです。
サービス開始が2019年8月ですので、国産ヘッドレスCMSだと一番乗りだったかと思います。そのため国内での知名度もNo.1で3,000社以上の導入実績があります。
日本語によるサポートもありながら、先人の知恵に触れやすいCMSのため、導入コストがとても低い印象を受けます。
| 価格 | Hobby: 0円/月 Team：5,390円〜/月 Business：69,300円〜/月 Advanced：165,000円〜/月 Enterprise：お見積もり |
|---|---|
| メンバー数 | Hobby: 3人 Team：3人（追加可能） Business：20人（追加可能） Advanced：50人（追加可能） Enterprise：カスタム |
| APIエンドポイント数 | Hobby: API数3個 Team：API数10個（追加可能） Business：API数30個（追加可能） Advanced：API数50個（追加可能） Enterprise：カスタム |
| APIコール数 | 各プランWRITE、READリクエスト数は無制限 |
| 特徴的な機能 | ・柔軟なコンテンツ項目 ・CMS上での画像編集 ・Webhook ・iFrameによる外部データ連携 ・レビュー申請 ・他サービスとの連携 |
| 日本語対応 | あり |
| 日本語サポート | 日本語でのチャットサポート、ブログや公式ドキュメントやJamstackワークショップ、microCMSを利用した開発を得意とするパートナーの紹介など手厚いサポートあり |
Kuroco
https://kuroco.app/ja/
ディバータ社が開発しているRCMSを元にした、ヘッドレスCMSです。
RCMSは4,000社以上の実績がありますが、その次期バージョンにあたるのがこのKurocoです。RCMSといえばEC機能や、会員機能といった豊富な機能がパッケージングされている優秀なCMSです。そのRCMSを元にしているため、機能の拡張性に優れている印象です。
実際、パーソナライズや会員制サイト構築に特に強みがあります。日本企業が開発をしている、しかもCMSを長年開発していることもあり、その点も安心ポイントが高いです。
| 価格 | 従量課金モデル ※定額見積もり可能 APIリクエスト： 55円/1,000hit キャッシュされたAPIリクエスト：44円/10,000hit コンピューティング：0.0132円/100ms CDN転送量：220円/10GB メール：11円/100通 ファイルストレージ：55円/1GB ＜価格例＞ |
|---|---|
| メンバー数 | 無制限 |
| APIコール数 | 無制限（ただし、コール数による従量課金） |
| 特徴的な機能 | ・柔軟なコンテンツ項目 ・CDN/WAF標準提供 ・パーソナライズ ・フロントエンド・ホスティングサービス ・メルマガ、会員制サイト、CRM機能 ・セキュリティが強固 ・多言語対応 |
| 日本語対応 | あり |
| 日本語サポート | あり |
Shifter
https://www.getshifter.io/ja/
バックエンドにWordPressを使用しているCMSです。使い慣れたWordPressを利用してJamstack構成を作ることができ、WordPressをヘッドレスCMSとして運用しやすいように手を加えているのがShifter Headlessです。WordPressで構築したサイトをリニューアルしたいというときに、データ構造の考慮ポイントが減るため、最適になるかもしれません。
| 価格 | HL Starter: $48/月 HL Business: $72/月 HL Enterprise: $900/月 ※各プラン年契約でディスカウントあり |
|---|---|
| メンバー数 | WordPressログインユーザー：無制限 Shifter Dashboardログインユーザー:1 |
| APIコール数 | 無制限 (ただし画像含めた総転送量に関してはプラン上限あり) |
| 特徴的な機能 | ・WordPressをHeadless CMSのデータソースとして利用できる ・管理画面UIがWordPress ・WordPressのコア部分やプラグインが自動更新 ・WordPressの知見をそのままJamstack構成の開発に活かすことができる |
| 日本語対応 | あり |
| 日本語サポート | あり |
国外のヘッドレスCMS
Contentful
https://www.contentful.com/
Contentfulは老舗なヘッドレスCMSの印象です。2016年頃に初めてヘッドレスCMSを認識したときに知りました。そのためGoogle検索でも一番検索結果数が多いCMSです。グローバルで見たときに一番の知名度を誇っています。
Qiitaなどで試してみた記事も多く、導入コストが比較的低いCMSだと思います。
| 価格 | Community：無料 Team：$489/月 Enterprise：お見積もり |
|---|---|
| メンバー数 | Community：5人 Team：25人 Enterprise：制限なし |
| APIコール数 | Community：2,000,000/月 Team：2,000,000/月 Enterprise：制限なし |
| 特徴的な機能 | ・柔軟なコンテンツ項目 ・GraphQL ・シングルサインオン ・多言語対応 ・他サービスとの連携 |
| 日本語対応 | なし |
| 日本語サポート | なし |
Strapi
https://strapi.io/
Node.js製でオープンソースでも提供されているシンプルなCMSです。ヘッドレスCMSのオープンソースは珍しい気がします。npmパッケージとして公開されているため、Node.jsが入っていればコマンドを打つだけで導入ができます。実際、私も簡単にローカル環境を立ち上げられました。開発者が試すにあたってはとても嬉しいものです。
| 価格 | オープンソース BRONZE PLAN：$9/月 SILVER PLAN：$29/月 GOLD PLAN：お見積もり ※セルフホスティングの場合の価格です ※クラウド版はまだ利用ができません |
|---|---|
| メンバー数 | BRONZE PLAN：30人 SILVER PLAN：制限なし GOLD PLAN：制限なし |
| APIコール数 | BRONZE PLAN：制限なし SILVER PLAN：制限なし GOLD PLAN：制限なし |
| 特徴的な機能 | ・柔軟なコンテンツ項目 ・シンプルな管理画面 ・オープンソースとクラウド版 ・柔軟なカスタマイズが可能 ・他サービスとの連携 |
| 日本語対応 | なし |
| 日本語サポート | なし |
GraphCMS
https://graphcms.com/
GraphQLでのレスポンスとなるヘッドレスCMSです。多くのヘッドレスCMSがREST APIであるなか、GraphQLを扱っています。GraphQLの仕様、API設計をUIベースでおこなえるらしく、GraphQLの導入を試してみたい方にはいいかもしれません。
| 価格 | Community：無料 Professional：$399/月 Scale：$899/月 Enterprise：お見積り 各プラン年間契約だと25%ディスカウント |
|---|---|
| メンバー数 | 無制限 |
| APIコール数 | Community：100万（上限値） Professional：100万（+超過分従量課金） Scale：100万（+超過分従量課金） Enterprise：1000万以上 |
| 特徴的な機能 | ・GraphQLフレンドリー ・APIサンドボックス環境の提供 ・多言語対応 ・他サービスとの連携 |
| 日本語対応 | なし |
| 日本語サポート | なし |
Contentstack
https://www.contentstack.com/
最近5,700万ドルの調達をしたとニュースになっていました。AI・機械学習に注力しているようです。そのためパーソナライズや顧客管理などが強みです。
| 価格 | Start：$995/月 Grow：$4,500/月 Scale：お見積り |
|---|---|
| メンバー数 | Start：10人 Grow：10人 Scale：無制限 |
| APIコール数 | Start：2,000,000 Grow：6,000,000 Scale：無制限 |
| 特徴的な機能 | ・データの様々な分類 ・パーソナライズ ・顧客体験管理 ・多言語対応 ・他サービスとの連携 |
| 日本語対応 | なし |
| 日本語サポート | なし |
Prismic
https://prismic.io/
インフラの管理も可能なCMSです。NetflixやGoogleといった大手が導入しています。個人開発のプランが充実している印象です。
| 価格 | Medium：$125/月 Platinum：$575/月 Enterprise：お見積り |
|---|---|
| メンバー数 | Medium：25人 Platinum：無制限 Enterprise：無制限 |
| APIコール数 | Medium：無制限 Platinum：無制限 Enterprise：無制限 |
| 特徴的な機能 | ・更新履歴管理 ・レイアウトコンポーネント ・多言語対応 ・他サービスとの連携 |
| 日本語対応 | なし |
| 日本語サポート | なし |
Storyblok
https://www.storyblok.com/
Storyblokは、ビジュアルエディタを世界で初めて最初に搭載した、エンジニアとビジネスユーザー双方が使いやすいヘッドレスCMSです。Adidas, Pizza Hut, Coca-Colaなどの企業がStoryblokを採用しています。75,000以上のプロジェクトがStoryblokを採用し、現在600以上のパートナー提携を結んでいます。
| 価格＆メンバー数 | Free Plan: 無料 Basic Plan: 各ユーザー7 EUR/月、30人まで Advanced Plan: 各ユーザー12 EUR/月、60人まで Premium Plan: 各ユーザー21 EUR/月、80人まで Storyblok Enterprise Plan: 2,999 EUR/月〜 |
|---|---|
| APIコール数 | 全プラン: 無制限 |
| 特徴的な機能 | ・ダッシュボード上でのリアルタイム ライブプレビュー（ビジュアルエディタ） ・Atomic Designに基づいた、ネスト可能なコンポーネントベース レイアウト ・レスポンシブ プレビュー ・コンテンツ公開までのワークフロー コントロール ・コンテンツ公開予約機能（プラグイン） ・独自プラグイン作成、導入機能＆豊富な既存プラグイン ・画像リサイズ ・フィールド単位の翻訳機能とフォルダ単位の翻訳機能による他言語化 ・AWS S3バックアップ |
| 日本語対応 | なし |
| 日本語サポート | なし |
実はヘッドレス化できる有名オープンソースCMS
WordPress
https://wordpress.org/
誰しもが知っているオープンソースCMSで実績No.1なWordPressです。
実は従来のCMSとして比較対象に出していたWordPressをヘッドレスCMSとして使うことが可能です。標準搭載されている「WP REST API」を使用します。他にもプラグインを使用してヘッドレスCMS化することが可能で、ヘッドレス化しての利用も増えています。
| 価格 | オープンソース |
|---|---|
| メンバー数 | 無制限 |
| APIコール数 | 無制限 |
| 特徴的な機能 | ・実績のあるオープンソース ・豊富なプラグインを活用し、複雑なサイト構築が可能 |
| 日本語対応 | あり |
| 日本語サポート | なし |
Drupal
https://www.drupal.org/
ホワイトハウスが以前採用していた、実績豊富でエンタープライズ向けなオープンソースCMSです。
WordPressよりも先に登場したCMSですが、日本ではあまり多く採用されていない印象です。しかしWordPressよりもWebアプリケーションしやすいため汎用的なイメージがあります。管理画面上でモジュールを有効化するだけでヘッドレスCMSとして使用可能になります。
| 価格 | オープンソース |
|---|---|
| メンバー数 | 無制限 |
| APIコール数 | 無制限 |
| 特徴的な機能 | ・エンタープライズ系機能 ・プラグインや開発元から提供される追加機能が豊富 ・ヘッドレス以外での利用も可能 ・多言語対応 |
| 日本語対応 | なし |
| 日本語サポート | なし（代理店経由での契約の場合は、代理店によるサポートあり） |
実はヘッドレス化できる有名商用CMS
Adobe Experience Manager Sites
https://business.adobe.com/jp/products/experience-manager/sites/aem-sites.html
PhotoshopやIllustratorなどを提供している、あのアドビが提供しているCMSです。とてもリッチな機能が満載なサービスで、CMS機能だけではなくマーケティング活動をおこなううえで欲しい機能も網羅されています。商用CMSとしては世界No.1です。
| 価格 | 要見積 |
|---|---|
| メンバー数 | 要見積 |
| APIコール数 | 要見積 |
| 特徴的な機能 | ・複数サイトの管理 ・レスポンシブ対応のプレビュー ・ユーザー属性に応じたコンテンツの出し分け ・GraphQLのサポート ・ヘッドレス以外の利用も可能 ・分析ツール |
| 日本語対応 | あり |
| 日本語サポート | あり |
Sitecore Experience Platform
https://www.sitecore.com/ja-jp/products/sitecore-experience-platform
会員制サイトを得意としているCMSです。マーケティング活動の機能が充実しているようで、大企業に好まれている印象です。パーソナライズや顧客体験管理などに強みを持っており、富士通や日立といった大手ベンダーが代理店をしています。また、10年連続で米ガートナー社のCMS分野の評価でリーダーとしての地位を確保。グローバルに展開するB2CやB2Bの多言語サイトや、会員制サイトも得意としているCMSです。
| 価格 | 要見積 |
|---|---|
| メンバー数 | 要見積 |
| APIコール数 | 無制限 |
| 特徴的な機能 | ・複数サイトの管理が可能 ・Windowsライクな管理画面 ・ユーザー属性に応じたコンテンツの出し分けが可能 ・分析ツール ・エンタープライズ系機能 ・多言語対応 ・ワークフロー管理 ・サイトのバージョン管理 |
| 日本語対応 | あり |
| 日本語サポート | あり |
まとめ
ヘッドレスCMSのメリット・デメリットから、各ヘッドレスCMSの概要を紹介しました。開発リソースや、アサインできる方の技術力、予算状況、サイトへの想定アクセス数などによって選択肢を絞ることができます。
- サーバーの管理を自社・委託でおこなえるか
- サイト運営に対して月々どのくらいの費用を割けるのか
- 開発時にドキュメントをしっかり残せる余裕があるか
- 構築後にフロントエンドやバックエンドの修正を誰が行うか
個人的には日本語によるサポートを考えるとmicroCMS、日本語対応かつパーソナライズなどの機能が必要な場合はKurocoを選択するといい印象を受けました。やはり日本語のドキュメント・サポートがあると、もし開発チームのメンバーが変わってしまうときなどにも安心だと思いました。Kurocoは、フロントエンド・ホスティングサービスも一緒に提供しているので、オールインワンなのも嬉しいですね。
海外製のヘッドレスCMSはUIが優れている印象です。また、開発者に対してオープンな文化があるのか、一人から始める開発者プランや、フリープランがとても充実しており、試しに導入するハードルを下げられていると思いました。
試しに導入を検討している場合はネット上に導入体験談が多くあるContetfulを、GraphQLに触れてみたいといった、チャレンジングな場合はGraphCMSがいいなと思いました。とにかく遊びで触れてみたいのであれば、Strapiをローカル環境にいれるのがよさそうです。
CMSの導入・変更を検討されている方の助力になれば幸いです。
