GitHub Issues × Claude AI でスライドを自動生成する

GitHub Issues に「どのようなスライドをつくりたいか」を入力すると、自動的にClaude Code Actionがスライドを生成してくれるツールの導入資料です。
詳細は以下のブログに記載してありますので、ぜひ参考にしてください。
https://97kuek.github.io/blog/slide-generator/

Transcript

1. GitHub Issues × Claude AI スライドを自動生成する仕組みを作る GitHub Issues × Claude AI ス ラ イ ド 自 動 生 成 シ ス テ ム 1
2. アジェンダ 1. はじめに 2. 全体フロー 3. 導入方法 4. 活用方法 5. まとめ GitHub Issues × Claude AI ス ラ イ ド 自 動 生 成 シ ス テ ム 2
3. 1. はじめに 2. 全体フロー 3. 導入方法 4. 活用方法 5. まとめ GitHub Issues × Claude AI ス ラ イ ド 自 動 生 成 シ ス テ ム 3
4. このシステムを構成するツール 3つのツールを組み合わせることで「Issue に書くだけでスライドが完成する」自動化パイプラインを実現する Marp CLI Markdown からスライドを生成する ツール。 --- で区切るだけで PDF・ PPTX・HTML に変換できる 本システムでの役割 input/input.md をビルドする Claude Code Action GitHub 上で動く AI エージェン ト。 @claude メンションや Issue ラベ ルを トリガーに Markdown を自動生成 する 本システムでの役割 Issue を読んでスライドを生成・ PR 作成 GitHub Actions GitHub に組み込まれた自動化エン ジン。 Issue 作成・PR 更新などのイベン トに 応じてジョブを実行する 本システムでの役割 Claude 起動とビルドをそれぞれ制 御 1 . は じ め に GitHub Issues × Claude AI ス ラ イ ド 自 動 生 成 シ ス テ ム 4
5. Marp CLI Markdown でスライドを作るツール --- でスライドを区切るだけでプレゼンテーションになる。デザインは CSS テーマが担うため、内容の作成に集中でき る。 特徴 テキストエディタだけで書ける → Git で管理しやすい コンテンツとデザインを完全分離 VSCode 拡張でリアルタイムプレビュー可能 CLI で HTML・PDF・PPTX に変換 本システムでの役割 Claude が生成した input/input.md を 各形式に変換する input.md → PDF / PPTX / HTML 1 . は じ め に GitHub Issues × Claude AI ス ラ イ ド 自 動 生 成 シ ス テ ム 5
6. Claude Code Action GitHub に統合された AI エージェント Issue や PR コメントに @claude と書くだけで Claude AI が呼び出され、コードの修正・Markdown の生成・質問への回答 などを自動で行う。 特徴 GitHub App として動作 @claude メンションや Issue ラベルがトリガー ブランチ作成・コミット・PR 作成まで自動 CLAUDE.md で指示内容をカスタマイズできる 本システムでの役割 Issue の内容を読み取り、 Marp スライドを生成して PR を作成する Issue → Claude → PR 1 . は じ め に GitHub Issues × Claude AI ス ラ イ ド 自 動 生 成 シ ス テ ム 6
7. GitHub Actions GitHub に組み込まれた自動化エンジン リポジトリへのイベント（Issue 作成・PR 更新など）を検知して、あらかじめ定義した処理を自動実行する。 特徴 .github/workflows/ に YAML で定義する Issue 作成・ラベル付与・PR マージなどがトリガー パブリックリポジトリは無料で利用可能 マーケットプレイスで多数のアクションが利用可能 本システムでの役割 2 本のワークフローで処理を分担する ファイル 役割 claude.yml Issue を検知して Claude を起動 build-slides.yml input.md 更新後に Marp でビルド 1 . は じ め に GitHub Issues × Claude AI ス ラ イ ド 自 動 生 成 シ ス テ ム 7
8. 1. はじめに 2. 全体フロー 3. 導入方法 4. 活用方法 5. まとめ GitHub Issues × Claude AI ス ラ イ ド 自 動 生 成 シ ス テ ム 8
9. Issue からスライドが完成するまで 人間がすること ① Issue に内容を書いて投稿する ↓ （自動処理を待つ） ↓ （自動処理を待つ） ↓ （通知を受け取る） ↓ ② PR をレビューしてマージする ↓ （自動処理を待つ） 自動で行われること （Issue 作成を待機） ↓ GitHub Actions（claude.yml）が起動 ↓ Claude がスライドを生成して PR を作成 ↓ Issue にコメントで完了通知 ↓ （PR マージを待機） ↓ build-slides.yml で PDF / PPTX / HTML 生成 2 . 全 体 フ ロ ー GitHub Issues × Claude AI ス ラ イ ド 自 動 生 成 シ ス テ ム 9
10. 人間がすることは2つだけ ① Issue に内容を書く スライドのテーマ・目的・含めたい内容を フォームに記入して投稿するだけ ② PR をレビューしてマージ Claude が作成した PR を確認し、 問題なければマージするだけ レイアウト設計・デザイン・コード記述はすべて Claude が担当する。発表者は「何を話すか」の設計だけに集中でき る。 2 . 全 体 フ ロ ー GitHub Issues × Claude AI ス ラ イ ド 自 動 生 成 シ ス テ ム 10
11. 1. はじめに 2. 全体フロー 3. 導入方法 4. 活用方法 5. まとめ GitHub Issues × Claude AI ス ラ イ ド 自 動 生 成 シ ス テ ム 11
12. 前提条件と導入の流れ 前提 GitHub・Claude Code ともに Pro プラン以上に加入している前提とする 導入は以下の 4 ステップで完了する ① ファイル構成を整える → ② Claude の指示を書く → ③ GitHub Actions を設定する → ④ App をインストール 3 . 導 入 方 法 GitHub Issues × Claude AI ス ラ イ ド 自 動 生 成 シ ス テ ム 12
13. ① ファイル構成を整える ① ファイル構成 → ② Claude の指示 → ③ GitHub Actions → ④ App インストール slide-generator/ ├── .claude/ │ ├── skills/ │ │ ├── theme-guide.md ← テーマの使い方ガイド（コンポーネント・レイアウト集） │ │ └── marp-convert.md ← Marp 変換ルール │ └── commands/ │ └── generate-slide.md ← スライド生成コマンドの手順定義 ├── .github/ │ ├── workflows/ │ │ ├── claude.yml ← Claude Code Action を起動するワークフロー │ │ └── build-slides.yml ← Marp でビルドするワークフロー │ └── ISSUE_TEMPLATE/ │ └── slide-request.yml ← Issue のフォーム定義 ├── imgs/ ← スライドで使用する画像素材 ├── input/ │ └── input.md ← Claude が生成したスライドの保存先 ├── theme/ │ └── theme.css ← カスタムテーマ CSS ├── CLAUDE.md ← Claude への全体指示書 └── package.json 3 . 導 入 方 法 GitHub Issues × Claude AI ス ラ イ ド 自 動 生 成 シ ス テ ム 13
14. ② Claude の指示を書く ① ファイル構成 → ② Claude の指示 → ③ GitHub Actions → ④ App インストール Claude への指示は 3 種類のファイルで管理する CLAUDE.md プロジェクト全体のルール集。 起動するたびに最初に読まれる。 → 保存先・テーマ・文体・ 　コンポーネントのルールを書く Skills 再利用可能な知識モジュール。 .claude/skills/ 以下に配置す る。 → テーマガイドや Marp 変換ルー ルなど 　参照用ドキュメントを置く Commands 実行可能なアクション定義。 .claude/commands/ 以下に配置 する。 → スライド生成の手順を 　ステップごとに定義する 3 . 導 入 方 法 GitHub Issues × Claude AI ス ラ イ ド 自 動 生 成 シ ス テ ム 14
15. CLAUDE.md の書き方 CLAUDE.md はリポジトリのルートに置くメイン指示書。Claude が起動するたびに自動で読み込まれる。 書くべき内容 保存先ファイルのパス 使用テーマとフロントマターの書き方 スライドのクラス・ヘッダーのルール コンポーネントの使い方と制約 文体ルール（コロン不使用・感嘆符不使用等） 参照すべき Skills へのリンク CLAUDE.md （抜粋） # スライド生成ルール ## ファイル - スライドは `input/input.md` に保存する - テーマは `theme/theme.css` を使用する ## Marp の基本設定 すべてのスライドのfrontmatter は以下： --- marp: true theme: theme size: 16:9 --- ## スキル - `.claude/skills/theme-guide.md`: テーマの使い方 - `.claude/skills/marp-convert.md`: 変換ルール 3 . 導 入 方 法 GitHub Issues × Claude AI ス ラ イ ド 自 動 生 成 シ ス テ ム 15
16. Skills の書き方 .claude/skills/ 以下に配置する参照用ドキュメント。CLAUDE.md からリンクすることで Claude が必要に応じて読み込 む。 典型的な Skills の例 ファイル 内容 theme-guide.md コンポーネントの使い方・レイアウトパタ ーン marp- convert.md Marp 変換ルール・注意事項 Skills に書くこと 再利用可能な知識（コンポーネントの書き方） テーマの CSS 変数一覧 レイアウトパターン集（HTML/CSS の雛形） 使用例と注意点 .claude/skills/theme-guide.md （抜粋） --- description: テーマの使い方ガイド --- # テーマガイド ## カラートークン | 変数名 | 用途 | | --- | --- | | `--color-primary` | アクセント（緑 #5f8a5f ） | | `--color-text` | 本文（黒 #1d1b16 ） | ## コンポーネント ### callout 重要なポイントの強調。 `<div class="callout"> テキスト</div>` と書く。 3 . 導 入 方 法 GitHub Issues × Claude AI ス ラ イ ド 自 動 生 成 シ ス テ ム 16
17. Commands の書き方 .claude/commands/ 以下に配置する実行可能なアクション定義。 /generate-slide などのコマンドを入力したときに呼 び出される。 Commands に書くこと 実行手順をステップごとに記述 どのファイルをどのように変更するかを明示 参照するスキルへのリンク 完了条件（PR の作成方法など） .claude/commands/generate-slide.md （抜粋） # スライド生成コマンド ## 手順 1. Issue の内容を読み取る 2. `.claude/skills/theme-guide.md` を参照する 3. CLAUDE.md のルールに従ってスライドを生成する 4. `input/input.md` に保存する 5. コミットして PR を作成する 3 . 導 入 方 法 GitHub Issues × Claude AI ス ラ イ ド 自 動 生 成 シ ス テ ム 17
18. CLAUDE.md・Skills・Commands の違い CLAUDE.md 場所: リポジトリルート 役割: 全体のルール・制約 読まれるタイミング: Claude が起動するたびに自動で読む 書くべき内容: 禁止事項・推奨スタイル ファイルの保存先 テーマの設定 Skills へのリンク Skills 場所: .claude/skills/ 役割: 再利用可能な知識 読まれるタイミング: CLAUDE.md から参照されたとき・ Claude が判断して読むとき 書くべき内容: コンポーネントの使い方 デザインガイド レイアウトパターン集 Commands 場所: .claude/commands/ 役割: 実行可能な処理手順 読まれるタイミング: ユーザーがコマンド名を入力したとき 書くべき内容: 実行ステップ 参照ファイル 完了条件 3 . 導 入 方 法 GitHub Issues × Claude AI ス ラ イ ド 自 動 生 成 シ ス テ ム 18
19. ③ GitHub Actions を設定する — claude.yml ① ファイル構成 → ② Claude の指示 → ③ GitHub Actions → ④ App インストール .github/workflows/claude.yml name: Claude Code Action on: issues: types: [labeled] # slide-request ラベルが付いた Issue で発火 issue_comment: types: [created] # @claude メンションで発火 jobs: claude: if: | (github.event_name == 'issues' && contains(github.event.label.name, 'slide-request')) || (github.event_name == 'issue_comment' && contains(github.event.comment.body, '@claude')) runs-on: ubuntu-latest steps: - uses: anthropics/claude-code-action@v1 with: claude_code_oauth_token: ${{ secrets.CLAUDE_CODE_OAUTH_TOKEN }} 3 . 導 入 方 法 GitHub Issues × Claude AI ス ラ イ ド 自 動 生 成 シ ス テ ム 19
20. ③ GitHub Actions を設定する — build-slides.yml .github/workflows/build-slides.yml name: Build Slides on: pull_request: paths: ['input/**.md', 'theme/theme.css'] # input.md が更新されたら起動 jobs: build: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - uses: actions/setup-node@v4 with: node-version: '20' - name: Install Marp CLI run: npm ci - name: Build PDF / PPTX / HTML run: | mkdir -p output marp input/input.md --theme theme/theme.css --pdf -o output/slides.pdf marp input/input.md --theme theme/theme.css --pptx -o output/slides.pptx marp input/input.md --theme theme/theme.css --html -o output/slides.html - uses: actions/upload-artifact@v4 with: name: slides path: output/ 3 . 導 入 方 法 GitHub Issues × Claude AI ス ラ イ ド 自 動 生 成 シ ス テ ム 20
21. ④ Claude Code Action をインストールする ① ファイル構成 → ② Claude の指示 → ③ GitHub Actions → ④ App インストール 1. GitHub App をインストールする ターミナルで以下を実行し、インストール先リポジトリに slide-generator を選択する claude /install-github-app 2. Secrets を設定する Settings → Secrets and variables → Actions から CLAUDE_CODE_OAUTH_TOKEN を追加する 3. ラベルを作成する Issues → Labels → New label から slide-request ラベルを作成する 4. Issue テンプレートを配置する（推奨） .github/ISSUE_TEMPLATE/slide-request.yml を配置することで依頼フォームが整備される インストールが完了すると claude.yml がリポジトリ に自動作成される 3 . 導 入 方 法 GitHub Issues × Claude AI ス ラ イ ド 自 動 生 成 シ ス テ ム 21
22. Issue テンプレートの作成（推奨） フォームを使うことで必要な情報の漏れを防ぐことができる .github/ISSUE_TEMPLATE/slide-request.yml name: スライド生成依頼 labels: ["slide-request"] body: - type: input id: title attributes: label: スライドタイトル placeholder: 例：2026 年度 プロジェクト計画 - type: textarea id: content attributes: label: スライドに含めたい内容 - type: textarea id: images attributes: label: 使用する画像（任意） description: imgs/ フォルダのファイル名と用途・配置場所を記入する # このほか目的・背景、希望枚数、参考文献などのフィールドを定義する（抜粋） 3 . 導 入 方 法 GitHub Issues × Claude AI ス ラ イ ド 自 動 生 成 シ ス テ ム 22
23. 1. はじめに 2. 全体フロー 3. 導入方法 4. 活用方法 5. まとめ GitHub Issues × Claude AI ス ラ イ ド 自 動 生 成 シ ス テ ム 23
24. Issue を投稿する Issues → New Issue → スライド生成依頼 を選択する フィールド 記入内容 スライドタイトル タイトルスライドの見出し 目的・背景 対象読者・発表時間など 含めたい内容 箇条書きで構成をメモ 希望スライド枚数 未記入で自動判断 スタイル要望 「図表多め」など 使用する画像 ファイル名と用途・配置場所 slide-request ラベルが自動で付き、Claude が即座 に起動する 4 . 活 用 方 法 GitHub Issues × Claude AI ス ラ イ ド 自 動 生 成 シ ス テ ム 24
25. Claude が自動でスライドを生成する slide-request ラベルが付いた Issue を Claude が検知 し、スライド生成から PR 作成まで自動で行う Issue にラベルが付くと GitHub Actions 経由で Claude Code Action が発火する 作業リストを更新しながらスライドを生成する PR を作成し、Issue へのコメントで完了を通知する 途中経過は Issue のコメントに表示される作業リスト で確認できる 4 . 活 用 方 法 GitHub Issues × Claude AI ス ラ イ ド 自 動 生 成 シ ス テ ム 25
26. ローカルでプレビューしながら編集する PR をマージする前に、ローカルで内容を確認・修正できる 1. リポジトリをクローンしてブランチを切り替える git clone https://github.com/<user>/slide-generator cd slide-generator git checkout <PR のブランチ名> 2. 依存パッケージをインストールする npm install 3. リアルタイムプレビューを起動する npm run dev ブラウザが自動で開き、 input/input.md を編集するたびにスライドがリアルタイムで更新される 4 . 活 用 方 法 GitHub Issues × Claude AI ス ラ イ ド 自 動 生 成 シ ス テ ム 26
27. スライドをビルドして出力する output/ フォルダに PDF・PPTX・HTML が生成される 全形式を一括出力 npm run build 形式を指定して出力 npm run build:pdf # PDF のみ npm run build:pptx # PPTX のみ npm run build:html # HTML のみ package.json { "scripts": { "dev": "marp input/input.md --watch --preview", "build": "node -e \"require('fs').mkdirSync('output',{recursive:true})\" && marp input/input.md --pdf -o output/slides.pdf && marp input/input.md --pptx -o output/slides.pptx && marp input/input.md -o output/slides.html", "build:pdf": "node -e \"require('fs').mkdirSync('output',{recursive:true})\" && marp input/input.md --pdf -o output/slides.pdf", "build:pptx": "node -e \"require('fs').mkdirSync('output',{recursive:true})\" && marp input/input.md --pptx -o output/slides.pptx", "build:html": "node -e \"require('fs').mkdirSync('output',{recursive:true})\" && marp input/input.md -o output/slides.html" } } GitHub Actions を使えば PR マージ時に自動でビルドされ、アーティファクトとしてダウンロードできる 4 . 活 用 方 法 GitHub Issues × Claude AI ス ラ イ ド 自 動 生 成 シ ス テ ム 27
28. @claude メンションで修正を依頼する Issue や PR のコメントで @claude を付けると、Claude が修正を行って新しいコミットを追加する 使用例 @claude 3 枚目のスライドを 2 枚に分割してください。 フロー図をシンプルにしてほしい。 @claude まとめスライドに 参考文献を追加してください。 修正できること スライドの分割・統合 レイアウトの変更 コンテンツの追加・削除 コードブロック・フロー図の調整 文体・表現の変更 修正が完了するとコメントで通知が届く。承認したら PR をマージするだけ 4 . 活 用 方 法 GitHub Issues × Claude AI ス ラ イ ド 自 動 生 成 シ ス テ ム 28
29. 1. はじめに 2. 全体フロー 3. 導入方法 4. 活用方法 5. まとめ GitHub Issues × Claude AI ス ラ イ ド 自 動 生 成 シ ス テ ム 29
30. このスライドについて このスライドは、本スライドが解説しているシステムそのものによって生成されたものである 人間が行ったこと Issue フォームに内容を記入して投稿 PR をレビューしてマージ この 2 ステップのみ Claude が行ったこと スライド全体の構成設計 各セクションのコンテンツ作成 HTML/CSS フロー図の実装 コードブロックの挿入 全 Markdown の生成とコミット 5 . ま と め GitHub Issues × Claude AI ス ラ イ ド 自 動 生 成 シ ス テ ム 30
31. まとめ このシステムでできること Issue を書くだけでスライドが完成する PDF・PPTX・HTML 形式で自動出力される @claude で対話的な修正も可能 テーマ・スキルのカスタマイズで自分仕様に調整でき る 導入の 4 ステップ 1. ファイル構成を整える 2. CLAUDE.md・Skills・Commands を書く 3. GitHub Actions を設定する 4. Claude Code Action をインストールする AI と人間の役割 AI の生成は非常に便利だが、聴衆に伝わるスライドに 仕上げるのは最終的に人間自身の仕事である フィードバックを忘れずに AI が生成したコンテンツには必ずレビューとフィード バックを。「内容は合っているか」「伝わりやすい か」の判断は人間にしかできない 5 . ま と め GitHub Issues × Claude AI ス ラ イ ド 自 動 生 成 シ ス テ ム 31
32. 参考文献 1. https://zenn.dev/kg_motors_mibot/articles/9770c73431e511 2. https://qiita.com/hirokidaichi/items/243bd176b84900f4cc0d 参 考 文 献 GitHub Issues × Claude AI ス ラ イ ド 自 動 生 成 シ ス テ ム 32