ヘッドレスCMSとは
CMSは、専門知識がなくても文章や写真を登録・更新できる、サイトの作成や管理のための仕組みです。よく知られているのがWordPressです。
WordPressのような従来のCMSは、1つの仕組みの中で2つの役割を受け持っています。1つは、管理画面から文章や写真を入力し、保存しておく役割です。もう1つは、サイトを見に来た人に向けて、保存した文章や写真をデザインに当てはめ、ページとして表示する役割です。
ヘッドレスCMSは、このうち表示する役割を持たないCMSです。ヘッド(頭)は表示する部分のことで、それが無いので「ヘッドレス」と呼ばれます。ヘッドレスCMSが受け持つのは、文章や写真を入力し、管理するところまでです。入力した内容は、API(アプリケーションどうしでデータを受け渡す仕組み)を通して、別に作った表示する部分へ渡します。ページのデザインや、どの順番で並べるかは、表示する部分の側で作ります。
表示する部分の作り方には、大きく2つの形があります。
- 前もって書き出す形:CMSから受け取った内容で、前もってページをファイルとして書き出しておき、見に来た人にはそのファイルを配る。こうしてできるページを、静的なページと呼ぶ
- 開くたびに組み立てる形:見に来た人がページを開くたびに、CMSから内容を受け取ってページを組み立てる
どちらの形かで、次の章からの話、とくにセキュリティの面で変わることが違ってきます。
ヘッドレスCMSは、入力と管理だけを受け持ち、表示する部分は別に作るCMSです。「ヘッドレスCMS」という名前だけでは、公開しているサイトがどのような構成になるかまでは分かりません。
会社のホームページの作り方には、ホームページ作成サービスで自分で作る、WordPressなどのCMSで自社で作る、制作会社に頼む、の3つがあります。ヘッドレスCMSは、多くの場合、3つ目の制作会社に頼む作り方の中で使われるCMSです。表示する部分を作る開発の作業があるためです。3つの作り方の違いは、会社のホームページの作り方の記事で解説しています。
関連記事会社のホームページの作り方は?3つの方法と、選ぶ前に確かめること
従来のCMS(WordPress)との違い
従来のCMSとヘッドレスCMSの違いを、項目ごとに並べると次のようになります。ヘッドレスCMSの欄は、表示する部分を静的なページとして書き出す場合です。
| 項目 | 従来のCMS(WordPressなど) | ヘッドレスCMS |
|---|---|---|
| 入力の画面 | CMSの管理画面 | CMSの管理画面(画面の作りはサービスごとに違う) |
| 表示する部分の作り方 | ひな形(テーマ)を選んで手を加える。制作会社に頼むこともある | 制作会社などが、CMSとは別に作る |
| 見え方の確認 | 管理画面からプレビューで確かめられる | 確かめる仕組みを、別に用意することがある |
| 機能の追加 | プラグインを入れる | 表示する部分に作り込むか、外のサービスを組み合わせる |
| 公開しているサイトの側にあるもの | ページを組み立てるプログラム、データベース、ログインの画面、プラグイン | 書き出したページのファイル |
| 費用 | ひな形とプラグインで作れる分、抑えやすい | 表示する部分を作る開発の費用がかかる |
大きく違うのは、表示する部分を誰が、どう作るかです。従来のCMSでは、表示する部分もCMSの中にあるので、ひな形を選び、プラグインを入れて機能を足していけます。ヘッドレスCMSでは、表示する部分をCMSの外に作るので、作るのも直すのも、開発ができる人の作業になります。
ヘッドレスCMSにするには、いまのWordPressをやめなければならない、というわけでもありません。WordPressには、入力した内容をAPIで外に渡す仕組み(REST API)があり、WordPressの開発者向けの資料は、これを使えばWordPressの内容をまったく別のアプリケーションに持ち出したり、新しい表示する部分を作ったりできる、としています。入力の画面はいまのWordPressのまま、表示する部分だけを分ける形です。慣れた入力の画面を変えずに済む一方で、WordPress本体とプラグインを新しくしておく作業は残ります。
出典:WordPress.org『REST API Handbook』
従来のCMSとの違いは、表示する部分がCMSの外にあり、それを開発で作ることです。入力の画面は、WordPressのまま残す形もあります。
ヘッドレスCMSのメリット
ヘッドレスCMSのメリットとして、よく挙げられるのは次のようなものです。
- 表示が速くなりやすい:前もって書き出したページを配る形なら、見に来た人がページを開くたびにページを組み立てる手間がかからない
- 同じ内容を複数の場所に出せる:入力した内容をAPIで渡すので、サイトのほかに、アプリや店頭の画面などにも同じ内容を出せる
- デザインの自由度が高い:ひな形やプラグインの決まりに縛られず、表示する部分を一から作れる
- 攻撃される面が小さくなる:表示する部分の作り方によって、公開しているサイトから攻撃の入口になりうる場所が減る
このうち4つ目は、どの形でも当てはまるわけではありません。条件があり、ヘッドレスCMSにしても残る守りもあります。この記事の中心になる話なので、第5章と第6章で分けて説明します。
ヘッドレスCMSのメリットは、表示の速さ、同じ内容を複数の場所に出せること、デザインの自由度です。セキュリティの面は、条件つきで、攻撃される面が小さくなります。
ヘッドレスCMSのデメリットと注意点
メリットの裏返しで、デメリットもあります。
1つ目は、表示する部分を作る開発が要ることです。作れる人が限られるので、ページの形を変えたいときや、表示が崩れたときに、そのたびに制作会社に頼むことになりやすくなります。
2つ目は、見え方の確認がしにくいことがある点です。従来のCMSなら、入力した内容が公開したページでどう見えるかを、管理画面のプレビューで確かめられます。ヘッドレスCMSでは、入力の画面と表示する部分が別なので、公開する前の見え方を確かめる仕組みを、別に用意することがあります。
3つ目は、問い合わせフォーム、サイトの中の検索、会員登録のような、見に来た人の操作に応える機能を、別に用意することです。静的なページは、見に来た人に同じファイルを配るだけなので、送られてきた内容を受け取る仕組みを持ちません。フォームなら、外のフォームのサービスを組み合わせることが多くなり、契約や管理の相手が増えます。
4つ目は、費用です。表示する部分を作る開発の費用に加え、CMSのサービスの利用料や、表示する部分の保守の費用がかかります。公開したあとにかかる費用の考え方は、ホームページリニューアル費用の記事で解説しています。
| デメリット | 何が起きるか | 先に確かめること |
|---|---|---|
| 表示する部分を作る開発が要る | ページの形を変えるたびに、制作会社に頼むことになりやすい | 公開したあと、どこまで自社で直せるか |
| 見え方の確認がしにくいことがある | 入力した内容の見え方を、公開する前に確かめにくい | 公開する前の見え方を、どの画面で確かめるか |
| フォームなどの機能を別に用意する | 外のサービスが加わり、契約と管理の相手が増える | フォームの送信内容をどこに送り、どこに残すか |
| 作る費用と保守の費用がかかる | 開発の費用、CMSの利用料、保守の費用が重なる | 作る費用と保守の費用の内訳 |
表の右の列は、第8章で、制作会社に確かめることとしてまとめ直します。
ヘッドレスCMSのデメリットは、どれも表示する部分をCMSの外に作ることから来ます。作る前に、公開したあとに自社でどこまでできるかを確かめておきます。
セキュリティの面で変わること:攻撃される面が小さくなる
ヘッドレスCMSはセキュリティの面で有利だ、と聞くことがあります。何が変わるのかは、表示する部分を静的なページとして書き出す形かどうかで違います。
静的なページと、開くたびに組み立てるページの違いを、Mozillaが公開している開発者向けの資料(MDN)は、次のように説明しています。
静的サイトは、要求されたデータに対して、常に一定のコンテンツを返します。
多くの場合、動的ウェブサイトの HTML ページは、データベースから取り出したデータを、HTML 雛型の指定された場所に埋め込むことで作られます。
出典:MDN『サーバーサイドの概要』
2つ目の引用は、ページのひな形(HTML 雛型)に、データベースから取り出した文章を当てはめてページを作る、という意味です。従来のWordPressは、開くたびに組み立てる形です。見に来た人がページを開くたびに、サーバーの上でプログラムが動き、データベースから文章を取り出して、ページを組み立てます。同じサーバーには、管理画面に入るためのログインの画面もあり、入れたプラグインも動いています。
表示する部分を静的なページとして書き出すヘッドレスCMSでは、公開しているサイトにあるのは、書き出したページのファイルです。そのため、次の3つが変わります。
- 公開しているサイトで、ページを組み立てるプログラムとデータベースが動かない
- 公開しているサイトに、ログインの画面が無い(入力と管理は、CMSの側で行う)
- 公開しているサイトで、プラグインが動かない
こうして、公開しているサイトにある、攻撃の入口になりうる場所が減ります。この記事では、これを「攻撃される面が小さくなる」と呼びます。IPA(情報処理推進機構)の『安全なウェブサイトの運用管理に向けての20ヶ条』は、ウェブサーバについて次のように書いています。
ウェブサーバ上で不要なサービスが起動している場合、そのサービスが悪用されることがあります。そのため、最低限必要なもの以外は、停止してください。
出典:IPA『安全なウェブサイトの運用管理に向けての20ヶ条 〜セキュリティ対策のチェックポイント〜』(10)
この資料が書いているのは、ウェブサーバで動かしておくものの話で、ヘッドレスCMSの話ではありません。ただ、公開しているサイトで動くものを、ページのファイルを配ることに絞るという点で、静的に書き出す形は、この考え方と同じ向きにあります。
条件もあります。開くたびに組み立てる形のヘッドレスCMSでは、表示する部分のサーバーで、ページを組み立てるプログラムが動きます。上の3つのうち、1つ目は当てはまらなくなります。制作会社にヘッドレスCMSを勧められたら、表示する部分をどちらの形で作るのかを聞いておきます。
WordPressでも、攻撃の入口を守る手当てはあります。私がWordPressでサイトを作るときは、ログインに使う名前が、サイトの外から分からないようにしています。WordPressは、設定によっては、投稿者のページのアドレスなどから、ログインに使う名前の手がかりが外に出ることがあるためです。こうした手当てを重ねれば、WordPressでも入口を固くできます。ヘッドレスCMSとの違いは、入口に手当てをして守るか、公開しているサイトにログインの入口そのものが無いか、です。
表示する部分を静的なページとして書き出す形なら、公開しているサイトでプログラムとデータベースが動かず、ログインの画面もプラグインも無くなるので、攻撃される面は小さくなります。
ヘッドレスCMSにしても残る守り
攻撃される面が小さくなっても、守る仕事が無くなるわけではありません。公開しているサイトから消えたものは別の場所に移り、ヘッドレスCMSにしたことで新しく加わる守りもあります。ヘッドレスCMSにしても残る守りは、主に5つです。
1つ目:CMSのアカウント
文章や写真を入力する管理画面は、CMSの側にあります。そのアカウントのIDとパスワードが漏れれば、外から入って、サイトの内容を書き換えられます。IPAの20ヶ条も、不正ログインについて次のように書いています。
漏洩したIDやパスワードを悪用した不正ログインにより、情報漏洩や金銭被害などが生じる恐れがあります。
出典:IPA『安全なウェブサイトの運用管理に向けての20ヶ条 〜セキュリティ対策のチェックポイント〜』(8)
CMSのアカウントは、使う人ごとに分け、パスワードに加えて、スマートフォンに届く確認コードなどでもう一度確かめる二段階認証を設定します。担当者が替わったときや、制作会社との契約が終わったときは、使わなくなったアカウントを消します。
2つ目:APIキー
APIキーは、表示する部分がCMSから内容を受け取るときに使う、合い鍵のようなものです。キーには、内容を読むだけのものと、内容を書き換えられるものがあります。ヘッドレスCMSのサービスの1つであるmicroCMSのヘルプは、APIキーを隠す必要があるかという問いに、〈原則的には隠すことを推奨いたします。〉と答えています。このヘルプでは、内容を読むだけの権限をGETと呼んでいます。そのうえで、GET以外の権限、つまり内容を書き換えられる権限を付けたキーについて、次のように書いています。
GET以外の権限をAPIキーを付与している場合、APIキーが判別されると、任意のリクエストを送付することで、コンテンツの操作が可能となってしまいます。
出典:microCMS『APIキーを隠す必要はありますか?』
キーが知られると、そのキーを使って、内容を作ったり書き換えたり消したりする操作を送れてしまう、ということです。表示する部分には読むだけのキーを使い、書き換えられるキーは、公開しているサイトに置かないようにします。同じヘルプは、読むだけのキーでも、CMSの管理画面で「公開」にしている内容は全て取り出せてしまう、としています。サイトのページに表示していない内容でも、CMSで「公開」にしていれば取り出せるということです。下書きの内容も、下書きを取り出す権限をキーに付けていれば取り出せる、としています。サイトに表示しない内容をCMSに置くなら、その扱いも制作会社と決めておきます。
3つ目:フォームの送信内容
静的なページはフォームの送信内容を受け取れないので、外のフォームのサービスを使うことが多くなります。送られた氏名や連絡先、相談の内容は、そのサービスや、通知を受け取るメールの受信箱に残ります。置き場がサイトの外に移っても、残ることに変わりはありません。どこに送り、どこに、いつまで残すかを決めておきます。WordPressでも、送信内容はどこかに残ります。どこに残るかは、使うプラグインと設定で決まります。たとえば、WordPress.orgのFlamingoというプラグインの説明には、〈このプラグインはコンタクトフォームを介して収集される送信データを、ウェブサイトをホストするサーバー上のデータベースに保存します。〉とあります。いまのWordPressで、送信内容がどこに残っているかも、制作会社に聞いておきます。
出典:WordPress.org『Flamingo』
4つ目:会員登録・決済
会員登録や決済のあるサイトでは、表示する部分をヘッドレスCMSで作っても、会員の情報や注文の情報は、その仕組みの側に残ります。守る対象の中心はそちらにあるので、ヘッドレスCMSにしても変わる部分は小さくなります。
5つ目:外のサービスの範囲
ヘッドレスCMSでは、CMSのサービス、書き出したページの置き場、フォームのサービスと、外のサービスの相手が増えます。サービスの側が受け持つ守りもありますが、全部ではありません。相手が増えたぶん、どのサービスが何を受け持っているかを確かめる先も増えます。
5つを、何をするか、誰がするかで並べると、次のようになります。
| 残る守り | 何をするか | 誰が |
|---|---|---|
| CMSのアカウント | 使う人ごとに分け、二段階認証を設定する。使わなくなったアカウントは消す | 自社(誰に使わせるかを決める)/制作会社(設定する) |
| APIキー | 表示する部分には読むだけのキーを使う。書き換えられるキーは公開しているサイトに置かない | 制作会社(キーを作り、管理する)/自社(誰が持つかを知っておく) |
| フォームの送信内容 | どこに送り、どこに、いつまで残すかを決める | 自社(決める)/制作会社(設定する) |
| 会員登録・決済 | その仕組みの側で、会員と注文の情報を守る | 仕組みを提供する会社と、制作会社 |
| 外のサービスの範囲 | CMS・ページの置き場・フォームのサービスごとに、受け持つ守りを確かめる | 自社と制作会社 |
このほか、WordPressをヘッドレスCMSとして使う場合は、ログインの画面とプラグインは、入力に使うWordPressの側に残ります。WordPress本体とプラグインを新しくしておく作業も残り、そのWordPressを誰でも外から開けるようにしておくか、決まった場所からだけ開けるように絞るか、などで、守る仕事の量も変わります。どちらにするかは、更新する人がどこから入力するかによるので、制作会社に聞いて決めます。CMSやプラグインを新しくしておくこと、控えを取っておくこと、サービスの会社がどこまでやっているかの確かめ方は、ホームページの管理の記事で解説しています。
関連記事ホームページの管理とは?やることと、最初に確かめる契約・名義・期限
ヘッドレスCMSにしても、CMSのアカウント、APIキー、フォームの送信内容の置き場、会員や決済の情報、外のサービスに任せた範囲の5つは、守る仕事として残ります。守る対象が無くなるのではなく、別の場所に移ったり、新しく加わったりすると考えておきます。
自社に向くかを、4つの条件で見分ける
ここまでの違い、メリットとデメリット、変わることと残る守りを踏まえると、自社に向くかは、次の4つの条件で見分けられます。
4つの条件を考える前に、いまのサイトが何で作られているかを確かめておきます。WordPressで作られていると分かっていても、使っているプラグインと、フォームの送信内容の置き場までは確かめておきます。いま使っているプラグインや外のサービスは、ヘッドレスCMSに替えたときに、用意し直すものになるからです。自社のサイトが何で作られているかは、見た目では決めないでください。私も、見た目からWordPressで作られていると思っていたサイトを調べたところ、別の仕組みで作られていたことがあります。いまのサイトが何で作られているか、どのプラグインや外のサービスを使っているかは、まず制作会社に聞きます。
1つ目:更新する人
お知らせや実績を入力するのが誰で、入力の画面と見え方の確認で困らないかを考えます。担当が1人で、更新が月に数回なら、しばらく使わなくても迷わずに操作できる入力の画面かどうかも見ておきます。入力の画面はCMSのサービスごとに違い、見え方の確認の仕組みも作り方によって違います。更新する人が、入力した内容をその場で見ながら直したい場合は、どの画面で見え方を確かめられるかが大事になります。
2つ目:ページの種類
お知らせ、実績、コラムのように、決まった形のページを増やしていくサイトは、入力する欄を決めておけばよいので、ヘッドレスCMSと相性がよいと言えます。反対に、ページごとに形を大きく変えたいサイトは、そのたびに表示する部分を直すことになります。
3つ目:予算
表示する部分を作る開発の費用と、公開したあとの保守の費用を、両方見込めるかを考えます。作る費用だけを見込んで、保守の費用を見込んでいないと、公開したあとに直したい箇所が出ても、頼めなくなります。
4つ目:フォーム・会員・決済
問い合わせフォームなら、外のフォームのサービスで足りることが多いでしょう。会員登録や決済が中心のサイトは、第6章で触れたとおり、守る対象の中心がその仕組みの側に残ります。
4つを、向く場合と向かない場合で並べると、次のようになります。
| 条件 | 向く | 向かない |
|---|---|---|
| 更新する人 | 決まった欄に入力するだけで足り、見え方を確かめる画面がある | 見え方をその場で見ながら、ページの形も自分で変えたい |
| ページの種類 | お知らせ・実績など、決まった形のページを増やしていく | ページごとに形を大きく変える |
| 予算 | 作る費用と保守の費用を、両方見込める | 作る費用だけを見込んでいる |
| フォーム・会員・決済 | フォームは外のサービスで足りる。会員・決済は無い | 会員登録や決済が中心 |
もう1つ、向かない形として挙げておきたいのは、サイトの一部だけをヘッドレスCMSにして、残りを従来のCMSのままにする形です。入力の画面が2つになり、どのページをどちらで直すかを、更新する人が覚えておくことになります。守る対象も、両方に残ります。
CMSの種類は、見積もりの段階で決まっていることが多く、あとから替えるとデザインや仕組みを作り直すことになるものの1つです。使う仕組み(CMS)を、デザインに進む前にどう確かめるかは、Web制作の流れの記事で解説しています。
関連記事Web制作の流れとは?工程ごとに自社が決めることと、あとから変えにくいもの
自社に向くかは、更新する人、ページの種類、予算、フォーム・会員・決済の4つで見分けます。4つのうち、向かない側に当てはまるものが多ければ、いまのCMSのまま守りを固めることも選べます。
制作会社に確かめること
ヘッドレスCMSを勧められたら、見積もりの前に、次のことを制作会社に聞いておきます。第4章の表の右の列と、第5章から第7章で出てきたことを、聞く形にしたものです。
- 表示する部分は、静的なページとして書き出しますか、開くたびに組み立てますか。WordPressを入力に使う場合、そのWordPressは誰でも外から開けるようにしておきますか、開ける場所を絞りますか
- 公開したあと、自社で直せるのはどこまでですか。公開する前の見え方は、どの画面で確かめられますか。入力した内容は、どのくらいで公開しているサイトに出ますか
- CMSのアカウントとAPIキーは、誰が持ちますか。契約が終わるときは、どう引き渡してもらえますか。表示する部分のプログラムは、ほかの制作会社に引き継げますか
- フォームの送信内容は、どこに送り、どこに、いつまで残りますか
- 保守では、何を見て、何を報告してもらえますか(CMSのアカウントの見直し、APIキーの管理、WordPressを使う場合は本体とプラグインの更新など)
- 作る費用と保守の費用の内訳はどうなりますか。CMSのサービスの利用料は、誰の名義で払いますか。いまのWordPressのまま守りを固める場合と比べて、費用と自社の手間はどう変わりますか
1と4は、第5章と第6章で説明した、セキュリティの面で変わることと残ることに直結します。3は、ヘッドレスCMSに限らず、制作会社に頼むときに確かめておくことですが、ヘッドレスCMSではCMSのアカウントとAPIキー、表示する部分のプログラムが加わるので、持ち主を決めるものが増えます。6の名義も、3と同じく、制作会社との契約が終わったときに、自社のサイトを止めないためです。
制作会社には、静的に書き出すか、アカウントとAPIキーを誰が持つか、フォームの送信内容をどこに残すかを、見積もりの前に聞きます。
ヘッドレスCMSに向くかの確かめ表(テンプレート)
この記事の第7章と第8章に沿って、自社の答えを書き込めるように、確かめ表(Excel)を用意しました。ファイル1つに、次の3つのシートが入っています。
- 使い方:書く順番と、それぞれのシートで何を書くか
- 1_確かめ表:上にいまのサイト(何で作られているか・更新する人と更新するページ・使っている機能)を書き、4つの条件の自社の答えと判定、制作会社に聞く6つのことの回答を書く
- 2_記入例:架空の部品加工会社の記入例
制作会社と打ち合わせる前に「1_確かめ表」の上半分を書き、打ち合わせで下半分の回答を埋めれば、ヘッドレスCMSにするか、いまのCMSのまま守りを固めるかを、同じ1枚で比べられます。
※登録や個人情報の入力は要りません。クリックすると、Excelのファイル(ヘッドレスCMS確かめ表.xlsx)がダウンロードされます。
ARROWSの高セキュリティWebサイト制作
第8章で、ヘッドレスCMSを勧められたら見積もりの前に聞いておくことを並べました。ARROWSの高セキュリティWebサイト制作は、記事やページを書く場所と公開しているサイトを分け、公開しているサイトは書き出したファイルだけで配信する構成です。第8章の問いのうち、1・4・5に当たるところを、次のように作っています。
作り替えの前には、第7章で確かめておくとした、いまのサイトで使っているプラグインなどの機能を確かめ、代わりの方法をご提案します。公開しているサイトでは、CMSもデータベースも動かしません。記事やページを書く管理画面には、許可された担当者が、Googleアカウントで本人確認をしてから入ります。二段階認証を必須にし、入れる場所(接続元)も絞ります。APIキーについては、表示には読むだけのキーを使い、管理用のキーは公開しているサイトに置きません。
フォームの送信内容は、担当者にメールで届け、サイトのデータベースや受付の仕組みには保存しません(迷惑な送信の対策を加えた場合に、隔離した送信の控えを期間を決めて置くことを除きます)。第6章の3つ目の「どこに残すか」に、サイトにはためず、担当者のメールの受信箱に届く、と答える形です。
公開したあとは、毎月の保守で、CMS本体や書き出しに使うソフトウェアの更新、管理画面に入れる人と接続元の見直し、表示に使うキーと管理用のキーの置き場所と期限の確かめを行い、何を見て何を直したかをご報告します。この構成は攻撃される面を小さくするためのもので、すべての攻撃や被害を防げるとお約束するものではありません。
まとめ
ヘッドレスCMSは、サイトのページを表示する部分と、文章や写真を入力・管理する部分を分けたCMSです。表示する部分を静的なページとして書き出す形なら、公開しているサイトから攻撃される面は小さくなります。ただし、CMSのアカウント、APIキー、フォームの送信内容の置き場などを守る仕事は残ります。自社に向くかは、更新する人、ページの種類、予算、フォーム・会員・決済の4つで見分けられます。
まずは、いまのサイトが何で作られているかを制作会社に聞き、更新する人、増やしていくページ、フォームの使い方を確かめ表に書いてください。そのうえで、ヘッドレスCMSを勧められたら、「静的に書き出しますか」「アカウントとAPIキーは誰が持ちますか」と聞くところから始めます。




