---
title: "AIにアーキテクチャ図を描かせる｜python-pptxで70点精度を出す制約設計"
excerpt: "DBシリンダ・太矢印・クラウドアイコンを含むPowerPointのアーキテクチャ図を、AIエージェントで自動生成するための設計をまとめました。精度を決めるのは「Do's and Don'tsの明示」と「EMU座標のゾーン定義」。AIに座標を計算させず参照させる仕組みと、DESIGN.md／SKILL.mdの三層構造を解説しています。"
author: "AI活編集部"
author_username: ai-katsu-editorial
published_at: 2026-04-20T00:00:00+00:00
verified_at: 2026-04-20T00:00:00+00:00
models: ["Claude Code"]
tools: ["Google Stitch"]
tasks: ["資料作成・デザイン", "ツール検証"]
canonical_url: https://ai-katsu.jp/articles/pptx-architecture-diagram-ai-generation
---
# AIにアーキテクチャ図を描かせる｜python-pptxで70点精度を出す制約設計

AIにPowerPointのアーキテクチャ図を作らせようとすると、たいてい図形が重なり、色がばらつき、そもそも意図した形が出てきません。

この検証では、その原因と対策を整理しました。核心は**「AIに座標を計算させず、参照させる」**という設計です。**ピクセルパーフェクトは期待できませんが、正しい制約定義で70点精度は達成可能**という見立てです。

## この検証の概要

| 項目 | 内容 |
| --- | --- |
| 作成日 | 2026年4月20日 |
| 目的 | IT系アーキテクチャ図解スライド（DBシリンダ・太矢印・AWS/Azureアイコン）をAIエージェントで**70点精度**で自動生成する |
| 主要技術 | python-pptx / DESIGN.md / SKILL.md / draw.io / Claude Code |
| 推奨構成 | **DESIGN.md（方針）＋ トークンJSON（値の正本）＋ SKILL.md（タスク固有の制約）**の三層構造 |
| 状況 | リサーチ完了・実装待ち |

## 結論：精度を決めるのは「禁止事項」と「座標の与え方」

この検証で特定した、精度向上の最大要因は2つです。

**Do's and Don'ts の明示と、EMU座標のゾーン定義。**

AIに図を作らせるとき、「こういう図を作って」だけでは制御できません。**座標を自分で計算させると、必ずずれます。**あらかじめ配置可能な領域を定数として与え、そこから選ばせる形にすると精度が安定します。

同様に、禁止事項を書くほうが効きます。「テキストのみのスライドを作らない」「3色以上使わない」「図形をオーバーラップさせない」——**やってほしいことより、やってほしくないことを明示するほうが出力のばらつきが減ります。**

## 三層構造：どこに何を書くか

```
DESIGN.md           ← ブランド哲学・カラー・フォントの方針
    +
トークン JSON        ← 実際の hex 値・pt 値の正本
    +
SKILL.md            ← タスク固有の制約（EMU座標・禁止事項）
```

役割分担を整理するとこうなります。

| ファイル | 役割 | 内容例 |
| --- | --- | --- |
| `CLAUDE.md` | **実装の方法**を伝える | コミット規約・禁止操作・言語設定 |
| `DESIGN.md` | **見た目の方針**を伝える | カラー・フォント・レイアウト原則 |
| `SKILL.md` | **タスク固有の制約**を伝える | EMU座標・図形種別・検証コマンド |

**1つのファイルに全部書くと肥大化し、逆に精度が下がります。**方針・値・制約を分けておくと、それぞれを独立して更新できます。

## DESIGN.mdとは

2026年3月にGoogle Stitchが提唱した、デザインシステムのMarkdown表現フォーマットです。

-   `README.md` がプロジェクト説明の標準であるように、**DESIGN.mdはデザイン仕様のAI向け標準**
-   LLMが高忠実度で読めるMarkdown形式で、カラー・タイポグラフィ・コンポーネント仕様を1ファイルに集約
-   **プロジェクトルート（`/DESIGN.md`）に置くだけでClaude Code・Cursorが自動参照**
-   関連リポジトリが**公開10日で35,000スターを超え**、Stripe・Vercel・Linear・Notionなど59サービスのDESIGN.mdを収録

### 書くべき内容・書かない方がいい内容

**書くべき（効果が高い）**

-   ブランドの視覚的哲学・雰囲気（**AIが迷ったときの判断基準になる**）
-   カラーは意味的役割（`primary`, `danger`, `muted`）とhex値の組み合わせ
-   タイポグラフィは「フォント名だけ」でなく「どの場面で使うか」まで
-   **明示的な禁止事項（Do's and Don'ts）← 最も精度向上に効く**
-   実際に出荷済みコードに基づいたルール（理想ではなく実態）

**書かない方がいい（精度が下がる・管理コストが増す）**

-   全ルールの網羅（**肥大化すると逆効果**）
-   他ドキュメントとの重複情報（二重管理はズレを生む）
-   具体的な実装コード（SKILL.mdやコンポーネントファイルへ委譲）
-   実際の実装と乖離した理想論

## EMU座標系とゾーン定義

python-pptxの座標は**EMU（English Metric Units）**で管理されます。

```
1インチ = 914,400 EMU
1センチ = 360,000 EMU
1ポイント = 12,700 EMU

# 16:9 スライドの標準サイズ
SLIDE_W = 9_144_000  # 13.33インチ（横）
SLIDE_H = 5_143_500  # 7.5インチ（縦）
```

ここで精度向上の核心になるのが**ゾーン定義**です。

| ゾーン名 | left | top | width | height |
| --- | --- | --- | --- | --- |
| header | 457,200 | 457,200 | 8,229,600 | 685,800 |
| main\_left | 457,200 | 1,143,000 | 3,962,400 | 3,200,000 |
| main\_right | 4,724,400 | 1,143,000 | 3,962,400 | 3,200,000 |
| main\_full | 457,200 | 1,143,000 | 8,229,600 | 3,200,000 |
| footer | 457,200 | 4,571,100 | 8,229,600 | 380,000 |

この表をSKILL.mdとコードの双方に持たせ、**「必ずこの値を参照すること。座標を自分で計算しない」**と明示します。

## DBシリンダは「CYLINDER」では作れない

実装上の落とし穴です。

**python-pptxに `CYLINDER` という名称は存在しません。**フローチャート系シェイプで代用します。

| 用途 | 定数名（MSO\_SHAPE） | 値 |
| --- | --- | --- |
| **DBシリンダ（縦・推奨）** | `FLOW_CHART_MAGNETIC_DISK` | **86** |
| DBシリンダ（横） | `FLOW_CHART_DIRECT_ACCESS_STORAGE` | 87 |
| テープ型ストレージ | `FLOW_CHART_SEQUENTIAL_ACCESS_STORAGE` | 85 |

太い矢印（Block Arrow）も同様に整数値で指定します。

| 方向 | 定数名 | 値 |
| --- | --- | --- |
| 右向き | `RIGHT_ARROW` | **33** |
| 左向き / 上向き / 下向き | `LEFT_ARROW` / `UP_ARROW` / `DOWN_ARROW` | 34 / 35 / 36 |
| 左右双方向 | `LEFT_RIGHT_ARROW` | 37 |
| ノッチ付き右矢印 | `NOTCHED_RIGHT_ARROW` | 50 |

**使う図形の整数値をSKILL.mdに列挙しておく**ことが、AIに正しい図形を選ばせる条件になります。名前で指示すると、存在しない定数を使おうとします。

## クラウドアイコンはPNGで埋め込む

**python-pptxはSVGネイティブ非対応です。PNG変換が最も安定します。**

AWS公式アイコンパックはPNG形式でダウンロード可能です。品質を保ちたい場合は `cairosvg` でSVG→PNG変換してから `add_picture()` に渡します。

## fix-and-verifyループを組み込む

生成しっぱなしにしないための仕組みです。

1.  `template.pptx` を開く
2.  `zones.py` のZONES定数を参照して座標を決定
3.  図形・アイコン・テキストを追加
4.  **`thumbnail.py` で確認**（LibreOfficeでPPTX→PNG変換して視覚確認）
5.  **指摘があれば修正して再確認（ゼロ指摘になるまで繰り返す）**

あわせて `validate.py` でXML構造を検証します。**不正なXMLを注入するとPPTXが開けなくなる**ため、保存前の確認が必要です。

**視覚要素の生成では、AI自身が結果を見て直せる経路を作ることが重要です。**出力を見ずに一発で仕上げようとすると、精度は上がりません。

## アプローチの選び方

```
既存PPTXテンプレートがある？
    │
    ├── Yes → テンプレートPPTX + SKILL.md（EMU座標定義）の組み合わせ
    │              ↓
    │          ブランドカラー・フォントを継承しつつ内容を生成
    │
    └── No  → draw.ioでアーキテクチャを組む
                   ↓
               drawio2pptxでPPTXシェイプに変換
                   ↓
               python-pptxでブランドスタイルを後付け適用
```

既存テンプレートがある場合は、**スライドを全削除してマスター・テーマだけ残す**方式でベースにします。ブランドの一貫性を保ちつつ、中身だけを生成できます。

## 70点精度を達成するためのチェックリスト

-   SKILL.mdに**EMUゾーン定数**を定義してある（AIが座標を計算しない）
-   使う図形の**MSO\_SHAPEの整数値**をSKILL.mdに列挙してある
-   カラーパレットを**RGB値**でSKILL.mdに記載してある
-   **Do's and Don'tsセクションに禁止事項**を書いてある
-   `thumbnail.py` / `validate.py` による**fix-and-verifyループ**を組み込んでいる
-   クラウドアイコンは**PNG形式**で配置してある
-   テンプレートPPTXを使う場合は**スライドマスターを確認**してある

## よくあるハマりポイント

| 問題 | 原因 | 対処 |
| --- | --- | --- |
| SVGが埋め込めない | python-pptxがSVG非対応 | PNGに変換してから `add_picture()` |
| 図形が重なる | EMU計算ミス | **ZONES定数を参照する仕組みにする** |
| DBシリンダが見つからない | `CYLINDER` という名前が存在しない | **値86**（FLOW\_CHART\_MAGNETIC\_DISK）を使う |
| テーマカラーが引き継がれない | テンプレートのマスターが参照されていない | `prs.slide_layouts[6]` で空白レイアウトを使う |
| PPTXが開けなくなる | 不正なXMLを注入した | `validate.py` で確認してから保存 |
| グループ化できない | python-pptxにグループ化APIがない | XML直接操作か、座標をハードコードで回避 |

## よくある質問

### AIでどこまでの品質が出せますか？

**ピクセルパーフェクトは期待できませんが、正しい設計と制約定義で70点精度は達成可能という見立てです。**最大の要因はDo's and Don'tsの明示とEMU座標のゾーン定義です。

### なぜ座標をAIに計算させてはいけないのですか？

**計算させると図形が重なるなどのずれが発生するためです。**あらかじめゾーンを定数として定義し、AIには参照させる形にすると精度が大幅に向上します。

### DESIGN.mdとCLAUDE.mdはどう使い分けますか？

**CLAUDE.mdは実装の方法、DESIGN.mdは見た目の方針、SKILL.mdはタスク固有の制約です。**1ファイルに全部書くと肥大化して逆効果になります。

### クラウドサービスのアイコンはどう入れますか？

**PNG形式で埋め込みます。**python-pptxはSVGネイティブ非対応のため、SVGしかない場合は `cairosvg` 等で変換してください。

## まとめ

-   精度を決めるのは**Do's and Don'tsの明示とEMU座標のゾーン定義**。この2つで70点精度が狙える
-   **AIに座標を計算させず、定数を参照させる**。図形の整数値も列挙しておく
-   構成は**DESIGN.md（方針）＋トークンJSON（値）＋SKILL.md（制約）の三層**。1ファイルに詰め込まない
-   DESIGN.mdは**プロジェクトルートに置くだけでAIツールが自動参照**する
-   **python-pptxに `CYLINDER` は存在しない。**DBシリンダは値86（FLOW\_CHART\_MAGNETIC\_DISK）
-   **SVGは非対応。PNGに変換して埋め込む**
-   **thumbnail.py / validate.py によるfix-and-verifyループ**を組み込み、AI自身が結果を見て直せるようにする

AIに視覚要素を作らせるときは、自由度を上げるほど品質が下がります。選択肢を絞り、確認と修正の経路を用意することが、実用水準への近道になります。

株式会社AI棒では、こうしたAI活用の検証を日々行い、企業の資料作成業務へのAI導入を支援しています。ご相談は[お問い合わせフォーム](/contact)から、継続的な伴走支援については[AI参謀](/ai-sanbo)をご覧ください。