JAWS DAYS 2026の登壇テンプレートから、Kiro CLI + Marpでスライドを作ってみた

0. テンプレート入手 → 公式PPTXとPDFを作業ディレクトリに配置
1. テンプレート解析（python-pptx）→ レイアウト構造・画像抽出
2. PDF解析（PyMuPDF）→ フォント・色・サイズの特定
3. Marpカスタムテーマ作成（CSS）→ 抽出素材を組み込み
4. スライド本文作成（Markdown）
5. Marp CLIでビルド（Docker）→ HTML / PPTX 出力

docker run --rm -v "$(pwd):/work" python:3.12-slim bash -c \
  "pip install python-pptx -q && python3 /work/analyze_template.py"

from pptx import Presentation

prs = Presentation('/work/template.pptx')
print(f'Slide size: {prs.slide_width}, {prs.slide_height}')
print(f'Slides: {len(prs.slides)}')

# レイアウト一覧
for i, layout in enumerate(prs.slide_layouts):
    print(f'Layout {i}: {layout.name} ({len(layout.placeholders)} placeholders)')
    for ph in layout.placeholders:
        print(f'  PH {ph.placeholder_format.idx}: {ph.name} ({ph.placeholder_format.type})')

# スライド内容
for i, slide in enumerate(prs.slides):
    print(f'Slide {i}: layout={slide.slide_layout.name}, shapes={len(slide.shapes)}')
    for s in slide.shapes:
        txt = s.text[:60] if s.has_text_frame else '(no text)'
        print(f'  {s.shape_type}: {s.name} - {txt}')

Layout 0: タイトル スライド (5 placeholders)
  PH 0: タイトル 1 (CENTER_TITLE)
  PH 1: 字幕 2 (SUBTITLE)
Layout 1: タイトルとコンテンツ (5 placeholders)
  PH 0: タイトル 1 (TITLE)
  PH 1: コンテンツ プレースホルダー 2 (OBJECT)
Layout 4: 1_セクション見出し (4 placeholders)
  PH 0: タイトル 1 (TITLE)
...

from pptx import Presentation
import os, hashlib

prs = Presentation('/work/template.pptx')
os.makedirs('/work/assets', exist_ok=True)

def save_img(blob, content_type, prefix):
    ext = content_type.split('/')[-1].replace('jpeg', 'jpg')
    h = hashlib.md5(blob).hexdigest()[:8]
    name = f'{prefix}_{h}.{ext}'
    with open(f'/work/assets/{name}', 'wb') as f:
        f.write(blob)
    print(f'  {name} ({len(blob)} bytes)')

# スライドマスター（共通背景）
for rel in prs.slide_masters[0].part.rels.values():
    if 'image' in rel.reltype:
        save_img(rel.target_part.blob, rel.target_part.content_type, 'master')

# レイアウト（レイアウト固有の背景）
for i, layout in enumerate(prs.slide_layouts):
    for rel in layout.part.rels.values():
        if 'image' in rel.reltype:
            save_img(rel.target_part.blob, rel.target_part.content_type, f'layout{i}')

# スライド（ロゴ・写真等）
for i, slide in enumerate(prs.slides):
    for shape in slide.shapes:
        if shape.shape_type == 13:  # PICTURE
            save_img(shape.image.blob, shape.image.content_type,
                     f'slide{i}_{shape.name.replace(" ", "_")}')

docker run --rm -v "$(pwd):/work" python:3.12-slim bash -c \
  "pip install python-pptx -q && python3 /work/extract_assets.py"

cp assets/master_59d01390.png assets/bg_normal.png    # 通常スライド背景
cp assets/layout0_5359490e.png assets/bg_title.png    # タイトルスライド背景
cp assets/layout0_49552750.png assets/logo_title.png  # タイトル用ロゴ

docker run --rm -v "$(pwd):/work" python:3.12-slim bash -c \
  "pip install pymupdf -q && python3 /work/analyze_pdf.py"

import fitz

doc = fitz.open("/work/template.pdf")
for i, page in enumerate(doc):
    pix = page.get_pixmap(dpi=150)
    pix.save(f"/work/assets/template_page{i}.png")  # 目視確認用

    print(f"Page {i}: {pix.width}x{pix.height}")
    for b in page.get_text("dict")["blocks"]:
        for line in b.get("lines", []):
            for span in line["spans"]:
                txt = span["text"].strip()
                if txt:
                    print(f"  [{span['size']:.1f}pt {span['font']}]"
                          f" color=#{span['color']:06x} \"{txt[:50]}\"")

Page 0: 2000x1125
  [36.0pt YuGothic-Bold] color=#424242 "JAWS DAYS 2026"
  [59.9pt YuGothic-Light] color=#424242 "登壇資料用テンプレート"
  [23.8pt YuGothic-Regular] color=#424242 "デザイン班 鮫肌 鮫男"

/* @theme mytheme */
@import 'default';

section {
  font-family: 'Yu Gothic', 'YuGothic', 'Noto Sans JP', sans-serif;
  background-image: url('./assets/bg_normal.png');
  background-size: 80%;
  background-repeat: no-repeat;
  background-position: center center;
  color: #424242;
  padding: 50px 60px 40px;
}

section h1 {
  color: #424242;
  font-weight: 300;  /* Light */
  font-size: 1.4em;
}

section p, section li {
  font-weight: 400;  /* Regular */
  font-size: 0.85em;
}

/* タイトル・セクション区切り共通 */
section.title, section.section {
  background-image: url('./assets/bg_title.png');
  background-size: 80%;
  background-repeat: no-repeat;
  background-position: center center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

section.title h1, section.section h1 {
  font-weight: 300;
  font-size: 1.8em;
}

/* テーブル */
table th {
  background-color: #424242;
  color: #fff;
}

/* テンプレート指定フォントがない環境向け：Webフォントで代替 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;700&family=Roboto:wght@300;400;700&display=swap');
section { font-family: 'Roboto', 'Noto Sans JP', sans-serif; }

/* タイトルスライドのh1：黒の半透明座布団 + 白文字 */
section.title h1 {
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.55);
  display: inline-block;
  padding: 12px 36px;
  border-radius: 8px;
}

/* サブタイトル・登壇者情報：白の半透明座布団 + ダーク文字 */
section.title h2 {
  color: #333333;
  background-color: rgba(255, 255, 255, 0.85);
  display: inline-block;
  padding: 8px 24px;
  border-radius: 4px;
}

---
marp: true
theme: mytheme
paginate: true
size: 16:9
---

<!-- _class: title -->

# セッションタイトル
## サブタイトル

イベント名 | 日時
**登壇者名**

---

# 通常スライド

- 箇条書き1
- 箇条書き2

---

<!-- _class: section -->

# セクション区切り

---

# コンテンツスライド

| 項目 | 値 |
|---|---|
| A | B |

docker run --rm \
  -e MARP_USER="$(id -u):$(id -g)" \
  -v "$(pwd):/home/marp/app" \
  marpteam/marp-cli \
  slides.md --theme mytheme.css --html --allow-local-files \
  -o output/slides.html

docker run --rm \
  -e MARP_USER="$(id -u):$(id -g)" \
  -v "$(pwd):/home/marp/app" \
  marpteam/marp-cli \
  slides.md --theme mytheme.css --pptx --allow-local-files \
  -o output/slides.pptx

# テンプレート解析（Step 1-2を一度に）
作業ディレクトリの template.pptx を解析して。
レイアウト構造と埋め込み画像を一覧化し、背景画像はassetsに抽出して。
Dockerの隔離環境でpython-pptxを使って。

# PDF解析（Step 3）
template.pdf をPyMuPDFで解析して、フォント名・サイズ・色・ウェイトを一覧化して。

# カスタムテーマ作成（Step 4）
抽出した背景画像とPDF解析結果をもとに、Marp用のカスタムCSSテーマを作成して。

# スライド生成（Step 5）
SLIDE_SPEC.md に基づいて、Marp形式のslides.mdを作成して。

# ビルド（Step 6）
Marp CLIのDockerイメージでHTMLとPPTXを生成して。
ビルドはまだ後で、マークダウンが全て終了した後。

# 可否判断を先に聞くと手戻りが減る
Marpの標準機能だけで、背景画像の上に半透明のボックス（座布団）を配置することは可能？
それとも、個別にCSSを書かないと実現できないかな？

# 「どう思う？」でトレードオフの整理を任せる
全スライドに背景画像を適用するのは、文字の読みやすさを考えると欲張りすぎ（盛り込みすぎ）？
白背景のスライドも混ぜたほうがいいと思う？

# 修正指示は「問題」+「意図」で伝えると精度が上がる
「自動生成」という言葉は、別の表現に改善できない？
完全に放置で出来上がるわけではなく、AIと対話しながら作る「共同作業」であることを強調したい。