ENTERPRISE DESIGN OPS / MCP

Web Design Support MCP Server

このサービスは、Webデザインの生成・改善・品質分析に加えて、画像生成・フリー素材検索・画像差し込みまでをMCP経由で提供します。要件の言語化からUI草案、品質検証、ビジュアル反映までを1つの運用フローに統合できます。

5分で導入する利用手順を見る

初稿までの時間を短縮

設計レビュー前に generate_design で叩き台を即時作成し、検討開始を早めます。

品質を数値で共有

analyze_design のスコアと改善提案で、主観に偏らない合意形成を進められます。

運用時の安全性を担保

Bearer認証、/healthz、whoami で接続と運用状態を確認できます。

server: sooocojp-design-mcp@0.1.0 provider: azure-openai (ld-gpt-5-chat) auth: 有効（Bearer必須）

MCPが提供する3つの価値

1. 反復速度を上げる

generate_design と refine_design を使い、レビュー前に比較可能な案を複数作成できます。

期待効果: 仕様検討から初稿提示までのリードタイムを短縮し、会議の初速を高めます。

2. 品質を可視化する

analyze_design により、アクセシビリティとHTML品質をスコアと推奨改善で確認できます。

期待効果: 指摘ポイントが明確になり、修正優先度を決めやすくなります。

3. 運用を安定させる

稼働中のHTTPエンドポイントと認証付きMCP接続で、監視と再現性を担保できます。

期待効果: 障害調査や接続確認の手戻りを減らし、運用コストを抑制します。

導入手順（クイックスタート）

MCPクライアントに接続先URLとして https://mcp-aidesign.sooo.co.jp/mcp を設定します。
認証が有効な環境では、運用管理者が Bearer トークンを発行し、Authorization: Bearer <token> を必ず設定します。
可能であれば「トークン入りプリセット設定」を使って初期セットアップを統一します。
generate_design で初期案を作成し、refine_design で要件に合わせます。
analyze_design のスコアと提案を確認し、修正を反復します。
運用時は /healthz と whoami で接続状態を定期確認します。

MCP Endpoint

https://mcp-aidesign.sooo.co.jp/mcp

Health Endpoint

https://mcp-aidesign.sooo.co.jp/healthz

Auth Mode

有効（Bearer必須）

Health Check

curl -sS 'https://mcp-aidesign.sooo.co.jp/healthz'

Token Issue / Rotation

# 既定: sooocojp / sooocojp-design-mcp
bash ./scripts/rotate-mcp-token.sh

# 引数指定: <resource-group> <container-app-name> <output-env-file>
bash ./scripts/rotate-mcp-token.sh sooocojp sooocojp-design-mcp .mcp-presets/mcp.env

Token Fetch (Azure)

export MCP_AIDESIGN_BEARER_TOKEN="$(
  az containerapp secret show \
    -g sooocojp \
    -n sooocojp-design-mcp \
    --secret-name mcp-auth-token \
    --query value -o tsv
)"

Client Env

export MCP_AIDESIGN_BEARER_TOKEN='<new-token>'
# ヘッダー: Authorization: Bearer $MCP_AIDESIGN_BEARER_TOKEN

Authorization Header

Authorization: Bearer ${MCP_AIDESIGN_BEARER_TOKEN}

使い方（品質を上げる実運用フロー）

Step 1. クライアント設定を作成

クライアントにはURLとAuthorizationヘッダーを事前設定します。チーム運用ではこのJSONをプリセットとして共有すると設定ミスを減らせます。

Client Preset (Generic)

{
  "mcpServers": {
    "mcp-aidesign": {
      "transport": {
        "type": "streamable_http",
        "url": "https://mcp-aidesign.sooo.co.jp/mcp",
        "headers": {
          "Authorization": "Bearer <token>"
        }
      }
    }
  }
}

Step 2. セッション初期化

MCPクライアント接続時に initialize を実行します。Bearer認証が有効な場合はヘッダーを必ず付けます。

Initialize

curl -i -X POST 'https://mcp-aidesign.sooo.co.jp/mcp' \
  -H 'Authorization: Bearer <token>' \
  -H 'Accept: application/json, text/event-stream' \
  -H 'Content-Type: application/json' \
  --data '{"jsonrpc":"2.0","id":1,"method":"initialize","params":{"protocolVersion":"2025-03-26","capabilities":{},"clientInfo":{"name":"smoke","version":"0.1.0"}}}'

Step 3. 生成と改善を反復

まずは generate_design で構造を作り、差分フィードバックを refine_design に入力します。

Tool Payload Example

{
  "name": "generate_design",
  "arguments": {
    "prompt": "B2B向けサービス概要ページ。日本語。導入手順とFAQを含む。",
    "design_type": "docs",
    "visual_style": "modern",
    "accessibility_level": "strict",
    "technical_focus": ["wcag-2.2", "reduced-motion", "schema-org"]
  }
}

Step 4. 品質を評価して収束

analyze_design の結果を見て修正を継続し、推奨改善が減る状態まで回します。

Quality Loop

1) generate_design: 初稿を生成
2) refine_design: フィードバックを反映
3) analyze_design: score と recommendations を確認
4) recommendations が空になるまで 2-3 を反復

セキュリティと運用上の注意

認証情報（トークン/APIキー）は安全に保管し、公開リポジトリに含めないでください。
MCPトークンはユーザーが自動取得する方式ではなく、運用管理者が発行・配布する方式です。
トークン失効/漏えい時は、mcp-auth-token をローテーションして旧トークンを無効化してください。
本番利用時はアクセスログとクレジット利用状況（get_credit_status）を定期確認してください。
仕様変更時は whoami と tools/list で接続先の状態を確認してください。

Token Rotation (Operator)

# 既定: sooocojp / sooocojp-design-mcp
bash ./scripts/rotate-mcp-token.sh

# 引数指定: <resource-group> <container-app-name> <output-env-file>
bash ./scripts/rotate-mcp-token.sh sooocojp sooocojp-design-mcp .mcp-presets/mcp.env

注意: 認証が有効な環境では、未認証の /mcp アクセスは 401 Unauthorized になります。

よくある質問（FAQ）

このサイトの主な用途は何ですか？

Webデザインのプロトタイピング、品質分析、改善提案の反復をMCP経由で効率化する用途です。

どのエンドポイントをクライアントに設定すればよいですか？

MCPクライアントには https://mcp-aidesign.sooo.co.jp/mcp を設定してください。

認証トークンはどこで取得しますか？

トークンは運用管理者が発行します。Azure運用では bash ./scripts/rotate-mcp-token.sh を実行すると、mcp-auth-token の更新とリビジョン再起動、クライアント用env更新まで一括で行えます。

品質を上げるコツはありますか？

design_type と technical_focus を明示し、生成後に analyze_design を必ず実行してください。

どのように使うと効果が高いですか？

1画面ずつ「生成→改善→分析」を回し、次に他画面へ展開する進め方が最も安定します。最初に全体を作り込むより、局所最適を積み上げる方が品質が上がりやすいです。

提供ツール

Tool	役割	使うタイミング
`generate_design`	新規レイアウトを生成	要件が固まり、叩き台が必要なとき
`refine_design`	既存案を改善	レビュー指摘を反映するとき
`analyze_design`	品質をスコア化	改善が妥当か客観確認するとき
`list_design_runs`	履歴・比較	以前の案と差分確認するとき
`generate_image`	画像生成	ヒーロー画像やキービジュアルが必要なとき
`search_stock_images`, `import_stock_image`	フリー素材検索・取り込み	既存素材をライセンス情報付きで利用したいとき
`attach_image_to_design`, `list_image_assets`	画像資産の反映・管理	デザインHTMLへ画像を差し込み、運用資産として管理したいとき
`get_credit_status`, `whoami`	運用状態確認	本番監視・障害切り分け時