# スライドフォーマット仕様
## 概要
YouTube 学習動画用スライドのフォーマットを 14 タイプに整理した仕様書。
参照学習元: グロービス学習教材スライド（構造のみ抽出、カラー/世界観は不採用）。
カラーは HP（コーポレートサイト）ブランド青 `#4D8DFF` を継続。
## 生成パイプライン（固定運用）
1. ユーザー: `## type: タイトル` 形式の **原稿 Markdown** を提供
2. Claude: 各 `##` ブロックを 1 スライドとして HTML 化、`assets/slide-formats.css` のクラスを利用
3. 出力: `slides/epXX/index.html`、`data/episodes.json` ＆ TOP `index.html` の inline data に追記
## 11 種類のスライドタイプ
### 1. `chapter` 章扉
**用途**: 各章・各回の開始
**レイアウト**: 中央寄せ／番号バッジ＋巨大タイトル＋サブタイトルピル
**収まり**: タイトル 30 字以内 / サブ 20 字以内
```markdown
## chapter: 第1回 / AIってそもそも何？ / 全体像をつかむ概念
```
### 2. `agenda` アジェンダ／目次
**用途**: この章で扱う内容予告
**レイアウト**: 番号付き 4–5 行（区切り線で区切る）、左に番号 / 右に項目名
**収まり**: 4–5 項目、1 項目 25 字以内
```markdown
## agenda: 基礎編 第1回の内容
- AIのもたらす社会的インパクト
- AIの定義・発展経緯と発展予想
- 今、AIにできること・活用イメージ
- 組織の観点でみる影響の全体像
```
### 3. `term` 用語定義
**用途**: キーワード／専門用語の定義
**レイアウト**: 中央寄せ／上部に用語ピル＋大きな定義文 1–2 行
**収まり**: 定義 60 字以内が理想、補足は 80 字以内
```markdown
## term: 人工知能（AI）
人工的に作られた人間のような知能、ないしはそれを作る技術
> 人を真似た「知性」を機械で再現する試み（補足任意）
```
### 4. `decompose` 頭文字分解
**用途**: GRC 等を 3 要素に分解説明
**レイアウト**: 横 3 並びカード（頭文字大＋ラベル＋説明）＋下部統合帯
**収まり**: 3 要素固定、各説明 60 字以内
```markdown
## decompose: GRCとは
- G | ガバナンス | 組織の方向性やルールを定め、経営を行うための仕組み
- R | リスクコントロール | リスクを特定しコントロールする
- C | コンプライアンス | 法令遵守、社会的なルールを遵守
> 積極的で健全にAIを活用できる強い組織に
```
### 5. `compare` 比較表
**用途**: 国・サービス・流派の対比
**レイアウト**: 行ごとに左ラベル＋右説明、4 行まで
**収まり**: 4 行 × 説明 100 字以内
```markdown
## compare: グローバルAIガバナンス概況
| 米国 | 自由市場と民間主導を重視（…） |
| 中国 | AIを国家戦略の柱（…） |
| EU | AI法を承認（…） |
| 日本 | 柔軟性と国際調和を重視（…） *highlight
> 出典: Microsoft / NIST 等（任意）
```
### 6. `steps` ステップカード横並び
**用途**: 3〜4 つの能力／ポイントを並列に
**レイアウト**: 番号付きカード横並び＋下部に問いかけ帯
**収まり**: 3〜4 枚、1 枚 20 字以内
```markdown
## steps: 今、AIにできること
- 自然で高度な言語処理
- 複雑なデータ分析・プログラミング支援
- 高精度な画像・音声・映像理解
> 各領域でのリスクと対策は？
```
### 7. `phases` テーブル形式リスト
**用途**: フェーズ別／要素別の概要
**レイアウト**: 2列表（左：名称、右：概要）、現在行は背景強調
**収まり**: 5 行まで、概要 50 字以内
```markdown
## phases: GRC戦略の対応ステップ
| 調査 | AI倫理・法制度の最新動向を継続的に把握 |
| 分析 | 従来の業務慣行とのギャップを明確化 |
| 戦略 | 倫理・コンプライアンス方針の策定 |
| 施策 | 教育・制度・プロセスの整備と展開 |
| 実行・改善 | モニタリングと改善サイクルの運用 *current
```
### 8. `summary` 箇条書きまとめ
**用途**: 章末・コース末のまとめ
**レイアウト**: 3〜4 行のロング箇条書き、行間広め
**収まり**: 3〜4 項目、1 項目 80 字以内
```markdown
## summary: 本コースのまとめ
- リーダーはAIにできることと共に、「現場翻訳者」として業務でのリスクと対策を把握する
- リーダー自身も、AI活用の中核的な存在
- 経営層は、健全なAI活用のためにガバナンス戦略を継続的に見直す
```
### 9. `grid2x2` 2×2 グリッド
**用途**: 4 種類のカテゴリ／対比、1 つを強調
**レイアウト**: 2×2 タイル、1 つだけ青塗り
**収まり**: 4 タイル固定、1 タイル 25 字以内
```markdown
## grid2x2: 大規模言語モデルでできること
- 文章生成（要約・推論・ブレスト） *highlight
- コード生成
- 構造化データの分析
- 画像情報から情報抽出
```
### 10. `cards3` 3カラムカード
**用途**: 並列カテゴリの紹介
**レイアウト**: 3 カラム、各カードに小見出し＋説明
**収まり**: 3 枚固定、1 枚 50 字以内
```markdown
## cards3: 生成AIができること
- テキスト系生成AI | 文章のチャット例
- 画像・動画生成AI | 画像生成・スタイル指定
- オーディオ系生成AI | 音声・音楽生成
> 生成AIはテキストや画像・動画・音声を組み合わせて様々なアウトプットを生成（任意）
```
### 11. `message` 結論先出し（1 行メッセージ）
**用途**: 1 行で言い切る主張・問い
**レイアウト**: 中央に大きな 1 行（最大 2 行）＋補助テキスト任意
**収まり**: メイン 30 字以内、補助 60 字以内
```markdown
## message: 実際のビジネスで価値を提供していくのは難しい
> 一方で、難しいからこそ価値がある。
```
`…` を使えばブランド青ハイライト可能。
### 12. `matrix` 3列マトリクス相関図
**用途**: 左軸 × 中央セル群 × 右軸 で「両軸の交点」を見せる
**レイアウト**: 中央タイトル / 左軸 4 項目・中央 4×2 セル・右軸 4 項目・最右に縦帯補足
**収まり**: 軸 4 項目固定、セル 1 つ 12 字以内
```markdown
## matrix: 生成AIのテーマの考え方
@left: 生成AIの強み
- 会話力 *highlight
- 理解力
@center: 強みが活きる業務例
| 顧客対応 | メンタルケア |
| 要約・翻訳 | 訂正・指摘 |
@right: 広義のAIの強み
- 常時稼働 *highlight
- 高速化
@side: 左記の業務がこれらの軸で強化される
```
### 13. `cover` エピソード表紙
**用途**: 各エピソード（YouTube 動画）の冒頭表紙
**レイアウト**: 中央寄せ／ロゴロックアップ → 大見出し（青ハイライト可）→ 左罫線つきキャッチ／左下にブランドシンボル
**収まり**: h1 80px・2 行まで、キャッチ 30 字以内
```html
AIを学ぶ研修ではなく、
AIで業務が変わる研修。
中小企業のためのAI活用人材育成プログラム
```
### 14. `case` Before/After 事例
**用途**: 人物プロフィール + 数値の「研修前 → AIで変わった今」比較
**レイアウト**: 上段に avatar 200px + 氏名（年齢は `` で 80%）+ 所属／下段に Before / → / After の 3 列カード（数字 96px を主役）
**収まり**: 数値は 1〜3 桁、説明は 2 行以内
```html
👩
恵子 さん（52歳）
社労士事務所 事務員 / 鹿児島
研修前
残業 月
50時間
月末は残業続き。
土曜出勤も、当たり前。
→
AIで変わった、今
残業 月
10時間
土曜は、
お孫さんと過ごす時間に。
```
`.num.jp` を付けると Inter→Noto に切替（「週1」「半」など日本語数値表現用）。
### バリエーション
- **`fmt-steps .cols-5`** — ステップ 5 段（標準は 3-4 段）。ラベル 4 文字以内推奨。
- **`fmt-message img.quote-mark`** — h1 の上に `
` を置くと引用記号付きメッセージに。
---
## 入力 Markdown テンプレート（コピペ用）
```markdown
# C0X タイトル全体（参考。出力スライドには載せない）
## chapter: 番号 / メインタイトル / サブタイトル
## agenda: カテゴリ名
- 項目1
- 項目2
- 項目3
## message: 結論を1行で
> 補助の1行（任意）
## term: 用語名
定義を1〜2行で
## steps: 見出し
- 項目1
- 項目2
- 項目3
> 問いかけ・締めの1行（任意）
## decompose: 見出し
- 頭文字 | ラベル | 説明
- 頭文字 | ラベル | 説明
- 頭文字 | ラベル | 説明
> 統合メッセージ
## compare: 見出し
| 行ラベル | 説明 |
| 行ラベル | 説明 *highlight |
> 出典（任意）
## phases: 見出し
| 名称 | 概要 |
| 名称 | 概要 *current |
## summary: 見出し
- 長めの箇条書き1
- 長めの箇条書き2
- 長めの箇条書き3
## grid2x2: 見出し
- タイル1
- タイル2 *highlight
- タイル3
- タイル4
## cards3: 見出し
- 小見出し1 | 説明1
- 小見出し2 | 説明2
- 小見出し3 | 説明3
> リード文（任意）
```
---
## 変換ルール（要約）
| 記号 | 意味 |
|------|------|
| `## type: タイトル` | 1 スライド開始。`type` は 11 種類のいずれか |
| タイトルの `/` | 章扉等で「番号 / メイン / サブ」に分割 |
| `- 項目` | 各タイプのリスト要素 |
| `\| a \| b \|` | テーブル形式の行データ（`compare` / `phases`） |
| `\| a \| b \| c` | 3列パイプ（`decompose` 専用：頭文字/ラベル/説明） |
| `> ...` | 補助メッセージ・フッター・出典 |
| `*highlight` | その行を強調（compare / grid2x2） |
| `*current` | その行を「現在地」として強調（phases） |
## 原則
1. **1 セクション = 1 スライド**（演者の発話セクションごとに 1 枚で完結）
2. **収まらないなら分割を提案**、文字を縮めて詰め込まない
3. **センター揃え徹底**、はみ出したら縦→横レイアウトへ切替
4. **装飾英語は載せない**（台本に出てこない英語）
5. **角丸カードに上端だけのライン禁止**
6. **シャドウは navy 中立**（`rgba(15,23,42, .06–.10)`）
7. **括弧囲み補足は 80%**（``）
## CSS / HTML 対応
- 各タイプは `assets/slide-formats.css` の `.fmt-` クラスで実装済み
- スライド HTML は `` で記述
- 1920×1080 固定（`assets/slide.css` の `.stage`）
## デモ
`slides/_format-demo/index.html` で 14 タイプ + バリエーション（cols-5 / quote-mark）全部を確認可能。
カタログは `format-list.html`。
