Astro × microCMS でコーポレートサイトを構築する手順

「WordPressは重い」「セキュリティが心配」「デザインの自由度が低い」——コーポレートサイトのCMS選びで、こんな悩みを抱えていませんか？そうした課題を一気に解決するのが、Astro × microCMS の組み合わせです。

Astroは静的サイトジェネレーター（SSG）として、ビルド時にすべてのHTMLを事前生成します。microCMSは日本語UIで使いやすい国産ヘッドレスCMSで、ノーコードでコンテンツ管理ができます。両者を組み合わせることで、表示が爆速・セキュリティが高い・非エンジニアでも更新できるコーポレートサイトが実現します。

本記事では、Astro + microCMS によるコーポレートサイト構築の全手順を、実際のコード例を交えながら解説します。Jamstackアーキテクチャの基礎をまだ読んでいない方は、先にそちらを参照してください。

---

なぜ Astro × microCMS なのか

Astroが選ばれる理由

Astroは2022年の正式リリース以来、急速にシェアを伸ばしているフロントエンドフレームワークです。最大の特徴は**「デフォルト・ゼロJS」**の哲学。ビルド時にHTMLを事前生成し、インタラクションが不要な部分にはJavaScriptを一切含みません。

コーポレートサイトのような情報発信中心のサイトでは、この設計が大きな強みになります。主な特徴は次のとおりです。

• 高速なページ表示: 静的HTMLを配信するためサーバー処理が不要。Core Web Vitalsのスコアが向上しやすい
• シンプルな記述: .astro ファイルにHTML・CSS・JavaScriptをまとめて書けるコンポーネント設計
• フレームワーク非依存: React・Vue・Svelteなど複数のUIフレームワークを混在して使える
• TypeScript標準対応: 型安全な開発がデフォルトで可能

microCMSが選ばれる理由

microCMSは国産のヘッドレスCMSで、管理画面が完全日本語対応です。コンテンツをAPIで配信する設計のため、フロントエンド側の技術スタックに縛られません。

• 日本語UIで直感的な操作: 非エンジニアでもコンテンツ更新が容易
• 柔軟なスキーマ定義: テキスト・画像・リッチエディター・繰り返しフィールドなど多様なフィールドを設定可能
• 無料プランあり: 月3APIまで無料。小規模サイトなら費用ゼロで開始できる
• Webhookによる自動ビルド: コンテンツ更新時にビルドをトリガーし、サイトを自動的に最新化

---

アーキテクチャの全体像

Astro × microCMSによるコーポレートサイトの構成は以下のようになります。

┌─────────────────────────────────────────────────────┐
│                  開発・運用フロー                       │
│                                                     │
│  ┌──────────────┐   コンテンツ編集   ┌─────────────┐ │
│  │  担当者（非エンジニア）│ ──────────► │  microCMS   │ │
│  └──────────────┘              │  管理画面   │ │
│                                └──────┬──────┘ │
│                                       │ Webhook   │
│  ┌──────────────┐  git push   ┌───────▼──────┐  │
│  │  開発者        │ ──────────► │  CI/CDパイプライン │  │
│  └──────────────┘              │ (GitHub Actions)│  │
│                                └───────┬──────┘  │
│                                        │ ビルド    │
│                              ┌─────────▼──────┐   │
│                              │  Astro (SSG)   │   │
│                              │  静的HTML生成  │   │
│                              └─────────┬──────┘   │
│                                        │ デプロイ  │
│                              ┌─────────▼──────┐   │
│                              │  CDN配信        │   │
│                              │ (GCS/Vercel等)  │   │
│                              └────────────────┘   │
└─────────────────────────────────────────────────────┘

ビルド時にAstroがmicroCMSのAPIからコンテンツを取得し、静的HTMLとして生成します。生成されたファイルをCDNに配置することで、高速かつセキュアな配信が実現します。

---

Step 1: 環境構築とパッケージインストール

まずAstroプロジェクトを作成します。

# Astroプロジェクトの作成
npm create astro@latest my-corporate-site
cd my-corporate-site

# microCMS SDKのインストール
npm install microcms-js-sdk

# 開発サーバーの起動確認
npm run dev

プロジェクト作成時のセットアップウィザードでは、以下を選択するとよいでしょう。

• テンプレート: Empty（空のプロジェクト）または Blog（ブログテンプレート）
• TypeScript: Yes（型安全のために推奨）
• インテグレーション: 後から追加可能なので任意

環境変数の設定

microCMSのAPIキーを安全に管理するため、.env ファイルに記述します。

# .env
MICROCMS_SERVICE_DOMAIN=your-service-domain
MICROCMS_API_KEY=your-api-key

.env ファイルは必ず .gitignore に追加してください。APIキーがGitHubに公開されると、コンテンツが不正操作されるリスクがあります。

---

Step 2: microCMS でコンテンツスキーマを設計する

microCMSの管理画面でAPIを作成します。コーポレートサイトでよく使うAPIの例を紹介します。

ニュース（お知らせ）API

管理画面から「API追加」→「リスト形式」を選択し、以下のフィールドを設定します。

フィールド名	フィールドID	フィールドの種類
タイトル	title	テキストフィールド
本文	body	リッチエディター
カテゴリ	category	セレクトフィールド
サムネイル	thumbnail	画像
公開日	publishedAt	日時

メンバー紹介API

フィールド名	フィールドID	フィールドの種類
氏名	name	テキストフィールド
役職	role	テキストフィールド
プロフィール	bio	テキストエリア
写真	photo	画像

スキーマ設計のポイントは、「誰が更新するか」を意識することです。非エンジニアが更新するフィールドは、リッチエディターやセレクトボックスを活用し、入力ミスを防ぐ設計にしましょう。

---

Step 3: microCMS クライアントを設定する

src/lib/microcms.ts にAPIクライアントを定義します。

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

// 型定義
export type News = {
  id: string;
  title: string;
  body: string;
  category: string;
  thumbnail?: {
    url: string;
    width: number;
    height: number;
  };
  publishedAt: string;
  createdAt: string;
  updatedAt: string;
};

export type Member = {
  id: string;
  name: string;
  role: string;
  bio: string;
  photo?: {
    url: string;
    width: number;
    height: number;
  };
};

// クライアントの初期化
export const client = createClient({
  serviceDomain: import.meta.env.MICROCMS_SERVICE_DOMAIN,
  apiKey: import.meta.env.MICROCMS_API_KEY,
});

// ニュース一覧の取得
export const getNewsList = async (limit = 10) => {
  return client.getList<News>({
    endpoint: 'news',
    queries: {
      limit,
      orders: '-publishedAt', // 新しい順
    },
  });
};

// ニュース詳細の取得
export const getNewsDetail = async (contentId: string) => {
  return client.getListDetail<News>({
    endpoint: 'news',
    contentId,
  });
};

// メンバー一覧の取得
export const getMemberList = async () => {
  return client.getList<Member>({
    endpoint: 'members',
    queries: { limit: 100 },
  });
};

import.meta.env はAstroの環境変数アクセス方法です。process.env ではなく、必ずこの形式を使います。

---

Step 4: Astroコンポーネントでデータを取得・表示する

Astroコンポーネントのフロントマター（--- で囲まれた部分）でAPIを呼び出し、テンプレート部分でレンダリングします。

ニュース一覧ページ（src/pages/news/index.astro）

---
import Layout from '../../layouts/Layout.astro';
import { getNewsList } from '../../lib/microcms';

// ビルド時にAPIを呼び出す
const { contents: newsList } = await getNewsList(20);
---

<Layout title="ニュース | 会社名">
  <main>
    <h1>ニュース</h1>
    <ul class="news-list">
      {newsList.map((news) => (
        <li class="news-item">
          <a href={`/news/${news.id}/`}>
            <time datetime={news.publishedAt}>
              {new Date(news.publishedAt).toLocaleDateString('ja-JP')}
            </time>
            <span class="category">{news.category}</span>
            <span class="title">{news.title}</span>
          </a>
        </li>
      ))}
    </ul>
  </main>
</Layout>

動的ルーティングによるニュース詳細ページ（src/pages/news/[id].astro）

---
import Layout from '../../layouts/Layout.astro';
import { getNewsList, getNewsDetail } from '../../lib/microcms';

// 静的生成に必要なIDを全件取得
export const getStaticPaths = async () => {
  const { contents } = await getNewsList(100);
  return contents.map((news) => ({
    params: { id: news.id },
  }));
};

// 個別ページのデータ取得
const { id } = Astro.params;
const news = await getNewsDetail(id!);
---

<Layout title={`${news.title} | ニュース`}>
  <article>
    <header>
      <time datetime={news.publishedAt}>
        {new Date(news.publishedAt).toLocaleDateString('ja-JP')}
      </time>
      <h1>{news.title}</h1>
    </header>
    <div class="body" set:html={news.body} />
  </article>
</Layout>

getStaticPaths はAstroの重要な概念です。動的ルート（[id].astro）を静的生成するために必要な関数で、ビルド時にすべてのIDを取得し、それぞれのHTMLを事前生成します。パンくずリストの実装方法と組み合わせると、ナビゲーション体験もさらに向上します。

---

Step 5: Astro 5 のコンテンツローダーを活用する（応用編）

Astro 5以降では、**コンテンツローダー（Content Loader）**という新機能が追加され、外部CMSのデータをAstroのコンテンツコレクションとして扱えるようになりました。これにより、型安全性と開発体験がさらに向上します。

// src/content/config.ts
import { defineCollection, z } from 'astro:content';
import { createClient } from 'microcms-js-sdk';

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

const news = defineCollection({
  loader: async () => {
    const { contents } = await client.getList({
      endpoint: 'news',
      queries: { limit: 100 },
    });
    // idフィールドが必須
    return contents.map((item) => ({ ...item, id: item.id }));
  },
  schema: z.object({
    title: z.string(),
    body: z.string(),
    category: z.string(),
    publishedAt: z.string(),
  }),
});

export const collections = { news };

コンテンツローダーを使うと、ページコンポーネント内でのAPI呼び出しが不要になり、getCollection('news') でデータを取得できます。型チェックもスキーマ定義に基づいて自動で行われるため、実装ミスを早期に検出できます。

---

Step 6: コンテンツ更新時の自動ビルドを設定する

microCMSのWebhookとGitHub Actionsを組み合わせることで、コンテンツを更新するたびにサイトが自動でビルド・デプロイされます。

GitHub Actionsワークフロー（.github/workflows/deploy.yml）

name: Deploy on microCMS Update

on:
  push:
    branches: [main]
  repository_dispatch:
    types: [microcms-update]  # Webhookで発火

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'

      - name: Install dependencies
        run: npm ci

      - name: Build
        env:
          MICROCMS_SERVICE_DOMAIN: ${{ secrets.MICROCMS_SERVICE_DOMAIN }}
          MICROCMS_API_KEY: ${{ secrets.MICROCMS_API_KEY }}
        run: npm run build

      - name: Deploy to GCS
        uses: google-github-actions/upload-cloud-storage@v2
        with:
          path: dist
          destination: your-bucket-name

microCMSの管理画面から「Webhook設定」→「GitHub」を選択し、repository_dispatch イベントとして登録します。これにより、担当者がmicroCMSでニュースを公開した瞬間に、自動でビルド・デプロイが走る運用フローが完成します。

---

よくある実装上の落とし穴と対策

落とし穴1: APIレート制限によるビルド失敗

microCMSの無料プランはAPIコール数に上限があります。コンテンツ件数が多い場合、ビルド時のAPIコールが制限を超えてエラーになることがあります。

対策: getList の limit パラメータは最大100件。件数が多い場合は offset を使ってページネーションしながら全件取得するユーティリティ関数を用意しましょう。

// 全件取得のユーティリティ
export const getAllContents = async <T>(endpoint: string): Promise<T[]> => {
  const first = await client.getList<T>({ endpoint, queries: { limit: 1 } });
  const totalCount = first.totalCount;
  const { contents } = await client.getList<T>({
    endpoint,
    queries: { limit: totalCount },
  });
  return contents;
};

落とし穴2: リッチエディターのHTMLサニタイジング

microCMSのリッチエディターから取得したHTMLを set:html で直接レンダリングする場合、外部リンクへの target="_blank" 付与や、不要なタグの除去が必要になることがあります。

対策: cheerio ライブラリを使ってHTMLをパース・加工してから出力する方法が有効です。

落とし穴3: ドラフト記事のプレビュー

公開前のコンテンツをプレビューするには、microCMSの「下書きキー」をクエリパラメータで渡す必要があります。AstroのSSGモードではビルド後のURLが固定されるため、プレビュー機能はSSR（output: 'server'）またはISR（Incremental Static Regeneration）を活用する構成が必要です。

---

まとめ：Astro × microCMSが向いているサイト

Astro × microCMSの構成は、次のようなサイトに特に適しています。

• 更新頻度が低〜中程度のコーポレートサイト: ニュース・メンバー・実績紹介など定型コンテンツが中心
• 表示速度を重視するサイト: Core Web Vitalsの改善、SEOへの投資対効果を高めたい場合
• 非エンジニアが日常的に更新するサイト: microCMSの日本語管理画面が大きな強みになる
• 将来的な設計変更を見越したサイト: ヘッドレス構成のため、フロントエンドを丸ごと刷新しても既存コンテンツはそのまま使い回せる

一方で、ECサイトや会員機能など動的な処理が多いサービスには向いていません。そうした場合はAstroのSSRモードやNext.jsなど、別のフレームワーク選定が必要です。

自社のコーポレートサイトにAstro × microCMSの導入を検討されている方は、ぜひお気軽にご相談ください。

---