Claude Code で一貫性を保ったスライド(HTML) 作成術

2026/05/14、弊社オフィスにて【Claude Code Meetup Japan #5 (Claude Code祭り!)】を開催しました。
弊社社員がライトニングトークを発表いたしましたので、こちらに掲載いたします。

Transcript

1. Claude Code で一貫性を保ったスライド(HTML) 作成術 — "誰でもできる" を超える 4つのこだわり 小倉 裕貴 / 燈株式会社 DXソリューション事業本部 Devチーム X: @kunihik0827 発表時間: 5分
2. 問題提起 Claudeに作ってもらった資料が一貫性がなくて困っていませんか？ ClaudeにスライドやHTMLを”作って” と頼めば、綺麗にまとめてくれます。 今回は、さらに踏み込んで、一貫性や速度を担保した上での作成を行うグップラを紹介！！ 一貫性 フォント・色・寸法・余白が スライド間でズレないか? ① 責務分離 "中身の構成" と "見た目" の修正で コンテキストを浪費していないか? ④ 速さ・ロバスト性 同様の資料を量産できるか? ③ 主張伝達 各スライドが "誰に何を" を 明確に語っているか? ②
3. Markdown(骨子)と出力(HTML・PowerPoint)を分けてClaudeのコンテキストを分けられるように 3つのSkillを作成 こだわり① 全体像・責務の分離 ? 逆質問 目的/聞き手/参照 md slide.md 骨子・章立て html slide.html Web版 / 表現力高 pptx slide.pptx 編集配布版 / Google Slide スキル レイヤー 役割 強み create-slide-neta slide.md 何を言うか(章立て・メッセージ・コンテンツ プラン) 構成議論の起点・1mdから複数形式に分岐 create-slide-html slide.html どう見せるか(Web版) SVG/Chart.js/mermaid 自在・図を素材とし て他資料に再利用しやすい create-slide-pptx slide.pptx どう見せるか(編集配布版) Google Slideでテキスト・図の編集可・配布 相手の手元で調整できる
4. "誰に何を伝えるか" を逆質問で引き出し、Markdownで保存 スライドの内容をMarkdownで固めておくことで、次以降のSkillはデザインだけに注力することが可能 こだわり② 主張伝達 create-slide-neta 逆質問の実例 — create-slide-neta が必ず聞くこと 8 questions 1. 目的(誰に何を伝え、どう動いてほしいか) 2. 聞き手・読み手 ★最重要 3. 方向性・トーン 4. 参照ファイル(明示パスのみ・勝手に探索しない) 5. 前提・背景(イベント文脈・持ち時間) 6. 章立ての案 7. 使える素材(画像・スクショ等) 8. 出力先 出力されたデック構成 — 本日の資料7枚 7 slides 1. 表紙 — タイトル + "4つのこだわり" 2. 自己紹介 — プロフィール 3. 問題提起 — 4つの問い 4. こだわり① 5. こだわり② — 逆質問 ★いま見ているスライド 6. こだわり③ 7. こだわり④+まとめ スライドの構成や内容、メッセージをこの段階で固める
5. レイアウトは機械的に揃え、中身の表現はClaudeに自由度を渡すことで 一貫性を担保しつつ表現力の高いスライドの作成が可能 こだわり③ 一貫性 create-slide-html/create-slide-pptx 制約(機械的に揃える) • 16:9 寸法 • フォント体系 • カラーパレット(#790000 ほか) • ヘッダー構造(章タイトル+メッセージ+ロゴ) • フォントサイズ階層(メッセージ最大 → 本文 → 脚注) 自由(Claudeの裁量) • SVG概念図 / カード並列 / 2x2マトリクス / 矢印フロー • Chart.js / mermaid(HTML版のみ) • ヘルパー(add_three_card_grid 等)を選んで使い分け • 各スライドの主張に最適なレイアウト選択 VS ヘッダーやロゴは事前に決めておいた座標に pythonプログラムを通して埋め込み
6. こだわり④ 速さ・ロバスト性+まとめ 創造的設計はClaudeで行い、機械処理はPythonで行うことで トークン数の削減、高速化、LLMの精度によらない一貫性のあるレイアウト生成が可能 分業の概念 工程 担当 効果 テンプレ全文の読込 Python Claudeコンテキストに乗せない(節 約) 画像 base64 化 Python 画像トークン消費ゼロ md パース・プラン抽出 Python manifest.json に整形・確定的 各スライド設計(SVG/Grid/Shape) Claude 並列 sub-agent ★ 6枚であれば1分程度での作成が可能 section連結・トークン置換 Python 一発実行・冪等 PPTX Shape配置(akari_pptx.py) Python ヘルパー レイアウト揺れゼロ 押さえておきたいポイント 4点 ① 枠は固定、中身は自由 一貫性と表現多様性の両立 ② 逆質問で聞き手を先に固める 抽象綺麗事を排除 ③ md/出力で責務分離 1mdから html・pptx に分岐 ④ Pythonで機械処理 速さ・ロバスト性・トークン節約 ? create-slide-neta 逆質問 + md生成 create-slide-html 高速サイクル create-slide-pptx 配布 今日の4点、ぜひお試しを。 html pptx
7. 最後に カジュアル面談申込フォーム 5/19 【AI駆動開発】AI自走環境整備・運用スペシャル #2 https://aid.connpass.com/event/391625/ 燈ではAI開発を推進しています。 ご興味ある方、是非気軽にカジュアル面談しましょう！ 来週はAI駆動開発について話させていただきます！ 良かったらそちらもお願いします！