APIドキュメント生成比較：Swagger UI vs Redoc vs Stoplight Elements でOpenAPIを公開する
オープンソースラボ編集部 ・ 2026年6月14日
APIドキュメント生成比較：Swagger UI vs Redoc vs Stoplight Elements でOpenAPIを公開する
RESTful APIを公開する際、OpenAPI（旧Swagger）仕様書から美しいインタラクティブAPIドキュメントを自動生成するツールが欠かせません。Swagger UI（最も普及・Try it out機能）・Redoc（3ペイン・閲覧性重視）・Stoplight Elements（モダンUI・React統合）の3つがOSSドキュメント生成の主要選択肢です。
APIドキュメント生成ツールを使う理由
- コスト削減: Postman（月$12/ユーザー〜）・ReadMe.io（月$99〜）に対してSwagger UI/Redocは$0
- 仕様書ドリブン: OpenAPI YAML/JSONから自動生成するため手書きドキュメントとの乖離がなくなる
- Try it out: Swagger UIからAPIを直接リクエスト送信してレスポンスを確認（Postman代替）
- CI/CD統合: PRのたびにドキュメントを自動更新してGitHub Pagesで公開
主要ツールの概要
Swagger UI
2011年公開（SmartBear）、JavaScript製のOSSです。GitHubスター26k+。最も広く使われているAPIドキュメントUIで、ほぼすべてのAPIゲートウェイ（Kong・AWS API Gateway・Nginx）に標準統合されています。"Try it out"ボタンから直接APIリクエストを送信できるインタラクティブ機能が特徴です。
# docker-compose.yml - Swagger UI スタンドアロン
version: "3.8"
services:
swagger-ui:
image: swaggerapi/swagger-ui:latest
restart: unless-stopped
ports:
- "8080:8080"
environment:
# ローカルのopenapi.yamlをマウント
SWAGGER_JSON: /api/openapi.yaml
# または外部URLを指定
# SWAGGER_JSON_URL: https://api.yourcompany.com/openapi.json
# CORSを許可（Try it out用）
CORS_HEADERS: Authorization,Content-Type
BASE_URL: /docs
volumes:
- ./docs/openapi.yaml:/api/openapi.yaml:ro
// Express.js + swagger-ui-express: Node.jsアプリにドキュメントを組み込む
import express from 'express';
import swaggerUi from 'swagger-ui-express';
import YAML from 'yamljs';
import path from 'path';
const app = express();
// OpenAPI仕様書を読み込む
const swaggerDocument = YAML.load('./docs/openapi.yaml');
// Swagger UIをマウント
app.use('/docs', swaggerUi.serve, swaggerUi.setup(swaggerDocument, {
customCss: '.swagger-ui .topbar { display: none }', // ヘッダーバーを非表示
customSiteTitle: 'My API Documentation',
swaggerOptions: {
persistAuthorization: true, // ページリロード後もAuthorizationを保持
filter: true, // エンドポイント検索フィルター
displayRequestDuration: true, // リクエスト時間を表示
defaultModelsExpandDepth: 2, // モデルの展開深度
tryItOutEnabled: true, // Try it outをデフォルトで有効
},
}));
// OpenAPI JSONをAPIとして公開（Postman等からインポート可能）
app.get('/openapi.json', (req, res) => res.json(swaggerDocument));
app.listen(3000, () => {
console.log('API Docs: http://localhost:3000/docs');
});
# FastAPI: Pythonで自動的にSwagger UIを生成
from fastapi import FastAPI, HTTPException, Depends
from fastapi.security import HTTPBearer, HTTPAuthorizationCredentials
from pydantic import BaseModel, Field
from typing import Optional
import uvicorn
app = FastAPI(
title='Order Management API',
description='注文管理システムのRESTful API',
version='2.1.0',
contact={'name': 'API Team', 'email': 'api@yourcompany.com'},
license_info={'name': 'MIT'},
docs_url='/docs', # Swagger UI
redoc_url='/redoc', # ReDoc
openapi_url='/openapi.json',
)
class OrderCreate(BaseModel):
customer_id: int = Field(..., description='顧客ID', example=42)
product_ids: list[int] = Field(..., description='商品IDリスト', example=[1, 2, 3])
notes: Optional[str] = Field(None, description='注文メモ', max_length=500)
class OrderResponse(BaseModel):
order_id: str = Field(..., description='注文ID', example='ord_abc123')
status: str = Field(..., description='注文ステータス', example='pending')
total_amount: float = Field(..., description='合計金額（税込）', example=9800.0)
security = HTTPBearer()
@app.post('/orders', response_model=OrderResponse, status_code=201,
summary='注文を作成する',
description='新しい注文を作成します。認証が必要です。')
async def create_order(
order: OrderCreate,
credentials: HTTPAuthorizationCredentials = Depends(security)
):
# Pydanticのモデル定義がそのままSwagger UIのスキーマ表示に反映される
return OrderResponse(order_id='ord_abc123', status='pending', total_amount=9800.0)
if __name__ == '__main__':
uvicorn.run(app, host='0.0.0.0', port=8000)
Redoc
2015年公開、TypeScript製のOSSです。GitHubスター23k+。3ペインレイアウト（左:ナビ・中央:説明・右:コード例）で閲覧性が高く、大規模なAPIドキュメント（エンドポイント100+）でも迷わず探せるデザインが特徴です。Try it out機能はありませんが、HTMLの1ファイルで完結するゼロ依存デプロイが可能です。
<!-- index.html: ReDoc をHTMLファイル1枚でデプロイ -->
<!DOCTYPE html>
<html>
<head>
<title>API Documentation</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700|Roboto:300,400,700" rel="stylesheet">
<style>body { margin: 0; padding: 0; }</style>
</head>
<body>
<redoc spec-url='./openapi.yaml'
expand-responses="200,201"
hide-download-button
theme='{
"colors": {
"primary": { "main": "#6366f1" }
},
"typography": {
"fontSize": "15px",
"fontFamily": "Roboto, sans-serif"
},
"sidebar": {
"width": "280px",
"backgroundColor": "#1a1a2e"
}
}'>
</redoc>
<script src="https://cdn.jsdelivr.net/npm/redoc/bundles/redoc.standalone.js"></script>
</body>
</html>
# redocly CLI でドキュメントをビルド・検証
npm install -g @redocly/cli
# OpenAPI仕様書のバリデーション
redocly lint openapi.yaml
# 静的HTMLにバンドル（CDN依存なし）
redocly build-docs openapi.yaml --output docs/index.html
# 開発サーバー（変更を自動リロード）
redocly preview-docs openapi.yaml --port 8080
# 複数ファイルのOpenAPIをバンドル
redocly bundle openapi/main.yaml --output dist/openapi.yaml
Stoplight Elements
2021年公開（Stoplight）、TypeScript製のOSSです。GitHubスター1.5k+。Reactコンポーネントとして直接アプリに組み込めるモダンなAPIドキュメントUIです。Try it out・Redoc風3ペイン・ダークモードをReact/Webコンポーネントで提供します。
// React: @stoplight/elements を組み込む
import React from 'react';
import { API } from '@stoplight/elements';
import '@stoplight/elements/styles.min.css';
function ApiDocs() {
return (
<API
apiDescriptionUrl="/openapi.yaml"
// またはインラインでYAMLを渡す
// apiDescriptionDocument={openApiYaml}
router="hash" // React Routerなし
layout="sidebar" // sidebar | stacked
hideTryIt={false} // Try it out を表示
hideSchemas={false} // スキーマを表示
tryItCredentialsPolicy="same-origin"
tryItCorsProxy="https://proxy.stoplight.io" // CORSプロキシ
basePath="/docs"
/>
);
}
export default ApiDocs;
機能比較表
| 比較項目 | Swagger UI | Redoc | Stoplight Elements |
|---|---|---|---|
| Try it out | ✅ | ❌ | ✅ |
| 3ペインレイアウト | △ | ✅ | ✅ |
| React統合 | △ | △ | ✅ |
| HTMLのみで起動 | △ | ✅ | △ |
| GitHub Stars | 26k+ | 23k+ | 1.5k+ |
| 学習コスト | 低 | 低 | 中 |
APIドキュメントはDevOpsカテゴリ/categories/devopsのAPIゲートウェイ（Kong・AWS API Gateway）と組み合わせてドキュメントポータルを構築します。セキュリティカテゴリ/categories/securityのOAuth 2.0・APIキー認証のフローをSwagger UIのAuthorizeダイアログで設定してTry it outでテストできます。
FAQ
Q. FastAPIはなぜSwagger UIとRedocの両方を自動生成できるのですか？
A. FastAPIがOpenAPI仕様書（openapi.json）を自動生成し、それをSwagger UIとRedocに渡しているからです。FastAPIのPydanticモデル（BaseModel）とPython型ヒントがそのままOpenAPIスキーマに変換され、/docs（Swagger UI）・/redoc（Redoc）・/openapi.json（仕様書JSON）の3つのエンドポイントが自動で起動します。カスタマイズ: ①app = FastAPI(docs_url=None, redoc_url=None)でデフォルトを無効化②app.get('/docs', include_in_schema=False)でカスタムSwagger UIを実装③@app.get('/items', tags=['商品'], deprecated=True)でタグ・非推奨マークを追加。
Q. GitHub ActionsでOpenAPIドキュメントを自動更新するには？
A. GitHub Actions + GitHub Pagesで自動公開するワークフローの例: ①OpenAPI仕様書（docs/openapi.yaml）の変更を検知②redocly build-docs openapi.yaml --output public/index.htmlで静的HTMLを生成③peaceiris/actions-gh-pagesアクションでgh-pagesブランチにプッシュ④GitHub PagesでURLを公開（例: https://yourorg.github.io/api-docs/）。Spectral（APIリンター）を組み込んでOAS3仕様違反・セキュリティ設計の問題（APIキーがURLに含まれる等）を自動検知することもできます。
Q. ダークモードのAPIドキュメントUIを作れますか？
A. ①Swagger UI: SwaggerUIBundleのカスタムCSS（.swagger-ui { background: #1a1a2e; color: #fff; }等）でダークテーマを適用②Redoc: themeプロパティでJSON指定（colors.primary.main・sidebar.backgroundColor・rightPanel.backgroundColor）③Stoplight Elements: CSS変数（--color-canvas-100等）をオーバーライドするとダークモードに対応④Scalar（新興OSSドキュメントツール・GitHubスター8k+）: @scalar/api-referenceパッケージはダークモードを標準サポートしていてFastAPI・Nuxt・Rails向けのインテグレーションパッケージが揃っています。
Q. 複数バージョンのAPIドキュメントを1サイトで管理するには？
A. ①Redocly: redocly.yaml設定ファイルで複数OpenAPIファイルを管理しredocly build-docsでバンドル②Docusaurus + docusaurus-plugin-openapi-docs: Reactベースのドキュメントサイトに複数OpenAPIファイルを統合③URLパスでバージョン分け（/docs/v1/・/docs/v2/）してリバースプロキシ（Nginx）でルーティング④OpenAPI仕様書内のserversフィールドでバージョン別のベースURLを定義: servers: [{url: "https://api.yourcompany.com/v2", description: "v2 Production"}]。
まとめ
| ユースケース | 推奨ツール |
|---|---|
| Try it out・最も普及・APIゲートウェイ統合 | Swagger UI |
| 大規模API・閲覧性重視・HTMLのみデプロイ | Redoc |
| Reactアプリ組み込み・モダンUI | Stoplight Elements |