2026年10月2日 / 最終更新日 : 2026年10月2日 fujifuji コラム

microCMSとは？料金プランとAPIのクエリパラメータを公式で確認【2026年10月版】

microCMSは、日本発のヘッドレスCMSサービスです。2019年にリリースされ、開発者にとって使いやすいAPI設計と直感的な管理画面で急速に普及しています。従来のWordPressなどと異なり、コンテンツ管理とフロントエンドを分離することで、より柔軟で高速なWebサイト構築を可能にします。

microCMSの基本概要

microCMSの主な特徴

日本語完全対応

  • 管理画面が完全日本語化
  • 日本のビジネス慣習に適した機能設計
  • 日本時間でのサポート対応

開発者フレンドリー

  • REST API / GraphQL API対応
  • Webhook機能によるリアルタイム連携
  • 豊富なSDKとテンプレート

高いパフォーマンス

  • CDNによる高速配信
  • 自動スケーリング対応
  • 99.9%のアップタイム保証

microCMSの料金プラン（2026年10月2日時点）

microCMSの料金ページに掲載されている内容です。表示価格はすべて税抜です。

プラン月額データ転送量メンバー数API数
Hobby0円20GB/月3人5
Team4,900円〜200GB/月3人（追加1人 1,200円）10（追加1つ 2,000円）
Business75,000円〜1TB/月20人（追加1人 1,200円）30（追加1つ 2,000円）
Enterpriseお見積もり1TB以上50人以上50

APIリクエスト数は全プランで「無制限」です。制限がかかるのはデータ転送量・メンバー数・API数の3つです。

ここは誤解されやすい点です。「API呼び出し回数が月◯万回まで」という古い情報が他の記事に残っていますが、現在の制限は呼び出し回数ではなく転送量です。画像を多く配信するサイトでは、アクセス数が少なくても転送量が先に上限へ届きます。

どのプランを選ぶかの目安

  • 個人のブログ・ポートフォリオ → Hobby。APIが5つ、メンバー3人、転送20GB/月で足りることが多い
  • 小規模なコーポレートサイト・メディア → Team。APIを10個まで作れるので、お知らせ・事例・採用などを分けられる
  • 転送量が増える、または社内で多人数が編集する → Business。HobbyとTeamの差（4,900円）に比べ、TeamとBusinessの差が大きいので、どちらに入るかを先に見積もる

金額は改定されます。契約前に必ず公式の料金ページで現在の内容を確認してください。

microCMSの基本的な使い方

1. アカウント作成とサービス設定

microCMS公式サイトでアカウントを作成し、新しいサービスを立ち上げます。サービス名とAPIの設定を行います。

2. スキーマ（データ構造）の定義

コンテンツの構造を定義します。ブログの場合、以下のようなフィールドを設定します：

  • タイトル（テキスト）
  • 本文（リッチエディタ）
  • アイキャッチ画像（画像）
  • 公開日（日時）
  • カテゴリー（選択）

3. コンテンツの作成と管理

定義したスキーマに基づいて、実際のコンテンツを作成・編集します。プレビュー機能で確認しながら作業できます。

microCMS APIの基本的な使い方

REST APIでのデータ取得

JavaScript（Fetch API）

const apiKey = 'YOUR_API_KEY';
const serviceDomain = 'YOUR_SERVICE_DOMAIN';

// ブログ記事一覧を取得
const response = await fetch(
  `https://${serviceDomain}.microcms.io/api/v1/blogs`,
  {
    headers: { 'X-MICROCMS-API-KEY': apiKey }
  }
);
const data = await response.json();
console.log(data.contents);

Next.js での実装例

// pages/blog/index.js
import { client } from '../../lib/microcms';

export default function BlogList({ blogs }) {
  return (
    <div>
      {blogs.map(blog => (
        <article key={blog.id}>
          <h2>{blog.title}</h2>
          <p>{blog.summary}</p>
        </article>
      ))}
    </div>
  );
}

export async function getStaticProps() {
  const data = await client.get({ endpoint: 'blogs' });
  return { props: { blogs: data.contents } };
}

microCMS SDK for JavaScript

import { createClient } from 'microcms-js-sdk';

const client = createClient({
  serviceDomain: 'your-service-domain',
  apiKey: 'YOUR_API_KEY',
});

// データ取得
const response = await client.get({
  endpoint: 'blogs',
  queries: {
    limit: 10,
    filters: 'category[equals]tech'
  }
});

記事詳細の取得

// 特定の記事を取得
const blog = await client.get({
  endpoint: 'blogs',
  contentId: 'article-id-123'
});

console.log(blog.title);
console.log(blog.content);

検索機能の実装

// 全文検索
const searchResults = await client.get({
  endpoint: 'blogs',
  queries: {
    q: 'Next.js',
    limit: 5,
    fields: 'id,title,publishedAt'
  }
});

一覧取得で使うクエリパラメータ一覧

公式ドキュメント（コンテンツ一覧の取得）で確認した、よく使うパラメータです。

パラメータ役割補足
q全文検索キーワードで複数のフィールドを横断して検索する
filters条件で絞り込むequals contains less_than greater_than などの演算子が使える
limit取得件数既定10・上限100
offset取得を開始する位置をずらすページ送りに使う
orders並び順フィールド名を指定。先頭に - を付けると降順
fields取得するフィールドを絞る転送量を減らせる
idsIDを指定して取得カンマ区切り
depth参照先をどこまで展開するか0〜3
draftKey下書きを取得するプレビュー画面で使う

全文検索は q、条件指定は filters

この2つは役割が違います。キーワードで探すのが q、「このカテゴリだけ」のように条件で絞るのが filters です。

# キーワードで全文検索
GET /api/v1/blog?q=Python

# カテゴリが一致するものだけ
GET /api/v1/blog?filters=category[equals]cat_1

# 両方を組み合わせる
GET /api/v1/blog?q=Python&filters=category[equals]cat_1

# 新しい順に20件、必要なフィールドだけ
GET /api/v1/blog?orders=-publishedAt&limit=20&fields=id,title,publishedAt

limitの上限が100であることの影響

limit の上限は100です。それ以上の件数を一度に取ることはできません。全件を取得したい場合は offset を使って繰り返し呼ぶ必要があります。

# 全件取得のイメージ（擬似コード）
offset = 0
while True:
    res = get("/api/v1/blog", limit=100, offset=offset)
    if not res["contents"]:
        break
    yield from res["contents"]
    offset += 100

ビルド時に全件を取りに行く静的サイトでは、記事が100件を超えた時点でこのループが必要になります。最初に1回だけ取る実装にしていると、101件目から静かに欠けます。

fieldsで転送量を抑える

料金の制限が転送量である以上、fields で必要な項目だけを取るのは費用に直結します。一覧ページで本文まで取得していないか確認してください。一覧に必要なのは通常 id・タイトル・日付・サムネイルだけです。

GraphQL APIの活用

const query = `
  query {
    blogs(limit: 10) {
      contents {
        id
        title
        content
        publishedAt
        category {
          name
        }
      }
    }
  }
`;

const response = await fetch(`https://${serviceDomain}.microcms.io/api/v1/graphql`, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'X-MICROCMS-API-KEY': apiKey
  },
  body: JSON.stringify({ query })
});

人気フレームワークとの連携

Next.js + microCMS

// lib/microcms.js
import { createClient } from 'microcms-js-sdk';

export const client = createClient({
  serviceDomain: process.env.MICROCMS_SERVICE_DOMAIN,
  apiKey: process.env.MICROCMS_API_KEY,
});

// ISR（Incremental Static Regeneration）対応
export async function getStaticProps() {
  const data = await client.get({ endpoint: 'blogs' });
  return {
    props: { blogs: data.contents },
    revalidate: 60 // 60秒ごとに再生成
  };
}

Nuxt.js + microCMS

// nuxt.config.js
export default {
  modules: ['@nuxtjs/axios'],
  privateRuntimeConfig: {
    microCmsApiKey: process.env.MICROCMS_API_KEY
  },
  publicRuntimeConfig: {
    microCmsServiceDomain: process.env.MICROCMS_SERVICE_DOMAIN
  }
}

// pages/blog/index.vue
export default {
  async asyncData({ $config, $axios }) {
    const { data } = await $axios.get(
      `https://${$config.microCmsServiceDomain}.microcms.io/api/v1/blogs`,
      {
        headers: { 'X-MICROCMS-API-KEY': $config.microCmsApiKey }
      }
    );
    return { blogs: data.contents };
  }
}

Gatsby + microCMS

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: 'gatsby-source-microcms',
      options: {
        apiKey: process.env.MICROCMS_API_KEY,
        serviceId: process.env.MICROCMS_SERVICE_DOMAIN,
        apis: [{
          endpoint: 'blogs',
        }],
      },
    },
  ],
}

// src/pages/blog.js
export const query = graphql`
  query {
    allMicrocmsBlogs {
      nodes {
        id
        title
        content
        publishedAt
      }
    }
  }
`;

Webhook機能の活用

Vercelとの自動デプロイ連携

// pages/api/webhook.js
export default function handler(req, res) {
  if (req.method === 'POST') {
    // Vercelの再デプロイをトリガー
    fetch(process.env.VERCEL_DEPLOY_HOOK_URL, {
      method: 'POST'
    });
    
    res.status(200).json({ message: 'Deploy triggered' });
  }
}

Slack通知の実装

// コンテンツ公開時にSlack通知
export default async function handler(req, res) {
  const { type, contents } = req.body;
  
  if (type === 'publish') {
    await fetch(process.env.SLACK_WEBHOOK_URL, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        text: `新しい記事が公開されました: ${contents.new.title}`
      })
    });
  }
  
  res.status(200).json({ status: 'ok' });
}

microCMSの活用事例

企業サイト・コーポレートサイト

企業情報、ニュース、採用情報などを効率的に管理できます。非エンジニアのマーケティング担当者でも簡単にコンテンツを更新可能です。

ブログ・メディアサイト

記事の作成から公開まで、シームレスなワークフローを構築できます。SEO設定やカテゴリー管理も直感的に行えます。

ECサイトの商品管理

商品情報、在庫管理、キャンペーン情報などをAPIで管理し、フロントエンドと連携できます。

アプリのコンテンツ配信

モバイルアプリやWebアプリに配信するコンテンツを一元管理し、リアルタイムで更新できます。

microCMSと他CMSの比較

vs WordPress

  • microCMS: ヘッドレス構成、高速、セキュア
  • WordPress: 豊富なプラグイン、大きなコミュニティ

vs Contentful

  • microCMS: 日本語対応、コストパフォーマンス
  • Contentful: グローバル対応、高機能

vs Strapi

  • microCMS: マネージドサービス、メンテナンス不要
  • Strapi: オープンソース、カスタマイズ性が高い

SEO対策とパフォーマンス最適化

メタタグの動的生成

// Next.js でのSEO対策
import Head from 'next/head';

export default function BlogPost({ blog }) {
  return (
    <>
      <Head>
        <title>{blog.title}</title>
        <meta name="description" content={blog.summary} />
        <meta property="og:title" content={blog.title} />
        <meta property="og:image" content={blog.eyecatch?.url} />
      </Head>
      <article>
        <h1>{blog.title}</h1>
        <div dangerouslySetInnerHTML={{ __html: blog.content }} />
      </article>
    </>
  );
}

画像最適化

// Next.js Image コンポーネントとの連携
import Image from 'next/image';

export default function BlogCard({ blog }) {
  return (
    <div>
      <Image
        src={blog.eyecatch.url}
        alt={blog.title}
        width={blog.eyecatch.width}
        height={blog.eyecatch.height}
        priority
      />
      <h2>{blog.title}</h2>
    </div>
  );
}

セキュリティとベストプラクティス

APIキーの適切な管理

  • 環境変数での管理（.env.local）
  • フロントエンドでの直接使用を避ける
  • 定期的なAPIキーのローテーション

キャッシュ戦略

// SWRを使用したキャッシュ戦略
import useSWR from 'swr';

function BlogList() {
  const { data, error } = useSWR('/api/blogs', fetcher, {
    revalidateOnFocus: false,
    revalidateOnReconnect: false
  });
  
  if (error) return <div>エラーが発生しました</div>;
  if (!data) return <div>読み込み中...</div>;
  
  return <BlogCards blogs={data.contents} />;
}

トラブルシューティング

よくある問題と解決方法

CORS エラー

  • 解決策：APIはサーバーサイドで呼び出す、プロキシ設定

API制限エラー

  • 解決策：適切なキャッシュ戦略の実装、プラン見直し

画像が表示されない

  • 解決策：Next.js設定でmicroCMSドメインを許可

ビルドエラー

  • 解決策：環境変数の設定確認、API接続テスト

関連記事

あわせて読むと理解が深まります。

まとめ

microCMSは、日本の開発者にとって非常に使いやすいヘッドレスCMSです。直感的な管理画面と豊富なAPI機能により、高品質なWebサイトを効率的に構築できます。

Next.jsやNuxt.jsなどのモダンフレームワークとの親和性も高く、JAMstack構成でのWebサイト開発に最適です。無料プランから始められるため、まずは小規模なプロジェクトで試してみることをおすすめします。

適切な実装とキャッシュ戦略により、高速で保守性の高いWebサイトを実現できるでしょう。

学習の進め方全体はプログラミング勉強法完全ガイドにまとめています。

プログラミング学習に興味がある方は、まずは無料体験会へ

無料体験会・お申し込みはこちら

プログラミング学習に関するお役立ちコンテンツ

カテゴリー
コラム
コラム
営業リスト作成ツール9製品を比較｜無料でできる範囲と法律上の注意【2026年10月確認】

前の記事

営業リスト作成ツール9製品を比較｜無料でできる範囲と法律上の注意【2026年10月確認】
2026年10月2日
コラム
Vercelの使い方｜GitHubから公開する手順と無料Hobbyプランが商用利用できない理由

次の記事

Vercelの使い方｜GitHubから公開する手順と無料Hobbyプランが商用利用できない理由
2026年10月2日