ヘッドレスCMS「Sanity」とは？特徴・料金・使い方を徹底解説
「ヘッドレスCMSって何？」「Sanityって他のCMSと何が違うの？」——そんな疑問を持つエンジニアやWeb担当者に向けて、Sanityの基本から実践的な使い方まで網羅的に解説します。
テックジム東京本校では、情報科目の受験対策指導やAI駆動開発コースもご用意しております。
目次
1. ヘッドレスCMSとは何か
従来のCMS（例：WordPress）は「ヘッド（フロントエンド）」と「ボディ（バックエンド）」が一体化した構造でした。これに対して、ヘッドレスCMSはコンテンツの管理・配信機能（バックエンド）のみを持ち、表示部分（フロントエンド）を持たないCMSのことを指します。
従来CMSとの違い
| 比較項目 | 従来のCMS（例：WordPress） | ヘッドレスCMS |
|---|---|---|
| フロントエンド | CMSが管理 | 自由に選択可能 |
| コンテンツ配信 | HTML生成 | API（REST / GraphQL）経由 |
| 柔軟性 | 低い | 高い |
| 学習コスト | 低い | やや高い |
| マルチチャネル配信 | 困難 | 容易 |
ヘッドレスCMSの最大のメリットは、コンテンツをAPIで取得できるため、WebサイトだけでなくモバイルアプリやIoT機器など、あらゆるチャネルに同じコンテンツを配信できる点です。
2. Sanityとは？概要と歴史
Sanity（サニティ）は、2017年にノルウェーのオスロで創業されたSanity.io社が開発したヘッドレスCMSです。現在では世界中の企業・開発者に採用されており、Nike、Shopify、Figma、Sonosなどの有名企業も活用しています。
Sanityの概要
- 公式サイト： https://www.sanity.io/
- 設立： 2017年
- 本社： ノルウェー・オスロ
- 主な特徴： リアルタイムコラボレーション、カスタマイズ可能なStudio、GROQ言語
Sanityが他のヘッドレスCMSと一線を画すのは、コンテンツ管理画面（Sanity Studio）が完全にカスタマイズ可能なReactアプリとして提供されている点です。開発者が自分たちのワークフローに合わせて管理UIを自由に拡張できます。
3. Sanityの主な特徴・メリット
✅ 3-1. Sanity Studio（完全カスタマイズ可能な管理画面）
Sanity Studioは、Reactで構築されたオープンソースのコンテンツ管理インターフェースです。
- コンポーネントを追加・変更してUIをカスタマイズ
- 独自のプラグインを開発して機能拡張
- プロジェクトのコードベースに組み込んで管理
# Sanity Studioの起動
npx sanity dev
✅ 3-2. リアルタイムコラボレーション
Sanityはコンテンツ編集にリアルタイムの同期機能を持っています。複数の編集者が同時にドキュメントを編集しても、コンフリクトなしに変更が反映されます。これはNotion的な共同作業体験をCMSにもたらします。
✅ 3-3. Portable Text（リッチテキストの標準化）
SanityのリッチテキストフォーマットはJSONベースのPortable Textとして保存されます。これにより：
- 特定のレンダリングエンジンに依存しない
- フロントエンド側で自由にHTMLやMarkdownに変換可能
- カスタムブロック（コードブロック、埋め込みコンテンツなど）を追加可能
✅ 3-4. GROQ（強力なクエリ言語）
SanityはGraphQLに加えて、独自のクエリ言語**GROQ（Graph-Relational Object Queries）**をサポートしています。GROQはJSONデータを直感的に絞り込めるよう設計されており、コンテンツの取得が非常に柔軟に行えます。
✅ 3-5. CDNによる高速コンテンツ配信
SanityのコンテンツAPIはグローバルCDNを通じて配信されるため、世界中どこからアクセスしても高速にコンテンツを取得できます。
✅ 3-6. 強力な画像変換パイプライン（Sanity Image Pipeline）
Sanityに画像をアップロードするだけで、URLパラメーターでリサイズ・クロップ・フォーマット変換をオンザフライで実行できます。
https://cdn.sanity.io/images/{projectId}/{dataset}/{imageId}?w=800&h=600&fit=crop&auto=format
4. 他のヘッドレスCMSとの比較
Sanity vs Contentful
| 比較項目 | Sanity | Contentful |
|---|---|---|
| 無料枠 | 3プロジェクト、20万APIリクエスト/月 | 1スペース、25,000レコード |
| カスタマイズ性 | 非常に高い（Studioを改造可能） | 中程度 |
| クエリ言語 | GROQ / GraphQL | REST / GraphQL |
| リアルタイム同期 | あり | なし |
| 学習コスト | やや高い | 低〜中 |
| 日本語サポート | ドキュメントは英語のみ | 英語のみ |
Sanity vs microCMS
| 比較項目 | Sanity | microCMS |
|---|---|---|
| 提供元 | Sanity.io（ノルウェー） | microCMS（日本） |
| 日本語対応 | ドキュメントは英語 | 完全日本語対応 |
| 無料枠 | 充実 | 1サービスまで |
| カスタマイズ性 | 高い | 中程度 |
| 向いている規模 | 中〜大規模 | 小〜中規模 |
Sanity vs Strapi
| 比較項目 | Sanity | Strapi |
|---|---|---|
| ホスティング | SaaS（クラウド管理） | セルフホスト可能 |
| オープンソース | Studioのみ | コア全体 |
| 費用 | 無料〜有料プラン | サーバー費用のみ（無料） |
| スケーラビリティ | 高い | インフラ次第 |
5. Sanityの料金プラン
Sanityの料金は以下の通りです（2025年時点）。
| プラン | 月額料金 | 主な制限 |
|---|---|---|
| Free | 無料 | 3プロジェクト、20万APIリクエスト/月、5GBアセット |
| Growth | $15〜/月 | APIリクエスト追加、より多くのユーザー |
| Enterprise | カスタム | SLA保証、専任サポート、高度なセキュリティ |
💡 ポイント： 個人開発や小規模プロジェクトであれば、無料プランで十分に運用できます。APIリクエスト数が超過した場合でも、従量課金制で追加利用できます。
6. Sanityのセットアップ・始め方
必要な環境
- Node.js 18以上
- npmまたはpnpm
ステップ1：Sanityプロジェクトの作成
npm create sanity@latest
CLIの対話形式に従って、プロジェクト名・データセット・テンプレートを選択します。
ステップ2：プロジェクトの起動
cd my-sanity-project
npm run dev
ブラウザで http://localhost:3333 にアクセスすると、Sanity Studioが表示されます。
ステップ3：スキーマの定義
schemaTypes フォルダにコンテンツの型定義を追加します。
// schemaTypes/post.js
export default {
name: 'post',
title: 'ブログ記事',
type: 'document',
fields: [
{
name: 'title',
title: 'タイトル',
type: 'string',
validation: Rule => Rule.required()
},
{
name: 'slug',
title: 'スラッグ',
type: 'slug',
options: { source: 'title' }
},
{
name: 'body',
title: '本文',
type: 'array',
of: [{ type: 'block' }] // Portable Text
},
{
name: 'publishedAt',
title: '公開日',
type: 'datetime'
}
]
}
ステップ4：コンテンツAPIの呼び出し
import { createClient } from '@sanity/client'
const client = createClient({
projectId: 'your-project-id',
dataset: 'production',
useCdn: true,
apiVersion: '2024-01-01',
})
const posts = await client.fetch(`*[_type == "post"] | order(publishedAt desc)`)
7. GROQ：Sanity独自のクエリ言語
GROQはSanityが開発したJSON向けのクエリ言語で、直感的な構文でデータを絞り込めます。
基本的なGROQクエリ例
// 全ての公開済み記事を取得
*[_type == "post" && !(_id in path("drafts.**"))]
// タイトルと本文のみ取得（プロジェクション）
*[_type == "post"]{
title,
body,
"authorName": author->name
}
// 最新10件を日付順で取得
*[_type == "post"] | order(publishedAt desc) [0...10] {
title,
publishedAt,
slug
}
// 特定カテゴリの記事を取得
*[_type == "post" && category->slug.current == "tech"]{
title,
body
}
GROQの強みは、参照（Reference）を -> で辿れる点にあります。SQLのJOINのような操作を直感的に記述できます。
8. Next.jsとSanityの連携方法
SanityはNext.jsとの相性が非常によく、公式でも推奨されている組み合わせです。
インストール
npm install next-sanity @sanity/image-url
sanity.config.ts の設定
import { defineConfig } from 'sanity'
import { structureTool } from 'sanity/structure'
export default defineConfig({
name: 'default',
title: 'My Blog',
projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID!,
dataset: process.env.NEXT_PUBLIC_SANITY_DATASET!,
plugins: [structureTool()],
schema: {
types: [], // スキーマをここに追加
},
})
lib/sanity.ts の設定
import { createClient } from 'next-sanity'
import imageUrlBuilder from '@sanity/image-url'
export const client = createClient({
projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID,
dataset: process.env.NEXT_PUBLIC_SANITY_DATASET,
apiVersion: '2024-01-01',
useCdn: false,
})
const builder = imageUrlBuilder(client)
export const urlFor = (source: any) => builder.image(source)
ページでのデータ取得（App Router）
// app/blog/page.tsx
import { client } from '@/lib/sanity'
async function getPosts() {
return client.fetch(`
*[_type == "post"] | order(publishedAt desc) {
_id,
title,
slug,
publishedAt,
"excerpt": pt::text(body)[0...120]
}
`)
}
export default async function BlogPage() {
const posts = await getPosts()
return (
<main>
{posts.map(post => (
<article key={post._id}>
<h2>{post.title}</h2>
<p>{post.excerpt}</p>
</article>
))}
</main>
)
}
9. Sanityのデメリット・注意点
⚠️ 日本語ドキュメントが少ない
Sanityの公式ドキュメントはすべて英語です。日本語の情報はQiitaやZennに存在しますが、microCMSなどの国産CMSと比べると情報量が少ないため、トラブル時の解決に時間がかかる場合があります。
⚠️ 学習コストがやや高い
GROQという独自クエリ言語を習得する必要があります。また、StudioのカスタマイズにはReactの知識が必要です。
⚠️ 大規模利用は有料プランが必要
APIリクエスト数や帯域が無料プランの制限を超える場合は、有料プランへのアップグレードが必要です。トラフィックの多いサイトではコストシミュレーションを事前に行うことが重要です。
⚠️ データはSanityのクラウドに保存される
セルフホスティングには対応していないため、データがSanity社のサーバー上に保存されます。データの主権（データサブレジデンシー）が重要な要件の場合は確認が必要です。
10. Sanityが向いているプロジェクト
✅ こんなプロジェクトにおすすめ
- Next.js / Nuxt / SvelteKitなどのモダンフレームワークを使ったWebサイト
- コンテンツをWebとモバイルアプリやSlackボットなど複数チャネルに配信したい
- コンテンツ編集チームがリアルタイムで共同作業したい
- 独自の編集UIを構築してノンエンジニアが使いやすくしたい
- eコマースサイト（Shopifyとの連携実績多数）
❌ こんな場合は他のCMSを検討
- WordPress的な「すぐに公開できるブログ」が欲しい
- 日本語サポートを重視する（→ microCMSを検討）
- 完全無料でセルフホストしたい（→ Strapi / Directus を検討）
- エンジニアなしで非エンジニアのみで運用したい
11. まとめ
Sanityは、高いカスタマイズ性・リアルタイムコラボレーション・強力なAPIとクエリ言語を備えた、現代のWeb開発に最適なヘッドレスCMSです。
| こんな人に向いている | こんな人には向かない |
|---|---|
| モダンなJSフレームワークを使う開発者 | WordPressの代替を探している非エンジニア |
| 複数チャネルへのコンテンツ配信が必要 | 日本語情報を重視する |
| 管理UIを自分たちの要件に合わせたい | 完全無料でのセルフホストが必要 |
無料プランが充実しているため、まずは小規模プロジェクトで試してみることをおすすめします。Next.jsとSanityの組み合わせは特に相性がよく、公式のスターターキットも豊富に用意されています。
関連キーワード
ヘッドレスCMS / Sanity CMS / Sanity.io / GROQ / Sanity Studio / Next.js CMS / コンテンツ管理システム / microCMS比較 / Contentful比較 / JAMstack / APIファーストCMS
📝 この記事の情報は2026年時点のものです。料金やプラン内容は公式サイトで最新情報をご確認ください。 公式サイト： https://www.sanity.io/
■らくらくPython塾 – 読むだけでマスター
共通テスト「情報I」対策解説講座
実践で学ぶPython速習講座
■テックジム東京本校
格安のプログラミングスクールといえば「テックジム」。
講義動画なし、教科書なし。「進捗管理とコーチング」で効率学習。
対面型でより早くスキル獲得、月額2万円のプログラミングスクールです。
情報科目の受験対策指導もご用意しております。
