Mintlify Docsとは？初心者向けの使い方ガイド

面倒な作業のように感じない、洗練されたユーザーフレンドリーなドキュメント作成に苦労していませんか？ブログ記事を書くのと同じくらい簡単に素晴らしいドキュメントを作成できるAIネイティブプラットフォーム、Mintlifyにご注目ください。GitHubスター2.8万以上、Stripeのようなクライアントを持つMintlifyは、インタラクティブな機能、AIツール、シームレスな連携を提供し、ドキュメント作成のレベルを上げます。この初心者向けガイドでは、Mintlifyのインストール、カスタムドメインの設定、AIインジェストの活用、MCPサーバーの連携、翻訳の追加、そしてAPIドキュメントのためのOpenAPIの使用方法を順を追って説明します。開発者でもチームリーダーでも、すぐにプロレベルのドキュメントを出荷できるようになります。ドキュメント作成を楽しくする準備はできましたか？始めましょう！

💡

始める前に、API開発を効率化したいと考えているなら、ApidogはAPIの設計、テスト、ドキュメント作成のためのオールインワンプラットフォームを提供しています。直感的なインターフェースと堅牢な機能で、初心者にも経験豊富な開発者にも最適です。何よりも良いのは、無料で始められることです！ (apidog)

ボタン

Mintlifyとは？ドキュメント作成のスーパーパワー

Mintlifyは、手間を最小限に抑えて、美しく、インタラクティブで、SEOに強いドキュメントを作成できるモダンなドキュメントプラットフォームです。チームやオープンソースプロジェクト向けに構築されており、MarkdownおよびMDXファイルをレスポンシブなページにレンダリングし、GitHub連携をサポートし、コード生成や翻訳のようなAI駆動の機能を搭載しています。主な利点は以下の通りです。

WYSIWYGエディター: ブラウザベースのインターフェースでドキュメントを編集できます。
インタラクティブコンポーネント: タブ、コードスニペット、APIプレイグラウンドを追加できます。
AI最適化: AIインジェストにより検索とアクセシビリティを向上させます。
カスタマイズ可能: docs.jsonファイルでテーマ、フォント、ナビゲーションを調整できます。

ドラッグ＆ドロップのワークフローとユーザーコンバージョン率が40%向上するという利点を持つMintlifyは、スタートアップや公開プロジェクトに最適です。セットアップしましょう。

Mintlifyのインストールとセットアップ

Mintlifyを始めるのは簡単で、Node.js、Mintlify CLI、およびGitHubアカウントが必要です。公式ガイドに基づいた始め方は以下の通りです。

1. 前提条件のインストール:

Node.js: https://nodejs.org/からバージョン16.6以降をダウンロードします。node -vで確認します。
GitHubアカウント: まだ持っていない場合は、github.comでサインアップします。
VS Code: 編集には必須ではありませんが推奨されます。code.visualstudio.comから入手します。

2. スターターキットのクローン:

ターミナルで、Mintlifyのスターターキットをクローンします:

git clone https://github.com/mintlify/starter-kit
cd starter-kit

これにより、MDXファイルを含むdocsフォルダと設定用のdocs.jsonファイルを持つプロジェクトが作成されます。

3. Mintlify CLIのインストール:

CLIをグローバルにインストールします:

npm install -g mintlify-cli

mintlify-cli --versionで確認します（例: mintlify-cli version 3.1.25）。

4. ローカルプレビューの実行:

starterフォルダで、開発サーバーを起動します:

mintlify-cli dev

これにより、http://127.0.0.1:3000でプレビューが開きます。ポート3000が使用中の場合は、3001を試すか、--port 3333を使用してカスタマイズできます（例: mintlify-cli dev --port=3333）。

5. ドキュメントの編集:

VS Codeでプロジェクトを開きます（code .）。
docs/introduction.mdxに移動し、"title"フィールドを"Welcome to My Docs!"に変更します。保存すると、プレビューが即座に更新されます。
docs.jsonを調べて、フォント、色を調整したり、ダークモードを有効にしたりできます。例えば:

{
  "name": "My Docs",
  "theme": "prism",
  "colors": { "primary": "#3498db" }
}

アイコンやロゴなどのグローバル設定については、https://mintlify.com/docsを確認してください。

これを10分足らずでセットアップし、自分の調整を加えたライブサイトができました。非常にスムーズでした！

Mintlifyでカスタムドメインを設定する

ドキュメントをmintlify.appのサブドメインではなく、docs.yourcompany.comに配置したいですか？ Mintlifyを使えば、カスタムドメインを簡単に設定できます。

1. 設定にアクセス:

mintlify.comのMintlifyダッシュボードにログインします。
Settings > Custom Domainに移動します。

2. ドメインの追加:

ドメイン（例: docs.yourcompany.com）を入力します。
プロバイダー（例: Namecheap, GoDaddy）のDNS手順に従います:
CNAMEレコードを追加します: docs → cname.vercel-dns.com。
Cloudflareを使用している場合は、「full strict」HTTPSセキュリティを有効にします。
Vercelを使用している場合は、TXT検証レコードを追加します（ダッシュボードに表示されます）。

3. 伝播を待つ:

DNSの変更には最大48時間かかることがありますが、多くの場合より早く反映されます。ブラウザでドメインを確認して検証してください。

テストサイトにカスタムドメインを設定しましたが、数時間でライブになりました。完全にプロフェッショナルな雰囲気です！

MintlifyでAIインジェストを活用する

MintlifyのAIインジェストは、ドキュメントをよりスマートでアクセスしやすくし、ユーザーがAI駆動のクエリでコンテンツを検索できるようにします。

1. AIインジェストを有効にする:

Mintlifyダッシュボードで、Products > AI Chatに移動します。
AIインジェストをオンに切り替えます。これにより、追加の設定なしでAI検索のためにドキュメントがインデックス化されます。
Mintlifyは、LLMがコンテンツを効率的にインデックス化するための/llms.txtサイトマップを自動的に生成します。

2. AI検索をテストする:

ライブドキュメントで、検索バーまたはAIチャット（docs.jsonで有効になっている場合）を使用します。
「APIで認証するにはどうすればよいですか？」と質問します。AIは、認証ページなど、関連するセクションを抽出します。

3. AI修正で強化する:

ウェブエディターでは、AIがMDXエラー（例: 不正な形式のコンポーネント）の構文修正を提案します。これはSettings > Editorで有効にできます。

サンプルサイトでAI検索を試したところ、APIドキュメントが即座に見つかりました。手動でブラウジングするよりもはるかに速いです！

MintlifyとMCPサーバーを連携する

モデルコンテキストプロトコル（MCP）により、AIアプリはドキュメントやAPIと連携できます。Mintlifyは、コンテンツとLLMを橋渡しするMCPサーバーを生成します。

1. MCP CLIのインストール:

実行します:

npm i @mintlify/mcp

Mintlifyダッシュボードで、Products > MCP Serverに移動して、固有のインストールコマンドを取得します。

2. MCPサーバーの設定:

Settings > API Keysで、External Admin KeyとChat API Keyを見つけます。
ダッシュボードからCLIコマンドを実行し、プロンプトが表示されたらキーを入力します。
OpenAPI Accessを切り替えて、APIエンドポイントを含めます（OpenAPI仕様が必要です）。

3. MCPサーバーの使用:

CLIはサーバーを起動するためのコマンドを出力します（例: npm --prefix ~/.mcp/mintlify start）。
WindsurfのようなMCPクライアントでテストし、「API認証に関するドキュメントを検索してください。」とクエリします。サーバーは構造化された結果を返します。

Mintlify MCPサーバーをローカルにインストールする

Mintlify MCPサーバーをローカルマシンで実行するには:

実行します:

npx @mintlify/mcp add mintlify

Enterキーを押して、ベアラートークンのプロンプトをスキップします。
ローカルにインストールされているMCPクライアント（例: Claude Desktop, Windsurf）を選択します。
サーバーは選択したクライアント用にインストールおよび構成されます。

例: Windsurfを使用しましたが、ターミナルには以下が表示されました:

node C:\User\Me.mcp\mintlify\src\index.js

このコマンドを実行し、クライアントのツールアイコンをクリックして、サーバーが利用可能であることを確認します。
または、MintlifyダッシュボードでMCP Serverに移動して、MCPクライアント（例: Apple DB）にサーバーを追加するコマンドを見つけます。

プロンプト例 (Windsurfにて):

Write a help doc about this feature based on this PRD, in the style and tone of AppleDB docs.

または、Mintlify互換形式の場合:

Write this in markdown using Mintlify components like anchors.

MCPクライアント（例: WindsurfまたはClaude Desktop）からの出力をコピーし、Mintlifyのウェブエディターに貼り付け、ビジュアルモードに切り替えてプレビューします！

MCPサーバーをセットアップしたところ、AIアシスタントがプロのように私のドキュメントをクエリできるようになりました。未来的な機能です！

Mintlifyドキュメントに翻訳を追加する

ドキュメントを複数の言語で提供したいですか？ MintlifyのAI駆動翻訳は、ローカライズを簡単にします。

1. 翻訳を有効にする:

Mintlifyダッシュボードで、Settings > Translationsに移動します。
ロケール（例: スペイン語の場合はes）を追加し、翻訳するバージョンを選択します。
Mintlifyはドキュメントを自動翻訳し、メインバージョンとの更新を同期します。

2. 翻訳をカスタマイズする:

リポジトリのロケールフォルダ（例: docs/es/）で翻訳されたMDXファイルを編集します。
「このページは役に立ちましたか？」のような固定コンテンツは、ロケールに自動的に適応します。

3. 翻訳をテストする:

ライブドキュメントで、バージョンドロップダウン（docs.jsonで設定）を使用してロケールを切り替えます。

タイトルとコンテンツがターゲット言語を反映しているか確認します（例: スペイン語の場合は「¡Bienvenidos!」）。

スペイン語の翻訳を追加したところ、数分でドキュメントがグローバル対応になりました。アクセシビリティにとって大きな勝利です！

VS CodeでMintlifyを使用する

VS Codeでコードをドキュメント化しますか？ Mintlifyの拡張機能を使えば簡単です！

1. Mintlify拡張機能をインストールする:

VS Codeの拡張機能マーケットプレイスを開きます。
「Mintlify」を検索し、インストールをクリックします。

2. ドキュメントを生成する:

ドキュメント化したいコードをハイライトします。
サイドバーのMintlifyアイコンをクリックしてGenerate Docsを選択するか、ショートカットCtrl + .を使用します。
Mintlifyが自動的にドキュメントを作成します。

サンプルコード:

test("@e2e wait for api response", async ({ page }) => {
  const sidemenuPage = new SideMenuPage(page);
  await sidemenuPage.interceptApiLink.click();
  const response = await page.waitForResponse((response) =>
    response.url().includes("/comments")
  );
  expect(response.status()).toBe(200);
  await page.getByText("CREATE post").isVisible();
});

生成されたドキュメント:

The code block is a test case that checks if the API response is received successfully.

テストスクリプトをドキュメント化しましたが、Mintlifyは説明を見事に作成しました。手間いらずです！

Mintlifyの機能を探索する

Mintlifyには、ドキュメントを輝かせるためのツールが満載です。レベルアップする方法は以下の通りです。

ウェブエディター: Dashboard > Editorからブラウザでドキュメントを編集します。タブやコールアウトのようなコンポーネントには/と入力します。
テーマとスタイリング: docs.jsonで色、フォント、ロゴをカスタマイズします。prismやdefaultのようなテーマを試してみてください。
GitHub連携: Mintlify GitHub Appをインストールして、変更を自動デプロイします。セットアップについてはダッシュボードを確認してください。
アナリティクス: Dashboard > Analyticsでユーザーエンゲージメントを追跡し、人気ページや離脱率を確認します。
コンポーネント: MDX経由でアコーディオン、コードグループ、Mermaidダイアグラムを追加します。例についてはhttps://mintlify.com/docsを参照してください。

テーマを調整し、タブを追加したところ、1時間足らずでプロのデザインのようなドキュメントになりました！

まとめ: Mintlifyの旅が始まります

よくできました。これでMintlifyの力を解き放ち、素晴らしい、AI対応のドキュメントを作成できます！ CLIのインストールからカスタムドメインの設定、AIインジェスト、MCPサーバー、翻訳、OpenAPIプレイグラウンドまで、ユーザーを驚かせるドキュメントを構築する準備ができました。新しいコンポーネントを試したり、より多くの言語を追加したり、APIdogでAPIをドキュメント化したりしましょう！良いドキュメント作成を！

ボタン