H CD 実践のための次 世 代アーキテクチャ

新世代ヘッドレス CMS

で構築する
利用者のことを第 一に考える「 H C D（人間中心設計）」は、システム構 築の世 界でも、実 現すべき課 題として大きな話 題を呼んでいます。
どうすればそれを実 践できるのか。
この本ではそのポイントを詳しく解 説していきます。

「API 中心設計」を実現する本※本誌は『 Web Designing 』2022年4月号の一部を抜粋し再編集したものです。

時代が求める「 H CD 」
人 間 中 心 設 計

実践のポイントは「API 中心設計」にあり※

従 来のシステム構築

A PI 中心設計のシステム構築

UI/UX
システム

U I /U X

システム

A PI

従来のシステム開発では、「UI/UX 開発」と「システム構築」という、そもそもまったく性質

ならば、2つを完全に分離してしまえばよい。それがAPI中心設計的な考え方です。これの異なるプロジェクトが混在し、不可分とされてきました。そのため、システム開発者がによって、システム構築のための時間や費用の課題を解決でき、使う人のことを第一に

UI/UX 構築を行わざるを得ない、といった難しさがありました。

考えた「HCD」を実現するための質の高いUI/UXを実現することが可能です。

※ HCD（人間中心設計とは）
HCD（Human Centered Design：人間中
心設計）とはシステムを人間、すなわちユー
ザーの観点に軸を置いて設計を行うことを言います。UI の改良を繰り返してUXをあげていくことが重要になります。

人間中心設計の適用検討と計画

ユーザーの
体験価値を
実現

ではどうすれば「API 中心設計」を実現できるのでしょう。ここからはその詳細と、ポイントとなるヘッドレスCMS「Kuroco」について解説していきます。

ユーザーおよび利用状況の調査とモデル化
作成した解決案の評価と改善必要に応じて繰り返す

ユーザーの要求事項に対する解決案を作成ユーザーの要求事項の分析と明確化

P03

API 中心設計とは何か。
そのメリットとは？
API中心設計を実現するための「ヘッドレスCMS」が大きな話題を呼んでいます。そこでヘッドレスCMSとは何か、なぜ今 API中心設計に注目すべきなのかを詳しく解説していきます。

P10

次世代ヘッドレスCMS「Kuroco」が実現するAPI 中心設計
エンタープライズ向けの高機能ヘッドレスCMS「Kuroco」
はAPI中心設計を実践するためにつくられたCMSでもあります。Web、アプリのみならず大規模なシステム構築にも活用できるその機能を解説します。

02

変化は2021年頃から始まった ─

知らないとヤバイ！

Talking with

言葉はよく耳にする言葉だけれど、いまひとつわからない「ヘッドレスCMS」。

Kato-san

知らないとヤバイことになるこの言葉、今ここで、きちんと理解しておきましょう。
Vol.1

ヘッドレスCMS が実現するWeb 制作とシステム構築の新たな関係

A P I中心時代到来！

「ヘッドレスCMS」は今やビジネス誌でも語られるほどのバズワード。

ヘッ
ドレスCMS 登場のしかし、その構造についてや、普及した時に及ぼす影響について
正しく理解できている人はけっして多くないようです。まずはヘッドレスCMSの構造と、登場に至った背景を理解しましょう。

背後にある変化を見逃すな！

Web が変わる システム構築も変わる
2021年頃から、Webの世界で「ヘッドレス」が話題になっているのをご存じでしょうか。Webサイトの構築や運用に欠かすことのできないCMSの世界の新顔です。

─ 最近、Web の世界では、「ヘッドレスCMS」が加藤

近年、システム構築の世界においても「HCD話題です。制作分野においても、マーケティングの（人間中心設計）」の考え方が普及しはじめ、ユー

領域でもたびたび話題になります。

ザーを第一に考えたシステム構築が求められるよう

しかし、このヘッドレスCMSの普及にあたり見逃してはいけないのは、その背後加藤

欧米ではすでに普及が進んでいますね。一になっていますが、それをどう実現していくかが課題

で起きている、“ 大地殻変動 ”ともいうべき変化です。
「Web 制作」はもちろんの方の日本では、これから、といったところでしょうか。

となっています。現在の複雑なシステム構築のプロ

こと、そこと深く関連する「システム構築」の領域に大きな影響を与えるこの動き─ とはいえ、言葉ばかりが広がっていて、その仕セスにUI/UX の知見を組み入れるのは簡単なこと

組みについても、普及によってもたらされる影響にではありません。

ついても、なかなか理解が進んでいないのが現状の─ そのあたりはWeb 制作会社の専門領域ですね。

ようです。

近年、UI/UXや人間中心設計の専門家を雇い入れは、今後、2つの業界の関係性を大きく変える可能性を持っています。
国産ヘッドレスCMS「Kuroco」を開発する（株）
ディバータの加藤健太さんは、そのポイントは「APIの活用にある」と話しますが、その意味とは。ここからは「ヘッドレスCMSとは何か」を説明しながら、APIの活用が導く新時代のWeb 制作とシステム構築の関係性の在り方を考えていきたいと思います。
Text：小泉森弥

加藤

ヘッドレスCMSそのものの機能について知る制作会社が増えています。

ることも大事ですが、むしろ、普及によって実現する

加藤

であろう、
「フロントエンドとバックエンドの関係性

ム構築を担う会社と、これまで Web の世界で UI/の変化」について知っておくことが大切だと思います。

UXと向き合ってきた制作会社との連携が容易にな

─ Web 制作者だけでなく、バックエンドのシステるんです。

ム構築に携わる人たちにも影響を与えるような変─ なるほど。これまでのCMSにはなかったメリッ化なのですか？

トですね。その点、詳しく解説をお願いします！

実は、ヘッドレスCMSを利用すれば、システ

教えてくれたのは…

加藤 健太
Kenta Kato
株式会社ディバータ
代表取締役
1976年生まれ。早稲田大学理工学部機械工学科卒業。
大学在学中、「一休 .com」の創業メンバーとして参画。大学卒業後はソフトバンクグループでカー用品販売サイトの企画・構築・運営をはじめ、転職アドバイザーマッチングサ
イトの立ち上げ戦略・企画・システム設計・開発に携わる。
2005年ディバータを設立、代表取締役に就任。なお、ディバータが開発する「Kuroco」はP10で詳しく紹介しています。

We b 制 作とシステム構 築の連 携がこれまでになく容易に！
？

03ヘッドレスCMS を理解する ①

そもそもCMSとは何ですか？
HTML やCSSのような言語を使わずとも
Webサイトを運用できるシステムのことです。
CMSとは、「コンテンツ・マネジメント・システム」の頭文字をとった略称で、Webサイト等のコンテンツを構築し管理、更新する仕組みのことを言います。管理画面が用意され、サイトを扱うユーザーがHTML やCSSの知識がなくとも情報を更新できるという点が大きな特徴です。なお、こうした定義に当てはめるとSNSもCMSの一種だと言うことができます。

ヘッドレス CMS についての話を進カップルドCMSとは、フロントエンドとバックエ

SaaS やPaaSはサービスの提供方法を示す言葉。
CMS 以外でも使われます。

ンドに境目のない CMS のこと。デカップルド

SaaS は「ソフトウェア・アズ・ア・サービス」、

CMS はフロントエンドとバックエンドが分かれ

PaaSは「プラットフォーム・アズ・ア・サービス」ているCMS。ただし、これまでは、デカップルドの頭文字をとった略称で、いずれもクラウドで構造を持つものでもフロントエンドとバックエサービスが提供されます。混乱を避けるためにンドが同じ製品であることがほとんどでした。

申し添えておくと、これらはCMSの構造を表す

情報

呼出

データ

CMS ってなんだっけ？
まずは基本を確認しよう

カップルドCMSとデカップルドCMS に分けることができます。

バックエンド操作

SaaS 型とか PaaS 型ってどういうことですか？

言葉ではありません。

フ ロン ト エン ド人

CMSとは…

CMS を、その構造をもとに2つのタイプに分けるなら？

カップルドCMSとしてもデカップルドCMSとしても利用できます。
いずれの形でも利用できるWordPressですが、機能拡張やプラグインがバックエンドと連携

表示

データ

情報

いう「CMS」とはどんなものかをあ

ここが一体化 ＝ カップルドCMS
ここが分離＝ デカップルドCMS

フロントエンド、バックエンドとは何ですか？
「人」とやりとりするのがフロントエンド。
「データ」とやりとりするのがバックエンド。
CMSで管理するWebサイトやWebアプリケーション

データ

せて理解しておきましょう。

C MS

バックエンドタイプを、よく使われる用語とあわ

WordPress に多いケース
フロントエンド

でまとめました。CMS の仕組みやとして構築した場合でも、実際にはカップルド人

では加藤さんのお話を、Q&A 形式

して動くものが多く、本体をデカップルドCMS
CMS として動いていることが多いと言えます。

めていく前に、Web 制作の世界でらためて確認しておきましょう。ここWordPress は
どのタイプの CMS ですか？

プラグイン

まとめ
CMSとはコンテンツ・マネジメント・システムの略である。
CMSの構造はフロントエンドとバックエンドに分けられる。

WordPressの機能拡張やプラグインはバックエンドと連携して動くものが多く、バックエンドと切り離せないことがほとんど。そのため、カップルドCMSのように動作します

フロントエンドとバックエンドが一体化したCMSをカップルドCMS、分離したものをデカップルドCMSと呼ぶ。

の構造は、フロントエンドとバックエンドの2つの部分に分けることができます。そのうち、「人」とやりとりす
る部分のことをフロントエンドと呼び、「データ」とやりとりする部分のことをバックエンドと呼びます。
04

とデカップルドCMS の構造の違いをちろん、WebアプリケーションやiOS、普及が始まったのは、2017〜18年頃

理解してさえいれば、ヘッドレスCMS

Android 向けスマホアプリ、デジタルのことでした。当時のWebマーケティ

がどんなものかが、すぐに理解できる

サイネージ、音声デバイス、スマートングを巡る状況でまず挙げられるのと思います。

ウォッチ、さらに、今話題のメタバース

が、「ワンソースマルチデバイス※2」にをフロントエンドとして選ぶことも可

対するニーズの高まりです。
「ユーザー

能です※1。

がどんなデバイスを使っていても最適

CMS」と、分離した構造を持つ「デカッこう説明すると、「フロントエンド側

プルドCMS」があるというお話をしまはどうするの？」と疑問に思われる方したが、そのデカップルドCMSのフロも多いかと思いますが、実は、フロン

そして、それらフロントエンドを複な体験を提供するべき」という考え方

ントエンドを取り去り、バックエンド側

エンドを自由に選択できることこそが、数用意したり、必要にあわせて追加しが強まり、デバイスごとに専用のWebだけにしたものが「ヘッドレスCMS」とヘッドレスCMS の最大の特徴となりたり、変更できたりするのもヘッドレス

サイトを用意する流れを後押ししましいうことになります。フロントエンドとます。

CMS の大きな特徴です。なぜそんなた。そうしたニーズに応えるために、ヘッことができるのかというと、ヘッドレス

ドレスCMS のような、バックエンドのを問わず、Web 上に公開されている、

CMSはいろいろなタイプのフロントエ

みの仕組みが登場し、注目を集めたサービスやデータのような外部リソー

ンドをつないで使うことを前提に、やというわけです。

スを積極的に活用していこうという

ヘッドレスCMSとは…
ヘッドレス CMS とは？
その構造を理解しよう
CMS の基本的な構造を理解でき

API

データ

クエンドが一体化した「カップルド

欧米を中心に、ヘッドレスCMS の

バックエンドCMS には、フロントエンドとバッ

スマホやPC 向けのWebサイトはもフロントエンド

ヘッドレス CMS は
何を「レス」している？

バックエンドの概念、カップルドCMS

人

ヘッドレスCMS を理解する ②

ヘッドレスCMSとは

フロントエンドは何でもよい
スマホ

一方、制作の現場では、シンプルな流れが強くなっている点です。例えばからです。その窓口は「API」と呼ばれバックエンドを求める声が高まってい

Google が公開しているAI 画像解析

るものなのですが、これついては次項ました。Web ブラウザや JavaScript

エンジンを呼び出して利用するとか、であらためて説明したいと思います。

の進化にともなって、フロントエンドでスプレッドシートを呼び出してデータできることが増えたことがその理由を取得するといったことが広く行われです。機能は最低限で構わないから、るようになりました。つまり、Web の安価に運用できるバックエンドはない

世界では、それぞれが持つ技術やデーか。そんなニーズがヘッドレスCMSのタをオープンにして活用しあう流れが普及を促したというわけです。

できています。

話題を変えて、ここではなぜ、ヘッド
レスCMS が登場し、注目を集めるに至ったか、というお話をしておこうと思たところで、ここからはいよいよ、います。

ヘッドレス CMS について話を進

ヘッドレスCMSはバックエンドだけを提供するCMSです。
情報のやりとりはAPIを利用して行うため、フロントエンドとは完全に分離されています。そのため、フロントエンドを担当する制作会社は、バックエンドに影響されずにデザインやUIを自由に作成することができます

りとりのための “窓口 ”を設けている

なぜヘッドレス CMS が登場したのかPC

ヘッドレスC M S

そしてもう一つ、重要な変化があり

ヘッドレスCMSはこうしたニーズにます。それは、制作・マーケティング

応えるために生まれたCMSなのです。

めていくことにします。ヘッドレス
CMS の構造と、その特徴とは？
その点をまずは加藤さんに解説し

スマート
ウォッチ

メタバース

※1 話題のメタバースを…

てもらいます。

昨年来大きな話題を呼んでいるメタバースですが、近い将来当たり前のよ
うにしてメタバース上にコンテンツを作成する時代が来るとの予測もあります。
ヘッドレス CMS の一種とも言えるECの Shopify はすでにメタバースへの積
極的な姿勢を見せています

etc.
まとめ
バックエンドだけを提供するヘッドレスCMSは、フロントエンドを自由に構築できます。そのため1つのソースをスマホやPC、スマート
ウォッチさらには IoTデバイス上のアプリやWebサイト、BOTなど
さまざまな形で活用するシステムを構築することが容易になります

ヘッドレスCMSとはフロントエンドのない、バックエンドだけのCMS
さまざまなタイプのフロントエンドを利用でき、追加・変更も容易
外部のリソースを積極的に活用しようという流れに沿う仕組み※2 ワンソースマルチデバイス
スマホとPCの違いはレスポンシブデザ
インで吸収することが可能かもしれま
せんが、多様なデバイスを視野に置いた場合や、より質の高い体験を提供したい場合には、柔軟な設計が可能なシステムを構築する必要があります

05

「
API 」

ポイントは

ヘッドレスCMS を理解する ③

進化の背景にある
API 中心主義とは
ヘッドレス CMSとはどんな CMS かを理解する際に欠かせないのが、API についての知識です。加藤さんは、「ヘッドレス CMS は APIを活用しているからこそ将来性がある」と話します。

API で機能と機能をつなげる
ヘッドレス CMS の基本的思想
APIは「アプリケーション・プログラ
ミング・インターフェイス」の頭文字をTalking with
Kato-san
Vol.2「API 中心」の制作を実現できればフロントとバックを完全に分離できる
APi 中心の仕組みがどんなものかを理解できたところで今度はそれがもたらす影響について見ていくことにします。
フロントエンドとバックエンドの関係性はどうなるでしょう。
それぞれのポイントを考えてみたいと思います。

が API を公開しています。ヘッドレス術を利用していようが、どこまで制作

─ 加藤さんは、ヘッドレスCMSの普及の背景には、

─ この仕組みは、これまでシステム構築を行ってCMS は、API を最大限に活用すべくが進んでいようが、影響を受けること「APIを通じて機能や情報をやりとりする流れ」がきた人たちにもメリットがありそうですね。

設計されたCMSで、フロントエンドとがない、という点にあります。だから、あると指摘されています。

加藤 その通りです。システムインテグレーターにとっのやりとりにも、外部の機能を利用す

ヘッドレスCMSはいつでもフロントエ

加藤

すでにWeb サービスの多くが、多くの人にて、ユーザーの使い勝手に配慮しながらUIを構築る場合にも利用します。

ンドや外部機能の追加・変更が容易

活用してもらおうと、APIフレンドリーな形で設計さするのは非常に厄介で、課題とも言える部分ですが、とった略語で、機能を公開しているソ

このやり方のメリットは「どんな情なのです。ヘッドレスCMS は、こうしれています。そうした外部の機能を利用していく流

フロントエンドとバックエンドを完全に分離できるヘッ

フトウェアと、その機能を利用したい

報を、どうやりとりするのか」を決めてた API の特徴を最大限に活用すべく

れは、公開する側にも利用する側にもメリットがあドレスCMSを活用すれば、UI 開発を別のプロジェ

ソフトウェアとを結びつける“ 窓口 ”

おきさえすれば、それぞれがどんな技生まれたCMSなのです。

りますから、もう止まることはないでしょう。

クトとして独立させ、制作会社に委ねてしまうのも─ Web サイトのフロントエンドとバックエンドを簡単です。

APIを使ってつなく仕組みであれば、システム全体の─ あらかじめ、APIで「つなぎ方」を定義しておけば、柔軟性が高まりますね。

それぞれ独自のペースで開発を進められますね。

のようなもの、と考えることができます。
ただし、その窓口には、それぞれ独自の“ お作法 ”ともいうべきルールがあAPI の役割
Teams

らかじめ設定されています。

Sla

例えば役所で住民票をもらう際に

AP

I

フロ
エン ント
ド

加藤

その結果、1つのプロジェクトをフロントエン

できますからWebサイトのフロントエンドだけを変ドとバックエンドの2つのプロジェクトに分けられるえることも、バックエンド側のヘッドレスCMS だけということを意味します。これまでのシステム構築のを入れ替えることも容易にできるようになります。

流れを大きく変えることになると思います。

Iの世界では、すでに数多くのサービス

I

APIを使えば、双方を完全に分離することが

ヘッドレス
CMS

いつでも住民票を入手できる。APIの考え方もこれとよく似ています。Web

AP

の
他
その ビス
サー

されていますよね。これさえ守れば、加藤AP提出するという作法があらかじめ設定

Iく叩

み、本人確認書類と手数料を添えて

AP

API

報
情

は、所定の用紙に必要事項を書き込

ckGo
サー o g l e
ビス

フロントエンドとの接続だけでなく、さまざまな外部リソースと接続する際にもAPIが使われます。ちなみに、APIを通じて情報を呼び出すことを「APIを叩く」と言ったりもしますAP Iを活用すれば1つのプロジェクトをまとめ「 U I 」と「システム」の2つに分けられる

APIとは情報をやりとりする際の「作法」である
APIで繋げば、フロントエンドも外部機能も追加・変更が容易になる
06

垂直統合か

垂直統合か水平分業か

ヘッドレスCMS が変えるもの ①［ 垂直統合型 ］

変わる制作［ 水平分業型 ］

リーダー
リーダー
バックエンド開発
各種機能の開発
プラグイン・拡張機能の導入

ヘッドレス導入でWeb 制作はこう変わる

フロントエンド制作

フロントエンド
制作

プラグイン
拡張機能の導入

各種機能の開発

バックエンド開発

これまでの垂直統合型のシステム開発では、すべての工程が上から下まで一体化して動くものがほとんどでした。しかしヘッドレ
スCMSを活用する場合、フロントエンドとバックエンド、さらには機能拡張などの部分はそれぞれ独立したプロジェクトとして扱うことができるようになるため、業務の進め方も、水平分業的になります。

ヘッドレス CMSを採用することで、
フロントエンドとバックエンドを分離して制作ができるようになります。

といった機能の搭載が求められるた

ドがAPIでやりとりする形になるので、任範囲も曖昧になりがちですから、おでは、これによってシステム構築はめに、バックエンドが担う仕事の一部

あらかじめAPIの仕様さえ決めておけ

互いの境界部分では、どちらの技術

どう変わるのでしょうか。

まで担当しながら、仕事を進めていく

ば、それぞれ独立した形で仕事を進を採用するか、どちらの言い分を重視必要が生じているのです※3。

めていくことができます。つまり、1つするかといった調整も必要になります。

その一方で、バックエンドのシステのプロジェクトを、複数のプロジェク

中でも、ユーザーの嗜好の変化に

ム構築の分野においても、HCD 推進

トに分け、それぞれの専門家が対応

合わせて常に変化を求められるフロ

近年 Webの世界で話題のJamstack。ヘッドレスCMSと一緒の流れもあってUI の構築や UX の設する体制をつくることができるのです。

ントエンドと、安定を重視するバックに語られることが多いこともあり、ヘッドレスCMS のフロント計に手間や時間をかけざるを得なく

こうした専門領域を分けた仕事の仕エンドでは、制作・構築に対する考えなっています。双方とも、得意でない方を「水平分業型」と言い表すとわか方もスピード感も違うため、その調整部分まで担当せざるを得ない状況にりやすいでしょう。

は難しいものになりがちです。

効率化を進めることで本来の業務に集中できる
近年、Web 構築におけるフロントエ

なってしまっているのです。そこで注水平分業型を、従来の垂直統合型

そうした課題を解決するためには、ンド制作は、以前と比べていっそう複目すべきなのが「ヘッドレスCMS」です。

の制作と比較してみると違いは明らか

専門性の高い人材にそれぞれの領域です（上図参照）。垂直統合型のプロを任せる、水平分業型の制作がマッ

ジェクトは、フロントエンドとバックエチします。

雑なものになっています。会員管理やメルマガ発行などの顧客情報の管理
や、承認ワークフロー、ステージング、

プロジェクトは2つに分けられる

ンドが一体化、分離していませんから、

認証、さらには課金システムとの連携

ヘッドレスCMSを利用したサイト

プロジェクトの進行は、全体の流れをやサブスク管理、ユーザー登録、決済構築では、フロントエンドとバックエン

見ながら行うことになります。また、責ヘッドレスCMSにJamstackは必須なの！？

エンドにはJamstackを利用したフロントエンドが必須だと思っている人もいるかもしれませんが、そうではありません。ヘッドレスCMS ではもっと柔軟にフロントエンドの選択が可能です。ただし、静的サイトと動的サイトのいいとこ取りをする
JamstackがヘッドレスCMSと相性がいいのは確かです。今後
この組み合わせで制作が行われる機会は増えていくでしょう。

ヘッドレスCMSを導入する意味は、
こうした点にもあるのです。

まとめ※3 フロントエンドでバックエンドを操作する
WebブラウザとJavaScriptが大きく進化している
ことよって、フロントエンドでもバックエンド側のデータを操作するケースは増えています。むしろ当たり前と捉えている人もいるかもしれません

ヘッドレスCMSを使うとフロントエンドとバックエンドを分離できる
Web 制作やシステム構築のような1つのプロジェクトを複数のプロジェ
クトに分割することができる
それそれの専門性を活かした水平分業型の制作に移行できる

水平分業か
07

ヘッドレスCMS が変えるもの②

柔軟なシステムワンソースを徹底的に活かしきる
ないポイントは、ワンソースマルチデバ
イスの進化です※4 。これからの時代、

DX の流れの中で、さまざまなシステムを連携させていくことが求められています。
そうした環境のもと、ヘッドレス CMS は
どう活用されていくことになるか、その将来性を見ていくことにします。

力を活用した競争力の強化や、効率化による収益性の向上、さらには顧そう幅広く、そして細分化されたもの

は、ユーザーの行動形態が変わった

客体験の向上が謳われています。そうになっていくでしょう。どこから、どん場合にも、対応が可能になります。例

した課題を解決するためには、社内なデバイスからアクセスしても最適な

えば昨今のコロナ禍。突然起きた事のシステムやイントラネット、Webサイ体験を提供することが求められていき態が、ビジネス環境に、人々の生活やト、そして外部のソリューションをうまます。そのために必要なのが、デバイ

働き方にどれだけ大きな変化が与え

くつなぎあわせ、柔軟に活用することスの特性にのっとったフロントエンド

たかを、今さら強調する必要はないでが求められます。

のつくり込みです。その点、ヘッドレス

しょう。

CMSを利用し、APIを中心に置いたシ例え買い物の概念や、職場の在り

ステムを構築できれば、それぞれのデ方が変わるような大きな変化が訪れ

いつでも
変えられる

サー
ビ
C ス

AP

サービス
D

I

それを活用するためのヘッドレスCMSということになります。

たとしても、ヘッドレスCMS でシステ

こうした視点から見ていくと、ヘッドムを構築していればフロントエンドのレスCMSは将来に向けた、企業の力

UIデザインを変更したり、追加したりを強化するための「戦略的ツール」とすることで対応できます。つまり、ヘッ

位置付けることもできます。DXの流れ

ドレスCMSを使えば、いつか訪れるの中で、より将来性の高い仕組みとしかもしれない、危機に強いシステムをて、ヘッドレスCMSは大きな武器になつくることができるのです。

るでしょう。

いつでもフロントエンドを追加したり変えたりできるのがヘッドレ
スの大きな特徴の一つ。デバイスやサービスごとにフロントエン
ドを変えたり、時流にマッチしたものを追加することもできます

https://www.drupal.org/

デジタル庁の主導で進められている政府機関統一 Web サイトの構築には、海外の公的機関でも多数使われている「Drupal」がWeb 基盤として採用されることになっています。Drupal は、正確にはヘッドレスCMS

I

ヘッドレス
CMS

公的機関でのDrupal 採用

そこでキーとなるのは API であり、API

スフォーメーションでは、デジタルの

ビス
サー D

報
情

く
叩

AP

API

突然の変化にも強い仕組みをつくる

企業が取り組んでいるデジタルトラン

ヘッドレスCMSで構築したシステム

サービス
B

ビス
サー A

フロ
エン ント
ド

3つ目はズバリDXです。今、多くのシステムとユーザーの接点はよりいっ

いつでもサイトを変えられるAるなど、柔軟な対応が可能になります。

HCDの視点から考えた時に見逃せ

しなやかな仕組みを構築しWeb の世界とも連携するPI

トエンドとつなぐことができるようにな

デジタルトランスフォーメーションの課題に向き合う

バイスに最適化された複数のフロン

まとめ
ワンソースをマルチに活かしきるためのヘッドレスCMS
突然の変化に強いシステムを構築できる
将来を見据えた投資として捉えることもできる

ではありませんが、Webアプリケーションのフレームワークとしての運用、つまりヘッド
レス的な運用が可能なCMSです。
その基本は API 中心設計にあるため、さまざまな外部のリソースに加え、これまでに蓄積されてきたソフトウェアやデータを活用していくこが可能です。水平分業化が一つ※4 ワンソースマルチデバイスの徹底
最近はユーザーの利用実態に注目して、複数のデバイス間をまたいでユーザー体験を引き継ぐ、「ク
ロスデバイス」の視点を重視すべきという考え方もあります。ヘッドレスCMSを活用すれば、そうした仕組みの構築にも柔軟に対応可能です。

のトレンドになっていることを示す事例と言えそうです。

08

ヘッドレスCMS が変えるもの ③

Talking with
Kato-san
いうのであれば、今はあえて手をつけ水平分業る必要はないかもしれません。

Vol.3

では、どうやって会社を説得するか。
ヘッドレスCMS 導入促進術

ただし今後、システム構築の世界において、API を使って多様なリソースを活用していく流れはもう止まることはないでしょう。つまり、環境は遅か

ヘッドレス CMS 運用にマッチする組織の形とは

ここまでヘッドレスCMS がもたらすさまざまなメリットを紹介してきました。

れ早かれ水平分業的な世界へ変化し

しかし、その導入にあたっては、いくつかの障壁が存在します。

ていくのです。いちはやく舵を切れる

その点をどう考えればいいのか、本記事最後の項ではその点を考えてみたいと思います。

かが将来に向けた鍵になるのは間違いありません。

ヘッドレス CMS の導入は、従来の垂直デジタル世界の流れを注視していく必要性

統合型の制作手法を、水平分業型へと変えていく、大きな変化を促すものです。
その強みを活かす組織づくりと意識改革が重要なポイントになります。

垂直統合型と水平分業型の違いとは役割はマネジメントがメインとなり、制作者一人ひとりの責任範囲が明確化します。

─ ここまでヘッドレスCMSの構造や、その背後のと考えられるからです。ただし、費用はかかるかもし

最後にもう一つ付け加えておくと、システム構築の世界で起きている、大きな変化につれないけれど、一度構築すれば、その先の費用対この考え方は、Web 制作会社やシスいてお話を伺いました。そのメリットも十分に理解効果は大きいということは強調しておきたいですね。

テムインテグレータのみならずWebできましたが、いざヘッドレスCMSを導入しようと─ ヘッドレスCMSがつくりあげる変化に強く、（ワを活用してサービスを提供したり、マー

考える企業にとって、あるいはクライアントに対して

ンソースマルチデバイスのような）柔軟な活用が可

ケティングを行っている企業の皆さん

ヘッドレスCMS の導入を進言する際に、立ちはだ

能な仕組みは、まさに今の時代にマッチしたものです。

にも重要なものになります。

かる障壁が「コスト」です。

加藤

導入提案に際しては、例えば将来のリニュー

確かに、ヘッドレスCMSを利用した制作と、アルをする際にかかる費用まで含めて比較をすると部のリソースを積極的に活用する。

従来のCMSを利用した制作とを比較すれば、今はか、マルチデバイス展開を念頭に見積もりをしてみすべてを自社でつくるのではなく外加藤

これまでCMSを使ったシステム構築

垂直統合型の制作から水平分業

内向きに閉じたシステムを構築するのまだ、従来型の方が安価な見積もりが出るのは間るといった工夫をするのがいいかもしれません。また、といえば、「垂直統合型」の制作が主への転換は大きな変化です。リーダー

ではなく、機能や情報をAPIを利用し違いないでしょう。

DXを絡めた、社内のネットワーク改善までを含め流でした。その構造上、全体を統括の役割のみならず、制作者一人ひとりて積極的に公開していく。近い将来、

─ ヘッドレスCMSの利用料は高価ですか？

た提案にすれば、DX 向けの予算も使えるかもしれするリーダーの権限と役割が大きくなに求められる能力も責任意識も変え

日本においてもそうした考え方が標加藤る一方で、制作者一人ひとりの仕事る必要があります。当然、外部パート

準になっていくでしょう。

せんが、会員管理や決済といった機能をあらかじめ─ なるほど！ 裏技的な話にも聞こえますが（笑）
、の境界が曖昧になりがちでした。

ナーを選定する場合や、新しい人材

ヘッドレスCMS はそうした時代を備えているヘッドレスCMSであれば、バックエンド

それはまさにヘッドレスCMS の強みを活かした提一方、ヘッドレスCMSをバックエンを発掘・育成していく際にも、その適生き抜くための武器になるはずです。

の開発費用を大きく抑えられると思うのですが、そ案ですね。よくわかりました。加藤さん、ありがとうドに採用し、APIを利用してフロントエ

性を見極める必要があるでしょう。

のぶんフロントエンドの制作費がかかるようになるございました！

ンドや外部リソースをつないでいく「水「垂直統合型の制作手法がうまくいっ平分業型」の制作では、リーダーのているし、組織にもマッチしている」とまとめ
ヘッドレスCMS がもたらす水平分業化にマッチした人・組織を育む

いろいろなタイプがあるので一概には言えまません。

ヘッドレスCM S の特 徴をよく理 解した上での提 案を！

リソースを活用するだけでなく提供する組織に変えていく09最新・注目のCMS ─

Talking with

見逃すとヤバイ！

Kato-san

最近の CMS の注目株といえば「ヘッドレスCMS」。

Kuroco 導入で実現する
自由度の高い“ ヘッドレス” 環境とはついに国産ヘッドレスCMSも登場しはじめました。
そんな中でも最も注目を集めているKurocoとはいったいどんな CMS？

日ごとに高まるヘッドレスCMS への注目度。Kuroco のメリットを理解するためにまずは「ヘッドレスCMSとは何か」といった点から話を進めます。

新世代ヘッ
ドレスCMSを導入し

─ Kuroco は日本のベンダーからリリースされてとっては、難解な機能の実装をシステム構築側にいる数少ないヘッドレスCMS の一つ。ヘッドレス

任せてしまうことができ、本来の仕事であるフロン

CMSについては、P02からも詳しく解説をしてきましトエンドのデザイン、UI/UXの設計に力を注ぐことが変化に強く、新たな領域を切り拓くCMS

たが 、こちらでもその特徴を簡潔に説明していただ

できるようになるでしょう。

けますか？

─ システムインテグレーターにとってはいかがでしょ

今、話題の「ヘッドレスCMS」。従来のCMSとは異なる“フロントエンドのな

ロントエンド」と、データを扱う「バックエンド」に分

加藤

いCMS”は、Web 制作・開発、さらにはシステム構築が直面するさまざま

けることができる（図01）のですが、そのうちバックことはシステムを部分ごとに分けて制作ができるとな課題を解決する存在として、いま大きな話題を呼んでいます。そんな中、エンド側だけを提供するのがヘッドレスCMSと考えいうこと。それぞれの責任範囲を明確にすることもるとわかりやすいと思います。

できますし、制作を外注も容易になります。もちろん、

─ そのメリットはどんな点にあるのでしょうか？

UI の制作やUX の設計を制作会社に委ねることも未来のシステム構築を！

日本発の高機能ヘッドレスCMSとして注目を集めているのが「Kuroco」です。エンタープライズ系 CMSの流れを汲む、クラウド型のヘッドレスCMSであるKurocoは制作現場をどう変えるのか。前章に引き続き、開発元であるディバータの加藤健太さんに話を聞きました。
Text：小泉森弥

可能です。
─ そうした“ 分離した構造 ”を成立させるための

CMSを導入すればフロントエンドとバックエンドをポイントが「API」ということですね。

完全に分離することができます。Web 制作会社に

加藤┃ 図 01 ┆ フロントエンドとバックエンド ┃┃ 図 02 ┆ フロントエンドを柔軟に選択できる ┃フロントエンドとバックエンドに分かれるCMS の構造

ヘッドレスCMSとアプリ・デバイスの自由な組み合わせ操作

KurocoKuroco
株式会社ディバータ
API 志向のクラウドネイティブ CMS。フ
ロントエンドとバックエンドを完全に分離して、各クラウドやAPI 連携をすること
でさまざまなWebアプリケーションを開発できるようになります。
https://kuroco.app/ja/

ヘッドレスCMSでシステムを構築するという

表示

情報

呼出

はい。ヘッドレスCMSでは、フロントエンドとデータ

1976年生まれ。早稲田大学理工学部機械工学科卒業。
大学在学中、「一休 .com」の創業メンバーとして参画。
大学卒業後ソフトバンクグループでカー用品販売サイトの企画・構築・運営をはじめ、転職アドバイザーマッチン
グサイトの立ち上げ戦略・企画・システム設計・開発に携わる。2005年ディバータを設立、代表取締役に就任。

Kurocoとは…

うか？

化し、その構造も複雑になっていますが、ヘッドレス

バックエンド︵ Kuroco ︶株式会社ディバータ
代表取締役

近年、Webサイトに求められる機能は高度加藤フ ロン ト エン ド

加藤 健太
Kenta Kato

CMS の構造は、ユーザーとやりとりする「フ人

答えてくれたのは…

加藤

データ↑ CMSは大きく分けて、人と接点を持つフロントエンドと、データを扱うバックエンドに分かれています。ヘッドレスCMSとは、ここでいうバックエンドとデータを管理するCMSです↑ ヘッドレスCMSの特徴の一つであるAPI 連携。Webサイトやス
マホアプリ、音声デバイス、サイネージといったフロントエンドとの橋渡しをするのみならず、外部の機能を取り込む役割も果たします10┃ 図 04 ┆ 業務システムへの応用事例 ┃グローバルの視点で見ても、さまざまなアプ用していく仕組みが一般的になっていますし、そのよって、多様で、自由度の高いシステム構築が可能

流れはよりいっそう強くなっていくと思います。Webになるのです。

制作会社にせよ、システムインテグレーターにせよ、

─ 設計の段階からAPIを中心に置いて考えること

今後はいよいよ、APIを中心に据えて設計を進めてが大切ですね。

いく必要があると思います。
Webブラウザで3D 画像を表示

Kurocoが開拓する“ 新しいシステム構築の形 ”とは？

Kato-san

顧客向けに建築物の画像を提示するための業務システム。3D 処理を得意とするゲーム開発技術であるUnityと、建設会社の顧客管理という畑違いの技術を連携させ、ブラウザで表示する仕組みを構築。Kurocoの連携力が活きた事例です

これまでにない自由なシステム構造を実現するKuroco。

・ユーザー管理

建設会社
データ

Talking with

データ

利用したりする際にもAPIを活用しています。それにKurocoリケーションやシステムつなげることで、機能を利︵Webブラウザ︶

別のデータサーバと連携したり、外部のサービスを

ゲームエンジンUnity を利用した Webアプリケーションの構築

Un ity加藤人

バックエンドのデータのやりとりをする際だけでなく、・3Dデータの管理

その先に広がっているのは、専門性を重視した合理的な制作環境です。
Web 制作会社に委ねることが可能になります。近─ そうしたヘッドレスCMSの強みを実現している

課金システムとの連携やサブスク管理といったEC

─ もしその他の機能を追加したい場合でも、API

年、HCD（人間中心設計）の実践が求められる中で、のが「Kuroco」ということですね。

関連の機能など、Webサイトやスマホアプリ等でし連携で外部のリソースを活用しながら、Webサイト・

すでに知見を有している制作会社と共同制作がでばしば使われる機能をあらかじめ搭載しています（図サービスの構築ができるというわけですね。

きるというのは大きなメリットになると思います。

れを汲んでいることもあり 、“ 高機能なヘッドレス03）。そうした機能を新たに開発する必要はありま加藤CMS”として設計しています。

せんから、これまで外部に委託していたバックエ

術や知見を他の領域で活用することも可能になり加藤ます。上図で紹介しているのは、ゲームの開発に使

開発初期はほとんどお金がかかりません。一方、サ※1 エンタープライズ向けCMSの流れを汲む

われる「Unity」を利用して、建設会社の顧客向けポートで注目していただきたいのが「テクニカルサポー

Kurocoは、これまで十数年にわたって使われてきたディバータのエ
ンタープライズ向けCMS「RCMS」に代わって登場したCMS。長年にわたって利用されてきた機能を数多く引き継いで採用しています

業務システムを開発した事例です（図04）。表示にト」です。有償ですがKuroco 側の環境構築のお手

Webブラウザを利用している点も注目です。

伝いをする仕組みです。

─ Kurocoを軸にAPI 連携を行うことで、業務シス

─「Kuroco」は制作会社にもシステムインテグレー┃ 図 03 ┆ 制作事例 ┃テムでもWebブラウザを利用できるのですね。

ターにもメリットのあるCMSということですね。今フロントエンドで自由にデザインした B2B サービス事例

加藤

加藤

Kuroco はエンタープライズ向け CMS の流
※1

→

→

ン ンド側の開発コストを大幅に削減できます。

─ 具体的にはどんな機能が搭載されていますか？
加藤

会員管理やメルマガ発行といった顧客情報を管理する機能や、承認ワークフローやステージン
グ、認証といった運用に欠かせない機能、さらには制作会社にとっては、Web 制作で培った技

一方、システムインテグレーターにとってデータ

Kuroco

グラフ表示
UI／UX

人

は、UX 設計やUI 構築といったフロント側の領域を・会員管理
・アンケート管理etc

─ 最後に料金やサポートについて教えてください。
従量課金の仕組みを取り入れていますので後もKurocoに注目していきたいと思います。今日はありがとうございました。

まとめ

特別な集計
ロジックの実装

別のサーバ

ヘッドレスCMSの特徴を最大限に活かしたクラウド型 CMS「Kuroco」
・重要なデータの管理

あらかじめ高度な機能を搭載、バックエンドの開発コストを大幅に低減
API 連携を軸にさまざまなサービスや技術を“つなぐ”CMSだから業務システム
やイントラネットの構築も可能に↑ 採用広報の効果測定を行う「BiZMiL Survey（https://www.ageha.tv/service/bizmil-survey/)」。Kurocoがもともと用意している
会員管理等の機能を利用する一方で、顧客の重要なデータに関しては別サーバで処理。Kurocoとの間は、API 連携機能を利用しており、必要なデータのみを呼び出して利用することで、高い安全性を確保しながら、利便性の高いサイトを実現しています

11ご利用料金Kuroco は従量課金モデルです。

ビジネスのフェーズに合わせて、最適なサポートをご提供します

フレキシブルでコストパフォーマンスに優れた完全な従量課金です。
初期費用もかかりません。1,100円 / 月の無料料金枠ですぐに始められます。
従量課金のイメージがつきづらい場合、概算月額料金を算出したり、定額契約もできますのでご相談ください

APIリクエストキャッシュされた
APIリクエスト

55円

0.0132円／10,000hit／100ミリ秒

CDN 転送量

メール

ファイル
ストレージ

220円

11円

55円

／10GB

間

検 討 フェーズ

コンピュー
ティング

44円

／1,000hit

期

／100通

／1GB

上記の6項目を計上。
上手に使えば費用を圧縮しやすい設計です。

サポート名

営 業サポート

構 築 フェーズ

※ 1ページあたりの転送量1MB 想定※ 主に転送量とキャッシュされたAPIリクエス
トが利用される想定※ 主にAPIリクエストとメール送信が利用される想定☞ 2.2 万円 ／月

Kurocoを利用した提案や見積もりのサポートをいたします。

金無※ 提案書の作成などは原則行いません。

プレミアムサポート

フロントエンド実装、HTML・JS、ベストプラクティスの問い合わせや
Kuroco の操作方法、仕様の問い合わせまで開発業務全般に対応。
実装依頼も受付可能です。

テクニカルサポート（WEB 制作・システム会社・社内システム担当者様向け）（WEB 制作・システム会社・社内システム担当者様向け）

償

目

安

1営業日以内返信目安

要見積

フロントエンド実装、HTML・JS、ベストプラクティスの問い合わせや
Kurocoの操作方法、仕様の問い合わせまで開発業務全般に対応。
※ 簡易な管理画面操作の代行作業は可能です。
※ 時間内での課題解決を保証するものではありません。
※ 構築実績による割引制度あり。

13.2万円 /30日
1営業日以内返信目安
13.2万円〜

26.4万円 /30日
4時間以内返信目安
39.6万円30日
1時間以内返信目安

Kurocoの操作方法や仕様の問い合わせのみを受け付けます。
※ 簡易な管理画面操作の代行作業は可能です。
※ 時間内での課題解決を保証するものではありません。
※ 構築実績による割引制度あり。

9.9万円〜

9.9万円 /30日
4時間以内返信目安
16.5万円 /30日
1時間以内返信目安
Kuroco 従量課金額6%
1営業日以内返信目安

運用サポート（運用担当者様向け）

構築後のあらゆるご質問にお答えします。
※ 社内で回答が難しい場合は一般的な回答になる場合があります。
※ 用語の説明や他社サービスの説明に関しては原則として参考ページなどのリンクをご連絡する形になります。

6.6万円〜※6.6万円 /30日以下の場合は、
6.6万円

Kuroco 従量課金額15%
4時間以内返信目安※11万円 /30日以下の場合は、11万円

標 準サポート

基本的にはKurocoの操作方法や仕様の問い合わせのみを受け付けます。

継 続 的サービス開 発サポート

フロントエンド実装、HTML・JS、ベストプラクティスの問い合わせや
Kuroco の操作方法、仕様の問い合わせまで開発業務全般に対応。
実装依頼やKurocoを利用したビジネス展開に関しても伴走いたします。

例 えば …

☞ 3.3 万円 ／月料（WEB 制作・システム会社様向け）

スタンダードサポート

毎月1,100円
まで無料

会員1,00 0人の活発な会員制サイト

要※ 主にパートナー様と一緒に提供するメニューになります。

運 用 フェーズ

100 万 PV ／月のメディアサイト

概

全

期

間

（WEB 制作・システム会社・社内システム担当者様向け）

優先実装依頼無償

要見積

1営業日以内返信目安

264万円 /3ヶ月〜※ 主にパートナー様と一緒に提供するメニューになります。

Kurocoに欲しい機能がある場合に、優先的に実装をするように依頼することが出来きます。
※ 当社ロードマップ等と関連するため、必ず実装、希望実装を叶えるものではありません。

要見積※C D N / WA F 利用料 込み※価格は税込みです。

株式会社ディバータ
〒162-0823
東京都新宿区神楽河岸1-1 セントラルプラザ6階
kuroco@diverta.co.jp

Kuroco 公 式サイト

https://kuroco.app/ja/

Kuroco 導入事例

https://kuroco.app/ja/our_clients/

Kurocoドキュメント

https://kuroco.app/ja/docs/

本記事の無断転載・転用・複写を禁じます。