⇒【東証プライム企業も多数利用！】最先端のSNSマーケティングツール「Tofu Analytics」、「InstantWin」とは？
Headless CMSという言葉は聞いたことがあるけれど、どんなものなのか良くわからない、一般的なCMSとどう違うのか知りたい、そんな方もいるのではないでしょうか。
CMSがWebサイトの制作経験がなくても、管理画面を通して簡単にWebサイトが作れる一方、Headless CMSは、管理画面がなくなりAPIから直接コンテンツを配信するため専門的知識が必要です。
この記事では、Headless CMSの特徴やメリット・デメリット、おすすめツール10選を紹介します。Headless CMSがよくわからないという方は、ぜひ参考にしてください。
1．Headles （ヘッドレス）CMSとは
まずヘッドレスCMSの説明からはじめます。
ヘッドレスCMSとは表示機能を持たないCMSのことを呼びます。「ヘッドレス」で調べてみると以下のような説明がでてきました。
《ソフトウェアについてヘッドレスという場合は、通常は用意されている表示・操作画面が存在しないか切り離されており、別の方法で操作・使用できるようになっていることを指す。
例えば、Webブラウザを通常のウィンドウ表示で操作せず、OSのシェルなどからコマンド入力で起動・操作する方式などが該当する。操作をスクリプトなどで自動化しつつ、アクセス先のWebサイトには人間が操作しているかのように装うことができる。》（https://e-words.jp/w/%E3%83%98%E3%83%83%E3%83%89%E3%83%AC%E3%82%B9.htmlより引用）
つまり、ヘッドレスCMSではコンテンツ管理機能だけを提供し、表示は別の方法でおこなうことになります。表示部分は一般的にNext.jsやNuxt.jsといったJavaScriptのフレームワークを用いて構築することが多いです。
1-1． Headles （ヘッドレス）CMSと従来のCMSの違い
ヘッドレスではないCMSの代表である、WordPressと比較するとわかりやすいかもしれません。WordPressでは、管理画面でコンテンツを操作・編集し、表示もWordPress上のテーマファイルが管理しています。
例えば、更新する要素がなく、本来WordPress上で管理しないでもいいようなページも、固定ページとしてWordPressで管理する必要があります。これは表示のフロントエンドと、コンテンツ管理のバックエンドが密な関係にあると言えます。こういったCMSをカップルドCMSと呼びます。
一方でヘッドレスCMSでは、コンテンツ管理と表示が切り離されて管理されます。コンテンツ管理のみがヘッドレスCMSの仕事範囲になります。よくフロントエンドとバックエンドが分離されているなんていいます。
2．Headless CMSが必要な理由
新型コロナウイルス感染症拡大により、企業はWebサービスの充実とセキュリティ向上が課題となりました。
ユーザーはショッピング・フードデリバリー・金融機関・学習・運動など、さまざまなサービスをインターネット経由で受ける機会が増えています。
ユーザーが過去にオフラインで得られたサービスを、今度はオンラインでストレスなく利用するためには、Webサービスでの画面表示の速度がポイントになります。
通常のCMSでは、データファイルのやり取りが必要になりますが、Headless CMSではファイルをそのまま表示するためスピーディに表示することができます。
また、インターネットを経由するサービスでは、セキュリティの充実が課題になります。サーバーとのやりとりを通して閲覧ファイルを生成するCMSは攻撃対象となりやすいことが課題です。
しかし、Headless CMSでは、誰もが閲覧できるHTMLやCSS、JavaScriptのファイルのみになることからサイバー攻撃から狙われにくくなります。
3．ヘッドレスCMSのメリット・デメリット
Headless CMSを活用するにあたり、メリット・デメリットが存在します。それぞれあらかじめ押さえておきましょう。
3-1．メリット
〇マルチプラットフォーム対応が可能
カップルドCMSでは、表示も管理されてしまうため、対応デバイスが限られてしまいます。例えばWordPressは一般的にWebサイト用の表示を持っています。そのため、ブラウザに限った対応になりがちです。WordPressの投稿データをiOSアプリやAndrodiアプリなどで使用することは難しくなります。
しかしヘッドレスCMSでは、データは一般的にAPIベースでのやりとりになります。APIベースであれば、さまざまなプラットフォームでデータの受取が可能になるため、iOSアプリへの展開などスケールしやすくなります。何か新しいプラットフォームへの対応や、他のサイトにコンテンツの一部を表示させるなんて対応もできます。
〇システムの責任範囲がわかりやすい
フロントエンドとバックエンドが切り離されるため、システム開発の責任分担をきれいに分けることが可能です。例えば何かシステム上不具合があった場合、それが見た目の問題なのか、データの問題なのかで修正担当がどちらか一目瞭然になります。
また使用しているCMSのバージョンアップがあった場合に、表示とCMSが切り分けられているため、その影響範囲はCMSのみになります。これはリリース作業においても同じことが言えます。フロントエンドとバックエンドを別々にリリースができるため、見た目の改修だけリリースができます。
分離されていると、外部に公開されているのはフロントエンドと必要なAPIのみにすることができるため、セキュリティ対策にも繋がります。
〇フロントエンドの自由度が高く、ユーザー体験の向上を狙える
コンテンツ管理と表示が切り離されているということは、表示側はCMSの制限を受けません。つまり、フロントエンド側は自由なレイアウトを組むことができ、ユーザーフレンドリーなUI/UXを提供しやくすくなります。
またフロントエンドの技術選定の幅も広がります。前述のとおり、Next.jsやNuxt.jsといったフレームワークがよく選ばれている印象です。また、フロントエンドのみ技術刷新するなど柔軟な対応が可能になります。
これにより、いま流行りのJamstackアーキテクチャにすることが可能です。従来のCMSによる動的なコンテンツ配信では表示速度に限界がありましたが、静的サイトと同様の表示速度を追求できるようになりました。
3-2．デメリット
〇幅広い技術への知見が必要で人材確保が難しい
フロントエンド、バックエンドともに幅広い技術への知見が求められます。フロントエンドではNext.jsやNuxt.jsといったフレームワークの知識、APIを介したデータのやりとりに関する注意も必要です。バックエンドではAPIの設計力が求められます。両方に新しい技術的な知見が求められるため、まだ人材確保が難しい状況です。
〇非エンジニアの方だけでは導入が難しい
WordPressはテンプレートが販売されていたり、さくらやXserverといったレンタルサーバー上で簡単にインストールができたりと、非エンジニアの方でも比較的簡単に導入することができました。しかし、ヘッドレスCMSはCMSと表示が切り離されているが故に、表示部分を自分の力で構築する必要があります。ヘッドレスCMSを契約することは簡単にできますが、表示部分は開発力が求められます。
Web担当者1人の力だけでの導入はなかなか難しいと思います。ヘッドレスCMSの分業しやすい特性を活かしてチーム編成をお勧めします。
4．どんなシーンで Headles CMS は活用できるの？
どんな状況だと Headless CMS が最適となるのでしょうか。
以下に当てはまるケースをいくつか記載いたします。
- WEB コンテンツ以外にも、ネイティブアプリ、ウェアラブルデバイス、音声アシスタント端末などへコンテンツを配信するケース
- サイトデザインに柔軟性・拡張性・即時性が求められるケース
マルチデバイス・マルチチャネルへのコンテンツ配信を戦略的に行っていく場合は、API を独自に開発しなければいけない従来型 CMS と比較して Headless CMS にコストメリットが出るため、向いていると言えます。
Headless CMS の登場により、WEB 以外のマーケティングチャネルへ容易にアプローチできるという選択肢が増えたことになります。
この選択肢は、ユーザーとのタッチポイント・機会の創出につながるため、有用であると言えます。
また、Headless CMS はフロントエンドエンジニアの得意な実装方法（例えば React や Vue などのモダンな手法）で素早く画面実装ができ、トレンドやユーザーのニーズ、PDCA の結果などを素早くサイトデザインに反映できるため、向いていると言えます。
5．Headless CMSツールおすすめ10選
ここでは、Headless CMSツールのおすすめ10選を紹介します。
〇Ghost
Ghostは、Ghost Foundation社が開発・運営するブログ特化型のHeadless CMSです。メディア型のWebサイト運営に必要な機能を備えているため、ブログ・オウンドメディアなど記事コンテンツのWebサイトの開発に向いています。
また従来型のCMSのWordPress似ているため、WordPressに慣れている場合は使いやすいという特徴があります。
〇microCMS
microCMSは、APIをベースとする日本製のHeasless CMSです。日本の大手企業が導入しており、Webサイトだけでなくスマホアプリに至るまで最適な表示が可能です。
開発・運用にかかるコストをカットし、自社でのスピーディな対応ができるため工数削減・生産性向上が期待できるでしょう。
また、Headless CMSでありながら、ノーコードで更新可能なため、非エンジニアで管理ができるという特徴があります。
〇Contentful
Contentfulは、ドイツのスタートアップによって開発されたAPIファーストのHeadless CMSです。有名な利用実績としてはSpotfiyがあります。
画像を自動でリサイズしてくれる機能やmarkdown記法ができるなど、機能が充実していることが特徴です。
〇Strapi
Strapiは、Node.jsで提供されているHeadless CMSです。そのため、Node.jsとデータベースの実行環境の両方が必要です。
コーディングの必要はなく簡単にAPI開発が可能です。そして、オープンソースソフトウェアとして公開されているのも特徴です。社内ネットワークなどでも気軽な活用ができます。
〇Shifter Headless
Shifter Headlessは、WordPressをベースとしてWebサイトをHeadless化するHeadless CMSです。ダッシュボードを通してCDNの利用状況を確認できます。
また、他要素認証に対応しているため、ハイセキュリティな状態で管理できるという特徴があります。
https://www.getshifter.io/ja/pricing/
〇Netlify CMS
Netlify CMSは、アメリカのNetlify社が運営するHeadless CMSです。リッチテキスト編集・リアルタイムプレビューなど、使い勝手の良いUIで、直感的な操作が可能です。
オープンソースのCMSで、Netliyとの相性が抜群なことが特徴です。
〇Hygraph
Hygraphは、meta社が開発したプログラミング言語の1つGraphQLでレスポンスを受けることができるHeadless CMSです。ドイツのベンチャー企業によって開発されました。
コンテンツモデリングビルダーを使用し、思い通りの構造にできたり、世界中にクエリ応答をキャッシュしているため、コンテンツの高速配信が可能という特徴があります。
〇Prismic
Prismicは、フランスのスタートアップが提供する多様なプログラミング言語に対応したHeadless CMSです。
Google社・Ford社などの世界的大手企業が導入しています。Headless CRMでありながら、画像の最適化・ライブプレビューなど機能が充実していることが特徴です。
〇Adobe Experience Manager Sites
Adobe Experience Manager Sitesは、Adobe社が開発するHeadless CMSです。Webサイト制作者と非エンジニアが、どちらも同じ基盤でコンテンツを管理できます。
Adobe Experience Manager Sitesは多様なチャネルにコンテンツ配信し、さらにUXに対して柔軟な構築・管理が実現できます。
https://business.adobe.com/jp/products/experience-manager/sites/headless-cms.html
〇Directus
Directusは、オープンソースのデータプラットフォームのHeadless CMSです。プログラミング言語はPHPを利用します。専門的技術がいらないUIなので、コンテンツ管理が簡単なことが特徴です。
6．まとめ
ヘッドレスCMSのメリット・デメリットから、各ヘッドレスCMSの概要を紹介しました。開発リソースや、アサインできる方の技術力、予算状況、サイトへの想定アクセス数などによって選択肢を絞ることができます。
従来型のCMSにはない多数のメリットもあるため、Webサイトのパフォーマンスをアップさせたい場合は、ぜひチャレンジしてみはいかがでしょうか
⇒【東証プライム企業も多数利用！】最先端のSNSマーケティングツール「Tofu Analytics」、「InstantWin」とは？
