docs.json
ファイルを使うと、Markdown ファイルの集合を、ナビゲーション可能でカスタマイズされたドキュメントサイトに変換できます。必須のこの設定ファイルは、スタイル、ナビゲーション、連携機能などを管理します。ドキュメントの設計図と考えてください。
docs.json
の設定は、すべてのページに対してグローバルに適用されます。
docs.json
の設定
theme
、name
、colors.primary
、navigation
を指定するだけで十分です。その他のフィールドは任意で、ドキュメントの要件に応じて後から追加できます。
最良の編集体験のために、docs.json
ファイルの先頭にスキーマ参照を記載してください。これにより、ほとんどのコードエディタでオートコンプリート、検証、ツールチップが有効になります。
Copy
Ask AI
{
"$schema": "https://mintlify.com/docs.json",
"theme": "mint",
"name": "Your Docs",
"colors": {
"primary": "#ff0000"
},
"navigation": {
// ナビゲーション構造
}
// そのほかの設定
}
リファレンス
docs.json
ファイルのリファレンスを全て掲載します。
カスタマイズ
プロジェクト、組織、またはプロダクトの名称。
ドキュメントで使用するカラー。テーマによって適用方法が異なります。
primary
だけを指定した場合、すべてのカラ要素にその色が使われます。Show Colors
Show Colors
ドキュメントの主要カラー。一般的にライトモードでの強調に使用されます(テーマにより多少異なります)。
#
で始まる16進数コードである必要があります。ダークモードでの強調に使用するカラー。
#
で始まる16進数コードである必要があります。ライト/ダーク両モードで、ボタンやホバー状態に使用されるカラー(テーマにより多少異なります)。
#
で始まる16進数コードである必要があります。SEO と AI インデックス用のサイト説明。
アイコンライブラリの設定。
Show Icons
Show Icons
ドキュメント全体で使用するアイコンライブラリ。デフォルトは
fontawesome
です。ライブラリ設定に関係なく、各アイコンごとに外部ホストのアイコンURL、プロジェクト内のアイコンファイルへのパス、または JSX 互換の SVG コードを指定できます。
ドキュメントのフォント設定。デフォルトのフォントは Inter です。
Show Fonts
Show Fonts
フォントファミリー(例: “Open Sans”, “Playfair Display”)。
フォントの太さ(例: 400 や 700)。可変フォントは 550 のような細かな指定もサポートします。
フォントソースの URL(例: https://mintlify-assets.b-cdn.net/fonts/Hubot-Sans.woff2)。[Google Fonts](https://fonts.google.com) は、Google Font の
family
名を指定すると自動で読み込まれるため、ソース URL は不要です。フォントファイル形式。
見出し用のフォント設定を上書きします。
Show Heading
Show Heading
フォントファミリー(例: “Open Sans”, “Playfair Display”)。
フォントの太さ(例: 400, 700)。可変フォントは 550 のような細かな指定もサポートします。
フォントソースの URL(例: https://mintlify-assets.b-cdn.net/fonts/Hubot-Sans.woff2)。[Google Fonts](https://fonts.google.com) は、Google Font の
family
名を指定すると自動で読み込まれるため、ソース URL は不要です。フォントファイル形式。
本文用のフォント設定を上書きします。
Show Body
Show Body
フォントファミリー(例: “Open Sans”, “Playfair Display”)。
フォントの太さ(例: 400, 700)。可変フォントは 550 のような細かな指定もサポートします。
フォントソースの URL(例: https://mintlify-assets.b-cdn.net/fonts/Hubot-Sans.woff2)。[Google Fonts](https://fonts.google.com) は、Google Font の
family
名を指定すると自動で読み込まれるため、ソース URL は不要です。フォントファイル形式。
背景色と装飾の設定。
Show Background
Show Background
テーマの背景装飾。
構造
ナビゲーションバーの項目。
Show Navbar
Show Navbar
ナビゲーションバーに表示するリンク。
Show Links
Show Links
リンクのテキスト。
リンク先のURLまたはパス。
表示するアイコン。オプション:
- Font Awesome icon の名前
- Lucide icon の名前
- 中括弧で囲んだ JSX 互換の SVG コード
- 外部でホストされているアイコンへの URL
- プロジェクト内のアイコンファイルへのパス
- SVGR converter を使って SVG を変換します。
- SVG コードを SVG の入力フィールドに貼り付けます。
- JSX の出力フィールドから完全な
<svg>...</svg>
要素をコピーします。 - JSX 互換の SVG コードを中括弧で囲みます:
icon={<svg ...> ... </svg>}
。 - 必要に応じて
height
とwidth
を調整します。
Font Awesome のアイコンスタイル。Font Awesome のアイコンでのみ使用されます。オプション:
regular
, solid
, light
, thin
, sharp-solid
, duotone
, brands
。コンテンツのナビゲーション構造。
Show Navigation
Show Navigation
すべてのページやセクションで共通して表示されるグローバルナビゲーション要素。
Show Global
Show Global
ローカライズサイト向けの言語スイッチャー設定。
Show Languages
Show Languages
主要セクションを整理するためのトップレベルのナビゲーションタブ。
Show Tabs
Show Tabs
タブの表示名。最小文字数: 1
表示するアイコン。オプション:
- Font Awesome icon の名前
- Lucide icon の名前
- 中括弧で囲んだ JSX 互換の SVG コード
- 外部でホストされているアイコンへの URL
- プロジェクト内のアイコンファイルへのパス
- SVGR converter を使って SVG を変換します。
- SVG コードを SVG の入力フィールドに貼り付けます。
- JSX の出力フィールドから完全な
<svg>...</svg>
要素をコピーします。 - JSX 互換の SVG コードを中括弧で囲みます:
icon={<svg ...> ... </svg>}
。 - 必要に応じて
height
とwidth
を調整します。
Font Awesome のアイコンスタイル。Font Awesome のアイコンでのみ使用されます。オプション:
regular
, solid
, light
, thin
, sharp-solid
, duotone
, brands
。既定でこのタブを非表示にするかどうか。
タブのリンク先のURLまたはパス。
サイドバーのナビゲーションで目立つ位置に表示されるアンカーリンク。
Show Anchors
Show Anchors
アンカーの表示名。最小文字数: 1
表示するアイコン。オプション:
- Font Awesome icon の名前
- Lucide icon の名前
- 中括弧で囲んだ JSX 互換の SVG コード
- 外部でホストされているアイコンへの URL
- プロジェクト内のアイコンファイルへのパス
- SVGR converter を使って SVG を変換します。
- SVG コードを SVG の入力フィールドに貼り付けます。
- JSX の出力フィールドから完全な
<svg>...</svg>
要素をコピーします。 - JSX 互換の SVG コードを中括弧で囲みます:
icon={<svg ...> ... </svg>}
。 - 必要に応じて
height
とwidth
を調整します。
Font Awesome のアイコンスタイル。Font Awesome のアイコンでのみ使用されます。オプション:
regular
, solid
, light
, thin
, sharp-solid
, duotone
, brands
。既定でこのアンカーを非表示にするかどうか。
アンカーのリンク先のURLまたはパス。
関連コンテンツを整理するためのドロップダウンメニュー。
Show Dropdowns
Show Dropdowns
ドロップダウンの表示名。最小長: 1
表示するアイコン。オプション:
- Font Awesome icon の名前
- Lucide icon の名前
- 中括弧で囲んだ JSX 互換の SVG コード
- 外部でホストされているアイコンへの URL
- プロジェクト内のアイコンファイルへのパス
- SVGR converter を使って SVG を変換します。
- SVG コードを SVG の入力フィールドに貼り付けます。
- JSX の出力フィールドから完全な
<svg>...</svg>
要素をコピーします。 - JSX 互換の SVG コードを中括弧で囲みます:
icon={<svg ...> ... </svg>}
。 - 必要に応じて
height
とwidth
を調整します。
Font Awesome のアイコンスタイル。Font Awesome のアイコンでのみ使用されます。オプション:
regular
, solid
, light
, thin
, sharp-solid
, duotone
, brands
。既定でこのドロップダウンを非表示にするかどうか。
ドロップダウン先のURLまたはパス。
multi-language サイト用の言語切り替え。
ナビゲーション要素のユーザー操作設定。
Show インタラクション
Show インタラクション
ナビゲーショングループ選択時の自動遷移の挙動を制御します。グループを展開した際に最初のページへ自動で移動させるには
true
を設定します。遷移せずにグループの展開/折りたみのみを行うには false
を設定します。未設定の場合はテーマのデフォルト動作が適用されます。フッターのコンテンツとソーシャルメディアリンク。
Show フッター
Show フッター
フッターに表示するソーシャルメディアのプロフィール。各キーはプラットフォーム名、各値はプロフィールのURLです。例:使用可能なプロパティ名:
Copy
Ask AI
{
"x": "https://x.com/mintlify"
}
x
, website
, facebook
, youtube
, discord
, slack
, github
, linkedin
, instagram
, hacker-news
, medium
, telegram
, twitter
, x-twitter
, earth-americas
, bluesky
, threads
, reddit
, podcast
AI最適化されたコンテンツと統合のためのコンテキストメニュー。
Show コンテキスト
Show コンテキスト
options
array of "copy" | "view" | "chatgpt" | "claude" | "perplexity" | "mcp" | "cursor" | "vscode"
required
コンテキストメニューで利用可能なアクション。最初のオプションがデフォルトとして表示されます。
copy
: 現在のページをMarkdownとしてクリップボードにコピーします。view
: 現在のページをMarkdownとして新しいタブで表示します。chatgpt
: 現在のページの内容をChatGPTに送信します。claude
: 現在のページの内容をClaudeに送信します。perplexity
: 現在のページの内容をPerplexityに送信します。mcp
: MCPサーバーのURLをクリップボードにコピーします。cursor
: ホスト済みMCPサーバーをCursorにインストールします。vscode
: ホスト済みMCPサーバーをVSCodeにインストールします。

コンテキストメニューはプレビューおよび本番デプロイでのみ利用可能です。
API 設定
API ドキュメントとインタラクティブなプレイグラウンドの設定。
Show Api
Show Api
SEO と検索
SEO のインデックス設定。
Show Seo
Show Seo
すべてのページに追加されるメタタグ。有効なキーと値のペアである必要があります。利用可能なオプションは common meta tags reference を参照してください。
検索エンジンにインデックスさせるページを指定します。
navigable
は docs.json
のナビゲーションに含まれるページのみを、all
はすべてのページをインデックスします。デフォルトは navigable
です。連携機能
サードパーティ連携
Show Integrations
Show Integrations
Google Analytics 4 の連携。
Show GA4
Show GA4
Google Analytics 4 の測定 ID。次のパターンに一致する必要があります: ^G
Google Tag Manager のインテグレーション。
Show Gtm
Show Gtm
Google Tag Manager のタグ ID。次のパターンに一致する必要があります: ^G
エラー
例
docs.json
Copy
Ask AI
{
"$schema": "https://mintlify.com/docs.json",
"theme": "maple",
"name": "Example Co.",
"description": "Example Co. は、サンプルコンテンツとプレースホルダーテキストを提供する企業です。",
"colors": {
"primary": "#3B82F6",
"light": "#F8FAFC",
"dark": "#0F172A"
},
"navigation": {
"dropdowns": [
{
"dropdown": "ドキュメント",
"icon": "book",
"description": "Example Co. のプロダクトの使い方",
"groups": [
{
"group": "はじめに",
"pages": [
"index",
"quickstart"
]
},
{
"group": "カスタマイズ",
"pages": [
"settings",
"users",
"features"
]
},
{
"group": "請求",
"pages": [
"billing/overview",
"billing/payments",
"billing/subscriptions"
]
}
]
},
{
"dropdown": "変更履歴",
"icon": "history",
"description": "更新内容と変更点",
"pages": [
"changelog"
]
}
]
},
"logo": {
"light": "/logo-light.svg",
"dark": "/logo-dark.svg",
"href": "https://example.com"
},
"navbar": {
"links": [
{
"label": "コミュニティ",
"href": "https://example.com/community"
}
],
"primary": {
"type": "button",
"label": "はじめる",
"href": "https://example.com/start"
}
},
"footer": {
"socials": {
"x": "https://x.com/example",
"linkedin": "https://www.linkedin.com/company/example",
"github": "https://github.com/example",
"slack": "https://example.com/community"
},
"links": [
{
"header": "リソース",
"items": [
{
"label": "導入事例",
"href": "https://example.com/customers"
},
{
"label": "エンタープライズ",
"href": "https://example.com/enterprise"
},
{
"label": "プレビューのリクエスト",
"href": "https://example.com/preview"
}
]
},
{
"header": "会社情報",
"items": [
{
"label": "採用情報",
"href": "https://example.com/careers"
},
{
"label": "ブログ",
"href": "https://example.com/blog"
},
{
"label": "プライバシーポリシー",
"href": "https://example.com/legal/privacy"
}
]
}
]
},
"integrations": {
"ga4": {
"measurementId": "G-XXXXXXXXXX"
},
"koala": {
"publicApiKey": "pk_example_key_123"
},
"telemetry": {
"enabled": true
},
"cookies": {
"key": "example_cookie_key",
"value": "example_cookie_value"
}
},
"contextual": {
"options": [
"copy",
"view",
"chatgpt",
"claude"
]
},
"errors": {
"404": {
"redirect": false,
"title": "見つかりません",
"description": "この _ページ_ にいったい何が**起きた**のでしょう?"
}
}
}
mint.json
からのアップグレード
mint.json
を使用している場合は、次の手順に従って docs.json
にアップグレードしてください。
1
CLI をインストールまたは更新する
まだ CLI をインストールしていない場合は、インストールしてください:すでに CLI をインストール済みの場合は、最新バージョンであることを確認してください:
Copy
Ask AI
npm i -g mint
Copy
Ask AI
mint update
2
docs.json ファイルを作成する
ドキュメントのリポジトリで次を実行します:このコマンドは、既存の
Copy
Ask AI
mint upgrade
mint.json
から docs.json
を生成します。生成されたファイルを見直し、すべての設定が正しいことを確認してください。3
mint.json ファイルを削除する
docs.json
が正しく構成されていることを確認したら、古い mint.json
ファイルは安全に削除できます。