ヘッドレスCMSとは？その構造を理解しよう

2024年6月18日

CMSの基本的な構造を理解できたところで、ここからはいよいよ、ヘッドレスCMSについて話を進めていくことにします。ヘッドレスCMSの構造と、その特徴とは？　その点をまずは加藤さんに解説してもらいます。

ヘッドレスCMSは何を「レス」している？

CMSには、フロントエンドとバックエンドが一体化した「カップルドCMS」と、分離した構造を持つ「デカップルドCMS」があるというお話をしましたが、そのデカップルドCMSのフロントエンドを取り去り、バックエンド側だけにしたものが「ヘッドレスCMS」ということになります。フロントエンドとバックエンドの概念、カップルドCMSとデカップルドCMSの構造の違いを理解してさえいれば、ヘッドレスCMSがどんなものかが、すぐに理解できると思います。

こう説明すると、「フロントエンド側はどうするの？」と疑問に思われる方も多いかと思いますが、実は、フロンエンドを自由に選択できることこそが、ヘッドレスCMSの最大の特徴となります。

スマホやPC向けのWebサイトはもちろん、WebアプリケーションやiOS、Android向けスマホアプリ、デジタルサイネージ、音声デバイス、スマートウォッチ、さらに、今話題のメタバースをフロントエンドとして選ぶことも可能です※1。

そして、それらフロントエンドを複数用意したり、必要にあわせて追加したり、変更できたりするのもヘッドレスCMSの大きな特徴です。なぜそんなことができるのかというと、ヘッドレスCMSはいろいろなタイプのフロントエンドをつないで使うことを前提に、やりとりのための“窓口”を設けているからです。その窓口は「API」と呼ばれるものなのですが、これついては次項であらためて説明したいと思います。

なぜヘッドレスCMSが登場したのか

話題を変えて、ここではなぜ、ヘッドレスCMSが登場し、注目を集めるに至ったか、というお話をしておこうと思います。

欧米を中心に、ヘッドレスCMSの普及が始まったのは、2017～18年頃のことでした。当時のWebマーケティングを巡る状況でまず挙げられるのが、「ワンソースマルチデバイス※2」に対するニーズの高まりです。「ユーザーがどんなデバイスを使っていても最適な体験を提供するべき」という考え方が強まり、デバイスごとに専用のWebサイトを用意する流れを後押ししました。そうしたニーズに応えるために、ヘッドレスCMSのような、バックエンドのみの仕組みが登場し、注目を集めたというわけです。

一方、制作の現場では、シンプルなバックエンドを求める声が高まっていました。WebブラウザやJavaScriptの進化にともなって、フロントエンドでできることが増えたことがその理由です。機能は最低限で構わないから、安価に運用できるバックエンドはないか。そんなニーズがヘッドレスCMSの普及を促したというわけです。

そしてもう一つ、重要な変化があります。それは、制作・マーケティングを問わず、Web上に公開されている、サービスやデータのような外部リソースを積極的に活用していこうという流れが強くなっている点です。例えばGoogleが公開しているAI画像解析エンジンを呼び出して利用するとか、スプレッドシートを呼び出してデータを取得するといったことが広く行われるようになった。つまり、Webの世界では、それぞれが持つ技術やデータをオープンにして活用しあう流れができている。

ヘッドレスCMSはこうしたニーズに応えるために生まれたCMSなのです。

※1 話題のメタバースを…
昨年来大きな話題を呼んでいるメタバースですが、近い将来当たり前のようにしてメタバース上にコンテンツを作成する時代が来るとの予測もあります。ヘッドレスCMSの一種とも言えるECのShopifyはすでにメタバースへの積極的な姿勢を見せています
※2 ワンソースマルチデバイス
スマホとPCの違いはレスポンシブデザインで吸収することが可能かもしれませんが、多様なデバイスを視野に置いた場合や、より質の高い体験を提供したい場合には、柔軟な設計が可能なシステムを構築する必要があります