Routine Labo ・台本プレビュー（収録前確認用）

資料はHTMLで作る — Claude Codeで図解入り"HTMLプレビュー資料"を量産する

ジョブID：20260715_ClaudeCode_HTMLプレビュー／ 3段構成：①HTMLプレビュー → ②画像組み合わせ → ③Gemで再現／ aibook回の上級版・対

僕、資料はもうスライドで作っていません。全部 HTML です。図解画像・表・コピーボタンまで1ファイルに全部入って、ブラウザで開くだけ。この"HTMLプレビュー"という作り方を、Claude Code / Codex での実演から、ターミナルが難しい人向けの GeminiのGem での再現まで、僕の実運用そのままお見せします。

Claude Code 資料作成 Claude Code できること HTMLプレビュー Codex Gemini Gem

裏側メモ（ローカル確認用・非公開）
メインKW＝Claude Code 資料作成／本命CTA＝チャンネル登録（中盤・実演①直後）／LINE＝概要欄最上部＋終盤口頭（配布＝プロンプト一式）。冒頭18秒までに実運用のHTMLプレビュー実物をスクロールで見せ切る（崖28秒対策）。aibook回と相互送客。

今日学べる3つのこと

①資料を"HTMLプレビュー"で作る新常識：スライドの枠を捨てると、AI資料は一気に化ける。
②画像・図解を組み合わせて配布物レベルに：「見出し→図解→本文」の型。
③ターミナルなしで同じ仕組み：GeminiのGemにレシピを仕込めば、画像＋声だけで再現できる。

①なぜスライドではなく、HTMLなのか

スライドとHTMLプレビューの対比 — スライド＝枠に流し込む／HTML＝構造ごとAIが書ける

AIにスライドを作らせると、どうしても「枠に短い文字を流し込んだだけ」の資料になりがちです。HTMLなら、AIは構造ごと書けます。見出しの階層、表、図解画像、コピーボタン、デザインまで——1ファイルに全部入り。ブラウザがあれば誰でも見られて、PDF化も配布も自由です。

Claude CodeやCodexは「コードを書くAI」と思われていますが、実はこの"見た目つき文書"の量産機として、非エンジニアの実務でこそ効きます。僕の制作現場では、台本・企画・報告書を全部この形式で回しています。

▶ 見せる素材実運用のHTMLプレビュー資料をブラウザでスクロール（複数）＋ありがちなAIスライドとの対比。

②Claude Codeで作る（実演）＋画像を組み合わせる

Claude Codeで作る3ステップ — 日本語で指示 → HTMLが生成 → 開くだけ

やることはシンプルで、Claude Codeに日本語で頼むだけです。

Claude Code への依頼プロンプト（雛形）

「____（テーマ）」の説明資料を、HTML 1枚にまとめてください。

・構成：タイトル → リード文 → 目次 → 各章（見出し → 図解 → 本文）→ まとめ
・デザイン：クリーム地の暖色ライトテーマ。カードは角丸＋細い罫線。
  アクセントは2色だけ（アンバーゴールド＋ティール）。
・図解：各章の見出し下に、その章を1枚で説明する図解画像を入れる
 （画像はプレースホルダーでよい。後で差し替える）
・完成したらブラウザで確認できるパスを教えてください。

ここで品質の肝になるのが、デザインの"レシピ"を最初に1回だけ作っておくことです。配色・構成・文体をテンプレートや設定ファイル（CLAUDE.md等）に書いておくと、毎回同じ品質で出てきます。

レシピ（設定ファイルに書いておくデザイン仕様の例）

【HTML資料のデザイン規約】
- 背景 #f6f2e9（クリーム）／カード面 #fffdf8 ／ 本文 #241f18
- アクセント2色のみ：アンバーゴールド #b9791a ＋ ティール #2f6f68
- 罫線 #e2d9c6。角丸14px・細いヘアライン枠・影はごく薄く。
- 構成は「タイトル → リード → 目次 → 各章（見出し→図解→本文）→ まとめ」で固定
- 禁止：色付きの左アクセントバー／絵文字の箇条書き／紫・原色／ダーク背景

画像で配布物レベルに — 「見出し → 図解 → 本文」の型で、読み物としての完成度が跳ねる

そして画像の組み合わせ。AIに図解イラストを生成させて（あるいは手持ちのスクリーンショットを渡して）HTMLに差し込みます。テキストだけの資料と比べて、伝わり方がまるで違います。

正直ポイント
日本語ラベル入りのAI画像は、まれに文字が崩れます。崩れたらラベルを短く（2〜4字）して作り直す——この運用ごとレシピに書いておくのがコツです。

▶ CTA地点（実演①直後・50〜70%）「資料作りの常識が変わったなと思ったら、チャンネル登録しておいてください。この"AIで実務を回す系"、順番に出していきます」＋アニメ登録ボタン。

③ターミナルが難しい人へ — GeminiのGemで同じ仕組み

ここまで見て「ターミナルはちょっと…」という人も大丈夫です。GeminiのGem（カスタムGemini）に「構成・文体・配色・図解の描き方」のレシピを一度仕込めば、あとは画像を渡して声で話すだけで、同じ思想の資料がCanvasに立ち上がります。PDFやGoogleサイトへの書き出しもできます。

そして、これは上級者にも意味があります。チームの非エンジニアにこの仕組みをそのまま配れるんです。自分はClaude Codeで、メンバーはGemで——同じレシピで資料の品質が揃います。

▶ 見せる素材/導線 Gemにレシピを貼る→画像＋音声→Canvasに資料（aibook回の実演を短縮流用）。詳しい手順とGemレシピ全文は概要欄リンク（プロンプト配布＋AIの教科書の解説回）へ＝相互送客。

まとめ — 道具は3段階、今日の自分に合うところから

道具のレベル別の階段図 — ①Gemini → ②＋Gem → ③Claude Code / Codex

レベル	道具	向いている人
入門	Gemini（Canvasだけ）	まず1枚作ってみたい
中級	Gemini＋Gem（レシピ固定）	毎週の定型資料がある
上級	Claude Code／Codex	量産・自動化・ギャラリー化までやりたい

資料作成は「毎回作る作業」から「レシピを育てる仕組み」へ。AIに丸投げするのではなく、見せ方の土台は自分が設計して、量産をAIに任せる——それがこの資料術の本質です。

▶ 申し送り右上テロップ「資料はHTMLで作る」／サムネ「脱・スライド」＋実物スクショ／コメント誘導「あなたが毎回作っている資料、何がいちばん面倒ですか？」／LINE配布=プロンプト一式（Gemレシピ4本＋Claude Code指示例）／メンバー延長=ギャラリー自動化・公開ゲートの裏側構築編。

図解：Routine Labo ／仕様は2026年7月時点