「コーポレートサイトを Astro でリニューアルしたいが、クライアント側で記事を編集できる CMS を入れたい」「ヘッドレスCMS の月額コストを抑えたい」——4 月以降、こうしたコーポレートサイト受託の相談が増えています。そこに新しい選択肢として登場したのが、Astro が公式 CMS パートナーとして迎え入れた「CloudCannon」です。Git ベースで Markdown ファイルを直接編集できる仕組みを採用しており、Astro Content Collections と相性が抜群。コーポレートサイトのような「記事数 100〜500、編集者 2〜5 名」規模で特に効きます。
本記事では、Astro × CloudCannon を採用するコーポレートサイト受託リニューアルの設計指針と、既存 WordPress / 他ヘッドレスCMS からの移行ステップを整理します。
なぜ「Astro × CloudCannon」が今コーポレートサイト受託に効くのか
Astro は SSG（静的サイト生成）の中で 2026 年現在もっとも勢いのあるフレームワークで、コーポレートサイト受託では既に定番です。しかし「編集者がノンエンジニア」という制約が入ると、Markdown を直接編集してもらうのが難しい場面が出てきます。
これまでは microCMS や Contentful などのヘッドレスCMS をかぶせる構成が主流でしたが、運用コストや学習コストが課題でした。CloudCannon の特徴は次の通りです。
| 観点 | 従来のヘッドレスCMS | CloudCannon |
|---|---|---|
| データ保管 | CMS ベンダー側 DB | Git リポジトリの Markdown |
| 編集 UI | リッチエディタ + API 取得 | リッチエディタ + Git 直書き |
| バージョン管理 | CMS 独自 | Git のコミット履歴 |
| ローカル開発との同期 | API 経由で都度取得 | リポジトリそのもの |
| ベンダーロックイン | 強い | 弱い（Git に全データ残る） |
つまり、「コーポレートサイトの本体は受託側のリポジトリにあり、編集 UI だけ CloudCannon が提供する」という整理になります。受託先が将来的に CMS を変えたくなっても、Markdown ファイル群はそのまま手元に残ります。
アーキテクチャ全体像
弊社が受託案件で標準化している構成は次の通りです。
- コンテンツ層（Git リポジトリ） — Astro Content Collections で管理する Markdown / MDX
- 編集層（CloudCannon） — リッチエディタで Git に直接コミット
- ビルド層（Cloud Build / GitHub Actions） —
astro build→ 静的ファイル生成 - 配信層（GCS / Cloudflare / Vercel） — CDN 経由で世界中に配信
CloudCannon は GitHub / GitLab のリポジトリと同期し、編集者がリッチエディタで保存すると 裏で Git コミットが行われる仕組みです。これによって、エンジニア側はいつもの Pull Request ワークフローに乗せたまま、編集者は Markdown を意識せず使えます。
受託で押さえる 5 つの設計指針
1. Astro Content Collections のスキーマを「編集者が触る前提」で設計する
Astro の src/content/config.ts に Zod スキーマで定義するフィールドが、CloudCannon のフォーム UI に直接マッピングされます。受託初期に決めるのは次の 3 点です。
import { z, defineCollection } from "astro:content";
const newsCollection = defineCollection({
type: "content",
schema: z.object({
title: z.string().max(60),
date: z.date(),
category: z.enum(["プレスリリース", "お知らせ", "イベント"]),
featuredImage: z.string().optional(),
draft: z.boolean().default(true),
}),
});特に重要なのは enum で選択肢を絞ること。フリーテキストにすると編集者によって表記揺れが起き、後段のフィルタが破綻します。
2. プレビュー環境を「編集中ブランチ」単位で立ち上げる
CloudCannon の編集は Git コミットを生成しますが、いきなり main にマージしない運用が安全です。受託案件では次のフローを推奨します。
- 編集者が CloudCannon で保存 →
content/draft-YYYYMMDDブランチに自動コミット - Vercel / Cloudflare Pages のプレビュー機能でブランチごとに URL 生成
- ステージング確認後、エンジニア側が main にマージ
3. 画像最適化は Astro 側に寄せる
CloudCannon でアップロードした画像はリポジトリ内の public/images/ に置かれます。Astro の astro:assets コンポーネントを使い、ビルド時に webp / avif 変換を一律で行う設計が標準です。
---
import { Image } from "astro:assets";
import heroImage from "../../public/images/news/2026-04-launch.jpg";
---
<Image src={heroImage} alt="サービスローンチ" widths={[400, 800, 1200]} />4. 多言語対応は「ロケール別フォルダ + Astro i18n」で組む
CloudCannon は 1 ファイル = 1 ページの設計です。多言語コーポレートサイトでは src/content/news/ja/ と src/content/news/en/ を分けてロケール別に管理します。Astro 側は astro:i18n でルーティングを組みます。
5. 既存 WordPress からの移行は「段階的並行」が安全
WordPress からの移行を受託する場合、いきなり切り替えるのではなく次の手順を踏みます。
- WordPress を Headless（GraphQL）として残し、Astro 側でフェッチして表示
- 並行して、新規記事は CloudCannon で書く運用に切り替え
- 旧記事を 100 件 / 月のペースで Markdown に変換・移行
- 全件移行後に WordPress を停止
弊社が WordPress ヘッドレス化移行ガイド で整理した「既存 GraphQL を活用した段階移行」と同じ整理が、Astro × CloudCannon でも有効です。
CloudCannon と他CMS の使い分け
「CloudCannon を使えば microCMS / Contentful / Sanity は要らないのか？」という問いには、以下のように整理しています。
| ケース | 推奨CMS |
|---|---|
| 記事数 100〜500、編集者 2〜5 名、コーポレート | CloudCannon |
| 記事数 1,000+、編集者 10 名以上、メディア事業 | microCMS / Contentful |
| マルチプロダクト・APIファースト | Contentful / Sanity |
| 編集者が完全にエンジニアのみ | GitHub 直編集（CMS 不要） |
CloudCannon の最適点は「コーポレートサイト規模の編集ボリューム」です。スケールアウトを見越したメディア事業には別のCMSを推奨します。
受託契約で確認するポイント
CloudCannon は SaaS なので、受託契約で次の項目をクライアントと合意しておきます。
- CloudCannon の課金主体: 受託側で立ち上げたあと、本番運用はクライアントの契約に移管するか
- 編集者のロール設計: 公開権限と下書き権限の分離
- バックアップ責任: Markdown は Git に残るが、メディアファイルの長期保管方針
- CMS ベンダーロックイン回避: 将来別CMSへ移る場合の手順を契約書に明記
コーポレートサイトリニューアル受託の進め方 で整理した「保守契約の設計」と組み合わせると、引き継ぎ後のトラブルが大幅に減ります。
まとめ
Astro × CloudCannon は、コーポレートサイト受託リニューアルにおいて「編集者の使いやすさ」と「ベンダーロックイン回避」を両立できる新しい組み合わせです。受託で採用するときの 5 つの設計指針は次の通りです。
- Content Collections のスキーマを編集者前提で設計
- プレビュー環境を編集中ブランチ単位で
- 画像最適化は Astro 側に寄せる
- 多言語はロケール別フォルダ + Astro i18n
- WordPress からは段階的並行で移行
弊社では Astro × CloudCannon でのコーポレートサイト受託リニューアルを進めています。現在 WordPress 運用中で、編集者の使いやすさを担保しつつ静的化したい場合はお気軽にご相談ください。
