@YushiYamamoto(JapanLifeStart.com 在日外国人向けメディア)in

🗂️ Sanity Studioカスタマイズ：Structure Builderで管理画面を「神」階層にする

Posted at 2026-01-27

こんにちは😊
株式会社プロドウガの@YushiYamamotoです！
JapanLifeStart.comの開発・運営を担当しながら、React.js・Next.js専門のフリーランスエンジニアとしても活動しています❗️

ヘッドレスCMSの導入でよくある失敗が、「ドキュメントタイプが増えすぎて管理画面がカオスになる」 ことです。
記事、著者、カテゴリ、タグ、SEO設定、サイト設定…これらが全部フラットに並んでいると、編集者は「どこを触ればいいの？」と迷子になってしまいます。

Sanityなら、「Structure Builder」 を使って管理画面のメニュー構造を自由自在にカスタマイズできます。
今回は、デフォルトのリスト表示を卒業し、編集者が感動する使いやすい階層構造を作る方法を解説します。

1. Structure Builder とは？ 🏗️

Sanity Studioの左側に表示されるリスト（Structure Tool）の見た目や挙動を定義するAPIです。

デフォルトでは「定義したスキーマタイプがアルファベット順に並ぶだけ」ですが、これを使うと以下のようなことができます。

グルーピング: 「ブログ関連」「設定関連」のようにフォルダ分けする。
シングルトン: 「サイト設定」のように1つしか存在しないドキュメントを、リストではなく直接編集画面として開く。
フィルタリング: 特定の条件（例：自分の書いた記事だけ）でリストを表示する。

2. 基本のセットアップ ⚙️

まずは sanity.config.ts で Structure Builder を有効化（カスタム関数を適用）します。

// sanity.config.ts
import { defineConfig } from 'sanity'
import { structureTool } from 'sanity/structure'
import { schemaTypes } from './schemas'
import { myStructure } from './src/structure' // カスタム設定ファイルを読み込み

export default defineConfig({
  // ...
  plugins: [
    structureTool({
      structure: myStructure, // ここで適用！
    }),
  ],
  schema: {
    types: schemaTypes,
  },
})

次に、設定ファイル src/structure.ts を作成します。

3. 実践！管理画面を整理する3つのテクニック 🧹

① 不要なものを隠してグルーピング

「サイト設定」などの管理系項目と、「記事」などのコンテンツ系項目を分けましょう。

// src/structure.ts
import type { StructureResolver } from 'sanity/structure'

export const myStructure: StructureResolver = (S) =>
  S.list()
    .title('コンテンツ管理') // リストのタイトル
    .items([
      // 1. 通常のコンテンツ（記事、著者など）
      // S.documentTypeListItems() は全タイプを返すので、
      // フィルタで「設定系」を除外して表示します。
      ...S.documentTypeListItems().filter(
        (listItem) => !['siteSettings', 'navigation'].includes(listItem.getId()!)
      ),

      S.divider(), // 区切り線

      // 2. 設定系をフォルダにまとめる
      S.listItem()
        .title('サイト設定')
        .child(
          S.list()
            .title('設定メニュー')
            .items([
              S.documentTypeListItem('navigation').title('ナビゲーション'),
              // 他の設定項目...
            ])
        ),
    ])

これで、左側のメニューがスッキリし、「サイト設定」フォルダの中に細かい設定が入る階層構造になります。

② シングルトン（1枚だけのページ）を作る

「トップページのFV設定」や「SEO共通設定」などは、サイトに1つあれば十分ですよね。
デフォルトだと「新規作成」ボタンが出てしまいますが、これを消して直接編集画面に飛ばすようにします。

// src/structure.ts
export const myStructure: StructureResolver = (S) =>
  S.list()
    .title('コンテンツ')
    .items([
      // ...他の項目
      
      S.listItem()
        .title('共通SEO設定')
        .child(
          S.document() // list() ではなく document() を指定
            .schemaType('siteSettings')
            .documentId('siteSettings') // 固定IDを指定
        ),
    ])

これでクリックすると即座に編集画面が開きます。「あれ？記事一覧どこ？」と迷うことがなくなります。

③ タブ（Views）を追加してプレビューを強化

記事の編集画面に、「編集フォーム」だけでなく「プレビュー」や「SEOチェック」などのタブを追加できます。

// src/structure.ts
import { Iframe } from 'sanity-plugin-iframe-pane' // プラグインが必要

export const getDefaultDocumentNode = (S, { schemaType }) => {
  // 'post' タイプの時だけビューを追加
  if (schemaType === 'post') {
    return S.document().views([
      S.view.form(), // デフォルトの編集フォーム
      
      S.view
        .component(Iframe)
        .options({
          url: 'http://localhost:3000/api/preview', // Next.jsのプレビューURL
        })
        .title('リアルタイムプレビュー'),
    ])
  }
}