はじめに

こんにちは。Wakka Inc.にてWebディレクターとして活動している安藤です。

今回はヘッドレスCMSについての話題です。これまでは「聞いたことはあるけどいまいちよくわからない」といった声をいただくことが多かったのですが、最近徐々に市場に浸透してきた気がします。

そこで今回はヘッドレスCMSの概要に加えて、みなさんにも馴染みが深いであろうWordPressを利用したヘッドレスCMS化についてご紹介していきます。

ヘッドレスCMSとは

ヘッドレスCMSとは簡単にいうと、表示画面の無い(ヘッドレス)CMSです。

これまでのCMSでは、コンテンツやPostを管理するバックエンド機能と、
その表示を行うビューワーといったフロントエンド機能がどちらも内蔵されていました。
つまりヘッドレスCMSはビューワー不在のコンテンツ管理機能のみのCMSということになります。

作成されたコンテンツは、APIを通じて別に構築されたフロントエンドに表示が可能となっており、
それぞれバックエンドとフロントエンドの機能が独立しているのが特徴です。

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

メリット

プログラミング言語に制約がない

いくつかあるうちの大きなひとつはこれです。通常のCMS、例えばWordPressであればPHPベースのCMSであることから、PHPベースで構築することになります。

これは他のCMSでも同様であることはもちろん、なにかWebサービスをつくるうえで言語を特定しなければならなくなったり、既存のシステムの言語を利用できないといった制約をつくることになります。これに対してヘッドレスCMSでは、APIを通じてフロントエンドを管理することから、フロント側のプラグラミング言語に制約はありません。

あらゆるデバイスに展開ができる

言語に制約がないのと同様に、APIベースになることから、APIの受け取り側が存在すれば表示については増やすことができます。そのためハード違いやOS違いでの複数コンテンツ作成をする必要がなくなります。

つまり同一のAPIを利用してウェブ以外でのコンテンツ配信も管理可能でIOT機器やスマホアプリ、スマートウォッチなど、あらゆるデバイスに利用できるというわけです。

表示速度の向上

WordPressなどの従来型CMSの場合、Webサイトへアクセスするとデータベースを読み込みページを呼び出す必要があります。

こうした動的な動作をヘッドレスCMSでは省略することができることや、表示にはJamstackといわれる静的サイトとして扱われる技術が利用されることから、Webサイトの表示は従来型のCMSと比べると速くなります。

デザインへの制約が少ない

ここまで説明してきた通り、ヘッドレスCMSではバックエンド側の管理のみを行います。

そのため表示側であるフロントエンドは静的に構築が可能になることからCMSがデザインに関与しません。そのため自由度の高いコンテンツ制作が可能となるわけです。

デメリット

導入や運用の難易度

ヘッドレスCMSは、実装や運用にあたってご担当者さまのITリテラシーがまずは必要となります。

そもそも導入検討している方々はすでにITリテラシーが高い方が現状のところは多いのですが、これはそもそもメリットがわかっていないと検討に上がらないがまだ一般的にメリットが知られていないことが理由に挙げられます。

また、なんとなくで導入したとしても、既存CMSのようなそれだけで完結できるような仕様にはなっていないため、プレビュー環境などが変わってきます。こういった手間を含めてもメリットを享受できるプロジェクトでなければ実装や運用をしていくことは難しいと考えられます。

開発コスト

ヘッドレスCMSはまだ比較的あたらしい技術であることや、フロントエンドでの実装をモダンなJs言語で開発することも多く、そのため実装できるエンジニアの選定が難しくなります。

APIを使った開発も、従来のWeb制作会社では手掛けていなかった会社も多いため、ある程度開発に明るい会社を選定する必要があり、いまのところコストは従来型のCMS開発よりは高くなってしまうことが多いと思われます。

なお、弊社ではヘッドレスCMSの構築だけではなく、
WordPressページの企画・開発・運用保守までトータルサポートできる、『ラボ型オフショア開発サービス』をご用意しています。

企業ページリニューアルなどのWordPress開発やECサイトとのWordPressなどお困りのことがございましたら
まずはお気軽にお問合せください。

ヘッドレスCMSのおすすめサービス

ここまで話してきたヘッドレスCMSですが、今では数多くのサービスが存在します。当然ながらそれぞれに特徴があるのですが、WordPressとともに、今回はできるだけ機能が多いものや、使いやすいものなどを中心にいくつかご紹介したいと思います。

Ghost

Ghostは、Node.jsベースのCMSです。もともとブログ記事の執筆に得意領域を置いたCMSであったため、シンプルなUIであることはもちろんですが、カスタマイズ性に長けています。フロントエンドがセットになったCMSとしても利用が可能なため、管理画面のUIが既存CMSと似たところがあり使いやすいといった特徴があります。

microCMS

microCMSは国産のヘッドレスCMSです。こちらが日本国内ではかなりメジャーなヘッドレスCMSではないでしょうか。一度は耳にしたことがある方が多いと思います。microCMSは国産であるという一番の特徴から、オフィシャルサイトはもちろん各サポートやあらゆる資料・参考サイトや導入事例が日本語で閲覧できるというポイントが大きいです。もちろん機能面でも幅広くサポートがなされています。

Contentful

Contentfulは、世界で最も普及しているといわれるヘッドレスCMSです。ここまで説明してきたヘッドレスCMSについてですが、ほとんどがこのContentfulの特徴の一部でもありました。Contentfulは現在でもAPIベースのクラウドサービスとして業界をリードし続けています。多機能かつ事例も多いCMSではありますが、サポートは英語のみとなっておりますので、非エンジニアは少し触り辛いかもれません。目的や機能を精査して利用いただくと良いでしょう。

WordPress

WordPressはみなさんご存知かと思いますが、世界で最も普及したCMSです。実はWordPressでもヘッドレス化が可能です。
ヘッドレス化をする場合はプラグインを利用して行うのが一般的ですが、現在では標準装備されている、WP REST APIを利用することでもヘッドレス化が可能となっています。当社ではもともとオフィシャルサイトをWordPressで構築していたこともあり、せっかくなのでWordPressをヘッドレスCMS化して利用していこうとしています。セキュリティや保守の問題などがあるものの、これらをうまくクリアしつつ慣れ親しんだ管理画面を利用していけるので他ヘッドレスCMSと並び当社ではWordPressのヘッドレス化もおすすめしております。

WordPressをヘッドレス化する

さて、それではWordPressのヘッドレス化についてですが、前述した通りプラグインを利用して行うことが多いのですが、
当社ではサイトの高速化やセキュリティリスクをふまえてフロントエンドは静的サイトジェネレーターのデータ元として構築することを推奨しています。

通常のWordPressは、ユーザーが表示する画面と管理者が操作する管理画面が表裏一体となっており、そのコンテンツはデータベースに保管され、基本的にすべて同一のサーバー内に存在する必要があります。
ユーザーに表示画面を提供する際には、サーバーがデータベースから情報を取得し、動的にHTMLを生成します。

対して静的サイトジェネレーター(以下SSG)は、簡単にいえば静的なHTMLを構築・生成するソフトウェアのことをいいます。

静的サイトジェネーターだけが、クローズドな環境に構築したWordPressをデータ元として参照し、HTMLを生成、サーバーに配信します。
サーバーがユーザーに対して動的にHTMLを生成することはありません。

そのため、ユーザーが閲覧する環境にデータベースは不要で、かつAPIサーバーの秘匿による高速化とセキュリティリスク軽減が実現できます。
また、画像についてもWordPressとは別に管理してセキュリティを高く保ちます。
あとはAPI仕様を把握してバックエンド仕様を構築し、実装をしていきます。

Wakkaのオフィシャルサイトのヘッドレス化についてはまた後日、実際の開発の様子を書いていこうと思っています。

ヘッドレスCMSを利用することで問題になりがちなこと

SEOについての問題

ヘッドレスCMSを利用した場合によく話題にあがる、SEOは本当に大丈夫なの？という話題についてですが、
結論からいえば通常のサイト構築と比べても、特別不利になるようなことはありません。

ただし同じヘッドレスCMSといってもAPIをバックエンド・フロントエンド・SSGなどどこで呼び出すかによってもクローラーの認識が少し変わってくる場合があります。

SSGを利用する場合は、ビルド時にAPIが呼び出され配信することになるので結果的に通常の静的ページと同様の扱いでこれまでのSEOの基準となにも変わることはありませんし、
シングルページアプリケーションなどでフロントエンド側からAPIを読み込む場合も、
JavaScriptについては既にGoogleのクローラーがしっかりと認識をするようになっていることから、特段問題が発生することはありません。

本当にヘッドレスCMSを選択したほうがよいのか

元も子もない話ですが、運営するサービスの目的や仕様によっては当然ヘッドレスCMS化に向かないということもあります。

前述ではありますが、ヘッドレスCMSではプレビュー機能がないことから、開発環境の別途用意や運用者やエンジニアのAPIやプラグラミング知識も既存のCMSに比べると必要になってきます。

利便性やメリットはあれど、場合によってはコストが上がることや、使いこなすためのリテラシーの高さが求められます。
例えばですがページスピードを求めるならWordPressのままCDNを検討してみることも必要でしょうし、
または多数のデバイスで同一のコンテンツを配信する必要があるのであればヘッドレス化は当然検討されるべきです。

単純にメリットだけを見て導入を決定するのではなく、本当に自社に必要なものなのかどうかを慎重に検討し運用していく姿勢が求められるのではないでしょうか。

さいごに

WordPressでのヘッドレスCMS化という話題をもとに、ヘッドレスCMSの概要や各社のヘッドレスCMS紹介もあわせてお送りしてきました。

当社ではこうしたヘッドレスCMSの実装はもちろんですが、本当に実装が必要なサービスなのかどうかという部分についても、
システムやWebサイトの特徴、仕様、ご要望をもとにアドバイスをさせていただいております。

WordPressでの実装だけではなく、クラウドサービスを利用した実装についてもご相談可能ですので、ぜひお気軽にお問い合わせください。

弊社の事例・ノウハウについて詳しく知りたい方は「資料ダウンロード・ウェビナー一覧」もぜひご覧ください。

フルスクラッチのシステム開発のご相談はWakka.incまで

Wakka inc.では、専門性の高いチームがお客様のニーズに寄り添い、フルスクラッチでのオーダーメイド開発はもちろん、業務のIT化・開発リソースの確保など、ビジネスの成功に向けて着実にサポートします。
サポートの概要や費用感など、下記のお問い合わせフォームよりお気軽にご連絡ください。（構想段階で形になっていないアイデアでも問題ありません）

また、ラボ型開発やビジネスに関する豊富な資料も用意しています。お気軽にこちらからダウンロードください。