国産ヘッドレスCMSの雄、microCMSの特徴と導入事例
こんにちは。Webディレクターの安藤です。
Webサイトやアプリには、コンテンツを管理するシステムとしてCMSが存在します。CMSがあることにより、技術者ではない方でも簡単にサイト・アプリ上の情報を更新したり、新しいページを追加したり、ブログ記事を投稿することができます。
従来からこのCMSにはさまざまな種類が世界中で開発されてきましたが、今回取り上げるのはヘッドレスCMSというジャンルです。さらに日本では数少ない国産のクラウド型ヘッドレスCMSとして有名な「microCMS」をご紹介します。当社にて導入した流れや、手順などもあわせて記載していきます。
Web制作会社のディレクターや営業職の方向け。
ヘッドレスCMSの開発基本フローを解説。制作の提案準備や事前準備などに。
ヘッドレスCMSと従来CMSの違いや、開発するための基本フローなどを掲載しています。クライアントにヘッドレスCMSを提案する場合にぜひご活用ください。
microCMSについて
ヘッドレスCMS普及の背景
近年、Web技術の急速な進化により、ユーザーの求める体験も高度化しており、従来のCMSでは対応しきれない要求が増えてきたことから、新しいタイプのCMS、ヘッドレスCMSが注目を浴びるようになりました。そして、その中でも数少ない国産のヘッドレスCMSとして、多くの開発者や企業に支持されているのがmicroCMSです。
microCMSの特徴
シンプルで直感的なUIが特徴のmicroCMSの管理画面は、非技術者の方でも迷うことなく使用できるように設計されています。これにより、企業のマーケティング部門やPR部門といった一般的な編集者も簡単にコンテンツを作成・編集することができます。
また、APIベースのコンテンツ配信が可能なmicroCMSは、APIを介してコンテンツを提供することにより、React、Vueといったモダンなフロントエンド技術と組み合わせることが容易になります。
リンクカード：モダンなフロントエンド技術
さらに、国産CMSであるため、日本語のサポートが大変充実しており、そうした背景から、日本のビジネス文化やニーズに合わせた機能展開も行われ、結果多くの日系企業に選ばれています。
利用シーン
小規模なWebサイトからオウンドメディア、さらにはスマートフォンアプリやデジタルサイネージといった様々なプラットフォームでの利用が可能で、モダンなフロントエンド技術と組み合わせたSPA（Single Page Application）の開発などにもmicroCMSは相性が良いです。
プランと機能
microCMSはその手軽さと柔軟性から多くの方に支持されていますが、実際にどのようなプランが提供されているのか、またそれぞれのプランにどのような機能が付随しているのかを以下で見ていきましょう。
Hobby
月額は無料。
API数は3つまで。
これは、例えばブログ記事、ニュース、商品情報といった異なる種類のコンテンツタイプを最大3つまで作成できることを意味します。メンバーは3名まで。APIコール数は無制限です。
Team
月額：4,900円〜
API数：10(追加可能)
メンバー数：3名(追加可能)
APIリクエスト数：無制限
Business
月額：63,000円〜
API数：30(追加可能)
メンバー数：20名(追加可能)
APIコール数: 制限なし。
その他：権限管理やIP制限、カスタムステータスといった管理機能が利用できます。
Advanced
Businessプランの全機能に以下の内容が付与されます。
50名のメンバー（追加可能）
50個のAPI（追加可能）
監査ログ
2要素認証の必須化
カスタムドメイン
請求書でのお支払い
シングルサインオン（SAML）
料金プランのまとめ
microCMSのプランは、趣味ブログから大企業のコーポレートサイト、大規模なECサイトまで、さまざまなニーズに応じて選択できます。重要なのは自分のプロジェクトやビジネスの規模と要件を把握し、最も適したプランを選択することです。プランに応じてmicroCMSの機能を最大限に活用しましょう。
Web制作会社のディレクターや営業職の方向け。
ヘッドレスCMSの開発基本フローを解説。制作の提案準備や事前準備などに。
ヘッドレスCMSと従来CMSの違いや、開発するための基本フローなどを掲載しています。クライアントにヘッドレスCMSを提案する場合にぜひご活用ください。
WordPressとの違い
Webサイトやブログを構築する際の選択肢として、世界的に長らく「WordPress」が主流となっていました。今回紹介しているmicroCMSは昨今のニーズに合わせて登場したヘッドレスCMSです。それぞれの特徴や利点を理解することで、どちらを選択すべきかの判断が容易になります。
システム構造
WordPressは従来型のCMSとして、フロントエンド(表示部分)とバックエンド(データ管理部分)が一体となっています。これにより、テーマやプラグインを使用してデザインや機能を追加することが可能です。
対するmicroCMSは、ヘッドレスCMSとして、フロントエンドとバックエンドが分離しています。APIを通じてコンテンツを取得するため、様々なデバイスやフロントエンド技術でコンテンツの表示や操作が可能です。
柔軟性
WordPress：世界中の開発者が作成したテーマやプラグインを利用できるため、様々な機能を追加することが容易です。ただし、プラグインを多用するとサイトの速度やセキュリティに影響が出る場合があります。
microCMS：APIベースのため、どのようなフロントエンドの技術スタックとも組み合わせることができます。これにより、最新のWeb技術やフレームワークを取り入れた開発が可能となります。
セキュリティ
WordPress：世界で最も普及しているCMSのため、攻撃のターゲットとなりやすく定期的なアップデートやセキュリティ対策が必須です。
microCMS：ヘッドレスな構造のため、バックエンドが露出されずシステムへの直接的なアクセスは制限されています。これにより、セキュリティリスクは軽減されています。
開発速度
WordPress：簡易的なサイト構築では非常にスピーディに立ち上げが可能です。ただしカスタマイズが必要な場合はテーマやプラグインの調整が必要となり、開発工数が大幅に伸びる場合があります。
microCMS: モダンな開発フローをサポートしており、特にヘッドレスCMSとしての特性を生かした開発では、迅速なプロトタイピングやデプロイが可能です。ただしフロントエンド開発の知識や技術が必要となるため、仕様や開発する人員の技量によって開発速度が左右されやすくなります。
WordPressとmicroCMSはそれぞれ異なる特性や強みを持っています。選択する際はプロジェクトの目的やニーズ、開発環境などを総合的に考慮して利用しましょう。
実際の導入事例
弊社では、様々なヘッドレスCMSを使ったWebサイトやシステム構築を行っています。その中で今回ご紹介しているmicroCMSについても社内のWebサイトに適用してみました。わかりやすくLPに実装してみたので、その様子をレポートしたいと思います。
実装環境
こちらがMicro CMSの管理画面です。
無料プランを使っています。
以下が生成されたページです。
今回の構成には、以下3つのサービスを利用して実装しています。
1. microCMS：CMS及びバックエンドサーバー
2. GitHubやBituccket：フロントエンドのテンプレート
3. Vercel：フロントエンドサーバー（webサイトのホスティング）
Vercelの連携手順については動画で解説しています。
Vercelは、個人的かつ非営利な目的でのみ無料アカウントを適用できます。
営利が発生する場合は有償プランを用意しましょう。
また、Vercelのアカウントは、連携するGitHubやBitbuckeアカウントでの登録・ログインがおすすめです。
microCMSとVercelは、Webhook連携ができるようになっているので、簡単に導入することができます。
環境構築については、資料もご用意があります。
今回の事例の構成を簡単に図解しました。
Webサイト管理者は、microCMSにログインしてコンテンツの更新を行います。
開発者は、GitHubやBitbucketのリポジトリにNext.jsで開発したテンプレートをアップします。
microCMSでコンテンツが更新されたら、APIを通してVercelに通知されます。
VercelがBitbucketのリポジトリから最新のテンプレートをリクエストし、Bitbucketはソースコードを再構築してVercelに渡します。Vercelはそれを受け取って、静的なページを配信してホスティングします。
一般のサイト訪問者はVercelにホスティングされた静的なページを閲覧するため、表示が速く、またバックエンドが分離しているために高セキュリティというわけです。
まとめ
ヘッドレスCMSとしてのmicroCMSの特徴や、これまで多く利用されてきたCMSであるWordPressとの違い、そして実際の構築・開発事例についてお伝えしました。
ヘッドレスCMSは、モダンなWeb開発のニーズに応えるべく柔軟性とセキュリティを重視した構造を持っています。APIベースでのコンテンツ提供は、さまざまなフロントエンド技術との組み合わせを可能にしました。このような機能をもちながら、日本製であるがゆえにサポートも充実していることがmicroCMSの強みでもあります。
どういったCMSを選択すべきかはプロジェクトの目的や規模、開発のスタイルなど、多岐にわたる要因をもとに判断することとなりますが、microCMSのようなヘッドレスCMSがもたらす新しい流れは、Web関連の開発の未来に大きな影響を与えることは間違いないと言われています。
弊社では、microCMSにはじまり、ヘッドレスCMSについてのお役立ち資料をご用意しています。ご興味があればぜひDLしてみてください。
Web制作会社のディレクターや営業職の方向け。
ヘッドレスCMSの開発基本フローを解説。制作の提案準備や事前準備などに。
ヘッドレスCMSと従来CMSの違いや、開発するための基本フローなどを掲載しています。クライアントにヘッドレスCMSを提案する場合にぜひご活用ください。
学生時代にWebサイトを自作したことがきっかけでWebの世界に。制作会社でデザイン、WordPressテーマ開発の実務を経て、テクニカル・ディレクターとして大規模サイト構築のディレクションを経験。2021年からWakka Inc.の日本拠点でWebディレクターとして参画。最近はブロックエディタになったWordPressをもう一度、勉強しています。
