🎁 ウラチカ会員限定・先行無料配布

勉強会HTML資料キット
— 「資料つくって」の一言で、
講義ページが出てくる

いつも僕が勉強会で配っているHTML資料。あれを作っているスキルそのものを、そのままお渡しします。Claude Code か Codex に日本語で頼むだけで、章立て・図解・スマホ対応まで入った1枚のページが出来上がります。

⬇ キットをダウンロードseminar-html-kit.zip（約11MB・Windows / Mac 両対応）

無料です。Claude Code か Codex をお使いの方が対象／ウラチカ会員向けの先行配布です🙏

1なにができる？

📄 講義ページを丸ごと生成テーマを伝えるだけで、要点まとめ・本編・宿題・出典まで入った構成で出てきます。
🎨 犬猫の図解を自動生成日本語の文字が入った、あの図解。文字化けを機械チェックする工程まで入っています。
📱 スマホ対応とQA込みブラウザで実際に開いて、はみ出し・エラーを確認するところまでやります。
🎛 デザインを毎回変える「前回と同じテンプレ感」が出ないよう、構図と配色を意図的に振る仕組み入り。

2インストール（約1分）

方法A・おすすめ

AIに頼むだけ（コマンド不要・Windows / Mac 共通）

ZIPをダウンロードしたら、Claude Code か Codex を開いて、下の文をそのまま貼るだけです。解凍も置き場所もAIがやってくれます。ターミナルもPowerShellも触りません。

勉強会HTML資料キットをインストールしてください。

1. seminar-html-kit.zip を探してください（いま開いているフォルダと、ダウンロードフォルダを確認。
   見つからなければ、ファイルの場所を私に聞いてください）
2. その zip を展開してください
3. 展開した中の「claude-skills」フォルダの中身（フォルダが2つ）を、次の2か所の両方にコピーしてください
   ・~/.claude/skills/
   ・~/.codex/skills/
4. 展開した中の「codex-skills」フォルダの中身（フォルダが1つ）を、~/.codex/skills/ にコピーしてください
5. 同じ名前のフォルダが既にある場合は、末尾に .backup を付けて退避してから置いてください（消さないでください）
6. 終わったら、~/.claude/skills/ と ~/.codex/skills/ に何が入ったかを一覧で見せて、
   「インストール完了」と教えてください

途中で「このフォルダに書き込んでいいですか？」と許可を聞かれたら、許可してください。
（特に ~/.codex/ は保護されていることがあり、許可しないと途中で止まります）

Windowsの場合、置き場所は %USERPROFILE%\.claude\skills\ と %USERPROFILE%\.codex\skills\ です。
💡 途中で「書き込んでいいですか？」と聞かれたら、許可してください。ここで断ると途中で止まります。「インストール完了」と言われたら終わりです。
方法B

自分でインストーラを動かす

  1. ZIPをダウンロードして解凍する
  2. Windows: `install-windows.bat` をダブルクリックするだけ
    Mac: ターミナルで `bash install-mac.sh`
  3. 「インストール完了」と出たら成功

どちらの方法でも、最後に使うツール（Claude Code / Codex）を再起動してください。

⚠️ Windowsで、右クリックしても「PowerShell で実行」が出てこない場合
Windows 11でよくあります。PowerShellが入っていないわけではありません。 同梱の install-windows.bat をダブルクリックすれば、この問題を回避できます。

それでもダメなときは、フォルダのアドレスバーから開くのが確実です👇
  1. install-windows.ps1 が入っているフォルダを開く
  2. 上のアドレスバー（フォルダの場所が出ている欄）をクリックして、文字を消す
  3. powershell と打って Enter → そのフォルダでPowerShellが開く
  4. 開いた画面に下を貼って Enter
powershell -ExecutionPolicy Bypass -File install-windows.ps1
これは「このファイル1回だけ許可する」という意味で、PCの設定は変わりません。
📁 解凍したら、フォルダが二重になっていませんか？
Windowsの「すべて展開」は `kit / kit / …` と二重になることがあります。 `install-windows.ps1` が直接入っている階層で実行してください。

3使い方（ふつうに日本語で頼むだけ）

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

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

4Claude Code / Codex どちらでも使えます

資料本体のスキルは両方に入るので、どちらのツールからでも使えます。違いは図解（イラスト）の作られ方だけです。置き場所はインストーラが自動で振り分けるので、気にしなくて大丈夫です。

資料本体図解の生成
Codex✅ 使える✅ 内蔵の画像生成をそのまま使う
いちばん素直に動きます
Claude Code✅ 使える⚠️ 裏で Codex を呼び出す
Codex CLI が別途必要
なぜCodexが素直なの？
本体スキルが、画像生成に Codex内蔵の imagegen を使う前提で書かれているためです。 Claude Code には同じ機能が無いので、その場合だけ外の Codex を呼び出す形になります。
スキル役割入る場所
seminar-html-deck-distinct-uiHTML講義資料の本体~/.claude/skills/ と ~/.codex/skills/
seminar-html-deck本体が参照する土台（旧版）同上
friendly-infographic-style犬猫の日本語図解を生成~/.codex/skills/
✅ 同名のスキルが既にある場合は 「.backup」を付けて自動退避してから入れます。上書きで消えることはありません。

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

やりたいこと必要なもの
HTML資料をつくる（メイン）Claude Code か Codex、どちらか一方でOK
図解を自動生成するCodex（内蔵の画像生成を使います）
図解の文字化けチェックPython 3 ＋ Pillow（pip install pillow）
Claude Code だけをお持ちの方へ
図解の自動生成だけが動きません。ただしHTML資料そのものは普通に作れます。 文字と図形で組む「HTML図解」は Claude Code だけで作れますし、こちらの方が後から文言を直せて便利です。 それ以外の機能はすべて使えます。

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

このキット自体は無料です。ただし動かすにはどちらかの月額プランが必要です。無料プランでは実用になりません。片方だけなら月$20から始められます。

やりたいこと必要な契約月額
図解つきでフルに使う
いちばんおすすめ		ChatGPT Plus 以上
（Codex はChatGPTプランに含まれます）		$20〜
Claude Code で資料を作る
図解の自動生成は無し		Claude Pro
（Claude Code はPro/Maxに含まれます）		$20〜
たくさん作る・長時間使うClaude Max（5倍 / 20倍）$100 / $200
💰 迷ったら ChatGPT Plus（Codex）から
本体スキルが Codex の画像生成を使う前提で書かれているので、図解まで自動で欲しいなら Codex 側が素直です。 Claude Code をお使いなら、そのままでも図解なしのHTML資料は作れます。両方あれば資料と図解を分担させることもできますが、必須ではありません。

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

7自分好みに育ててください

スキルの中身は全部ただのテキストファイルです。日本語でそのまま書き換えられます。

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

8困ったとき

※現状のまま提供します。生成物は必ずご自身で確認してからお使いください。同梱フォント（M PLUS Rounded 1c）は SIL Open Font License です。