SanityでブログCMSを作る手順ガイド

この記事は「WebデザイナーがAIに食われてみた」の関連記事です。

はじめに

Sanityは「ヘッドレスCMS」と呼ばれるサービスです。

WordPressと同じように管理画面からコンテンツを作成・編集できますが、表示部分（フロントエンド）は自分で好きに作れます。この記事では、Next.jsのサイトにSanityを導入してブログを作る流れを解説します。

ヘッドレスCMSとは

従来のCMS（WordPress）

WordPress = 管理画面 + データベース + テーマ（表示）

全部がひとつにまとまっています。デザインを変えるにはPHPテンプレートを編集する必要があり、自由度に制限があります。

ヘッドレスCMS（Sanity）

Sanity = 管理画面 + データベース（APIでデータを配信）
表示 = Next.js（自分で自由に作る）

データだけをAPIで受け取り、表示は好きな技術で作れます。「頭（表示部分）がない」からヘッドレスです。

メリット

• デザインの自由度が高い ― テーマの制約がない
• 表示速度が速い ― 静的サイトとして生成できる
• 技術の選択肢が広い ― React、Vue、何でも使える
• セキュリティ ― WordPressのようなプラグインの脆弱性リスクが少ない

デメリット

• フロントエンドを自分で作る必要がある ― WordPressのようにテーマを入れるだけでは使えない
• 学習コスト ― API連携やデータの取得方法を理解する必要がある

ただし、AIの力を借りれば、このデメリットはかなり軽減されます。

Sanityの構成要素

1. スキーマ（データの設計図）

「ブログ記事にはタイトル、本文、サムネイル、タグがある」という構造をJavaScriptで定義します。

// schemas/post.js
export default {
  name: "post",
  title: "ブログ記事",
  type: "document",
  fields: [
    {
      name: "title",
      title: "タイトル",
      type: "string",
    },
    {
      name: "slug",
      title: "スラッグ（URL）",
      type: "slug",
      options: { source: "title" },
    },
    {
      name: "body",
      title: "本文",
      type: "array",
      of: [{ type: "block" }],
    },
    {
      name: "thumbnail",
      title: "サムネイル",
      type: "image",
    },
    {
      name: "tags",
      title: "タグ",
      type: "array",
      of: [{ type: "reference", to: [{ type: "tag" }] }],
    },
  ],
};

WordPressの「カスタム投稿タイプ + カスタムフィールド」を、コードで定義するイメージです。

2. Studio（管理画面）

Sanity Studioは、スキーマに基づいて自動生成される管理画面です。ブラウザ上でコンテンツの作成・編集・公開ができます。

Next.jsのサイトに組み込むことで、/studio というURLでアクセスできます。ログインが必要なので、URLを知っているだけではアクセスできません。

3. GROQ（データ取得言語）

SanityからデータをAPIで取得するとき、GROQというクエリ言語を使います。

// すべてのブログ記事を取得
*[_type == "post"] | order(publishedAt desc) {
  title,
  slug,
  publishedAt,
  "tags": tags[]->{ name, slug }
}

SQLに似ていますが、もっとシンプルです。JSONデータを絞り込んで取得するイメージです。

Next.jsとの連携

データの取得

// src/sanity/client.js
import { createClient } from "@sanity/client";

export const client = createClient({
  projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID,
  dataset: process.env.NEXT_PUBLIC_SANITY_DATASET,
  useCdn: true,
  apiVersion: "2024-01-01",
});

// src/app/blog/page.js
import { client } from "@/sanity/client";

export default async function BlogPage() {
  const posts = await client.fetch(`
    *[_type == "post"] | order(publishedAt desc) {
      title,
      slug,
      excerpt,
      publishedAt
    }
  `);

  return (
    <div>
      {posts.map((post) => (
        <article key={post.slug.current}>
          <h2>{post.title}</h2>
          <p>{post.excerpt}</p>
        </article>
      ))}
    </div>
  );
}

サーバーコンポーネントで直接Sanity APIを呼ぶので、ブラウザ側にAPIキーが露出しません。

無料プランでできること

Sanityの無料プラン（Freeプラン）で使える範囲：

• プロジェクト数: 無制限
• データセット: 2つまで
• ユーザー: 3人まで
• APIリクエスト: 月50万回まで
• ストレージ: 10GBまで

個人ブログやコーポレートサイトなら、まず無料プランから始められそうです。

まとめ

概念	説明
ヘッドレスCMS	データ管理と表示が分離したCMS
スキーマ	データの構造をコードで定義する
Studio	ブラウザで使える管理画面
GROQ	データを取得するクエリ言語

Sanityは「WordPressの管理画面の良さ」と「モダンなフロントエンドの自由度」を両立できるツールです。

📖 メインの記事に戻る → WebデザイナーがAIに食われてみた