---
name: slide-maker
description: "本文テキストからスライド資料を作るスキル。slides.json → build_slides_html.py で HTML プレゼンを生成する（図解ファースト・13レイアウト・画像生成なし・配色テーマ6種）。ブラウザでそのまま発表でき、PDFにも書き出せる。「スライド作って」「資料作って」「プレゼン作って」「講座の資料を作りたい」で発動してよい。PowerPoint形式は作らない。"
user-invocable: true
---

# slide-maker スライド資料作成スキル

渡された本文テキストをもとに、スライドを HTML として生成する。ブラウザで開けばそのままプレゼンでき、PDFにも書き出せる。

**生成方式:** `slides.json` → `build_slides_html.py` → `index.html`（← →キーでめくる、`f` で全画面）。外部サービス不要、Python 標準ライブラリのみで動く。

**出力名を `index.html` にするのは、そのままWebに公開できるようにするため**（公開用スキルはフォルダの中の `index.html` を探す）。ローカルで開くときも同じファイルをダブルクリックすればよい。

**設計の考え方:** 装飾で盛らず、余白・罫線・ウェイト差で階層を作る。色は本文色＋アクセント1色の2色だけ。1枚に1メッセージ。

## 必須参照ファイル

実行前に必ず読む。

- [`layouts.md`](layouts.md) — 実装済み13レイアウトのカタログ・選定ガイド

---

## ワークフロー

### Step 1. 入力受付

ユーザーから本文テキスト（スライドにしたい内容の原稿）を受け取る。**提供されていなければ、受け取るまで先に進まない。**

あわせて確認する（指定がなければ自動で決めてよい）:

- 表紙タイトル
- 想定スライド枚数（目安: 8〜15枚）
- 配色テーマ（下記の6種。指定がなければ `sumi`）
- 発表者名を表紙に入れるか

### Step 2. 本文を整える

**ユーザーの言葉づかいを尊重する。** 勝手に別人の口調へ書き換えない。整えるのは次の範囲にとどめる。

- 各スライドの中心メッセージを **1文** に圧縮する
- 話し言葉の冗長な部分（「えー」「まあ」等）を削る
- 1文が長すぎる場合に区切る

ユーザーから口調やトーンの指定（例: ですます調で、社内向けに硬めで）があれば、それに従う。

### Step 3. スライド分解 + レイアウト選定

**設計思想（最優先）: 図解ファースト。** 情報を詰め込まず、視覚的な図解でまとめ、言葉は短い補足に回す。

- **1スライド = 1図解 + 1メッセージ**。長い説明文はスライドに書かない（補足は1〜2行まで）
- 内容に数字・量の比較・割合・流れ・位置づけが含まれるなら、箇条書き（bullets/cards）ではなく**図解レイアウトを優先**する:
  - 印象的な数字・料金 → `big-number`
  - 量の大小比較 → `bar-chart`
  - 構成比・割合 → `donut`
  - 手順・流れ → `flow`（または `process`）
  - 2軸での位置づけ（価格×品質等） → `matrix`
  - 要点3つをアイコンで象徴 → `icon-summary`
- bullets / cards は「図解にできない定性的な情報」の最終手段と考える

本文を意味の塊（1メッセージ）ごとに分割し、1塊 = 1スライドにする。各スライドに `layouts.md` から最も合うレイアウトを **1つ** 選び、選定根拠を1行で記録する。

**出力例（プラン）:**

```
slide_01: Cover「AI研修導入のすべて」 / Layout=cover
slide_02: 「導入前後の変化」 / Layout=bar-chart（数値比較）
slide_03: 「Before / After」 / Layout=comparison（定性的な対比）
slide_04: 「導入ステップ」 / Layout=flow（3ステップの流れ）
slide_05: 「3つの導入事例」 / Layout=cards（定性的な事例紹介）
```

このプランは **JSON 生成前にユーザーに見せて確認する。** 承認後に Step 4 へ。

### Step 4. 出力フォルダを準備

作業用のフォルダを1つ作る。場所はユーザーのやりやすい場所でよい（例: デスクトップ配下）。

```bash
mkdir -p ~/Desktop/slides/<プロジェクト名>
```

`<プロジェクト名>` は本文の主題から作る（例: `AI研修導入ガイド_2026-08-23`）。

### Step 5. slides.json を生成

`<出力フォルダ>/slides.json` を作る。

**配色テーマ**（トップレベルに書く。省略時は `sumi`）:

| キー | 見え方 | 向いている場面 |
|---|---|---|
| `sumi` | 墨と朱赤 | 既定。硬派・落ち着いた場 |
| `navy` | 紺と橙 | ビジネス・研修 |
| `forest` | 深緑と芥子 | 自然・健康・食 |
| `plum` | 葡萄と桃 | 美容・サロン・女性向け |
| `indigo` | 藍と水色 | IT・清潔感 |
| `charcoal` | 炭と若草 | 教育・カジュアル |

**JSON スキーマ:**

```json
{
  "theme": "sumi",
  "slides": [
    {
      "layout": "cover",
      "title": "タイトル",
      "subtitle": "サブタイトル（任意）",
      "author": "発表者名（任意）"
    },
    {
      "layout": "section",
      "section_num": 1,
      "title": "章タイトル"
    },
    {
      "layout": "cards",
      "headline": "ヘッドライン（1文）",
      "subheadline": "補足（任意）",
      "accent": "blue",
      "items": [
        { "title": "カードタイトル", "body": "説明文（任意）" }
      ]
    },
    {
      "layout": "bullets",
      "headline": "ヘッドライン（1文）",
      "subheadline": "補足（任意）",
      "accent": "blue",
      "items": [
        { "title": "項目", "body": "説明（任意）" }
      ]
    },
    {
      "layout": "comparison",
      "headline": "ヘッドライン（1文）",
      "left_label": "Before",
      "right_label": "After",
      "left_color": "red",
      "right_color": "green",
      "left_items": ["項目A", "項目B"],
      "right_items": ["項目A", "項目B"]
    },
    {
      "layout": "process",
      "headline": "ヘッドライン（1文）",
      "subheadline": "補足（任意）",
      "accent": "blue",
      "steps": ["ステップ1", "ステップ2", "ステップ3"]
    },
    {
      "layout": "big-number",
      "headline": "ヘッドライン（1文）",
      "subheadline": "補足（任意）",
      "accent": "blue",
      "items": [
        { "value": "¥2,900", "label": "月額", "note": "補足（任意）" }
      ]
    },
    {
      "layout": "bar-chart",
      "headline": "ヘッドライン（1文）",
      "accent": "blue",
      "items": [
        { "label": "無料", "value": 50, "display": "50/日", "highlight": false }
      ]
    },
    {
      "layout": "donut",
      "headline": "ヘッドライン（1文）",
      "items": [
        { "label": "項目A", "value": 60 }
      ]
    },
    {
      "layout": "flow",
      "headline": "ヘッドライン（1文）",
      "accent": "blue",
      "steps": [
        { "title": "入力", "body": "補足（任意）" }
      ]
    },
    {
      "layout": "matrix",
      "headline": "ヘッドライン（1文）",
      "x_label": "価格",
      "y_label": "品質",
      "accent": "blue",
      "points": [
        { "label": "自社", "x": 30, "y": 55, "highlight": true }
      ]
    },
    {
      "layout": "icon-summary",
      "headline": "ヘッドライン（1文）",
      "accent": "blue",
      "items": [
        { "icon": "🎬", "title": "ひとこと要点", "body": "補足（任意）" }
      ]
    },
    {
      "layout": "closing",
      "message": "ありがとうございました",
      "sub_message": "CTA テキスト（任意）"
    }
  ]
}
```

**図解レイアウトの制約:**

- `big-number` の items は 1〜3 個 / `bar-chart` は 3〜6 本 / `donut` は 2〜5 区分
- `flow` のステップは 3〜4 個 / `matrix` の points は 3〜6 個 / `icon-summary` は 3 個が基本
- `bar-chart` の `value` は数値（棒の長さ計算用）、`display` に表示文字列（"50/日" 等）を入れる
- `matrix` の `x`/`y` は 0〜100。`highlight: true` の点だけアクセント色になる
- `accent` / `left_color` / `right_color` の値: `"blue"`（中立）| `"green"`（強調）| `"red"`（非推奨）。実際の色はテーマに従って決まる
- `items` / `steps` を文字列で書けるのは `cards` / `bullets` / `flow` / `icon-summary` のみ。**`big-number` / `bar-chart` / `donut` の items は必ずオブジェクト**（`{value, label}` 等）で書く。文字列を渡すとビルドが落ちる

### Step 6. HTML を生成

```bash
python3 <このスキルのフォルダ>/build_slides_html.py \
  --slides <出力フォルダ>/slides.json \
  --output <出力フォルダ>/index.html
```

テーマを後から変えて試すこともできる（`slides.json` の `theme` より優先される）:

```bash
python3 <このスキルのフォルダ>/build_slides_html.py \
  --slides <出力フォルダ>/slides.json \
  --output <出力フォルダ>/index.html \
  --theme navy
```

ビルド時に headline 文字数超過・items 個数超過・不明レイアウトの警告が出る。**警告が出たら slides.json を直して作り直す。**

### Step 7. 目視で確認する

生成した HTML をブラウザで開き、**全スライドの折り返しを実際に見る。** 1〜2文字だけ次行に残っていたり、単語の途中で改行していたら slides.json を直して作り直す。ここは自動チェックでは拾いきれない。

### Step 8. PDF を生成（送付・印刷が必要なときだけ）

```bash
python3 <このスキルのフォルダ>/export_pdf.py \
  --html <出力フォルダ>/index.html \
  --output <出力フォルダ>/<プロジェクト名>.pdf
```

headless Chrome で全スライドを1枚ずつ画像化し、1つのPDFに結合する。**発表はHTMLのままで足りるので、PDFは必要なときだけ作る。**

### Step 9. 報告

- HTML のフルパス（`open <path>` でブラウザが開く）
- PDF のフルパス（作った場合）
- 各スライドのタイトル + 採用レイアウト + 選定理由
- スライド総枚数
- ビルド警告が出ていればその内容と対応

---

## 依存関係

**Python 標準ライブラリのみ**で動く。追加インストールは不要。

- PDF出力のときだけ headless Chrome（`Google Chrome.app`）を使う
- フォントは `fonts/master/` の Noto Sans JP を同梱済み。ビルド時にスライドで使う文字だけを切り出してHTMLに埋め込むので、**ネット接続なしでもどの環境でも同じ見た目**になる
- `fontTools` が入っていればサブセット化され、無ければフル埋め込みになる（ファイルは大きくなるが表示は崩れない）

---

## 注意事項

### 1. 改行ルール（最重要）

slides.json に書くすべてのテキスト（headline / items / steps / body 等）に適用する。

- **1〜2文字だけ残る孤立行を作らない。** 最終行に短い語が残る場合は言い換えるか、`<br>` で手前の文節に折る
- **単語・熟語の途中で改行しない。**「自動生／成」「消費クレ／ジット」は NG。文節境界（助詞・読点の直後）で折る
- **読点「、」を行末に置かない**
- **headline は必ず1行・体言止め。** 全角30文字を超えるとビルド時に警告が出る。話し口調（〜いこう、〜見てみよう）は使わない。`<br>` も使わない
- `<br>` を使えるのは subheadline・body・items。読点で意味が切れる位置に置く
- `<br>` はそのままテキストに書けばHTMLに反映される。**`&lt;br&gt;` と表示されていないか必ず確認する**

### 2. その他

- `items` / `steps` の個数は `layouts.md` の上限を守る。超えたらスライドを分割する
- `comparison` の左右はそれぞれ 4〜5 項目が上限
- `process` のステップが 6 以上になるなら 2枚に分けるか `bullets` にする
- ビルドエラーが出たら slides.json の JSON 構文と、items のオブジェクト/文字列の使い分けを確認する
- 1枚の中でアクセント色が主役になるのは **1箇所**まで
- 絵文字は `icon-summary` 以外で使わない
