SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

アプリケーション開発の最新トレンド

今話題の「ヘッドレスCMS」とは? Jamstack、マルチデバイスにも対応したCMSの新潮流

  • このエントリーをはてなブックマークに追加

 CMS(コンテンツ・マネジメント・システム)とは、ブログやWebサイトなどで活用されているコンテンツを管理するための仕組みです。代表的なものとしてWordPressやMovable Typeが挙げられ、主にWebサイト制作に使用されています。本記事では従来のCMSとは異なる概念であるヘッドレスCMSについて利用シーンとともに紹介していきます。

  • このエントリーをはてなブックマークに追加

はじめに

 Webサイトはページの構造を表すHTML、スタイルを表すCSS、動きを表現するJavaScriptによって構築されています。現在Webサイトの多くが、PRや顧客獲得などのマーケティング目的で活用されており、状況に応じて内容を更新していきたいというニーズがあります。

 内容の更新のたびにエンジニアに頼んでHTMLの編集をしてもらうのはコミュニケーションコストもかかりますし、貴重なエンジニアリソースの浪費とも言えます。

 これを解消するのがCMSであり、エンジニアの手を借りずとも管理画面からWebサイトの内容を誰でも書き換えることのできるシステムです。

盛り上がりを見せるヘッドレスCMS

 「ヘッドレスCMS」は新しいタイプのCMSです。従来型のCMSはコンテンツの入稿画面・データベースに加えて表示面がセットになっていますが、それに対してヘッドレスCMSはヘッド(表示面)がなく、APIによってコンテンツを配信するのが特徴です。

従来のCMSとヘッドレスCMSの違い
従来のCMSとヘッドレスCMSの違い

 下記は国産ヘッドレスCMSであるmicroCMSでのAPIリクエストサンプルです(管理画面からすでにコンテンツは入稿されている想定です)。

fetch('https://xxxxxxxx.microcms.io/api/v1/sample', {
  headers: {
    'X-MICROCMS-API-KEY': 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'
  },
})
  .then(res => res.json())
  .then(res => console.log(res));

/* レスポンス
{
  "contents": [
    {
      "id": "tZ9fFSPZO",
      "createdAt": "2021-10-05T08:49:43.227Z",
      "updatedAt": "2021-10-05T08:51:25.861Z",
      "publishedAt": "2021-10-04T15:00:00.000Z",
      "revisedAt": "2021-10-05T08:51:25.861Z",
      "title": "APIリクエストサンプル",
      "body": "<h1>見出し1</h1><ul><li>リスト1</li><li>リスト2</li></ul>",
    }
  ],
  "totalCount": 1,
  "offset": 0,
  "limit": 10
}
*/

 ヘッドレスCMSでは上記のようにAPI経由で取得したコンテンツを基に、フロントエンド部分は自前で実装する必要があります。

 その裏返しとしてフロントエンドはどんな言語でも実装することができ、Webに限らずネイティブアプリやサイネージデバイス等、さまざまなプラットフォームに配信可能です。

 ヘッドレスCMSにもさまざまな種類があり、SaaS型、OSS型、RESTful APIだけでなくGraphQLにも対応しているもの等、多岐にわたります。

 また、コロナ禍においてDX(デジタルトランスフォーメーション)の重要性が叫ばれるようになって久しいですが、それに伴ってAPI連携の重要性も急速に高まっています。ヘッドレスCMSを使うと、コンテンツを起点にAPIベースでさまざまなサービスと連携が可能になり、マーケティング活動の幅も大きく広がります。

海外におけるヘッドレスCMSの普及

 ヘッドレスCMSは海外を中心に盛り上がりを見せています。

Headless CMSの検索ボリューム(出典:Google Trendsにて「Headless CMS」を検索キーワードとして表示)
Headless CMSの検索ボリューム(出典:Google Trendsにて「Headless CMS」を検索キーワードとして表示)

 ここ数年でContentful、Prismic、Strapi、Sanity、Storyblok、GraphCMSなど数々のヘッドレスCMSが誕生し、注目の市場となっております。

 中でもドイツ製のContentfulは2021年の7月にシリーズFラウンドの資金調達を行い、時価総額3000億円のユニコーン起業となりました。

海外ヘッドレスCMSの資金調達状況
サービス名 創業 資金調達額 国名
Contentful 2013 $334.6M ドイツ
Prismic 2013 $20M アメリカ
Strapi 2016 $14M フランス
Sanity 2017 $55.3M アメリカ
Storyblok 2017 $11M オーストリア
GraphCMS 2017 $13.6M ドイツ
ContentStack 2018 $89M アメリカ

 ヘッドレスCMSは主にメディア領域のヘッドレスソリューションですが、EC領域のヘッドレスコマース市場もShopifyを筆頭に急成長しています。

 ヘッドレスコマースも考え方は一緒で、ECシステムから表示面をなくし、API経由で商品管理・在庫管理・配送管理などさまざまな処理を行えるようにするシステムです。

日本におけるヘッドレスCMSの普及

 ヘッドレスCMSはエンジニアによる初期実装が不可欠なため、エンジニア向けサービスと捉えられがちですが、実際に管理画面を操作するのはマーケターやコンテンツ運用担当などの非エンジニアの方になるケースがほとんどです。そもそもCMSはエンジニアの方に頼んでフロントエンドのソースコードを変更することなく、管理画面からコンテンツを操作するためのものです。

 そのため管理画面の使いやすさも重要なポイントの一つとなります。やはり母国語が最も使いやすいため、海外ヘッドレスCMSの状況を見ても各国がそれぞれヘッドレスCMSを立ち上げている印象があります。

 日本国内においても国産のヘッドレスCMSが複数立ち上がってきており、その重要性が認知されてきております。上場企業にも導入されるケースも増えてきました。

 先日行われた政府統一Webサイトの実証においてもヘッドレスCMSを採用していくと発表されており、今後ますます採用事例が増えていくことが期待されます。

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
ヘッドレスCMSの利用シーン

この記事は参考になりましたか?

  • このエントリーをはてなブックマークに追加
アプリケーション開発の最新トレンド連載記事一覧

もっと読む

この記事の著者

柴田 和祈(シバタ カズキ)

 慶應義塾大学を卒業後、ヤフー株式会社にデザイナー入社。 広告事業に約5年半従事し、フロントエンドエンジニアとしても経験を積む。 2017年に株式会社microCMSを共同創業し、現在は日本製ヘッドレスCMSであるmicroCMSの開発がメイン。ReactやVueといったSPA開発が得意。プライベー...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/15054 2021/11/04 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング