# 勉強会HTML資料キット v1.0

Claude Code か Codex に「勉強会の資料つくって」と頼むだけで、**画像つきの本格的なHTML講義資料**が1枚で出てくるようになるスキル集です。

配布: なりタイ園長 ／ ウラチカ会員向け先行配布（外部への再配布はご遠慮ください）

---

## 入っているもの

| フォルダ | 中身 | 入れる場所 |
|---|---|---|
| `claude-skills/seminar-html-deck-distinct-ui` | **本体**。HTML講義資料をつくるスキル | `~/.claude/skills/` と `~/.codex/skills/` の両方 |
| `claude-skills/seminar-html-deck` | 上の土台になった旧版（本体から参照される） | 同上 |
| `codex-skills/friendly-infographic-style` | **図解づくり**。犬猫キャラの日本語図解を生成するスキル | `~/.codex/skills/` |

> **置き場所はインストーラが自動で振り分けます。** 本体スキルは Claude Code と Codex の
> 両方に入るので、どちらのツールからでも使えます。図解スキルは Codex 側だけです。

### Claude Code と Codex、どちらで使う？

**どちらでも資料は作れます。違いは図解（イラスト）の作られ方です。**

| | 資料本体 | 図解の生成 |
|---|---|---|
| **Codex** | ✅ | ✅ 内蔵の画像生成をそのまま使う（速い・素直） |
| **Claude Code** | ✅ | ⚠️ 裏で Codex を呼び出す（Codex CLI が別途必要） |

本体スキルは元々、画像生成に Codex の `imagegen` を使う前提で書かれています。
そのため **図解までフルに使うなら Codex 側で動かすのがいちばん素直**です。
Claude Code だけの場合、図解の自動生成は動きませんが、HTML資料そのものは問題なく作れます。

---

## インストール（1分）

### 方法A・おすすめ: AIに頼む（コマンド不要・Windows / Mac 共通）

Claude Code か Codex を開いて、同梱の **`install-prompt.txt` の中身をそのまま貼る**だけです。
解凍も置き場所もAIがやってくれます。ターミナルもPowerShellも触りません。

途中で「このフォルダに書き込んでいいですか？」と聞かれたら**許可してください**（断ると途中で止まります）。
「インストール完了」と言われたら終わりです。

---

### 方法B: 自分でインストーラを動かす

#### Windows
**`install-windows.bat` をダブルクリック**するだけです。

> 💡 `install-windows.ps1` を右クリックする方法もありますが、**Windows 11 では
> 「PowerShell で実行」が右クリックメニューに出ないことがあります**（PowerShellは入っていても出ません）。
> `.bat` の方はその影響を受けないので、こちらを使ってください。

**それでもダメなときは、フォルダのアドレスバーから開く方法が確実です:**

1. `install-windows.ps1` が入っているフォルダを開く
2. 上の**アドレスバー**（フォルダの場所が出ている欄）をクリックして文字を消す
3. `powershell` と打って Enter → そのフォルダでPowerShellが開く
4. 開いた画面に下を貼って Enter

```
powershell -ExecutionPolicy Bypass -File install-windows.ps1
```

#### Mac
ターミナルで:
```
bash install-mac.sh
```

どちらも「インストール完了」と出れば終わりです。使うツール（Claude Code / Codex）を再起動してください。

---

## 使い方

Claude Code か Codex で、ふつうに日本語で頼むだけです。

```
来週の勉強会の資料つくって。テーマは「◯◯」。図解多めで。
```

スキルが自動で立ち上がり、章立て → 図解 → HTML実装 → ブラウザ確認、まで進みます。

うまくいくコツ:

- **「図解多めで」と言う** — 言わないとイラスト寄りになります
- **対象者を伝える** — 「AI初心者向け」「経営者向け」で難易度が変わります
- **時間を伝える** — 「60分の勉強会」と言うと分量が合います
- 出来上がったら **必ず自分でブラウザを開いて確認** してください

---

## 動作条件（正直に書きます）

| 機能 | 必要なもの |
|---|---|
| HTML資料をつくる（メイン） | **Claude Code か Codex、どちらか一方**があれば動きます |
| 図解を自動生成する | **Codex**（内蔵の画像生成を使います） |
| 図解の品質チェック | **Python 3** ＋ Pillow（`pip install pillow`） |

### かかる費用（正直に書きます）

このキット自体は無料ですが、動かすにはどちらかの**月額プランが必要**です。無料プランでは実用になりません。

| やりたいこと | 必要な契約 | 月額 |
|---|---|---|
| **図解つきでフルに使う**（おすすめ） | ChatGPT Plus 以上（Codex はChatGPTプランに含まれます） | **$20〜** |
| **Claude Code で資料を作る**（図解なし） | Claude Pro（Claude Code はPro/Maxに含まれます） | **$20〜** |
| たくさん作る・長時間使う | Claude Max（5倍 / 20倍） | $100 / $200 |

**片方だけなら月$20から始められます。**
図解まで自動で欲しいなら **ChatGPT Plus 側（Codex）**が素直です。本体スキルが Codex の画像生成を
使う前提で書かれているためで、Claude Code から使う場合は裏で Codex を呼び出す形になります。

両方契約していれば、資料はClaude Code・図解はCodexという分担もできますが、必須ではありません。

※2026年8月時点の米ドル価格です。日本円の請求額は為替と税で変わります。価格は変更されることがあるので、契約前に各公式サイトでご確認ください。

**Claude Code だけの方へ:** 図解の自動生成だけが動きません。ただし**HTML資料そのものは普通に作れますし、
文字と図形で組む「HTML図解」は Claude Code だけで作れます**（むしろこちらの方が編集しやすいです）。
図解画像が必要になったら、その部分だけ手持ちのツールで作って差し替えてください。

---

## 中身をカスタマイズしたい人へ

`SKILL.md` がスキルの本体（指示書）です。テキストなので、そのまま日本語で書き換えられます。

- デザインの方向性を変えたい → `references/ui_theme_directions.md`
- 講義の章立てを変えたい → `references/lecture_architecture.md`
- 図解のトンマナを変えたい → `codex-skills/.../references/style-guide.md`

自分の講座の型に合わせて育てていくのが、いちばん効きます。

---

## 困ったとき

- **スキルが呼ばれない** → 使っているツールを再起動してください。それでもダメなら、インストーラをもう一度実行してください
- **図解が生成されない** → Codex を使っているか確認。Claude Code から使う場合は Codex CLI が別途必要です（`codex --version` で確認）
- **文字が崩れた図解が出た** → スキルに検証機能が入っています。「タイル検証して」と伝えるとやり直します

それでも解決しなければ、Discordで気軽に聞いてください。スクリーンショットがあると助かります。

---

## 注意

- 現状のまま提供します。出力は必ずご自身で確認してから使ってください
- 同梱フォント（M PLUS Rounded 1c）は SIL Open Font License です（`assets/fonts/OFL.txt`）
- ウラチカ会員向けの先行配布です。外部への再配布はご遠慮ください🙏
