Blog
ヘッドレスCMSとは?現役エンジニアがまとめてみた
フォーカスしたいもの
最近、耳にする事が増えてきた「ヘッドレスCMS」という言葉。
聞き馴染みのない方にとっては従来のCMSとの違いが名前だけでは、なかなか理解が出来ないのではないでしょうか。
今回はそのヘッドレスCMSがどういったものなのか、使用するメリットやデメリットなどをご紹介します。
この記事を読み、ヘッドレスCMSに対しての知識を得て、従来のCMSより自由度と効率性が高いwebサイトの構築を目指しましょう。
ヘッドレスCMSとは
ヘッドレスCMSとは、コンテンツ内容を管理する部分であるバックエンドの機能だけを持ち、見た目のデザイン部分やCSSなどを持たないCMSの事を言います。
ヘッドレスの「ヘッド」がコンテンツの閲覧や表示する部分(ビュー)を指しています。
ヘッドレスCMSとは閲覧・表示する機能のないCMSなのです。
従来のCMSはほとんどの場合、コンテンツを入稿するシステム部分とコンテンツを閲覧・表示する部分が合わさったものが一般的です。
現在でも圧倒的人気のCMSとしてWordPressがあります。このWordPressは従来のCMSで、テーマと呼ばれるテンプレートを自由に設定・編集し、コンテンツ部分とデザイン面を一括で管理出来るシステムの事を指していました。
ヘッドレスCMSが必要とされている理由とは?
2018年頃から、ヘッドレスCMSは一部のエンジニアから注目され始めました。一体、どのような理由で注目されるようになったのでしょうか。
ここからは、従来のCMSではなくヘッドレスCMSが必要となった理由について解説していきます。
既存のシステムが変更しにくいため
従来のCMSはフロントエンド側とバックエンド側が、同じCMS上で管理されています。そのため、どちらかに手を加えたい場合、システムに大きな影響が出ない範囲でしか変更ができません。
しかしヘッドレスCMSを用いたWebサイトの場合、フロントエンドとバックエンドがそれぞれ独立しています。そのため、従来のCMSのような制限がなく、必要なときに必要なシステムの改修が行えます。
WordPressによる運用では限界がきつつある
CMSの代表的な存在であるWordPressは、世界的シェアNo.1でありCMSの代名詞といっても過言ではない存在でもあります。しかし、WordPressには手厚いサポート体制があるわけではなく、長期間の運用にはあまり向いていないのが実情です。
セキュリティ面でのバージョンアップ情報・アップデート情報も基本的には自分で調べて、自分で対応しなければいけません。プラグインを入れている場合も、プラグインごとのアップデート情報をチェックする必要があります。
日々、新しくなっていくWebサイトのトレンドに合わせていこうと思った場合、それにマッチしたプラグインを自分で探して追加する必要もあるでしょう。
WordPressをカスタマイズして運用している場合はさらに管理が大変です。セキュリティパッチやバージョンアップによってどのような影響がWebサイトに発生するのかを検証するのにも、時間と費用がかかります。
上記の理由から、WordPressを用いたWebサイトの運営には、思っている以上に管理に手間がかかってしまうため、限界があるといわれています。
Webの強化とサービス品質の向上が急務
新型コロナウイルス感染拡大の影響で、Webサービスの充実への注力度合いが加速しました。消費者は一般的な買い物や飲食のデリバリーサービスを代表として、銀行や保険の相談・手続き、セミナー学習、習い事など、2020年以前では考えられないレベルでありとあらゆるサービスをインターネット経由で受けることが当たり前になってきています。
その消費者が、今までオフラインで得られてきたサービスをオンラインで利用できるようにするためには、画面の表示速度にストレスを感じないようにする必要があります。
従来のCMSだと、閲覧用のファイルを生成するために動的ファイルとコンテンツデータファイルとを行き来する工程があります。しかしヘッドレスCMSの場合、静的ファイルをそのまま表示すれば良いだけなので、画面表示が早くなります。
Webサービスのユーザーが個人情報を入力し、個人情報を預ける必要がある場合、セキュリティ面で強固なシステムを採用しなければなりません。そういった面でも、ヘッドレスCMSを用いた構築と運用は有利に働きます。
今までのCMSとヘッドレスCMSの違い
こちらでは、さらに今までのCMSとヘッドレスCMSの違いを紹介します。
従来のCMS
WordPressなどのCMSにはコンテンツを閲覧・表示させる機能と、コンテンツの入稿・管理をする機能があります。
CMSのバックエンド側では、テンプレートの管理やコンテンツデータの管理も行っています。
フロントエンド側ではテンプレートを改修・調整する場合にバックエンドのプログラミング言語を使わなくてはいけません。
ヘッドレスCMS
一方でヘッドレスCMSには、そもそもフロントエンドの部分が存在しません。
だからこそバックエンドとしてシステム開発や改修が行えるのです。
ヘッドレスCMSを用いる場合、フロントエンドの部分はCMS外で運用していきます。
外部にフロントエンドを作成、ヘッドレスCMSが提供するAPIでコンテンツデータをフロントエンドに出力する形をとり、管理・運用していくのです。
ヘッドレスCMSのメリット
では、WordPressなどのCMSが人気を誇っているなか、ヘッドレスCMSを使うメリットにはどういったものがあるのでしょうか?
フロントエンドの自由度が高い
ヘッドレスCMSではフロントエンド部分が独立しているという特徴があります。
だからこそ、CMSのシステム変更やバージョンアップなどがあった場合も影響を受ける事なく改修をしたり、細かい調整をしたりが出来るのです。
マルチデバイス対応が簡単
ヘッドレスCMSはAPIを用いて外部のコンテンツデータを出力します。これは単純に汎用性のあるデータが提供されているともとれます。
出力されたコンテンツデータはいろいろなデバイスで使う事が可能です。webブラウザだけでなく、
iOSやAndroidのアプリなどでもコンテンツを表示可能なのです。
表示速度が速い
ヘッドレスCMSは、バックエンドとフロントエンドの部分が完全に独立しているので処理速度が速い事が特徴。
通常のCMSでは、閲覧用のファイルを生成する際に動的ファイルとコンテンツデータファイルをやりとりする作業が必要でした。
しかしヘッドレスCMSの場合、静的ファイルをそのまま表示するだけで良いため表示そのものがスピーディに行えます。
Webの一部だけでも利用できる
会社のWebサイトをHTMLなどで制作・運用している場合、あとになってから編集したり機能の追加を行ったりしたいときに、Webサイト全体をCMSに移行し構築しなおす必要があります。
従来のCMSの場合、お知らせや製品ページなど、頻繁に更新したいページだけにCMSを導入することは難しいとされています。
しかし、ヘッドレスCMSでは、頻繁に更新したい部分だけにコンテンツ管理機能を導入可能です。
例として、ECサイトの商品ページやカートのページはそのままの状態で、「セール情報」や「新商品の案内」などのフロントエンドを改修できます。
ヘッドレスCMSは、必要になったタイミングでAPIを通じて該当する箇所を呼び出し、既存ページに反映させる、といったことが可能になります
サーバー費用を抑えられる
先述している部分ではありますが、ヘッドレスCMSは今までのCMSのように閲覧用のファイルを作成せず、その分をサーバ処理で対応します。
ヘッドレスCMSは低スペックでも問題なく動作するため、サーバ費用を通常のCMS以上に抑えることが可能です。
ヘッドレスCMSのデメリット
ヘッドレスCMSを導入するメリットが大きい反面、デメリットにはどのようなものがあるのでしょうか?
エンジニアが必要
単純にヘッドレスCMSを導入しただけでは、ビューアーも存在しておらず、コンテンツがどのように表示されるのか確認出来ません。
どんなインターフェースを用いて表示するのかは自由に選択可能ですが、ヘッドレスCMSを使いこなせるエンジニアを見つける必要があります。
APIに関する知識の習得が必須
ヘッドレスCMSから外部のフロントエンドのコンテンツデータを出力する際に、APIを使わなくてはなりません。
そのため、webサイトの管理者は最低限のAPIに関する知識を理解しておく必要があります。
プレビュー表示が複雑化してしまう
今までのCMSにはプレビュー表示機能が存在していましたが、ヘッドレスCMSにはフロントエンドが存在しないためプレビュー表示機能もありません。
プレビュー表示機能をヘッドレスCMSに導入すると、内部の構造が複雑化してしまいます。
ヘッドレスCMS導入のケーススタディー
ヘッドレスCMSを導入すべき具体例をここではご紹介いたします。
以下で挙げる具体的な理由が、自社のWebサイトなどにも当てはまる場合はヘッドレスCMSの導入を検討しても良いでしょう。
サイト表示速度を高速化したい場合
Webサイトの画面表示を今よりも高速にしたい場合、ヘッドレスCMSの導入はおすすめです。
従来型のCMSではコンテンツ管理から配信までおこなっているので、読み込みにも時間がかかってしまい表示速度が遅くなることがあります。
一方、ヘッドレスCMSはコンテンツ管理と配信機能が分離している仕組みのため、レスポンスが早く、高速な表示を可能にします。
セキュリティを高めたい場合
従来のCMSの代表格ともいえるWordPressはシェア率の高さから膨大な実績がある一方で、攻撃の対象として狙われやすいこと割合が高いのも事実です。
従来のCMSは表示面、データベース、管理画面などのWebページを表示するのに必要なシステム構成を全てカバーしています。
攻撃する側から見ると、一箇所でも攻撃できる部分が見つけられれば、そこを糸口にして更なる攻撃ができる可能性が出てきます。
一方でヘッドレスCMSを使ったWebサイトの場合はどうなるでしょうか?
この場合、外部に公開されているのは表示面だけ。そのため攻撃をしようと思う者から見たときに内部的な構造が分かりにくく、攻撃するための糸口を見つけられる可能性は大きく下がることでしょう。
フロントエンドエンジニアのみで完結させたい場合
ヘッドレスCMSを利用した場合、利用するフロントエンド技術に一切の制約がありません。
そのためより一般的な技術の利用が可能となります。
従来のCMSの場合、その「CMSに詳しい管理者もしくは担当者」が必要なケースが多くありました。
ヘッドレスCMSも導入して構築してしまえば、そのような無駄な制約がなくなり不必要なコストが発生しにくくなります。
複数のWebサイトにまたがったコンテンツを一元管理したい場合
企業であれ個人であれ同じコンテンツをWebページ、モバイルアプリ、電子メール、スマート家電などの複数チャネルに配信したいというケースは多くあります。
また多くの企業では、サービスを提供するエリアに合わせる形で、同様のコンテンツを異なる言語で配信する必要があります。
ヘッドレスCMSは、コンテンツを公開する手段と方法が分離されています。そのため、デバイスによって、表示する方法を選択できるので、さまざまな媒体・デバイスへ配信するコンテンツの管理が可能です。
話題のヘッドレスCMS11選をご紹介
ここでは代表的なヘッドレスCMSを5つ紹介いたします。
microCMS
純国産のヘッドレスCMSで、日本語表示も万全。管理画面のUIも日本人が使いやすいよう設計されています。
更新情報なども読みやすく、問い合わせも日本語サポートがデフォルトなので安心して使う事が出来ます。
まだ他のCMSより機能やドキュメントが不足している部分があるのは事実ですが、アップデートの頻度も高く、ユーザーの要望も積極的に取り入れる姿勢が見えるサービスです。
Contentful
最も有名なヘッドレスCMSがこのContentfulです。
SpotifyやWeWorkなどで使用されているのが、このヘッドレスCMSです。
画像の自動リサイズ機能やmarkdown記法などが使え、機能面でも充実しています。
開発の幅がとても広く利用者も多いため、情報やモジュールもとても充実しているのが特徴。
Prismic.io
ほとんどの機能が無料で使用可能なヘッドレスCMS。
使用するユーザーが1人であれば、無料で契約可能な点が特徴的で、ほとんどの機能が自由に使えます。
小規模サイトに最も向いているヘッドレスCMSです。ダッシュボードのUIも高い完成度を誇り、軽快に動作します。
Strapi
拡張性の高さが特徴のヘッドレスCMS。Strapiはクラウドサービスではなく、Node.jsで動作するタイプのCMSです。
カスタマイズ出来る幅がとても広く、ローカル環境で自作したプラグインを実装する事も可能。
そのほか拡張性がとても高く、ユーザー一人ひとりの柔軟なカスタマイズが可能な事で注目を浴びているサービスです。
構築難易度が高めで、学習コストもそれなりにかかってしまいます。
GraphCMS
Facebookが開発したWebAPI、「GraphQL」の活用に特化したヘッドレスCMS。
GraphQLの長所を引き出すための、豊富なフィルターオプションを搭載しており、バッチ処理なども充実しています。
GraphQLは開発事例や紹介記事も多く、情報の収集も比較的しやすいのが特徴です。
しかし、GraphQL自体が動画などのデータの扱いが苦手で、複雑なモデル設計には向いていません。
Cosmic
Cosmicは、スタートアップ企業「Cosmic Inc」が開発および運営しているヘッドレスCMSです。Cosmicのコンセプトは「開発者による開発者のためのヘッドレスCMS」を掲げており、バージョンアップに関しても開発者に寄り添った更新も行われています。
APIや他のアプリケーションと連携する機能も充実しているため、開発者にとって満足度も高いCMSとなっています
Flamelink
Flamelinkは、Googleが提供しているFirebaseを用いてヘッドレスCMSを構築するサービスのことを指します。
Firebaseは2011年に開発され、その後FirebaseをWebサイト用に応用しコンテンツの管理を強化したものがFlamelinkです。
Firebaseはさまざまな機能やサービスを備えており、汎用性に優れたサービス。そのFirebaseの編集を誰でも簡単に扱えるCMSにするのがFlamelinkです。
Directus
Directusは、データベースとのやりとりをメインとしたヘッドレスCMSで、PHPをベースとしています。
Directusはデータベース構造が特徴的なものに固定されてしまいがちなCMSと異なり、柔軟なデータ設計が可能なため、より効率化が見込めるヘッドレスCMSです。
クラウド型でもサービスがリリースされており、有料での利用とはなりますがCaaSとして使用可能です。
Ghost
GhostはStrapiと同様に、Node.jsを用いて動作するヘッドレスCMSです。
ブログに必要な機能を選りすぐって搭載しているため、動作が軽快であり、管理画面のUIもシンプルなためエンジニアには人気があるヘッドレスCMSです。
管理画面もWordPressと似ているため、WordPressの操作に慣れている人には、とても扱いやすいヘッドレスCMSとなっています。
サーバーやデータベースを自前で用意してGhostをインストールできれば、無料で利用可能です。また、クラウド上のサーバーやデータベースを利用できる有料プランも展開されています。
Netlify CMS
Netlify CMSは静的サイトの構築に向いているヘッドレスCMSです。
ソースコードをもとに、ビルド・デプロイなどを自動で行ってくれるサービス。
Gitリポジトリから静的サイトをビルドするので、ブラウザで閲覧する際にはAPIとの通信は発生しません。
またNetlify CMSの管理画面で投稿を作成することで、連携するGitリポジトリにコミットされるため、自動でビルドされるためサイトが更新されます。
国内のヘッドレスCMSの導入サイト事例
ここからは日本国内でヘッドレスCMSを用いてWebサイトを構築している企業をご紹介します。
ディスカバリー・ジャパン
ディスカバリー・ジャパンは、ディスカバリーチャンネルの放送をアメリカでおこない有名になったメディアブランドで、今では220以上の国と地域で放送されています。
日本国内では、1997年より「ディスカバリーチャンネル」、2000年から「アニマルプラネット」の2つのCS放送チャンネルを持っています。
リニューアル前のWebサイトは、WordPressを用いたモノリスな仕組みで、データベースのメンテナンスが定期的に必要など、メンテナンスコスト・ランニングコストが課題だったとのこと。
ヘッドレスCMSも導入することで運用コストが半分になり、今までサーバーを複数台利用してコストがかかっていたが、ヘッドレスCMSも導入したことでAWSサーバーが不要になり、大幅なコスト削減が実現できたとのこと。
https://www.discoveryjapan.jp/
クラウドワークス
クラウドワークスは、2011年に創業した国内最大級のクラウドソーシングサービスで、同年に上場し、総合型のクラウドソーシングサービスとして運営しています。
契約から受注、納品、契約終了から報酬を得るまでの工程をオンライン上で全て完結することが可能でありながら、登録は無料となっています。
ヘッドレスCMSを導入したきっかけは、コーポレートサイトの刷新の必要性があったため。
変更にエンジニアが必要だったり、スマホサイズに対応した表示ができないなどの問題を解決する必要があり、それらを解消・解決するためにヘッドレスCMSの導入を決意。
ヘッドレスCMSを導入した結果、更新が簡単になりWebサイトのパフォーマンスの向上ができたとのこと。
TAO TAO(現SBI VCトレード)
SBI VCトレード(旧TAOTAO)は2019年より仮想通貨取引所を運営している企業です。
初心者でも利用しやすいアプリ開発をおこない、ユーザーインターフェースが快適でありつつもセキュリティ面でも高く評価されています。
au Webポータル(株式会社mediba)
株式会社medibaは、auユーザーのポータルサイトである「au Webポータル」内にあるブラウザで遊ぶことのできる「無料ゲーム」やユーザーがアクションをすることでポイントを獲得できる「毎日ポイント」など、ユーザーの訪問を週間かさせるためのコンテンツ制作・運営をおこなっている企業です。
ボカコレ(株式会社ドワンゴ)
株式会社ドワンゴは、KADOKAWAグループの会社で、動画サービスの「ニコニコ動画」などさまざまな事業を展開している企業です。
ボカコレという企画が始まったタイミングでヘッドレスCMSを導入。コンテンツ更新にかかる時間の大幅な削減を目的として導入されました。
ヘッドレスCMSのまとめ
ヘッドレスCMSは自由度が高く、効率的にWebサイトを構築できる優れたCMSです。
しかし、コンテンツの表示などに一定のスキルが必要となってきてしまいます。
エンジニアがいない企業では、運用すること自体が困難になってしまうため、ヘッドレスCMSを実装する場合は別途、エンジニアを雇う必要があるでしょう。
ヘッドレスCMSを導入しようと検討している方は、事前にエンジニアの雇用や、ヘッドレスCMSが自社に必要なのか調査をした上で導入を進めていきましょう。