INTROSLIDE KIT — HOW TO USE
SLIDE KIT — GUIDE
SLIDE KIT — HOW TO USE

台本を書けば
資料ができる

資料制作キットの使い方
Claude Code で作って ブラウザで直す
現在地|INTRO 導入
01 / 21
INTROOVERVIEW
SLIDE KIT — GUIDE

この資料でわかること

01キットの考え方
024つのステップ
03自分色にする
現在地|INTRO 導入
02 / 21
CHAPTER 01CHAPTER 01 — CONCEPT
SLIDE KIT — GUIDE
01

キットの考え方

文章が正本 生成は何度でも

CH.01CH.02CH.03
現在地|CHAPTER 01 キットの考え方
03 / 21
CHAPTER 01PRINCIPLE
SLIDE KIT — GUIDE

台本が資料の正本

スライドはデザインから作らない 先に文章(台本)を書く

台本があれば 生成は何度でもやり直せる 直したい箇所も文章で伝えられる

章の順番を入れ替えるときも 台本の見出しを動かすだけで済む

現在地|CHAPTER 01 キットの考え方
04 / 21
CHAPTER 01EDIT MODE
SLIDE KIT — GUIDE

作ったあとは自分で直せる

生成した資料は ブラウザ上で文字も配置も直せる

直した内容は edits.json に残り 台本から作り直しても消えない

見出しの言い回しを変える 挿絵を入れ替える スライドを1枚足す

現在地|CHAPTER 01 キットの考え方
05 / 21
CHAPTER 01KEY TAKEAWAYS — CH.01
SLIDE KIT — GUIDE

キットの考え方 まとめ

01文章(台本)が正本 デザインは後から付いてくる
02生成は何度でもやり直せる
03仕上げの手直しはブラウザで自分の手で
現在地|CHAPTER 01 キットの考え方
06 / 21
CHAPTER 02CHAPTER 02 — FOUR STEPS
SLIDE KIT — GUIDE
02

4つのステップ

台本 生成 手直し 自分色

CH.01CH.02CH.03
現在地|CHAPTER 02 4つのステップ
07 / 21
CHAPTER 02STEP 01 / 4
SLIDE KIT — GUIDE
01
STEP 01 / 4

台本を書く

型を選び 文言を決める

THE FLOW — 資料ができるまでの4ステップ
STEP 01台本を書く
×
STEP 02生成する
×
STEP 03手直しする
×
STEP 04自分色にする
現在地|CHAPTER 02 4つのステップ
08 / 21
CHAPTER 02SCRIPT
SLIDE KIT — GUIDE

台本は型と文言でできている

台本生成手直し自分色
Claude CodeClaude Code

1枚ごとに「型」を選び 必要なキーに文言を入れる

型が配置を決めるので 文言だけに集中できる

台本の下書きは Claude Code に任せ 自分は文言を確かめる

現在地|CHAPTER 02 4つのステップ
09 / 21
CHAPTER 02STEP 02 / 4
SLIDE KIT — GUIDE
02
STEP 02 / 4

生成する

コマンド3つで HTML と PNG に

THE FLOW — 資料ができるまでの4ステップ
STEP 01台本を書く
×
STEP 02生成する
×
STEP 03手直しする
×
STEP 04自分色にする
現在地|CHAPTER 02 4つのステップ
10 / 21
CHAPTER 02BUILD
SLIDE KIT — GUIDE

生成から確認までの流れ

台本生成手直し自分色
生成build_deck.py で index.html を作る
検査qa_deck.py で errors=0 を確かめる
描画render_deck.py で 全枚を PNG に
目視一覧で 折り返しと 重なりを確かめる
現在地|CHAPTER 02 4つのステップ
11 / 21
CHAPTER 02STEP 03 / 4
SLIDE KIT — GUIDE
03
STEP 03 / 4

手直しする

ブラウザで直す 台本に戻す

THE FLOW — 資料ができるまでの4ステップ
STEP 01台本を書く
×
STEP 02生成する
×
STEP 03手直しする
×
STEP 04自分色にする
現在地|CHAPTER 02 4つのステップ
12 / 21
CHAPTER 02EDITOR
SLIDE KIT — GUIDE

編集画面でできること

台本生成手直し自分色

文字の書き換え 移動と拡大縮小 画像の入れ替え スライドの並び替え

「編集を開く.command」をダブルクリックすると ブラウザに編集画面が開く

確定した文言は台本にも戻しておくと 次の生成で迷わない

現在地|CHAPTER 02 4つのステップ
13 / 21
CHAPTER 02KEY TAKEAWAYS — CH.02
SLIDE KIT — GUIDE

4つのステップ まとめ

01台本を書く 型と文言
02生成する 検査と目視
03手直しする ブラウザで直して台本へ戻す
現在地|CHAPTER 02 4つのステップ
14 / 21
CHAPTER 03CHAPTER 03 — MAKE IT YOURS
SLIDE KIT — GUIDE
03

自分色にする

配色 書体 挿絵 型の追加

CH.01CH.02CH.03
現在地|CHAPTER 03 自分色にする
15 / 21
CHAPTER 03STEP 04 / 4
SLIDE KIT — GUIDE
04
STEP 04 / 4

自分色にする

変えてよいものと 残した方がよいもの

THE FLOW — 資料ができるまでの4ステップ
STEP 01台本を書く
×
STEP 02生成する
×
STEP 03手直しする
×
STEP 04自分色にする
現在地|CHAPTER 03 自分色にする
16 / 21
CHAPTER 03CUSTOMIZE
SLIDE KIT — GUIDE

変えてよいもの 残すもの

台本生成手直し自分色
変えてよい

配色 書体 デッキ名 挿絵 スマホ枠の実例 型の追加

残した方がよい

1枚1メッセージ 結論→根拠→事例の順番 中表紙と現在地の表示

配色と書体は deck.css の先頭にまとまっている
現在地|CHAPTER 03 自分色にする
17 / 21
CHAPTER 03CASE — MY COLOR
SLIDE KIT — GUIDE

自分色にした実例

台本生成手直し自分色

色を3つ変えるだけで 別のブランドの資料になる

地の色

雰囲気が変わる

見出しの色

印象が変わる

英字の書体

品格が変わる

変えたら 1枚だけ生成して見比べてから 全体に広げる

現在地|CHAPTER 03 自分色にする
18 / 21
CHAPTER 03KEY TAKEAWAYS — CH.03
SLIDE KIT — GUIDE

自分色にする まとめ

01配色と書体は deck.css の先頭で変える
02挿絵は illust に置いて 台本から呼ぶ
03新しい型は build_deck.py に足す
現在地|CHAPTER 03 自分色にする
19 / 21
CLOSINGRECAP
SLIDE KIT — GUIDE

本日のまとめ

①
台本を書けば 資料ができる 文章が正本
②
作ったあとは ブラウザで直せる 直しは消えない
③
ひな型は 自分色に変えてよい 配色 書体 挿絵 型
まずは1本 短い資料から作ってみる
現在地|CLOSING クロージング
20 / 21
CLOSINGSLIDE KIT — END
SLIDE KIT — GUIDE
END

良い資料を

自分の手で

現在地|CLOSING クロージング
21 / 21