2025年7月28日 / 最終更新日 : 2025年7月28日 fujifuji コラム

microCMSとは？使い方から実装まで完全解説【2025年版】

 

microCMSの基本概要

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

microCMSの主な特徴

日本語完全対応

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

開発者フレンドリー

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

高いパフォーマンス

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

microCMSの料金プラン

microCMSは柔軟な料金体系を提供しています：

Hobbyプラン

  • 月額：無料
  • API呼び出し：10,000回/月
  • ストレージ：1GB
  • 基本機能のみ

Starterプラン

  • 月額：¥980
  • API呼び出し：50,000回/月
  • ストレージ：5GB
  • 独自ドメイン対応

Teamプラン

  • 月額：¥4,900
  • API呼び出し：250,000回/月
  • ストレージ：25GB
  • チーム機能、権限管理

Businessプラン

  • 月額：¥19,800
  • API呼び出し：1,000,000回/月
  • ストレージ：100GB
  • 高度なセキュリティ機能

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'
  }
});

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サイトを実現できるでしょう。

■プロンプトだけでオリジナルアプリを開発・公開してみた！！

プロンプトだけでオリジナルアプリを開発・公開してみた！！

■AI時代の第一歩！「AI駆動開発コース」はじめました！

テックジム東京本校で先行開始。

AI時代の第一歩！「AI駆動開発コース」（初心者向け）

■テックジム東京本校

「武田塾」のプログラミング版といえば「テックジム」。
講義動画なし、教科書なし。「進捗管理とコーチング」で効率学習。
より早く、より安く、しかも対面型のプログラミングスクールです。

テックジム東京本校

＜短期講習＞5日で5万円の「Pythonミニキャンプ」開催中。

独学もオンラインも無理だから、有給とって「Pythonミニキャンプ」へ【5日間で5万円】

＜月1開催＞放送作家による映像ディレクター養成講座

現役放送作家が教える動画講座！『ＤＯＧＡ』

＜オンライン無料＞ゼロから始めるPython爆速講座

ゼロから始めるPython爆速講座（理系・プログラミング初心者向け）

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

カテゴリー
コラム
コラム

前の記事

Whisper APIとは？使い方から実装まで完全解説
2025年7月28日
注目企業・注目ベンチャー

次の記事

スプレッドサイトとは？Googleスプレッドシートをサイトに変換する方法【2025年版】
2025年7月28日