blog-hero-img

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

pen-icon2020.11.03rewrite-icon2021.10.08

この記事は約4分で読めます

Profile Pic

この記事の筆者:三好アキ


🔹 Amazonベストセラー1位を複数回獲得している『はじめてつくるReactアプリ with TypeScript』著者。

🔹 自身のJavaScript挫折経験をもとに、HTMLとCSSの知識だけで本格的なアプリ開発を始められる入門書を多数執筆中。合計著作は22冊を超える。

🔹 専門用語なしでプログラミングを教えるメソッドに定評があり、1200人以上のビギナーを、最新のフロントエンド開発入門に成功させる。


Amazon著者ページはこちら → amazon.co.jp/stores/author/B099Z51QF2



React、Next.js、TypeScriptなどのお役立ち情報や実践的コンテンツを、ビギナー向けにかみ砕いて無料配信中。登録はこちらから → 無料メルマガ登録

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

まだまだ日本語での情報が少ないヘッドレスCMSの実際の活用事例を、先日の「ヘッドレスCMSの実際の活用事例【その1】」に引き続いて、各ヘッドレスCMSのプロバイダーのHPを参考にしながら紹介します。

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

事例1 多言語対応でヘッドレスCMSを導入

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

運送業向けIoTソリューションを提供する米企業Samsaraでは、海外展開を進めるために、多言語コンテンツの制作・管理を行うプロジェクトを立ち上げます。

しかし「1つの管理画面に1つの表示画面」という従来型CMSを採用したのでは、すぐに多言語コンテンツの管理に限界が来ることが見えており、またSamsaraには以下の要件も満たす必要がありました。


• プロジェクトに用意された12ヶ月間の立ち上げ期間以降も、効率的な運用を行えること

• マーケティングチームだけでなく、法務やプロダクトチーム、そして経営執行チームと、社内のほぼ全員がコンテンツ制作に関わるため、管理ツールは使いやすいものであること

• 文章だけでなく画像や動画なども各地域に合わせてローカライズする必要があるので、さまざまな種類のコンテンツ管理が行いやすいこと

• スピードが速く、安定して作動すること


これらの要件をすべて満たすものとして、SamsaraはContentfulのヘッドレスCMSを採用します。

ContentfulのヘッドレスCMSの特徴の一つに「コンテンツタイプ」と呼ばれるものがあり、これによって柔軟にコンテンツの型や種類を定義することができます。

このコンテンツタイプは再利用ができるので、ウェブページの各パーツをコンテンツタイプとして定義することで、言語が違っても同じコンテンツタイプを使って、効率的なローカライズ作業を進めることが可能となります。

Contentfulの導入によって、A/Bテストも効率的に行えるようになり、ヘッドレスCMSを2018年に導入して2年間運用した結果、これまで全世界1,500名のクライアントにリーチし、ローカライズされたサイトの数は16にのぼるということです。

事例2 WordPressからヘッドレスCMSに移行

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

こちらは従来型CMSの代表WordPressから、ヘッドレスCMSに移行した例で、同じくContentfulを採用しています。

リモート環境でのリアルタイム・コミュニケーション支援を行なっている米企業PubNubでは、コーポレートページのブログにWordPressを使っていました。

しかしプラグインや外部ツールのアクセス権限、アカウント管理などが非常に複雑化して業務効率を下げるとともに、ユーザーの目に触れるウェブサイトと管理画面の両方のUIで使いにくさが目立っていました。

そこでPubNubは全面的にヘッドレスCMSへと移行することを決めますが、それによって以下のようなベネフィットがあったとしています。


• エンジニアに頼らずにコンテンツの制作と管理ができるようになったこと

• エンジニアは優先順位の高い、生産的な業務に集中できるようになったこと

• リリースまで1週間かかっていたコンテンツ制作が、3日以内で済むようになったこと

• コンテンツのアップデートをより細かなレベルで、頻繁に行えるようになったこと

• より良いコンテンツを、より良いUI/UXでユーザーに届けられるようになり、コンバージョン率が過去にないほど上昇したこと

事例3 地域ごとに最適化されたコンテンツ配信にヘッドレスCMSを導入

参照URL:https://buttercms.com

この事例はリアルの空間でヘッドレスCMSが使われているものです。

「ヘッドレスCMSの実際の活用事例【その1】」で紹介した3つ目のNikeの事例のように、ネット空間やWebブラウザの中だけでなく、リアル空間でも使える点が従来型CMSとヘッドレスCMSの大きな違いの一つで、使い方次第でヘッドレスCMSの可能性は大きく広がるといえます。

今回のヘッドレスCMSは、Contentfulと同じくクラウドベースのSaaS、ButterCMSを採用した事例です。

KeyMeStandImage

(*KeyMeのスタンド。参照元:https://www.builtinnyc.com)

ニューヨーク発のAIスタートアップKeyMeは、全米3,000ヶ所に設置されたスタンドで、家や車の鍵のコピーができるサービスを提供しています。

これにより合鍵を作りに店舗に行かなくても済むようになり、また作られた鍵はAIの3Dモデル技術のおかげで人の手によるものより10倍正確だそうです。

KeyMeが直面した問題はマーケティングに関することで、それぞれの地域や州で鍵のコピーを作るニーズに大きな開きがあるため、マーケティング戦略も地域ごとに最適化する必要があったのです。

それは当然、地域ごとに異なるコンテンツを制作する必要性を産みますが、その管理のためのCMSとしてKeyMeが採用したのがヘッドレスCMSでした。

その理由として、KeyMeのフロントエンド・エンジニアは「コンテンツを表示する場所(=スタンドの画面)はすでにあったので、それぞれのスタンドで使う文章や画像を管理・配信できるCMSが必要だった」と述べています。

WordPressの導入も一度は検討されたそうですが、「こんな古臭くて余計な機能が詰め込まれたCMSは、チームの誰も使いたくなかった」とのことで採用されませんでした。

ButterCMSのヘッドレスCMS導入は、以下のようなベネフィットをもたらしました。


• 地域に最適化されたコンテンツの制作・管理を、短時間で効率的に行えるようになったこと

• スタンドとウェブサイト両方に、コンテンツをスピーディに配信できるようになったこと

• エンジニアが優先順位の高い業務に集中できるようになったこと

ネット空間とリアル空間、両方で使えるヘッドレスCMS

ヘッドレスCMSがWebブラウザ内で動く従来型CMSと決定的に違う点は、リアル空間で表示されるコンテンツ管理にも活用できるところです。

3つ目のKeyMeの事例のように、ヘッドレスCMSを使えば、スタンド向けコンテンツとウェブサイト向けコンテンツを一元管理できるので、一貫性のある効率のよいマーケティング戦略をスピーディに実施できます。

多言語コンテンツの制作・管理を効率よく行いたい、コンテンツ管理の時間的・人的コストを削減したい、既存のCMSでは対応できない種類のコンテンツ管理を行いたい、などのニーズがある場合はヘッドレスCMSを検討しましょう。

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

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

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

Profile Pic

メルマガ配信中
(from 三好アキ/エンジニア)


React、Next.js、TypeScriptなど最新のウェブ開発のお役立ち情報を、ビギナー向けにかみ砕いて無料配信中。
(*配信はいつでも停止できます)