Astro CMS ・ Git ベース ・ 静的サイト
Astro のサイトを、
見たまま編集。
伝えたいことを、伝えたいときに。
Cocoro CMS は、Astro で作ったサイトのソースをそのまま読み取り、プレビューを押して文章や画像を直せる CMS です。変更は GitHub のプルリクエストになり、承認すると静的なサイトとして公開されます。開発者が組んだ設計も、デザイナーが作ったデザインも、そのまま。マーケターは、頼まずに自分で出せます。
$ git log --oneline -3
a41f2c9 Merge pull request #11 from cocoro/change-01m6jede…
7d0e183 「11 月の撮影会のお知らせ」を更新
c92b4a1 feat: add NewsList component
Movie
60 秒でわかる、
Cocoro CMS。
担当の方がプレビューを押して直し、「確認を頼む」で公開まで。Cocoro CMS でサイトを更新する一日を、短い動画にしました。
1:00 ・ 音が出ます
How it works
書いてから公開まで、
ぜんぶ Git の上で。
Cocoro CMS は、データベースに中身をしまい込む CMS ではありません。正本は、お客様の GitHub のリポジトリです。画面で直したものは、枝へのコミットとプルリクエストになり、承認すると既定のブランチにマージされます。あとは、いつもの astro build です。
-
編集する
プレビューを押して直す・記事を書く
WYSIWYG
-
確認を頼む
変更は枝とプルリクエストに
cocoro/change-01m6…
-
承認する
見た中身のままマージ
merge @ head SHA
-
ビルド
Astro が静的な HTML に
astro build → dist/
-
公開
お使いのサーバー・CDN へ
FTPS · SFTP · Actions
WYSIWYG
押して、直して、そのまま見える。
プレビューのブロックを押すと、右にそのブロックの編集の欄が開きます。下のデモは動きのイメージです。文字を変えたり、幅を切り替えたり、「確認を頼む」を押したりしてみてください。
家族の今日を、
一枚に。
七五三・成人式・家族写真。神戸の小さな写真館です。
撮影を予約するお知らせ
- 11 月の撮影会のお知らせ
- 年末年始の営業日
まずは、お気軽にご相談ください。
お問い合わせメインビジュアル
お知らせはコンテンツコレクション news から並んでいます。記事のタイトルを直すと、一覧にも反映されます。
変更はまだありません
※ 動きのイメージです（実際の画面ではありません）。実物のプレビューは、お客様の Astro のサイトを隔離した環境の astro dev で動かします。
変えたところだけ書き戻す
.astro を @astrojs/compiler で読み、直した文字の範囲だけを置き換えます。インデントもコメントも、ほかの行は 1 バイトも動きません。
コードはロック
{items.map(...)} のような式や set:html は編集できません。データの出どころ（コレクションや src/data）を示して、そちらで直すよう案内します。
props も編集できる
interface Props の型を読んで、文字列の union は選択肢に、名前が image・href などで終わるものは画像やリンクの欄にします。
For your team
作る人と、書く人が、
同じリポジトリで。
開発者はコードで設計を決め、デザイナーは見た目を決め、マーケターは中身を決める。Cocoro CMS は、それぞれが自分の持ち場だけを、安心してさわれるように分けています。
Developer
開発者
ソースは、あなたの Astro のまま。
- SDK も独自の書き方もいらない。ふつうの .astro とコンテンツコレクションを読み取る
- zod のスキーマから入力画面ができる
- 変更は cocoro/change-… の枝とプルリクエストに残る
- 設定ファイルや依存に触れる変更は、開発者しか承認できない
Designer
デザイナー
作ったデザインが、崩れない。
- 書き換えられるのは文字・画像・リンクと、コンポーネントの props だけ
- {items.map(...)} のようなコードや set:html はロックされる
- パソコン・タブレット・スマホの幅で、実物を見ながら直せる
- 同じ形のカードの並びは、行の追加・並べ替えだけができる
Marketer
マーケター
頼まずに、自分で出せる。
- プレビューの文字を押して、その場で直す
- 日時を決めて予約公開。キャンペーンの朝に合わせられる
- お問い合わせ・資料請求のフォームと受け箱つき
- AI の制作ラインで、オウンドメディアの記事を続けて出せる
Content Collections
書いたスキーマが、そのまま入力画面に。
管理画面のために、フィールドを別に定義し直す必要はありません。content.config.ts の zod のスキーマを Cocoro CMS が読み取り、型に合った入力の欄を並べます。コードを実行せずに構文だけを読むので、ビルドの設定にも手を入れません。
1import { defineCollection, z } from 'astro:content';2import { glob } from 'astro/loaders';3 4const news = defineCollection({5 loader: glob({ pattern: '**/*.md', base: './src/content/news' }),6 schema: ({ image }) => z.object({7 title: z.string(),8 date: z.coerce.date(),9 summary: z.string().optional(),10 cover: image().optional(),11 category: z.enum(['お知らせ', '撮影会', 'キャンペーン']),12 tags: z.array(z.string()).default([]),13 draft: z.boolean().default(false),14 }),15});16 17export const collections = { news };屋外
z.string()
1 行の入力（要約や長い文は複数行）
z.coerce.date()
日付
image()
画像のパスと候補
z.enum([...])
選択肢
z.boolean()
チェック（draft は「非公開にする」）
z.array(z.string())
1 行に 1 つ
.optional() / .default()
必須の印を外す
z.object の入れ子
表示だけ（編集は開発者が）
Owned media
オウンドメディアは、
続けた人が勝つ。
ブログやコラムは、書き始めるより、続けるほうがむずかしい。Cocoro CMS の「制作ライン」は、企画のリストから AI が下書きを作り、決めた基準で点検し、人が目を通したものを決めたペースで公開します。
01 · planned
予定
企画のリストから
02 · generating
作成中
AI が下書き
03 · review
監修待ち
基準の点検を通ったもの
04 · approved
監修済み
人が目を通した
05 · released
リリース済み
決めた時刻に公開
Security
公開サーバーに、
動くものを置かない。
WordPress のサイトは、ページを開くたびにサーバーで PHP が動き、データベースを読みます。Cocoro CMS で公開されるのは、Astro が作った HTML と画像だけ。攻撃の入り口になるログイン画面も、プラグインも、公開しているサーバーにはありません。
- 91%
- WordPress の脆弱性のうちプラグインにあったもの
- 46%
- 公表の時点で修正版がなかったもの
- 5h
- 大量に悪用されるまで（中央値）
出典：Patchstack「State of WordPress Security in 2026」（2025 年の集計）
セキュリティを見る →Screens
毎日さわる画面だから。
画面は実際の Cocoro CMS です（見本の「こころ写真館」のサイト）。専門の言葉は開発者にしか見せず、担当の方には「確認を頼む」「承認して公開する」のような言葉だけが並びます。押すと大きく見られます。
承認
何が変わったかを行ごとに色分け。承認した中身のまま公開。
ダッシュボード
あなたの番の仕事が、いちばん上に。
コンテンツ
ページも記事も、1 つの表で。
フォーム
部品を並べてフォームを作る。
リリース
下書きをまとめて、予約もできる。
問い合わせの受け箱
フォームに届いたものを、担当とメモで。
Cocoro CMS
伝えたいことを、
伝えたいときに。
Astro のサイトを、だれでも安全に更新できるように。フリープランは 1 サイト・2 人まで、ずっと無料です。