あそびラボ 池袋・要町のウェブ制作会社

WEB講座

  1. HOME
  2. へっぽこ講座
  3. WEB講座
  4. ヘッドレスCMSって何?ヘッドレスCMSって何?

ヘッドレスCMSって何?

ヘッドレスCMSって何?

ヘッドレスCMSというのが人気が出てきているみたいですが、普通のCMSと何が違うんですか?
確かに「ヘッドレス」と言われても、何が無いのかがわからないかも知れぬな。では、ヘッドレスCMSの特徴と従来のCMSとの違いを今日は説明していこうかのぅ。
よろしくお願いします~!

ヘッドレスCMSとは?

ヘッドレスCMS(Headless CMS)とは、ヘッド=フロントエンド(ビューワー)のないCMSのことです。

CMS:Content Management System (コンテンツ管理システム)

WordPressのような従来のCMSは、フロントエンドバックエンドが組み合わせられて出来ています。

バックエンド :CMSコンテンツを入稿・管理するためのシステム
フロントエンド:コンテンツを表示するビューワー

従来のCMSのフロントエンドの部分が「ヘッド」と呼ばれています。

従来のCMSと異なり、ヘッドレスCMSにはフロントエンド(ヘッド)がありません。ヘッドレスCMSは、「コンテンツを入稿・管理するためのだけ」のシステムなんです。

ヘッドレスCMSには、Webページを表示するためのビューワーがないので、ビューワーをCMS外で制作する必要があります。
ヘッドレスCMSが提供しているAPIを用いて、CMS外で作成したビューワーでコンテンツ情報を取得して表示させることになります。
※API:Application Programming Interface

従来のCMSとヘッドレスCMSの違い

従来のCMSとヘッドレスCMSの違いを、さらに詳しく説明していきます。

従来のCMS

WordPressなどの従来のCMSは、コンテンツデータを表示させるビューワーと、コンテンツデータを管理するシステムが統合されて成り立っています。
※コンテンツデータ(テキストや画像など)

バックエンド側では、コンテンツデータやテンプレートの管理を行っています。
そのため、フロントエンド側ではテンプレートを制作・改修する際に、バックエンドで使用している言語に合わせる必要があります。

ヘッドレスCMS

ヘッドレスCMSには、ヘッド(フロントエンド)がないため、バックエンドに集中してシステム開発を行うことができます。

フロントエンドに当たる部分は、CMS外で運用します。

外部にフロントエンドを作成

ヘッドレスCMSが提供するAPIで、コンテンツデータを外部フロントエンドへ出力して運用

フロントエンドとバックエンドが完全に独立しているため、それぞれが相手側の(制作)言語等に配慮しなくても開発することができます。

ヘッドレスCMSのメリット

①表示速度が速い

従来のCMSでは、WEBページを表示する際、バックエンドで管理しているコンテンツを元に、フロントエンドで閲覧用ファイルを生成するため、動的ファイルを生成する工程が必要です。
ヘッドレスCMSは、コンテンツは静的ファイルをそのまま表示すれば良い状態にため素早く表示することが可能です。

②サーバーコストを抑えられる

従来のCMSのように閲覧用のファイルを生成しない分、サーバー処理を削減できます。
サーバーに求めるスペックも低くてすむため、サーバーコストを抑えることができます。

③部分的やCMS化やCMSの後付けが可能

ヘッドレスCMSの場合、部分的に後付けでCMS機能を使えることが可能です。

④フロントエンドの改修がしやすい

フロントエンドとバックエンドが独立しているため、フロントエンドでシステム変更を行ってもバックエンドには影響が出ません。
バックエンドの仕様を考慮する必要がないので、従来のCMSに比べて圧倒的にフロントエンドの改修を行いやすいのが魅力です。

ヘッドレスCMSのデメリット

①動的な機能は、外部ツールが別途必要

ヘッドレスCMSは、静的ページとしてコンテンツデータを管理しますが、動的な機能(フォームやデータベース等)を使いたい場合は、外部ツールを別途必要になります。

②フロントエンドの開発やAPIの知識が必要

ヘッドレスCMSを導入しただけでは、ビューワーがない状態のため、コンテンツの表示を確認することができません。別途、フロントエンドを開発する必要があります。
また、ヘッドレスCMSから外部のフロントエンドへコンテンツデータを出力する際はAPIを利用するため、APIに関する知識も必要になってきます。

代表的なヘッドレスCMSをご紹介

・Prismic(アメリカ)
・Sanity(アメリカ)
・ContentStack(アメリカ)

・Contentful(ドイツ)
・GraphCMS(ドイツ)
 Facebookが開発したAPI「GraphQL」を活用したヘッドレスCMS

・Strapi(フランス)
 「Node.js(Javascript)」で動作するヘッドレスCMS

・microCMS(日本)
・Kuroco(日本)

※一部だけの掲載のため、国内にもたくさんヘッドレスCMSを制作してい企業があります。

むむむ!なんか難しいですが、なんとなく理解できました~。
中長期的に運用する、ある程度の大きいサイトなら導入するメリットはあるが、まだ敷居が少し高いかもしれぬのぅ。
でも、概要を知れて良かったです!
無料で使えるヘッドレスCMSもあるから、興味があれば1度触ってみるのもいいかもしれぬぞ~。

池袋エリアでの
ホームページ制作のご相談はこちら
WEB講座一覧