WordPressに代表される従来のCMSは、世界中の多くのWebサイトで利用されています。HTMLやCSSといった技術的知識を持たなくても運用・管理できるのが人気の秘密ですが、近年はコンテンツデータをさまざまな機器で使いたいという要望が増え、Headless CMSという名前をよく耳にするようになりました。従来のCMSとHeadless CMSは何が違い、Headless CMSを利用するとどのようなメリットがあるのでしょうか。今回はHeadless CMS のメリットとデメリット、おすすめしたいHeadless CMSについて解説していきます。
こちらでもおすすめ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とは? 代表的な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版もリリースされています。
DirectusはSQLデータベースをRESTful APIにラップ(複数の要素をまとめる)するためのソフトで、データベースを操作することに特化したHeadless CMSです。そのため、データベース構造に縛られがちな従来のCMSに比べて柔軟なデータ設計が可能となっています。
まとめ
Headless CMSは自由度が高い反面、コンテンツデータの使いこなしにはある程度の技術力を必要とします。また非エンジニアが運用することには技術的な制限もあるので、単純に従来のCMSに置き換わるものではないと考えましょう。Headless CMSか従来のCMSか、コンテンツデータをどのようなデバイスに表示するかで選択することをおすすめします。
弊社では、BtoB企業専門のWEB サイト制作サービスを提供しております。集客から見込み客の獲得や商談の創出を可能にするウェブサイトへのリニューアルに関してご興味がありましたら、是非ご活用ください。
CMSに関するおすすめ記事はこちらから!
- クラウド型のCMSとは?特徴やメリット・デメリット、ツールの選び方を解説
- 長期的視野で考えよう!Webサイト基盤の選定基準:オープンソースCMS編
- 【無料レンタルCMS編】長期的視野で考えよう!Webサイト基盤の選定基準
FAQ
Q. Headless CMSとは何ですか?
A. Headless CMSとは、コンテンツデータを管理するバックエンドのみを持ち、フロントエンド(ヘッド)を持たないCMSのことです。APIを通じてさまざまなデバイスにコンテンツを柔軟に配信できるのが特徴です。
Q. 従来のCMSとHeadless CMSの違いは何ですか?
A. 従来のCMSはコンテンツとWebサイトのデザイン・レイアウトが一体化していますが、Headless CMSはコンテンツのみを管理し、表示はAPIを通して自由に行えます。これによりフロントエンドの選択肢が広がるのがHeadless CMSの大きな違いです。
Q. Headless CMSを使うメリットは何ですか?
A. フロントエンドの自由度が高い、マルチデバイス対応が容易、Webサイトへの部分的な導入が可能といったメリットがあります。デザインの柔軟性を確保しつつ、スマホアプリなど多様な環境へのコンテンツ配信ニーズに応えられます。
Q. Headless CMSのデメリットには何がありますか?
A. フロントエンド開発の技術力が必要、プレビュー機能の実装が複雑、エンジニアと非エンジニアの連携が難しいといった点がデメリットとして挙げられます。運用面での工夫が求められます。
Q. Headless CMSにはどのような種類がありますか?
A. Headless CMSにはCaaS型とSelf-Hosted型の2種類があります。CaaS型はサービスとして提供され、Self-Hosted型はユーザー自身で環境を用意する必要があります。コストや自由度、技術力に応じて選択肢が異なります。
Q. おすすめのHeadless CMSを教えてください。
A. 代表的なHeadless CMSとしては、contentful、microCMS、Strapi、Ghost、Directusなどが挙げられます。CaaS型かSelf-Hosted型か、どの程度の機能が必要かによって最適な選択は変わってきます。
Q. Headless CMSは誰に向いていますか?
A. マルチデバイス展開を見据えたフロントエンド開発の自由度を求める企業・開発者に特におすすめです。ただしある程度の技術力は必要となるため、従来のCMSで十分な場合もあります。自社の要件を踏まえて導入を検討しましょう。