最近よく耳にするHeadless CMSとは?メリット・デメリットとおすすめHeadless CMS 9選

コンテンツマーケティング

WordPressに代表される従来のCMSは、世界中の多くのWebサイトで利用されています。HTMLやCSSといった技術的知識を持たなくても運用・管理できるのが人気の秘密ですが、近年はコンテンツデータをさまざまな機器で使いたいという要望が増え、Headless CMSという名前をよく耳にするようになりました。従来のCMSとHeadless CMSは何が違い、Headless CMSを利用するとどのようなメリットがあるのでしょうか。今回はHeadless CMS のメリットとデメリット、おすすめしたいHeadless CMSについて解説していきます。

また、イノーバのBtoB企業専門のWEB サイト制作サービスにご興味がありましたら、こちらもご覧ください。

従来のCMSとHeadless CMS の違い

CMSとは

CMS(Content Management System)とは、Webサイトの構築に必要なデザインやレイアウト情報、テキストや画像といったコンテンツデータを一元的に管理するシステムです。HTMLやCSSといったWebページを作るための記述言語の知識がなくても、CMSを利用すればサイトの構築や運用、管理が容易にできるため、それまで用いられてきたオーサリングツールに代わって一挙に普及しました。従来のCMSにはWordPressに代表されるオープンソースCMSと、システム開発会社が提供する商用CMSが存在しています。

関連記事:CMSとは何か? 導入のメリットや選定で押さえるべきポイントとは

Headless CMSとは

従来のCMSは、コンテンツデータを管理するバックエンドと、コンテンツデータを特定のHTMLフォーマットに加工して出力するフロントエンド(ヘッド)に分かれています。Headless CMSとはユーザーに見た目(Webサイトビュー)を表示するフロントエンド部分が無いCMSで、文字通りヘッドが無い(head less)CMSです。

headless_cms_図1.jpg

【出典】 Headless CMSとは? 代表的な9のCMSを比較してみました!

※上記サイトの図を参考に再構成して作成


ヘッドが無いことによるメリットは後述しますが、CMS側でWebサイトのデザインやレイアウトを固定しないことでフロントエンドの自由度が高まり、さまざまなデバイスでコンテンツデータを扱いやすくなります。

Headless CMSの種類

Headless CMSには、CaaS型とSelf-Hosted型があります。この違いは基本的な機能の違いではなく、Headless CMSの提供(運用)方法の違いです。

  • CaaS型

CaaSとはCMS as a Serviceの略で、システム開発会社またはCMSを運用する会社に料金を払ってHeadless CMSを使う方法です。サーバやデータベースはクラウド上に存在し、ユーザーは管理画面からHeadless CMSを運用します。サーバを用意する必要がなく技術的なサポートも受けられますが、その分コストがかかります。

  • Self-Hosted型

Self-Hosted型のHeadless CMSは、自前でサーバやデータベースを用意し、Headless CMSをデプロイメント(インストールやセッティング全般)します。コスト低減が可能でカスタマイズの幅も拡がりますが、デプロイメントやセキュリティ対策、CMSの運用には技術的知識を必要とします。

Headless CMSのメリットとデメリット

それでは具体的に、Headless CMSにはどのようなメリットとデメリットがあるのか見ていきましょう。

メリット

  • フロントエンドの自由度を高められる

先述のように、Headless CMSにはフロントエンド部分がありません。このため従来のCMSのようにデザインやレイアウトが固定されておらず、ユーザーが自由に決めることができます。このため、シングルページアプリケーションやサーバサイドレンダリング、ネイティブアプリなどの選択肢が増え、サイトのパフォーマンスも上げられます。

  • マルチデバイス対応が容易

Headless CMSはAPI(Application Programming Interface)を経由してコンテンツデータを出力します。これは汎用性の高いデータが提供されていることと同義で、出力されたコンテンツデータはさまざまなデバイスに利用できます。たとえばWebブラウザだけでなく、iOSやandroidのアプリなどでもネイティブ機能でコンテンツを表示できます。

  • Webサイトに部分的にCMSを導入できる

たとえば、HTMLとCSSで静的ページとして作成した会社のWebサイトに、あとから「最新動向」を表示する機能を追加するとしたら、従来のCMSではサイト全体を作り直す必要があります。Headless CMSであれば、APIから「最新動向」の表示部分のみを抜き出しWebサイトに表示することができます。このようにHeadless CMSであれば、変更があったとしても最小限の開発工数で実施することができます。

デメリット

  • 従来のCMSと異なり、技術的な難易度がある

フロントエンド部分がなく自由度が高いということは、言い換えればビューの部分を自分で作らなければならないということです。API経由で出力されたコンテンツデータを、使いこなす技術が必要になります。

  • プレビュー表示が複雑化してしまう

従来のCMSであればプレビュー機能が始めから実装されていますが、フロントエンド部分がないHeadless CMSではプレビュー機能もありません。プレビュー機能をHeadless CMSに実装すると、構成が複雑化してしまうデメリットがあります。

  • エンジニアと非エンジニアの連繋が難しい

たとえば前出のように静的ページに「最新動向」の表示機能を追加した場合、コンテンツ自体を入稿するのは、通常はエンジニアではありません。従来のCMSではテンプレートに入稿(入力)するだけで非エンジニアにも簡単にページを更新できましたが、Headless CMSの場合はテンプレートが無く「操作方法が複雑で解りにくい」と言われてしまう可能性があります。コンテンツの更新時には双方の連携を工夫しないと、Webサイトの即時性が失われることにもなりかねません。

代表的なおすすめHeadless CMS 9選

デメリットもあるHeadless CMSですが、開発の自由度が高く多くのデバイスで利用可能なメリットはとても魅力です。ここからはおすすめのHeadless CMSをご紹介していきましょう。

CaaS型

contentfulはドイツのスタートアップ企業が開発しているHeadless CMSで、Headless CMS製品の中ではもっとも知られた存在です。大規模なコミュニティがあり、活動も活発なので多くの情報を得ることができますが日本語の資料や情報は多くありません。

microCMSは日本製のHeadless CMSなので、日本語表示に対応しておりサポートも日本語で受けられます。無料版(個人向け)と有料版が用意されていますが、無料版でも機能は十分で日本人のエンジニアに人気の高いHeadless CMSです。

GraphCMSはGraphQLに特化したHeadless CMSです。GraphQLとはFacebookが開発したWebAPIで、フィルターのオプションやパッチが非常に充実しています。シンプルな操作性で人気がありますが、大きなバイナリデータが扱いにくく複雑なモデル設計には不向きといわれています。

CosmicJSはRESTfulAPIとGraphQLの両方をサポートするHeadless CMSで、開発者目線のシンプルなプラットフォームが特徴です。RESTfulAPIとは、WebAPIの標準モデルとして浸透している設計原則RESTに沿って設計されたAPIです。公式サイトではデモも多数公開されており、他のアプリケーションと連携するWebhookの機能充実がアピールされています。個人向けの無料版と、3種類の価格帯がある有料版が用意されています。

Prismic.ioは企業ユースでも1ユーザーまでなら無料で、ほぼフル機能を使えることが魅力のHeadless CMSです。そのためこのCMSは、個人企業などでの利用に向いていると言えるでしょう。ただしテキストにはmarkdownが使えず、リッチテキストのみとなるところなどには注意が必要です。

Self-Hosted型

Strapiは、Node.js(V8 JavaScript エンジンで動作するJavaScript環境)上で使えるHeadless CMSです。このCMSは最低限の機能しか搭載していないため、必要な機能はプラグインを追加していく必要があります。拡張性と柔軟なカスタマイズ性が特徴のHeadless CMSです。

Strapi同様、Node.jsで動作するHeadless CMSです。Ghostの特徴は、機能をブログに必要なものに特化していること。そのため動作が軽快でUI(User Interface)もシンプルです。基本的にはオープンソースで、Self-Hostedなら無料ですが有料のCaaS版もリリースされています。

Netlify CMSは、ソースコードからビルド、デプロイメント、ホスティングまでを自動で行ってくれるサービス、Netlify(静的ページ向けサービス)にCMS機能を追加したものでNetlifyと連携して動作します。管理画面から投稿を行うだけでビルドが始まるので、素早くWebサイトを公開できるのが特徴です。

DirectusはSQLデータベースをRESTful APIにラップ(複数の要素をまとめる)するためのソフトで、データベースを操作することに特化したHeadless CMSです。そのため、データベース構造に縛られがちな従来のCMSに比べて柔軟なデータ設計が可能となっています。

まとめ

Headless CMSは自由度が高い反面、コンテンツデータの使いこなしにはある程度の技術力を必要とします。また非エンジニアが運用することには技術的な制限もあるので、単純に従来のCMSに置き換わるものではないと考えましょう。Headless CMSか従来のCMSか、コンテンツデータをどのようなデバイスに表示するかで選択することをおすすめします。

弊社では、BtoB企業専門のWEB サイト制作サービスを提供しております。集客から見込み客の獲得や商談の創出を可能にするウェブサイトへのリニューアルに関してご興味がありましたら、是非ご活用ください。


関連記事: