5つの人気ヘッドレスCMSを徹底比較!Contentful・Strapi・Hygraph・storyblokなど。
- 投稿日:2022.12.30 最終更新日:2024.08.03
- JavaScript実践
- コーディング無し, 初心者向け, SPA
この記事では、近年ウェブ開発の現場ではよく耳にするようになった「ヘッドレスCMS」について、その特徴を説明したうえで代表的な5つのCMSを比較する。
ヘッドレスCMSはウェブ開発に携わる人であればぜひ押さえておきたいトレンドのひとつであり、CMS(コンテントマネージメントシステム)の枠を越えてマルチデバイス対応・データの再利用・クラウド化といったテーマにも派生する。
今回、比較した5つのヘッドレスCMSはどれも高機能で有名企業への導入事例も多いものばかりだ。
では、見ていこう。
ヘッドレスCMSとは?
まず、最初にヘッドレスCMSとは何かについて簡単に説明しておきたい。
従来のCMS(コンテントマネージメントシステム)
CMS「コンテントマネージメントシステム」はWordpress・Drupal・TYPO3などのソフトウェアを指し、記事や写真といったコンテンツの管理をおこなうためのシステム。
文章や段落の構成を始め、ページのデザインや記事のカテゴリーなどブログにまつわるすべての事柄をひとつのシステムで管理できるのがCMSの特徴。
プログラミングの知識を持たずともでブログを開設・運営することができるのでエンジニアのみならずとも広く普及している。代表的なCMSであるWordpressはブロガーの間ではスタンダードな存在となっている。
従来のCMSとヘッドレスCMSの比較
従来のCMSとヘッドレスCMSの違いを確認しよう。次の図を見てほしい。
通常のCMSがフロントエンドとバックエンドの機能を備えているのに対し、ヘッドレスCMSは「バックエンドのみを備えている」というのが分かるだろう。
なおこういったCMSの仕組みはJavaScript・API・MarkUpの頭文字を取って「Jamstack」と呼ばれる。
ヘッドレスCMSの特徴や長所
次にヘッドレスCMSの特徴や長所を確認しよう。
- ひとつのコンテンツを動的に組み合わせて異なる目的に使用できる
➡ (例)ブログ記事・ウィジェット・カレンダーアイテムなど - マルチデバイスへのフレキシブルな対応が可能
➡ デスクトップ・モバイルの他、スマートウォッチ・LoTなどに対応 - Rest APIやGraphQLを用いてコンテンツを作成・取得する
➡ オープンにすれば第3者もAPIを利用できる - マルチ言語への対応が容易
代表的なヘッドレスCMSの比較
ここでは代表的な5つのヘッドレスCMSを比較してみたい。
Contentful
ウェブサイト | https://www.contentful.com |
GitHub | https://github.com/contentful |
ホスティング | SaaS |
Contentfulはもっとも有名で導入実績も豊富なヘッドレスCMSプラットフォームだ。
コンテンツを自由に組み合わせて利用する「Composable」なコンテンツ管理をモットーとして、マルチプラットフォームが標準となった現在においても効率的なコンテンツの運用を可能としている。
シンプルで使いやすいユーザインターフェイスで簡単にコンテンツを管理できるうえに、初期時のセットアップが非常に簡単なのもセールスポイントとなっている。
ドキュメンテーションやブログなども充実しているおり、contentfulはコンテンツを管理する使用者としても導入のハードルが低いと感じられるCMSだ。
Strapi
ウェブサイト | https://strapi.io |
GitHub | https://github.com/strapi/strapi |
ホスティング | SaaS & オンプレミス |
strapiは「design APIs fast」をスローガンとする人気のCMSサービスだ。
以前はセルフホスティングのみに対応していたが、2022年からSaaSとしてのサービスも開始した。
Node.jsによって開発されているアドミン画面はシンプルで直感的。また、プラグインを導入することにより機能を拡張することもできる。
Strapiのアドミン画面は従来のCMSのイメージでは無く、データベースを手打ちで設計・入力していくようなイメージが強く、開発者には分かりやすいが、コンテンツ管理者には若干取っつきにくい印象があるかもしれない。
strapiではユーザオブジェクトの管理ができるうえに、JsonWebTokenを使用したRestコミュニケーションが可能なので、strapiのみでバックエンドシステムを構築することも理論上は可能である。
Hygraph(旧GraphCMS)
ウェブサイト | https://hygraph.com |
GitHub | https://github.com/hygraph |
ホスティング | SaaS |
HyGraph(旧GraphCMS)はAPIの規格であるGraphQLを使用した、コンテンツの融合にフォーカスしたヘッドレスCMS。
GraphQLを使用することによりひとつのリクエストで異なるデータベースに格納されたデータをダイナミックに組み合わせ、素早く表示することができる。
HyGraphは多言語対応やモデル・フィールドのカスタマイズといったスタンダードなヘッドレスCMS機能を備えたうえで、パワフルなデータ結合を可能としているので、人物や作品のデータベースなどをフィーチャーしたWebサービスにおいては強い力を発揮するだろう。
なお、Rest APIを使用するかGraphQLをするかはリソースのURLごとに設定することができる。
Sanity
ウェブサイト | https://www.sanity.io |
GitHub | https://github.com/sanity-io |
ホスティング | SaaS |
Sanityはクラウド上のコンテンツプラットフォームであり、Nikeやナショナルジオグラフィックといった有名企業で導入されている。
コンテンツをデータとして捉えることにより、コンテンツをより有効に再利用・再構築するための仕組みを提供している。
「Sanity Studio」と呼ばれる管理画面をブラウザで起動することができそちらでコンテンツを追加・修正することができる。データのスキーマはIDE上で変更することもでき、変更はSanity Studioにリアルタイムで同期される。
フィールドの設定ではあらかじめ用意されたバリデーションを適用させることも出来る。
豊富なカスタマイズ機能を始め、開発者にとっての使い勝手の良さはSanityの大きなセールスポイントだろう。
Storyblok
ウェブサイト | https://www.storyblok.com |
GitHub | https://github.com/storyblok |
ホスティング | SaaS |
Storyblokはコンテントチームのためのヴィジュアルエディターであり、クラウド型のヘッドレスCMS。
エディターと呼ぶように記事の執筆・編集といった作業に主眼が置かれており、データベースなどの知識を持たないコンテンツ管理者には優しい設計となっている。
ヴィジュアルエディターによりWordpressのように直感的にコンテンツを執筆することができる。他のヘッドレスCMSとは違いプレビューが常に表示されている点もコンテンツ管理者にはうれしいポイントとなるだろう。
また、デフォルトでマルチ言語に対応しているうえに強力な自動翻訳機能も備えている点もコンテンツ管理者を大きくサポートしてくれるはずだ。
Storyblokはデフォルトでマルチ言語に対応しているうえに、ワークフローを定義することも出来る、執筆・校正・投稿といった作業フェイズを設定して、記事ごとに状態を記録できる。
お勧めのヘッドレスCMS
今回、紹介した5つのヘッドレスCMSは著者も実際に使用してみた。
各CMSは明確なコンセプトに基づいて開発されており、どれも個性的であるがゆえに、プロジェクトにヘッドレスCMSを導入する際は実際に試用版を試してじっくり検討する必要がある。
contentfulやStoryblokのようにコンテンツの管理者・執筆者に優しい作りになっているCMSと、strapi・HyGraph・Sanityのように高度な検索・組み合わせを使用して動的にコンテンツを構築する開発者向けのものに分類できる。
なお、今回紹介した5つのヘッドレスCMSはどれも有料のサービスであり、チームとして本番環境で利用するならばそれなりの料金が発生する。料金システムの変更が頻繁におこなわれているようなので、この記事では料金は紹介していない。