SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

アプリケーション開発の最新トレンド

今話題の「ヘッドレスCMS」とは? Jamstack、マルチデバイスにも対応したCMSの新潮流

  • X ポスト
  • このエントリーをはてなブックマークに追加

ヘッドレスCMSの利用シーン

 ヘッドレスCMSはAPIを活用することでさまざまなシーンで利用できます。中でも代表的な利用シーンを4つ紹介します。

利用シーン1:Jamstack構成のWebサイトを構築する

 近年、Webフロントエンドの技術はJavaScript、Node.jsを中心に大きく発展してきました。Ajaxの登場、SPA(シングルページアプリケーション)の普及によりWebアプリケーションの構築手法は大幅に変化しています。

 一方でWebサイト構築においては、長い間WordPress一強の時代が続いています。その理由としては大きく次の2点が考えられます。

  • SEOが重要である
  • 非エンジニアがコンテンツを編集できる必要がある

 WebサイトはWebアプリケーションとは異なり、主に集客を行うことが目的となるためこれらを満たす必要があり、それに対してSPAは相性がよくありませんでした。

WebアプリケーションとWebサイトの違い
WebアプリケーションとWebサイトの違い

 しかしWebフロントエンド技術の更なる発展により、SPAを前提としつつもSSG(Static Site Generate)をモダンなフレームワーク(Next.js/Nuxt.js/Gatsbyなど)から簡単に行えるようになってきました。これによりSEOの問題点は解消されました。

 また、非エンジニアがコンテンツを編集できるようにするためにはCMSが必要です。

 従来型のCMSではビュー部分も含んだシステムとなっているため、React.jsやVue.jsといったライブラリと連動させるのは無理がありました。

 しかし、ヘッドレスCMSの登場によりAPIベースでコンテンツのやり取りが可能になり、JavaScriptを中心とした構成の中にCMSを組み込むことができるようになりました。

 これらの技術とビルド・デプロイ・CDNからの配信をセットにしたJamstackと呼ばれるアーキテクチャが近年注目を浴びており、SEO・CMS観点をクリアしつつも、非常に高速でセキュアなサイトを構築することが可能になりました。

 Jamstack構成では次のような効果を得ることができます。

  • PVの増加

 サイトの読み込み速度UPによりサイト内の回遊率が向上します。また、SEO効果によりサイトへのアクセス数の増加が期待できます。

  • 運用コスト減少

 Webサーバー不要のため運用コストが抑えられます。また、ヘッドレスCMSの利用により、管理画面からコンテンツの編集が可能です。

  • 安全性の向上

 Webサーバーが動作していないため、攻撃ポイントが少なくなり、サイト乗っ取り等のリスクが抑えられます。

 国産ヘッドレスCMSであるmicroCMSでは、実稼働中であるJamstack構成のメディアのソースコードをGitHubにて公開しています。オープンソースとなっており、どなたでも使えますので、ご興味がある方はお試しください(Issue、Pull Requestも大歓迎です)。

利用シーン2:マルチデバイス(Web、ネイティブアプリ、IoTなど)のコンテンツを一元管理する

 従来、マーケティングのチャネルごとにCMSプラットフォームが存在しており、マーケターはコンテンツの多重管理を行う必要がありました。

 表示面を持たないヘッドレスCMSはこの課題を解決することができます。

 コンテンツを一元管理しつつ、複数のWebサイト間や、Webとネイティブアプリ、サイネージデバイスなどでコンテンツを共有することでブランドの一貫性を維持することが可能です。APIベースのため、デザインも各デバイスに合わせて最適化することができます。

マルチデバイスへのコンテンツの配信
マルチデバイスへのコンテンツの配信

 現在、ネイティブアプリにおいて更新性の高いお知らせなどについてはWebViewが用いられているケースが多いでしょう。

 しかし、WebViewではコンテンツ取得までの時間がかかってしまい、せっかくのアプリのサクサク感が失われてしまいます。

 ヘッドレスCMSを用いる場合はWebViewではなくネイティブの言語(SwiftやKotlin等)で実装が可能なため、ユーザー体験の向上が見込めます。

利用シーン3:さまざまなデータと連携する

 ヘッドレスCMSはAPIベースであるため、他サービスとの連携がしやすいというメリットがあります。

 例えば以下のような連携が考えられます。

  • ホスティングサービスと連携して、コンテンツ公開・Webサイトのビルド・デプロイを自動化する
  • AWSやGCPと連携して、コンテンツのバックアップや別処理の連携を行う
  • CRMと連携して、CRM側で定義している顧客セグメントをCMS側に同期し、セグメントごとにコンテンツの出し分けを行う
  • ECシステムと連携して、商品情報をコンテンツと紐づけることでメディアからECへの導線を強化する

 CMSというと集客用のWebサイト向けという印象もありますが、ヘッドレスCMSはAPIベースのため自社サービス内に組み込むこともできます。ユーザーの属性に合わせてお知らせを出し分けたり、ヘルプコンテンツを表示したりすることも可能です。

 CMS単体では満たしていない機能も自社でサブシステムとして実装を行い、APIとWebhook経由で連携させることで実現するなど応用を利かせることもできます。

利用シーン4:開発・運用工数を大幅削減する

 複雑なコンテンツの構造や表示要件のあるシステムは、従来のCMSでは対応できず、フルスクラッチで開発されるケースが多くあります。この際の開発には多くの工数や費用がかかる場合がほとんどです。

 ヘッドレスCMSはAPIベースであるため、開発要件に最適な形で導入できることや、コンテンツ構造を自由に定義可能なことがメリットとして挙げられます。

 そのためデータベースの設計、入稿管理画面の開発、バックエンドAPIの作成といった工数の大半を担うことができ、開発工数を大幅に削減することができます。

 またヘッドレスCMS導入後は、マーケターやコンテンツ運用者はエンジニアの力を借りることなくコンテンツの更新や管理ができるため、運用工数の無駄を省き、ビジネスのスピードを向上させることができます。

まとめ

 ヘッドレスCMSは従来型のCMSとは異なり、表示面を持たないCMSです。API経由でコンテンツを取得することができるため、さまざまな用途が考えられます。

 本記事で大きく4つの利用シーンについて紹介しました。

  • Jamstack構成のWebサイトを構築する
  • マルチデバイス(Web、ネイティブアプリ、IoTなど)のコンテンツを一元管理する
  • さまざまなデータと連携する
  • 開発・運用工数を大幅削減する

 ヘッドレスCMSは非常に汎用性が高く、用途も幅広いので、可能性は無限大に広がっています。何に活かすことができるか是非考えてみてはいかがでしょうか。

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
アプリケーション開発の最新トレンド連載記事一覧

もっと読む

この記事の著者

柴田 和祈(シバタ カズキ)

 慶應義塾大学を卒業後、ヤフー株式会社にデザイナー入社。 広告事業に約5年半従事し、フロントエンドエンジニアとしても経験を積む。 2017年に株式会社microCMSを共同創業し、現在は日本製ヘッドレスCMSであるmicroCMSの開発がメイン。ReactやVueといったSPA開発が得意。プライベー...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/15054 2021/11/04 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング