資料作成キット（shiryo-slides-kit）

Claude Code / Codex で、社内資料・提案資料の HTML スライドを作るためのスキルです。 shiryo-slides が 16:9 のスライドデッキを担当します。 生成 AI に「議事録から提案資料を作って」と言えば、構成の設計から HTML の生成、そして生成した画面を自分で撮影して確認・修正するところまでを一通り行います。 PowerPoint は作りません。出てくるのはブラウザで開ける HTML と PDF です。

セットアップは AI に任せられます。 Claude Code や Codex に、このリポジトリの URL を渡して 「この URL を読んで、AGENTS.md の手順どおりにセットアップして」と頼んでください。 環境の確認・スキルの配置・Playwright の導入・動作確認まで、エージェントが一通り進めます（git が入っていない環境でも大丈夫です）。 手動で入れたい場合は §2〜§3 を見てください。

1. できること

スライド（shiryo-slides）

スタイル 3 種（スタンダード / ビジュアル / フォーマル）× 用途 2 種（提案資料 / 社内向け資料）× テーマ 5 種（§5） の組み合わせで作ります。 スタイルは見せ方の軸です。スタンダードは整理型、ビジュアルは図解多めの教材・登壇向け、フォーマルは端正な法人提案向けです。 納品物は slides/<名前>.html — 1 ファイルで完結する 16:9 のデッキです。ダブルクリックでブラウザが開き、矢印キーでめくれます。「PDF にして」と言えば 1 スライド = 1 ページの PDF（960×540）も出ます。「5 枚目の見出しを変えて」のような部分修正にも対応します。

用途の違いは見た目ではなく構成に出ます。提案資料は「課題 → 解決策 → 次の一歩」、社内向けは「結論 → 根拠 → 決めてほしいこと」から組み立てます。社内向けでは過剰敬語（弊社・貴社・お願い申し上げ）を使わないなど、語法も切り替わります。

図解はスライドの中で描きます。画像生成 AI ではなく HTML を描画して撮影しているので、日本語のテキストが崩れません。

このキットの核 — AI が生成後に自分で撮影して全枚見て直す

HTML 生成
  → 機械検査（grep で 21 項目。禁止色・極小フォント・見出しの読点・面ルール違反など）
  → Playwright で全スライドを PNG に撮影
  → AI がその画像を 1 枚ずつ見て、はみ出し・重なり・余白の偏りを判定
  → 直す（全枚 × 最大 2 周）

サンプリングはしません。12 枚のデッキなら 12 枚すべてを見ます。時間とトークンを使う代わりに、この工程があるから崩れが残りません（重さについては §7 に正直に書いています）。

材料が無いところは埋めない

提案資料には材料が無いと書けないブロック（費用・体制・実績・スケジュール）があります。このキットはそれらしい数字を創作しません。材料が足りない箇所は「ここに〇〇を記入してください」という TODO 枠として出力し、完了報告に「3 枚が TODO です」と一覧を出します。

2. 必要なもの

インストール手順

Windows（PowerShell を開いて実行）

winget install OpenJS.NodeJS.LTS

インストール後、PowerShell を一度閉じてから開き直してください。続けて Playwright を入れます。

npm install -g playwright
npx playwright install chromium

Mac（ターミナルを開いて実行）

brew install node
npm install -g playwright
npx playwright install chromium

Homebrew を使っていない場合は https://nodejs.org/ja から LTS 版をダウンロードしてインストールしてください。その後は同じ 2 行です。 npx playwright install chromium は専用の Chromium ブラウザを約 400MB ダウンロードします。初回だけで、回線によっては数分かかります。

入ったかどうかの確認

# Windows（PowerShell）
node -v
$env:NODE_PATH = npm root -g
node -e "require('playwright'); console.log('OK')"

# Mac（ターミナル）
node -v
NODE_PATH="$(npm root -g)" node -e "require('playwright'); console.log('OK')"

バージョン番号と OK の 2 行が出れば準備完了です。OK が出ない場合は §7 を見てください。

3. 入れ方

いちばん簡単な入れ方 — AI エージェントに任せる

Claude Code（または Codex）を開いて、次のように貼り付けるだけです。

https://github.com/code4biz/shiryo-slides-kit を読んで、
AGENTS.md の手順どおりにこのスキルをセットアップして。

エージェントが環境を調べ、リポジトリの取得（git が無ければ ZIP で）、スキルの配置、Node.js / Playwright の導入、動作確認まで進めます。エージェント向けの詳細手順は同梱の AGENTS.md にあります。

以降は手動で入れる場合の手順です。

スキルの置き場所は、使うツールごとに決まっています。中身は同一でよく、置き場所が違うだけです。

ここに skills/ の中の shiryo-slides フォルダ をそのまま置きます。 以下のコマンド例は Claude Code（.claude）のものです。Codex に入れる場合は .claude を .codex に読み替えてください。

git clone で入れる

# Windows（PowerShell）
cd $env:USERPROFILE
git clone <このリポジトリのURL> shiryo-slides-kit
New-Item -ItemType Directory -Force -Path "$env:USERPROFILE\.claude\skills"
Copy-Item -Recurse -Force "$env:USERPROFILE\shiryo-slides-kit\skills\shiryo-slides" "$env:USERPROFILE\.claude\skills\"

# Mac（ターミナル）
cd ~
git clone <このリポジトリのURL> shiryo-slides-kit
mkdir -p ~/.claude/skills
cp -R ~/shiryo-slides-kit/skills/shiryo-slides ~/.claude/skills/

<このリポジトリのURL> には、GitHub のページ上部にある緑の Code ボタンからコピーできる URL（https://github.com/.../shiryo-slides-kit.git）を入れます。

ZIP で入れる

1. GitHub のページで緑の Code ボタン → Download ZIP
2. ダウンロードした ZIP を展開（Windows は右クリック →「すべて展開」、Mac はダブルクリック）
3. 展開したフォルダの中の skills を開き、shiryo-slides フォルダを上の表の置き場所にコピー

Windows でエクスプローラーのアドレス欄に %USERPROFILE%\.claude\skills と入力すると置き場所が開きます。.claude フォルダが無い場合は自分で作ってください。

入ったかどうかの確認

~/.claude/skills/shiryo-slides/SKILL.md（Windows は %USERPROFILE%\.claude\skills\shiryo-slides\SKILL.md、Codex は .claude を .codex に読み替え）が存在すれば成功です。コピー後は Claude Code / Codex を一度終了して起動し直してください。

更新するときは、git clone したフォルダで git pull してから上のコピー手順をもう一度実行します。

4. 使い方

Claude Code（または Codex）を起動して、日本語でそのまま頼みます。Codex では /skills で一覧から選ぶことも、$ プレフィックスで明示的に呼ぶこともできます。

この議事録から提案資料を作って
この内容を社内共有用の資料にして
勉強会向けに図解多めのスライドにして

進み方

1. AI が 1 回だけ選択式で聞きます — 「スタイル（スタンダード / ビジュアル / フォーマル）・用途（社内 / 提案）・テーマ（A〜E）を選んでください」。入力から推定できるときは、その推定が先頭の選択肢（推奨）になります
2. 材料が足りないときだけ、もう 1 問聞いて止まります — 「新規事業の提案書作って」の一行だけだと 4 枚中 3 枚が TODO 枠になるため、何についての提案かを確認します
3. 構成を数行で宣言してから作り始めます — ここで返事は待ちません。違うと思ったら途中で止めて言い直してください
4. 生成 → 機械検査 → 撮影 → 全枚チェック → 修正
5. 完了報告 — テーマと用途、TODO 枠の一覧、視覚検証を実施したかどうか

出てくる場所

作業中のフォルダの下に slides/<名前>.html（本体）、slides/<名前>-structure.md（設計した構成）、slides/.work/iter-<N>/（検証用に撮った PNG。消して構いません）が作られます。

そのあと

• 「PDF にして」 → 同じ名前の PDF が出ます
• 「5 枚目の図を横並びにして」 → 該当箇所だけ直します（前後 1 枚まで確認します）
• 「テーマを B から C に変えて」は色の付け替えでは済みません。 テーマは見出しサイズ・本文サイズも規定するため、1 枚に入る情報量が変わり、構成の作り直しになります。AI もそう案内します

5. 5 つのテーマ

色は 5 テーマとも読みやすさ（コントラスト比）を実測してあります。そのぶんそれぞれに制約があります。

6. 作例

showcase/ に、実際にこのキットで生成したものが入っています。

100 枚ショーケース — 10 題材 × 10 枚

スタイル 3 種 × 用途 2 種 × テーマ 5 種の組み合わせを見せるために、AI・AI コーディングを学ぶ人向けの 10 題材で各 10 枚、計 100 枚を生成した作例です。すべてこのスキルの通常フロー（構成設計 → 生成 → 機械検査 → 撮影 → 全枚目視 → 修正）で作っています。

全 100 枚を 1 枚に並べた画像が showcase/showcase100/endroll.png（5288×18672px）です。デッキ本体は次の 10 本で、どれもダブルクリックで開けます。

提案・報告系のデッキに出てくる社名・数値・費用は、すべてデモ用の架空サンプル値です。

同じ題材を 5 テーマで作ったデッキ（各 12 枚・提案資料）

題材は「問い合わせ対応の一次回答を AI で下書きする」提案です。同じ内容がテーマごとにどう変わるかを見比べられます。

showcase/slides/support-ai-proposal.html          テーマ B
showcase/slides/support-ai-proposal-theme-a.html  テーマ A
showcase/slides/support-ai-proposal-theme-c.html  テーマ C
showcase/slides/support-ai-proposal-theme-d.html  テーマ D
showcase/slides/support-ai-proposal-theme-e.html  テーマ E

テーマ C だけはレイアウトが他と違います。字が大きくて 4 行の表が収まらず、2×2 の塊に作り替えたためです。「色だけ替える」ができない実例です。

社内向け資料（9 枚・テーマ D）

showcase/slides/kit-internal-proposal.html   社内向け。結論から始まる構成

社内向け資料は決裁してほしいことを根拠より前に置いています。提案資料との構成の違いが見られます。

PDF・表紙・制作過程

showcase/out/theme-a.pdf 〜 theme-e.pdf   各 12 ページ
showcase/out/internal-theme-d.pdf         9 ページ
showcase/out/covers/                      5 テーマ + 社内版の表紙 PNG
showcase/slides/cover-types.html          表紙の型のカタログ（5 案。うち 4 型を採用）
showcase/slides/.work/                    視覚検証で実際に撮影した PNG（周回ごと）

7. うまくいかないとき

Playwright が入らない

• npm は認識されていません と出る → Node.js が入っていないか、インストール後にターミナルを開き直していません。§2 の node -v から確認してください
• Windows で権限エラーが出る → PowerShell を右クリックして「管理者として実行」で開き直してください
• Mac で EACCES が出る → sudo を付ける前に、npm config set prefix ~/.npm-global でグローバルの置き場所をホーム配下に移すほうが安全です
• 会社の PC でグローバルインストールが禁止されている → 作業フォルダの中で npm install playwright && npx playwright install chromium としてもかまいません。スキルはローカルとグローバルの両方を探します
• ダウンロードが途中で止まる → 約 400MB あります。プロキシ環境では npx playwright install chromium が弾かれることがあります

「視覚検証は未実施です」と出る

Playwright が見つかっていません。この場合でもスライドの生成そのものは行われますが、はみ出し・重なり・整列の自動確認をしていない状態です。ブラウザで開いて自分で確認してください。 §2 の確認コマンドで OK が出るかを試し、出なければ Claude Code / Codex を再起動してからもう一度実行してください。

フォントの警告が出る

撮影時にこう出ることがあります。

  警告: 以下の Web フォントが読み込めていません。
         - Noto Sans JP
  代替フォントで撮影されるため、意図した見た目と異なります。
  （社内プロキシで Google Fonts が塞がれている / オフラインの可能性）

このキットは書体を Google Fonts から読み込んでいます。社内プロキシで塞がれている環境やオフラインでは、CDN が届かず代替フォント（ヒラギノ・游ゴシック・メイリオなど）で表示されます。つまり見た目が変わります。 特にテーマ C / D / E は太いウェイト（900）が前提なので、代替に落ちると見出しが痩せて見えます。

対処:

1. その状態でレイアウトを直させないでください。 代替フォントに合わせて文字サイズや改行を調整すると、フォントが届く環境では逆に崩れます。スキル側もこの警告が出ている間はループを止めるようになっています
2. フォントが届く環境（自宅の回線など）で開き直すと、本来の見た目になります。社内でずっと使う前提なら、その見た目を「正」として受け入れる判断もあります

生成が重い / 時間がかかる

正直に書きます。このキットは軽くありません。

• 1 回のスライド生成で、スキル本体を約 2,000 行読み込みます。禁止事項・整列規則・構成の考え方・テーマ定義・スタイル定義・用途別の語法をすべて読んでから書き始めるためです
• そのうえで全スライドを撮影して 1 枚ずつ画像を見ます。12 枚のデッキで 2 周すれば、最大 24 枚分の画像を読むことになります
• 結果としてトークンをそれなりに使います。12 枚のデッキで数分〜十数分かかります

軽くしたいときは、構成が決まっているなら「構成は決まってる」と伝える（構成設計の工程を飛ばします）、部分修正は「5 枚目の〜を直して」と頼む（該当枚と前後 1 枚だけを見直します）、枚数を最初から指定する（「8 枚くらいで」）、の 3 つが効きます。

PDF のページ数が合わない

PDF 化は生成後に 実ページ数を数えて、スライド枚数と一致しなければ失敗します（黙って不完全な PDF を出しません）。よくある症状は「1 ページだけの PDF になる」で、原因はスライドの隠し方（CSS）が想定と違うことです。このとき残っている PDF は中身が不完全なので納品に使わないでください。「PDF のページ数が合わない」とエージェントに伝えれば、切り分け手順を持っています。

8. このキットがやらないこと

• PowerPoint（.pptx）の生成 — 出力は HTML と PDF だけです
• 単発の図解画像（PNG）の納品 — スライドの中の図解は担当します
• アニメーション・画面切り替え — 意図的に禁止しています
• 外部画像の読み込み（写真・ロゴ・アイコン画像）— 1 ファイルで完結させるためです。書体の <link> だけが例外
• 画像生成 AI によるイラスト — 図解は HTML を描画して撮影しています
• スクロールして読む Web ページ型の可視化・ダッシュボード

テーマを増やす

5 つで足りない場合は追加できます。skills/shiryo-slides/themes/theme-b.md をコピーして theme-f.md などにし、16 個のカラー変数・面ルール（全面ダークとブロックの許容枚数）・スケール 6 値（h1 / h2 のサイズとウェイト、本文サイズ、ラベルサイズ）を書き換え、SKILL.md §3 の表に 1 行足します。

コントラスト比は必ず実測してください。 既存テーマのファイルには全組み合わせの実測値が載っています。同じ表を埋めずに色だけ差し替えると、「画面では見えるが印刷すると読めない」資料になります。

作ってみたら、ぜひ見せてください

このキットで資料を作ってみたら、X で @03Imanyu をつけて引用投稿してもらえると嬉しいです。 「こんな資料ができた」「このテーマで作った」など、どんな内容でも歓迎です。見に行きます。

9. ライセンス

このスキルで作った成果物（スライド）はあなたのものです。 商用利用もクライアントへの納品も自由で、制限はありません。

スキル本体は次の扱いです。

正式な条文は同梱の LICENSE を参照してください。