ヘッドレスCMSを実際に導入した結果【その1】

ヘッドレスCMSの具体的な活用方法

ヘッドレスCMSに関する日本語の情報は、エンジニアの技術者目線で書かれたものが多く、ヘッドレスCMSが具体的にどのような役に立つのか見えにくい人は多いと思います。

そこで今回は、ヘッドレスCMSプロバイダーのGraphCMSとContentfulを参考にしながら、ヘッドレスCMSの具体的な活用事例を紹介します。

ヘッドレスCMSの基本コンセプトについては、こちらの記事をご覧ください。

事例1 リブランディングでヘッドレスCMSを導入

参照URL：https://graphcms.com

GraphCMSは2017年にドイツで設立された若い会社で、その名前の通りGraphQLに特化した「GraphQLネイティブ」のヘッドレスCMS開発を行なっています。

このGraphCMSを導入したのが、オンライン旅行代理店Tropoで、ブランド戦略を刷新するリブランディングを行うにあたって、それまでのテクノロジースタックも見直すこととなり、ヘッドレスCMSを導入しました。

Tropoのリブランディングの目標の一つは、「質が高く、かつ包括的なコンテンツをユーザーに提供することで、顧客獲得費用（CAC / Customer Acquisition Cost）を削減する」というものでした。

このようなコンテンツを制作するには、ホテルや航空券の価格、目的地までの距離、ローカルインフォメーション、天気などの複数のデータを、API経由で取得する必要がありましたが、それまで使っていたコンテンツ管理システム、Type3は「1つのデータベースに1つの管理レイヤー、1つの表示レイヤー」という典型的な従来型CMSであったため、このニーズを満たすことは不可能でした。

そこでコンテンツの管理レイヤーにヘッドレスCMS（GraphCMS）を導入し、複数のチャネルで再利用可能な高品質のコンテンツを効率的に作成できる作業フローを整えます。

ユーザーとの接点となる表示レイヤーには、React/Redux、GraphQLなどのモダンなフロントエンド技術を採用し、細かくカスタマイズされたリッチなUIと、モバイル端末でもスピードの落ちない高パフォーマンスを実現し、高いUXを達成しました。

事例2 新アプリ開発でヘッドレスCMSを導入

参照URL：https://graphcms.com

同じくGraphCMSを導入したのが、ベルリンでヘルス関連アプリを開発しているAsana Rebelで、複数のマイクロアプリ開発からなる中規模プロジェクトにヘッドレスCMSの採用を決めました。

その理由として以下のことを挙げています。

• 複数のアプリを一括管理できること

• アジャイル開発との親和性が高く、すばやく開発サイクルを回せること

• 表示レイヤー（フロントエンド）の自由度が高いので、アプリごとに最適なリッチUIを実装できること

• クラウドベースのSaaSなので、インフラ管理をしなくていいこと

事例3 既存CMSの限界からヘッドレスCMSに移行

参照URL：https://www.contentful.com

Contentfulは、数あるヘッドレスCMSプロバイダーの中で最も有名なところで、2013年にドイツで設立されました。

このContentful製のヘッドレスCMSを導入したのが、Nikeの店舗に設置するタッチスクリーン開発プロジェクトを担当したDemodernです。

このケーススタディは、ヘッドレスCMSがネット空間ではなくリアル空間でも使えることを示す良い例となっています。

（*店舗に設置されたタッチスクリーン。参照元：https://www.contentful.com）

このプロジェクトは、ミュンヘンとベルリンのNikeショップに来店客が触れることのできる75インチの大型インタラクティブ・タッチスクリーンを設置するものでした。

リッチな体験を通してアイテム購入をユーザーに促進することがこのタッチスクリーンの目的なので、スクリーンにはプロダクト情報だけでなく、そのアイテムが実際に使われている場面やSNSの動画・写真フィード、さらにはイベントの開催情報、バーチャルなランニングトレイル（登山道）なども表示されます。

つまり、ユーザーは自分がそのアイテムを使っている場面やシーン、その時の感情をよりクリアに想像できるようになるのです。

これらのことを実現するには複雑なコンテンツ管理が必要になりますが、「既存のCMSをカスタマイズする」「新しいCMSを0からスクラッチ開発する」という多くの企業が通常とる選択肢は、今回どちらも採用されませんでした。

その理由は、まず時間的制約があったこと、そして既存のCMSはウェブにフォーカスした設計となっており、インタラクティブな要素があり、動画や画像などを多く含む今回のプロジェクトには合わないという判断があったからです。

そこで採用されたのが、豊富な実績のあるContentfulのヘッドレスCMSでした。

ヘッドレスCMSによって、画像や動画などのインタラクティブなコンテンツを扱うことや、FacebookやInstagram、Twitterなどの複数のAPIからフィードを取得することが容易になったのみならず、コンテンツ管理のプロセスも簡略化され、タイムリーな情報をすばやくスクリーンに反映することができるようになりました。

ヘッドレスCMS ≠ 次世代のCMS

Nikeのタッチスクリーンの事例のように、ヘッドレスCMSはネット空間にとどまらず、リアル空間のコンテンツ管理にも採用することが可能です。

ここがWordPressをはじめとする従来型CMSとの最大の違いであり、またヘッドレスCMSを「既存CMSの進化形」として捉えることのリスクとなります。

つまりヘッドレスCMSを従来型CMSの進化形として見ていると、ウェブサイトという形やブラウザというネット空間にとらわれて、ヘッドレスCMSのポテンシャルを見逃してしまうことになるからです。

ヘッドレスCMSは、これまでのCMSとは異なる文脈で語られるべきものなのかもしれません。

引き続きヘッドレスCMSの活用事例を知りたい方は次の記事を参考にしてください。

monoteinはヘッドレスCMSを活かしたシステム、Jamstackのサイト制作を専門としています。

ストレスフリーでサクサク動き、高いCV率を実現するJamstackサイトに興味のある方は、コチラより遠慮なくお問い合わせください。