View more

Blog

ヘッドレスCMSとは?現役エンジニアがまとめてみた

ヘッドレスCMSとは?現役エンジニアがまとめてみた
ヘッドレスCMSとは?現役エンジニアがまとめてみた

フォーカスしたいもの

最近、耳にする事が増えてきた「ヘッドレスCMS」という言葉。
聞き馴染みのない方にとっては従来のCMSとの違いが名前だけでは、なかなか理解が出来ないのではないでしょうか。
今回はそのヘッドレスCMSがどういったものなのか、使用するメリットやデメリットなどをご紹介します。
この記事を読み、ヘッドレスCMSに対しての知識を得て、従来のCMSより自由度と効率性が高いwebサイトの構築を目指しましょう。

ヘッドレスCMSとは

ヘッドレスCMSとは、コンテンツ内容を管理する部分であるバックエンドの機能だけを持ち、見た目のデザイン部分やCSSなどを持たないCMSの事を言います。

ヘッドレスの「ヘッド」がコンテンツの閲覧や表示する部分(ビュー)を指しています。

ヘッドレスCMSとは閲覧・表示する機能のないCMSなのです。

従来のCMSはほとんどの場合、コンテンツを入稿するシステム部分とコンテンツを閲覧・表示する部分が合わさったものが一般的です。

現在でも圧倒的人気のCMSとしてWordPressがあります。このWordPressは従来の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の場合、静的ファイルをそのまま表示するだけで良いため表示そのものがスピーディに行えます。

ヘッドレス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は、コンテンツを公開する手段と方法が分離されています。そのため、デバイスによって、表示する方法を選択できるので、さまざまな媒体・デバイスへ配信するコンテンツの管理が可能です。

話題のヘッドレスCMS5つを比較

ここでは代表的なヘッドレスCMSを5つ紹介いたします。

microCMS

純国産のヘッドレスCMSで、日本語表示も万全。管理画面のUIも日本人が使いやすいよう設計されています。

更新情報なども読みやすく、問い合わせも日本語サポートがデフォルトなので安心して使う事が出来ます。

まだ他のCMSより機能やドキュメントが不足している部分があるのは事実ですが、アップデートの頻度も高く、ユーザーの要望も積極的に取り入れる姿勢が見えるサービスです。

MicroCMS公式サイト

Contentful

最も有名なヘッドレスCMSがこのContentfulです。

SpotifyやWeWorkなどで使用されているのが、このヘッドレスCMSです。

画像の自動リサイズ機能やmarkdown記法などが使え、機能面でも充実しています。

開発の幅がとても広く利用者も多いため、情報やモジュールもとても充実しているのが特徴。

Contentful 公式サイト

Prismic.io

ほとんどの機能が無料で使用可能なヘッドレスCMS。

使用するユーザーが1人であれば、無料で契約可能な点が特徴的で、ほとんどの機能が自由に使えます。

小規模サイトに最も向いているヘッドレスCMSです。ダッシュボードのUIも高い完成度を誇り、軽快に動作します。

Prismic.io 公式サイト

Strapi

拡張性の高さが特徴のヘッドレスCMS。Strapiはクラウドサービスではなく、Node.jsで動作するタイプのCMSです。

カスタマイズ出来る幅がとても広く、ローカル環境で自作したプラグインを実装する事も可能。

そのほか拡張性がとても高く、ユーザー一人ひとりの柔軟なカスタマイズが可能な事で注目を浴びているサービスです。

構築難易度が高めで、学習コストもそれなりにかかってしまいます。

Strapi公式サイト

GraphCMS

Facebookが開発したWebAPI、「GraphQL」の活用に特化したヘッドレスCMS。

GraphQLの長所を引き出すための、豊富なフィルターオプションを搭載しており、バッチ処理なども充実しています。

GraphQLは開発事例や紹介記事も多く、情報の収集も比較的しやすいのが特徴です。

しかし、GraphQL自体が動画などのデータの扱いが苦手で、複雑なモデル設計には向いていません。

GraphCMS

国内のヘッドレスCMSの導入サイト事例

ここからは日本国内でヘッドレスCMSを用いてWebサイトを構築している企業をご紹介します。

ディスカバリー・ジャパン

ディスカバリー・ジャパンは、ディスカバリーチャンネルの放送をアメリカでおこない有名になったメディアブランドで、今では220以上の国と地域で放送されています。

日本国内では、1997年より「ディスカバリーチャンネル」、2000年から「アニマルプラネット」の2つのCS放送チャンネルを持っています。

リニューアル前のWebサイトは、WordPressを用いたモノリスな仕組みで、データベースのメンテナンスが定期的に必要など、メンテナンスコスト・ランニングコストが課題だったとのこと。

ヘッドレスCMSも導入することで運用コストが半分になり、今までサーバーを複数台利用してコストがかかっていたが、ヘッドレスCMSも導入したことでAWSサーバーが不要になり、大幅なコスト削減が実現できたとのこと。

https://www.discoveryjapan.jp/

クラウドワークス

クラウドワークスは、2011年に創業した国内最大級のクラウドソーシングサービスで、同年に上場し、総合型のクラウドソーシングサービスとして運営しています。

契約から受注、納品、契約終了から報酬を得るまでの工程をオンライン上で全て完結することが可能でありながら、登録は無料となっています。

ヘッドレスCMSを導入したきっかけは、コーポレートサイトの刷新の必要性があったため。

変更にエンジニアが必要だったり、スマホサイズに対応した表示ができないなどの問題を解決する必要があり、それらを解消・解決するためにヘッドレスCMSの導入を決意。

ヘッドレスCMSを導入した結果、更新が簡単になりWebサイトのパフォーマンスの向上ができたとのこと。

https://crowdworks.co.jp/

TAO TAO(現SBI VCトレード)

SBI VCトレード(旧TAOTAO)は2019年より仮想通貨取引所を運営している企業です。

初心者でも利用しやすいアプリ開発をおこない、ユーザーインターフェースが快適でありつつもセキュリティ面でも高く評価されています。

https://www.sbivc.co.jp/

au Webポータル(株式会社mediba)

株式会社medibaは、auユーザーのポータルサイトである「au Webポータル」内にあるブラウザで遊ぶことのできる「無料ゲーム」やユーザーがアクションをすることでポイントを獲得できる「毎日ポイント」など、ユーザーの訪問を週間かさせるためのコンテンツ制作・運営をおこなっている企業です。

https://www.mediba.jp/

 ボカコレ(株式会社ドワンゴ)

株式会社ドワンゴは、KADOKAWAグループの会社で、動画サービスの「ニコニコ動画」などさまざまな事業を展開している企業です。

ボカコレという企画が始まったタイミングでヘッドレスCMSを導入。コンテンツ更新にかかる時間の大幅な削減を目的として導入されました。

https://vocaloid-collection.jp/

ヘッドレスCMSのまとめ

ヘッドレスCMSは自由度が高く、効率的にWebサイトを構築できる優れたCMSです。

しかし、コンテンツの表示などに一定のスキルが必要となってきてしまいます。

エンジニアがいない企業では、運用すること自体が困難になってしまうため、ヘッドレスCMSを実装する場合は別途、エンジニアを雇う必要があるでしょう。

ヘッドレスCMSを導入しようと検討している方は、事前にエンジニアの雇用や、ヘッドレスCMSが自社に必要なのか調査をした上で導入を進めていきましょう。

デパート採用情報

株式会社デパートでは一緒に働く仲間を募集しています