microCMSとは？料金や使い方、Webhook設定などを解説

こんにちは。Webディレクターの安藤です。

Webサイトやアプリには、コンテンツを管理するシステムとしてCMSが存在します。
CMSがあることにより、技術者ではない方でも簡単にサイト・アプリ上の情報を更新したり、新しいページを追加したり、ブログ記事を投稿することができます。

従来からこのCMSにはさまざまな種類が世界中で開発されてきましたが、今回取り上げるのはヘッドレスCMSというジャンルです。

さらに日本では数少ない国産のクラウド型ヘッドレスCMSとして有名な「microCMS」をご紹介します。
本記事では、当社にて導入した流れや、手順などもあわせて記載していきます。

ヘッドレスCMSの選定にお悩みの方へ。
自社に必要なヘッドレスCMSがわかる下記資料もぜひご確認ください。

独自選定の代表的なヘッドレスCMSの特徴をもとに、誰でもヘッドレスCMSの選定ができるポイントを押さえた資料を作成しました。

microCMSとは

microCMSとは、APIをベースとした国産のヘッドレスCMSの一種です。

ヘッドレスCMSとはフロントエンドがないタイプのCMSであり、バックエンドを分離することでサイトの修正をスピーディーにし、より効率的に管理できるようにしています。
また、CMSの制約を受けにくいため、自由度の高いカスタマイズが可能です。

microCMSはコンテンツ管理に特化しているうえに、さまざまなデバイスに対応しているヘッドレスCMSです。

加えて国産であるため、日本語に完全対応しており、使用にあたって言語的な障害がありません。

Webサイトの構築はもちろん、モダンなフロントエンド技術と組み合わせたSPA（Single Page Application）の開発などにも活用されています。

ヘッドレスCMS普及の背景

近年、Web技術の急速な進化により、ユーザーの求める体験も高度化しました。
従来のCMSでは対応しきれない要求が増えてきたことから、新しいタイプのCMS、ヘッドレスCMSが注目を浴びるようになったのです。

そして、その中でも数少ない国産のヘッドレスCMSとして、多くの開発者や企業に支持されているのがmicroCMSです。

microCMSが提供するAPIの種類

microCMSが提供するAPIには以下のようなものがあります。

• コンテンツAPI
• 画像API
• マネジメントAPI

それぞれのAPIについて、順番に解説します。

コンテンツAPI

コンテンツAPIはmicroCMSの基本的なAPIであり、データの取得・登録を行うためのものです。
コンテンツAPIに該当するAPIには以下のようなものがあります。

コンテンツAPIはAPI認証キーを利用しなければリスクエストできません。
API認証キーは管理者権限を持つアカウントだけが、作成・管理・削除できます。

参照：コンテンツAPIとは｜microCMS

画像API

画像APIは画像の編集を行うためのAPIです。

microCMSはアップロード後に画像を編集しなくても、URLにパラメーターを付与するだけで編集を完了できます。
JPEG・PNG・Webpなど、メジャーな画像方式に対応できるなど、汎用性が高い点が特徴です。

参照：画像APIとは｜microCMS

マネジメントAPI

マネジメントAPIは、API経由による管理画面の操作や情報の取得を可能とするものです。
マネジメントAPIに該当するAPIは以下の2種類です。

参照：マネジメントAPIとは｜microCMS

microCMSが使いやすい理由

microCMSが使いやすい理由は以下の通りです。

• 日本語に対応している
• 無料プランが提供されている
• コミュニティで他のユーザーとの情報交換ができる

それぞれの理由について、順番に解説します。

日本語に対応している

microCMSは国産のCMSであるため、日本語に対応しています。
ドキュメントやコンテンツの管理をすべて日本語ででき、マニュアルはもちろん、サポートも日本語に対応している点が特徴です。

カスタマイズをする際やトラブルに対処する際でも、日本語で情報が表示されるので、スムーズに状況を把握できます。

海外製のCMSは日本語対応しておらず、言語設定が英語しかないケースも珍しくありません。
microCMSなら、言語的な障害がないため、初めてフロントエンドCMSを使う方でも安心して利用できます。

無料プランが提供されている

microCMSには、無料で使えるHobbyプランがあります。
個人向けのプランですが、法人でも利用できるため、お試しで使いたい場合におすすめです。

ただし、通信量が20GBを超えるとAPIが停止するので、本格的に運用するなら別のプランにしましょう。

なお、microCMSにはどのプランでも無料トライアルができます。
手軽に使用感をチェックできるので、本格的に導入する前に活用してください。

コミュニティで他のユーザーと情報交換ができる

microCMSは、コミュニティで他のユーザーと情報交換できるのも魅力です。
コミュニティはmicroCMSが運営しており、無料で使えるコミュニケーションアプリのDiscordを利用しています。

そのため、アクセスしやすいうえに、手軽に情報交換や相談が可能です。

CMSの中には、日本人の利用者が少なく、情報がほとんど出回っていないケースが少なくありません。
しかし、microCMSは関連したコミュニティがあるので、情報収集が簡単にできます。

開発者の視点でみるmicroCMSのメリット

開発者の視点でみると、microCMSには以下のようなメリットがあります。

• フロントエンドとの連携が容易
• 多様なデバイスに対応している
• バックエンドとフロントエンドの開発を同時進行できる
• コンテンツ構造を自由にカスタマイズできる
• 画像や動画などのメディアファイルを管理しやすい

それぞれのメリットについて、以下で順番に解説するので、ぜひ参考にしてください。

フロントエンドとの連携が容易

microCMSはフロントエンドとの連携が容易です。
microCMSはAPIを介してフロントエンドと連携するため、データのやり取りを効率化できます。

多様なデータをフロントエンドにスムーズに反映させられるうえに、さまざまなシステムとも連携できます。

多様なデバイスに対応している

microCMSは多様なデバイスに対応できる点も特徴です。
microCMSはAPIによってデータをWebサイト・アプリそれぞれに対応した表現にできます。

デバイスごとにAPIを作成する必要がないため、パソコン・スマートフォンだけでなく、デジタルサイネージやウェアラブルデバイスでもコンテンツの表示が可能です。
コンテンツは一括で管理できるため、更新や修正でタイムラグが生じる心配もありません。

加えて、microCMSはパソコンだけでなく、スマートフォンやタブレットからでもコンテンツを作成・編集できます。
そのため、多様なデバイスを利用したコンテンツの管理ができます。

バックエンドとフロントエンドの開発を同時進行できる

microCMSはバックエンドとフロントエンドが分離しているため、それぞれの開発の同時進行が可能です。

担当者をバックエンド・フロントエンドそれぞれに配置して同時に作業すれば、開発スピードを早められます。
スピーディーかつ効率的な開発を進めたい場合、microCMSは有効的なツールとなります。

コンテンツ構造を自由にカスタマイズできる

コンテンツ管理に特化しているだけあって、コンテンツ構造を自由にカスタマイズできる点も、microCMSのメリットです。

microCMSはCMSの制約を受けない構造であり、コンテンツを自由に作成できます。
APIを介せば好きな言語やフレームワークを導入できるため、理想的なコンテンツを実現しやすくなります。

さらにmicroCMSはUIも見やすいデザインを採用しており、コンテンツの作成・修正も迅速に行える点も魅力です。

画像や動画などのメディアファイルを管理しやすい

microCMSは、画像APIやマネジメントAPIを利用することで、スムーズにメディアファイルを管理できます。
「作成者」「日付」「タグ」「容量」など幅広い項目を管理できるうえに、操作も容易です。

メディアを複数アップロードしたり、他のプラットフォームから作成したりすることもできるため、状況に応じた柔軟な対応もできます。

microCMSのデメリット

microCMSは優れたツールですが、運用する際はある程度スキルを求められる点がデメリットです。

microCMSはAPIをベースにしているため、APIを適切に設計し、活用するノウハウが欠かせません。
そのため、エンジニアの経験がないユーザーだと、使い方をマスターするうえで苦労する可能性があります。

また、microCMSはフロントエンドを独自開発しなければならないため、フロントエンジニアが必要です。
フロントエンドを開発できなければ、コンテンツの視覚的なプレビューができなくなり、利便性が損なわれる恐れがあります。

microCMSの使い方

microCMSは以下の手順で使用します。

1. アカウントとサービスを作成する
2. APIの作成とコンテンツの定義を行う
3. コンテンツを作成する
4. コンテンツを公開する
5. コンテンツの編集や細部の設定を行う

それぞれの手順について、順番に解説するので参考にしてください。

1.アカウントとサービスを作成する

最初にアカウントとサービスの作成を行います。
アカウントはメールアドレスとパスワードを登録し、確認メールを受け取ってアクセスすれば完了です。

アカウント登録が終わったら、サービスを作成します。
管理画面上で識別するための「サービス名」と、サブドメインに利用される「サービスID」を入力し、「サービスを作成する」を押下したら完了です。

2.APIの作成とAPIスキーマの定義を行う

APIの作成は「自分で作成」と「テンプレート（ブログ・バナーなど）の利用」のどちらかから選べます。
自分で作成する場合、「自分で決める」を押下し、APIの基本情報を入力します。

続いて、APIの型を選びましょう。

APIの型は以下の２種類があります。

型を選んだらAPIスキーマの定義に移ります。
「フィールドを追加」を押下し、各フィールドを目的に合わせて設定してください。

3.コンテンツを作成する

APIを作成すると、サイドバーにある「コンテンツ」に作成したAPIが表示されます。
そこから「追加」をクリックすると、コンテンツの作成が可能です。

コンテンツはタイトル・本文にテキストを入力することで作成できます。

4.コンテンツを公開する

コンテンツを作成したら、右上の公開ボタンを押下しましょう。
ステータスが「公開」になれば、設定は完了です。

5.コンテンツの編集や細部の設定を行う

コンテンツの編集や細部の設定は編集画面から実行できます。
編集画面では、コンテンツIDの変更・公開日時の変更・作成者の変更などが可能です。

また、コンテンツをコピーしたうえでの新規作成もできます。

microCMSの便利な機能

本章ではmicroCMSの便利な機能を一部紹介します。
実際にmicroCMSを導入する際は、ぜひ活用してください。

Software Development Kit（SDK）

SDKとは「Software Development Kit」の略称であり、日本語では「ソフトウェア開発キット」と呼ばれます。
名前の通り、ソフトウェアの開発に必要なプログラムやテキストをパッケージにしたものです。

microCMSはオープンソースのSDKを提供しており、バックエンド開発やモバイル開発に対応したものもあります。
SDKを導入するだけでAPIを利用する幅が広がるので、積極的に活用しましょう。

権限管理機能

microCMSは管理画面でメンバーの権限を自由に管理できる権限管理機能があります。

権限管理機能では、招待したユーザーをすぐにメンバーに追加できます。
メンバーにはあらかじめ用意された所属ロールの割り当てや、複数のロールの割り当てが可能です。

さらにロールはデフォルトの権限をそのまま利用できるだけでなく、ユーザー別に細かく個別権限を設定できます。
開発者の事情やチームの状況に合わせて柔軟に設定できる点が、権限管理機能のメリットです。

ただし、権限管理機能は一部の有料プランでしか利用できません。

レビュー機能

レビュー機能とは、コンテンツの公開前に複数のユーザーにレビューを申請できる機能です。
レビュー機能は「レビューを申請」から簡単に利用できるうえに、レビュアーとなるユーザーの指定も可能です。

レビュアーに指定されるとメール配信がされますが、配信されるタイミングも自由に設定できます。

microCMSにおけるWebhookとは

microCMSはWebhookも利用できます。
Webhookを活用するとコンテンツの作成や情報の共有がよりスムーズになるので、積極的に導入しましょう。

Webhookの種類

microCMSで利用できるWebhookには、以下の9種類があります。

• Slack
• Chatwork
• Netlify
• Cloudflare Pages
• Vercel
• AWS Amplify
• GitHub Actions
• メール通知
• カスタム通知

Webhookは発行するタイミングを自由に設定できます。

Webhookの活用例

Webhookは企業が利用しているコミュニケーションツールと連携することで、スピーディな情報共有が可能です。

microCMSはさまざまなタイミングでコンテンツの状況を通知できます。
コンテンツの作成時・公開時はもちろん、下書き保存時やコンテンツ・APIの削除時などのタイミングでの通知も設定可能です。

複数のWebhookの追加もできるうえに、Slackの複数のルームに同時に連携できるなど、細かい設定にも対応しています。
さらにmicroCMSはカスタム通知を利用することで、任意のURLに対してポストリクエストを送信できる点も特徴です。

microCMSでWebhook設定をする方法

microCMSでWebhook設定をする方法は以下の通りです。

1. Webhookを設定したいAPIを選ぶ
2. 「API設定」→「Webhook」を開く
3. 「+ 追加」ボタンをクリックする
4. Webhookの種類を選択する
5. WebhookのURLを入力する
6. 必要に応じてその他の設定をする

それぞれのプロセスについて順番に解説します。

1.Webhookを設定したいAPIを選ぶ

最初にWebhookを設定したAPIを選びましょう。
フリープランなら1サービスに10個まで、スタータープラン以降なら無制限に設定できます。

2.「API設定」→「Webhook」を開く

API設定にある「Webhook」をクリックします。
ここに1種類ずつ連携サービスを追加していく仕様です。

3.「+ 追加」ボタンをクリックする

「+追加」ボタンをクリックすると、連携するサービスを選べます。

4.Webhookの種類を選択する

Webhookの種類を選択すると、通知のタイミングの選択画面が出てきます。
この時点で複数選択が可能です。

5.WebhookのURLを入力する

連携するサービスごとに設定されたWebhookのURLやAPIトークンを入力します。

入力するURLは各サービスのドキュメントを参照してください。

6.必要に応じてその他の設定をする

Webhookは必要に応じてその他の設定ができます。
例えば、Webhookの有効・無効を設定する際は、Webhookの一覧のスイッチを切り替えるだけで実行できます。

microCMSの料金プランと機能

microCMSのプランは、趣味ブログから大企業のコーポレートサイト、大規模なECサイトまで、さまざまなニーズに応じて選択できます。
重要なのは自分のプロジェクトやビジネスの規模と要件を把握し、最も適したプランを選択することです。

プランに応じてmicroCMSの機能を最大限に活用しましょう。

Hobby

Hobbyは個人向けの小規模なプランです。

3つのAPIを作成できるため、個人でブログやニュースサイトの運営をする方に適しています。
個人向けですが、法人でも利用可能です。

Team

Teamは小規模なチーム向けのプランです。

Hobbyプランの機能をすべて利用できるうえに、大容量のデータ送信が可能です。
カスタムすると月額料金は上がりますが、状況に応じて、より使いやすくできます。

Business

Businessは法人向けのプランであり、組織的なコンテンツ作成・管理に適しています。

データ転送量がかなり増えているうえに、権限管理機能やIP制限など、追加機能が利用できます。
ステータス設定もカスタムもできるため、組織体制に応じた柔軟な運用ができるプランです。

Advanced

AdvancedはBusinessプランの全機能に加え、セキュリティをより強化したプランです。

さらにAdvancedは以下の内容が付与されます。

• 監査ログ
• 2要素認証の必須化
• カスタムドメイン
• 請求書でのお支払い
• シングルサインオン（SAML）

セキュリティ面が強化されたことで、より本格的なコンテンツ作成に集中できるようになっています。

ヘッドレスCMSの選定にお悩みの方へ。
自社に必要なヘッドレスCMSがわかる下記資料もぜひご確認ください。

独自選定の代表的なヘッドレスCMSの特徴をもとに、誰でもヘッドレスCMSの選定ができるポイントを押さえた資料を作成しました。

WordPressとの違い

WordPressは長年主流となっているCMSですが、microCMSとはさまざまな面で異なります。

WordPressとmicroCMSには以下のような違いがあります。

WordPressとmicroCMSはそれぞれ異なる特性や強みを持っています。
選択する際はプロジェクトの目的やニーズ、開発環境などを総合的に考慮して利用しましょう。

microCMSの導入事例

弊社では、さまざまなヘッドレスCMSを使ったWebサイトやシステム構築を行っています。
その中で今回ご紹介しているmicroCMSについても社内のWebサイトに適用してみました。

わかりやすくLPに実装してみたので、その様子をレポートしたいと思います。
以下がMicroCMSの無料プランの管理画面です。

以下が生成されたページです。

今回の構成には、以下3つのサービスを利用して実装しています。

Vercelの連携手順については動画で解説しています。

Vercelは、個人的かつ非営利の目的でのみ無料アカウントを適用できます。
営利が発生する場合は有償プランを用意しましょう。

また、Vercelのアカウントは、連携するGitHubやBitbuckeアカウントでの登録・ログインがおすすめです。
microCMSとVercelは、Webhook連携ができるようになっているので、簡単に導入することができます。

環境構築については、資料もご用意があります。

株式会社Wakka Inc.

ヘッドレスCMSのサーバー準備ガイド

今回の事例の構成を簡単に図解しました。

Webサイト管理者は、microCMSにログインしてコンテンツの更新を行います。
開発者は、GitHubやBitbucketのリポジトリにNext.jsで開発したテンプレートをアップします。

microCMSでコンテンツが更新されたら、APIを通してVercelに通知されます。
VercelがBitbucketのリポジトリから最新のテンプレートをリクエストし、Bitbucketはソースコードを再構築してVercelに渡します。Vercelはそれを受け取って、静的なページを配信してホスティングします。

一般のサイト訪問者はVercelにホスティングされた静的なページを閲覧するため、表示が速く、またバックエンドが分離しているために高セキュリティというわけです。

microCMSの開発はパートナー企業のWakka Inc.へ

国産のヘッドレスCMSであるmicroCMSは、APIベースであるため、高いカスタマイズ性と効率性を持ち合わせています。
日本語に対応しているうえに、直感的なUIなので、操作性が高い点も魅力です。

さらにWebhookなどを利用すれば、既存のシステムと連携して、情報共有や開発の速度をより高められます。

一方、microCMSのようなヘッドレスCMSはノウハウがなければ使いこなせない点が難点です。
そのため、ノウハウを持つ人材がいなければ、適切な運用ができない恐れがあります。

もしmicroCMSの導入を検討しているなら、ぜひWakkaにご相談ください。
WakkaはmicroCMSのパートナー企業であり、最適なコンテンツ管理ソリューションを提供できます。また、microCMSを利用したWeb制作を全面的にサポートするだけでなく、最適なインフラ環境の提供も可能です。

開発会社だからこそ実現できる、クライアントに寄り添ったサポートが弊社の強みです。
ご興味を持たれた際は、ぜひ弊社の資料をダウンロードしてください。

ヘッドレスCMSの選定にお悩みの方へ。
自社に必要なヘッドレスCMSがわかる下記資料もぜひご確認ください。

独自選定の代表的なヘッドレスCMSの特徴をもとに、誰でもヘッドレスCMSの選定ができるポイントを押さえた資料を作成しました。