Opus5.5が型なしでレイアウトする：バナーデザイン自動生成の仕組み v3

2026年10月31日 07:39

banner-harness-v3 を作りました。型なしで Opus 5.5 がバナーレイアウトを自走で組み、編集できる形で納品する仕組みです。

スライド生成と同様、Opus 5.5 のレイアウト力を活かせば、型がなくともバナーデザインが生成できると考えました。

banner-harness-v3/
├── CLAUDE.md                       # 入口。依頼が来たらスキルに従う
├── .env.example                    ＋ Notion・Slack などの接続情報のひな形（値は入れない）
├── .claude/skills/
│   └── banner-builder/
│       └── SKILL.md                # 原稿にする → 生成 → 直し → 書き出し の手順
├── hearing/
│   └── notion-ai-hearing.md        ＋ 依頼者が Notion AI で要件を伝える Skill の原文
├── brands/
│   └── episode-n/                  # 正典から一方向に写したブランド
│       ├── brand.md                # 色・書体・言葉
│       ├── banner.md               # バナーの組み方の規範（人の直しを戻す先）
│       ├── SOURCE.json             # 写した元のハッシュ
│       └── assets/                 # ロゴ・イラスト・書体
├── prompts/
│   └── generate-episode-n.md       # Opus 5.5 への指示文（型は渡さない）
├── templates/
│   └── brief.md                    # 原稿のひな形（入れる文言・落としてはいけない語・サイズ）
├── tools/
│   ├── banner.py                   # init / generate / revise / export / status
│   ├── brief_from_notion.py        ＋ 依頼 DB の行 → brief.md
│   ├── html2layout.mjs             # HTML をブラウザで実測して layout.json にする
│   ├── layout2pptx.py              # layout.json → PPTX（Canva にドラッグ）
│   ├── layout2figma.py             # layout.json → Figma
│   ├── layout2canva.py             # Canva の中に直接組む（Path C・経路の候補）
│   ├── marker.mjs                  # 語の位置を測ってマーカーを描き足す
│   ├── check.py                    # 機械の検査（文言・はみ出し・重なり・コントラスト）
│   ├── sheet.py                    # 6サイズを1枚のシートに並べる
│   ├── notion_writeback.py         ＋ PNG・PPTX・所見を行に添付し、Canva の URL を差し込む
│   ├── slack_post.py               ＋ チャンネルに投稿する
│   ├── diff_versions.py            ＋ 生成した版と Canva で仕上げた版の差分を取る
│   └── sync_brand.py               ＋ 正典からブランドを写す
├── ops/                            ＋ 無人で回す置き場所
│   ├── run_unattended.sh           ＋ 行を拾って claude -p で生成から書き戻しまで回す
│   └── schedule/                   ＋ 定期実行や Notion からの起動の設定
├── feedback/                       ＋ 改善の材料
│   ├── diffs/                      ＋ 依頼ごとの、生成版と仕上げ版の差分
│   └── proposals/                  ＋ 正典の更新案（人の承認を経て banner.md へ）
├── tests/
│   ├── check_selftest.py           # わざと壊した入力で、検査が鳴るかを確かめる
│   └── pipeline_selftest.py        ＋ 行 → 書き戻しまでを架空の依頼で通す
├── docs/                           # 設計・状態・引き継ぎ・図解
└── phase0/                         # 検証の記録（作り直さない）

型なしでレイアウトを自走する性能

v2 の仕組みは、Figma で用意した型の数値を AI に守らせるもの。その場合まず複数の型が必要になり、事業や依頼の内容に適合する型を増やし続けることになります。

しかし、先日スライド生成でレイアウト工程を手放せたことをきっかけに「バナーレイアウトも型なしで自走できるだろう」という仮説を持ちました。

そこで、型も数値一覧も渡さずに、要素の多い原稿を6サイズで組ませました。Opus 5.5 は HTML で組み、5分程で6サイズを生成。品質が一定水準を満たすことを確認しました。

編集可能なCanva/Figmaで納品する

v2 は画像で納品する仕組み。v3 で重視したのは「生成後、編集できる状態にすること」です。デザイナーとデザイナー以外が共同編集するツールへ納品する設計を目指します。Canva / Figma が最有力です。

Opus 5.5 が組んだ HTML をブラウザで描き、座標・色・文字・改行の位置を実測して、納品先に拠らない1つのデータ（layout.json）にします。そこから PPTX に書き出し、Canva にドラッグする。

Canva 連携で分かったことは3つ。

1：自動の取り込みは公開された URL のみ
2：1つのテキストボックスに異なる文字サイズを含ませることができない。サイズの違う文字は別のテキストボックスに分けて書き出す
3：幅を実測通りに設定すると改行位置が増えるため、6%＋8px の余裕を足した

コネクタや API を開通できる組織であれば、Canva へ直接入れる経路も候補として存在します。機械の検査は、落とした語・はみ出し・重なり・コントラストを見る。美しさは人が見ます。

リサイズ展開も自走できるレイアウト力

サイズが変わっても、型なしでレイアウトを組み替える力があるのかを確かめました。同じ原稿を、横長や縦長の計6サイズに組み替えられるかを検証（架空のサービス"episode-N"にて）。

原稿量の異なる3つを用意して検証。
1：タグラインのみ
2：見出し・本文・CTA・イラスト
3：2の要素＋説明会告知文章

Opus 5.5 は、サイズごとに文字とイラストの置き方を変えました。横長は左に文字・右にイラスト、正方形と縦長は上に文字・下にイラスト。300×250 では、原稿で落としてよいとした文言を外しています。3原稿×6サイズで、機械の検査は文言の誤り・はみ出し・重なりとも0件でした。

この結果を見て、サイズごとに組み替える「リサイズ工程」も、Opus 5.5 に任せると決めました。それらが編集できる形式で生成されるのが利点です。

検査が通った後、5箇所を直した

この1シートに ok を出すまでに、私は5箇所に修正指示を入れています。

🖍️1：コピー
→ ブランドに適した別案に差替えた
🖍️2：情報量
→ 小さいバナーは情報量を削った
🖍️3：チップ
→ 補足情報の扱い方を指示した
🖍️4：イラスト
→ 90%に縮め、縦中央に配置した
🖍️5：マーカー
→ 強調したい言葉の下に線を引いた

5つとも、機械の検査が見ていない箇所です。このような修正を加えながら、規範の確度を上げていきます。

マーカーを文字下に少し重ねる調整で「16px 文字の下にはみ出しす形で生成しました」と、AI から報告がありました。しかし絵はそうなっていません。

私と認識は合っていそうですが、出来上がったデザインがそのようになっていません。現在のデザインは文字の下にはみ出しておらず、マーカーの底辺と文字の底辺がピッタリ一致しています。そうではなく、下にずれている必要があります。

（私からAIへの指摘）

結果、マーカーに関しては Opus に描かせず、生成後に語の位置を測り、プログラムで描き足すことにしました。

修正を規範に記すと 4/13→13/13になった

最後は、それまでの修正内容を banner.md（規範）に記して、再現性を確認するための検証を実施しました。

5箇所の修正を2つに分けて検証。その原稿だけのもの（コピー・チップ・文言の量）と、episode-N のバナー全般に当てはまるもの（マーカー・イラストの置き方・縦長の順・サイズごとの文言・催しの横長の順）です。後者のみ banner.md に書き足しました。（正典-canon/episode-n/banner/banner.md）

測り方は、結果を見る前に決める。新しい原稿を「今の規範」と「新しい規範」で生成。差分は banner.md だけ。見る項目は13で、座標と文言から機械（layout.json）で判定しました。

型を先に決め、イラストの向きはその中で合わせる

検証のなか、Opus はイラストを左｜文字情報を右に置きました。「A・B」などの文字が入ったイラストは反転できない。しかし「人物の顔と身体の向きを文字情報側に向ける」という私のルールを守るために、型の左右を入れ替えて生成してきたのです。

「人物は文字の側を向ける」というルールでokですが、文字が含まれているイラストについては反転不可なので、登録イラストをそのまま配置して良いです。ですが、今の規範N2で、イラストを文字の側を向かせるために、イラスト左｜文字右で配置しているのだと思いますが、レイアウトの型よりも、イラストの向きを優先させるようなルールは良くないと思います。

私からAIへの指摘

型で左右を決めて、"その中で"イラストの向きを合わせる順に規範を書き直しました。書き直した規範でもう1本生成し、6/6 でした。

Canva の編集画面を確認しもう1つ決めました。見出しが1つのテキストボックスになるのか、行ごとにテキストが別れるのか。これはマーカーのあしらいが起因しています。よって、マーカーがある見出しは行ごとに分け、無いものは1つにまとめます。ブランドや使う人が変われば、マーカーが不要な場合もあるためです。

型を手放し規範を育てる新たな仕組み

v3 では型を持たず、ブランドの規範と指示文だけを持ちます。今回複数のブランドで生成/検証を実施しましたが、それは、修正内容のうち"全般的に当てはまるもの"を規範に戻す経路を作るためでした。

使うツールは、Canva ではなく Figma でももちろん構いません。その組織に適したツール選定が必要です。また、Opus＋Canva で生成した版→人が仕上げた版の差分は、次の規範への貴重な材料になると思います。

型を手放し、規範を育てる新たな形。型を渡さないぶん、改善を規範に戻す流れを丁寧に作っていくことが大切です。