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座標・禁止事項）役割分担を整理するとこうなります。
ファイル | 役割 | 内容例 |
|---|---|---|
| 実装の方法を伝える | コミット規約・禁止操作・言語設定 |
| 見た目の方針を伝える | カラー・フォント・レイアウト原則 |
| タスク固有の制約を伝える | 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シリンダ（縦・推奨） |
| 86 |
DBシリンダ（横） |
| 87 |
テープ型ストレージ |
| 85 |
太い矢印（Block Arrow）も同様に整数値で指定します。
方向 | 定数名 | 値 |
|---|---|---|
右向き |
| 33 |
左向き / 上向き / 下向き |
| 34 / 35 / 36 |
左右双方向 |
| 37 |
ノッチ付き右矢印 |
| 50 |
使う図形の整数値をSKILL.mdに列挙しておくことが、AIに正しい図形を選ばせる条件になります。名前で指示すると、存在しない定数を使おうとします。
クラウドアイコンはPNGで埋め込む
python-pptxはSVGネイティブ非対応です。PNG変換が最も安定します。
AWS公式アイコンパックはPNG形式でダウンロード可能です。品質を保ちたい場合は cairosvg でSVG→PNG変換してから add_picture() に渡します。
fix-and-verifyループを組み込む
生成しっぱなしにしないための仕組みです。
template.pptxを開くzones.pyのZONES定数を参照して座標を決定- 図形・アイコン・テキストを追加
thumbnail.pyで確認（LibreOfficeでPPTX→PNG変換して視覚確認）- 指摘があれば修正して再確認（ゼロ指摘になるまで繰り返す）
あわせて 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に変換してから |
図形が重なる | EMU計算ミス | ZONES定数を参照する仕組みにする |
DBシリンダが見つからない |
| 値86（FLOW_CHART_MAGNETIC_DISK）を使う |
テーマカラーが引き継がれない | テンプレートのマスターが参照されていない |
|
PPTXが開けなくなる | 不正なXMLを注入した |
|
グループ化できない | 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導入を支援しています。ご相談はお問い合わせフォームから、継続的な伴走支援についてはAI参謀をご覧ください。