「ヘッドレスCMS」という言葉を聞いても、何となく難しく感じたり、従来のCMSとの違いがよくわからないと感じていませんか?
特にエンジニアでない方や、経営者の方の場合、専門的な内容がわからないままだと導入の判断で不安を感じることもあると思います。
この記事では、ヘッドレスCMSの仕組みや従来型CMSとの違いを具体的な例を用いてわかりやすく解説し、導入後のメリットやデメリットもご紹介します。
お読みいただくことで、コストや既存サイトへの影響を考慮した上で、より正確な判断ができるようになるでしょう。
ヘッドレスCMSとは?
ヘッドレスCMS(Headless CMS)とは、コンテンツを表示するビュー画面が無いCMSのことです。
コンテンツを表示する部分をヘッド、もしくはフロントエンドと呼び、コンテンツを入稿するシステムをバックエンドと呼びます。
ヘッドレスCMSは、ヘッド部分がなく、バックエンドのみで構成されたCMSです。
名前からはネガティブな印象を受けますが、実際は「外部連携がしやすくなったCMS」と呼んだ方がふさわしいかもしれません。
従来型CMSとヘッドレスCMSの仕組みの違いをわかりやすく解説
ヘッドレスCMSを理解するには、従来型のCMSとの違いを比較するとわかりやすくなります。
身近な例で例えるなら、従来型CMSはCDコンポ、ヘッドレスCMSはCDプレーヤーです。
CDコンポの場合、音声を出力するスピーカーと再生する装置が一体となっています。
スピーカーを新たに購入する必要はありませんが、時代の進歩とともに音質の良いスピーカーが現れても、接続することができません。
一方CDプレーヤーの場合は、スピーカーを自分で用意しないと音楽を聴くことができませんが、どんなスピーカーとも接続することができます。
音楽を聴く場所、求める音質によって適したスピーカーを選ぶことができるので、対応できる場面が増えます。
出力先を自由に選ぶことができるヘッドレスCMS
従来型CMSとヘッドレスCMSの関係も、これと似た性質があります。
- 従来型CMS=CDコンポ
- ヘッドレスCMS=CDプレーヤー
- フロントエンド(ビュー)=スピーカー
に置き換えてイメージしてみましょう。
CDプレーヤーが出力先のスピーカーを自由に選べるように、ヘッドレスCMSは出力先のビュー(画面)を自由に選ぶことができます。
何らかの理由でスピーカーが故障したとしても、物理的に切り離されているCDプレーヤーは動き続けることができます。
ヘッドレスCMSも、出力先と入力元が分離されているので、例えば出力先のサーバーがハッキングされたとしても物理的に隔離されているCMS部分に被害はありません。
なお、スピーカーとCDプレーヤーをつなぐケーブルは、ヘッドレスCMSの例ではAPI(エーピーアイ、Application Programming Interfaceの略) と呼ばれ、プログラムとプログラムをつなぐ役割があります。
WordPressとヘッドレスCMSの違い
従来型のCMSとして、最も代表的なWordPressとヘッドレスCMSの違いについて比較します。
従来型(Coupled)CMS | ヘッドレスCMS | |
---|---|---|
例 | WordPress | Contentful など |
フロントエンドと バックエンドの構成 |
一体となっている |
分離している |
フロントエンドの自由度 | PHPのみで限定的 | APIにより自由に選べる |
配信先 | 単一のWebサイト | 複数のサイト、アプリなど |
サーバー構成 | 基本的には1つのサーバーで構築 | Webサーバーと CMSサーバーを分離できる |
WordPressなどの従来型(Coupled)CMSの特徴
従来型CMSは、ヘッドレスCMSに対し「カップルドCMS」とも呼ばれます。
フロントエンドとバックエンドが一体となっており、専門知識がない人でも扱いやすいメリットがあります。
WordPressの場合、ソースコードの大部分にPHPが使われています。
WordPressはシステム上、動的にページを生成する仕組みなので、静的なhtmlページに比べて表示速度が遅くなります。
ヘッドレスCMSの特徴
ヘッドレスCMSは、コンテンツを入稿するバックエンド部分のみで構成されています。API (Application Programming Interface) を経由してフロントエンドがバックエンドからコンテンツを取得します。
画面を表示するフロントエンド部分を新たに用意する必要があるので、サイトの構築にはある程度の専門知識が必要です。
しかし、API経由でコンテンツを取得できるので、同じコンテンツをPC、スマホ、アプリなどに最適なレイアウトで配信することができます。
さらに表示と管理が分離していることで、サイバー攻撃を受けにくい性質もあります。
ヘッドレスCMSの6つのメリット
ヘッドレスCMSのメリットは、主に以下の6点があります。
- フロントエンドの言語を自由に選べる
- 高いページスコアを出しやすくSEOに有利
- サイトを部分的にCMS化できるのでリニューアルしやすい
- 1つのCMSでマルチデバイスのコンテンツを管理できる
- セキュリティが堅牢なサーバー構成にしやすい
- 他のサービスと連携がしやすい
1.フロントエンドの言語を自由に選べる
ヘッドレスCMSではワードプレスと違い、PHPやワードプレスの独自記法に縛られる必要がありません。
Webアプリケーション開発で人気が高いNext.jsや、モダンなCSS記法であるCSSmodulesなど、フロントエンドエンジニアの構築しやすいやり方でビューを作成することができます。
2.高いページスコアを出しやすくSEOに有利
Googleのユーザー体験を計測する指標として、Core Web Vitalsがあります。
Googleは基本的に検索アルゴリズムを公表していませんが、Core Web Vitalsは検索順位に影響すると公言している数少ない指標です。
Next.jsには、Core Web Vitalsのスコアが高くなりやすくなる工夫がされています。画像のサイズや読み込みの優先度など、PHPでは記述が複雑な設定も、Next.jsを採用することで簡単に記述することができます。
vercelなどのホスティングサービスと組み合わせることでSSGやSSRなども実施しやすく、高速にページを表示することができます。
3.サイトを部分的にCMS化できるのでリニューアルしやすい
静的htmlで制作したサイトの場合、後から「お知らせ」のページだけをCMS化することはできません。
なぜなら、CMSを導入したお知らせページはまるまるCMSによって表示されてしまうため、既存のhtmlのデザインを流用できないからです。
しかし、ヘッドレスCMSの場合は、部分的なCMS化が簡単にできます。
「お知らせ」の投稿内容だけをヘッドレスCMSから取得することができるので、html内に特定のコンテンツに動的に挿入することができます。
サイトの大幅リニューアルの際など、大がかりなプロジェクトをスモールスタートさせる際にも、ヘッドレスCMSは役立ちます。
4.1つのCMSでマルチデバイスのコンテンツを管理できる
通常のCMSでは、Webとアプリで別々にコンテンツを用意・更新する必要があり、運用に手間がかかります。
また、異なるプラットフォーム用にそれぞれUIを最適化するのも手間がかかります。
一方、ヘッドレスCMSなら、コンテンツを一元管理し、API経由でWebやアプリに同じデータを提供できます。
これにより、効率的にマルチデバイス対応が可能となり、開発と運用の負担を大幅に軽減することができます。
5.セキュリティが堅牢なサーバー構成にしやすい
通常のCMSでは、フロントエンドとバックエンドが一体化しているため、サーバーが攻撃対象になりやすくなります。
一方ヘッドレスCMSでは、フロントエンドとバックエンドが分離されているため、バックエンドを非公開の堅牢なサーバーに配置することができます。
CMSサーバーには運用者以外アクセスできなくなるため、セキュリティを強化しやすくなります。
6.他のサービスと連携しやすい
通常のCMSでは、他のサービスとの連携では特定のプラグインに依存することが多く、柔軟性が低い傾向があります。
一方、ヘッドレスCMSでは、APIを介して様々なサービスとスムーズに連携できるため、ECサイト、CRM、分析ツールなどとの統合が簡単に行え、ビジネス要件に応じた柔軟なシステム構築が可能です。
ヘッドレスCMSのデメリット
ヘッドレスCMSは、フロントエンドの自由度が高まるという反面
- 導入の技術的ハードルが高い
- フロントエンドの構築に費用がかかる
といったデメリットもあります。
従来型CMSでは、コンテンツ管理から表示まで一体化しているため、技術的な知識が少なくてもすぐにサイトを表示することができます。
一方、ヘッドレスCMSでは、APIの理解やフロントエンドの独自開発が必要になります。
表示部分のデザインを自由にカスタマイズするには、JavaScriptやフレームワークに精通した技術者が必要となります。
導入の技術的ハードルが高く、開発の手間や費用は従来型のCMSより増える傾向にあります。
しかし、従来型CMSでは実現の難しい柔軟なコンテンツ配信によって、運用にかかる手間がぐっと減ります。
高いセキュリティを維持する費用も減らせますし、高速表示によってサイトが使いやすくなれば、サイトの売り上げが上がるというデータもあります。
ヘッドレスCMSへの切り替えは大きな決断になりますが、今後発生するかもしれない運用の手間やセキュリティリスクを減らせるので、長期的に見れば大きなリターンのある投資と言えます。
ヘッドレスCMSについてもっと詳しく知りたい方は
BERYL(ベリル)はカスタムライフ社が独自で開発した、国産のヘッドレスCMSです。
大規模メディア「カスタムライフ」を実際に運用しているチームが開発しているため、現場から生まれた「あったらいいな」という声が反映されています。
導入する際のハードルとなるフロントエンドの構築についてもサポートがあり、従来型CMSからヘッドレスCMSに移行を検討している方におすすめのサービスです。
>>メディア運営がしやすいヘッドレスCMS「BERYL(ベリル)」