第4回 / 実践コース全5回

スライド・書類を作ってみよう

AIで「プレゼン資料」と「業務書類」を一瞬で作る

Claude Code パーソナル講座 | 講師: 山本朋美
オンライン / 対面（120分）

今日のゴール

この2時間が終わったら、こんなことができるようになります

1AIにスライド資料を作らせて、プレゼンで使える品質にする
2既存の書類（見積書・請求書等）のフォーマットをAIに再現させる
3「参考資料を渡す」テクニックで精度を上げる方法を習得する

今日の持ち帰り成果物: 自分のテーマで作ったHTMLスライド（5〜10枚）＋既存書類をAIで再現したHTML

今日の流れ（120分）

時間	内容	形式
00:00 - 00:10	実践コース開始・今日のゴール	対話
00:10 - 00:30	AIに書類を作らせるコツ	座学
00:30 - 00:55	ワーク1: HTMLスライド資料を作る	ハンズオン
00:55 - 01:05	休憩	--
01:05 - 01:20	参考フォーマットを渡すテクニック	座学
01:20 - 01:50	ワーク2: 見積書・請求書・契約書を再現する	ハンズオン
01:50 - 02:00	まとめ・次回予告	対話

実践コースへようこそ！

基礎コース（第1〜3回）で学んだことを、今日から「仕事の成果物」に変えていきます

基礎コース（第1〜3回）

・Claude Code の使い方を覚える
・プロンプトの書き方を学ぶ
・フォルダ設計・スキルの概念
→ 「道具を知る」フェーズ

→

実践コース（第4〜8回）

・スライド・書類を作る（今日！）
・リサーチ・情報収集を自動化
・動画・メール・LINE連携
→ 「道具で成果を出す」フェーズ

今日のテーマ: AIに「見た目の綺麗な成果物」を作らせる。これが一番わかりやすい成功体験になります。

01

AIに書類を作らせるコツ

何が向いていて、何が向いていないのか？

AIに作らせるのに向いているもの

プレゼン・スライド

研修資料
提案書
勉強会スライド
セミナー資料

ビジネス帳票

見積書
請求書
納品書
発注書

テンプレート類

議事録テンプレート
マニュアル
チェックリスト
報告書フォーマット

共通点: 「構造が決まっている」「繰り返し使う」「デザインより内容が大事」な書類はAIが超得意

AIに作らせるのに向いていないもの

法的文書の「最終版」

契約書、利用規約、就業規則など
法的リスクがあるものは下書きとしては使えるが、最終版は専門家に確認が必要

AIに作らせる → 専門家にチェックしてもらう
この流れならOK

手書き風・芸術的デザイン

筆文字デザイン、イラスト入りチラシ、
オリジナリティ重視のクリエイティブ

AIが作るのは「構造化された綺麗な書類」。
アート系は画像生成AIの領域

判断基準: 「80点の仕上がりで業務が回るか？」がYesなら、AIに任せる価値あり。100点が必要な場面はAIを下書きツールとして使う。

なぜ「HTML形式」で出力させるのか？

Word や PowerPoint ではなく、HTML を使う3つの理由

1 ブラウザで即確認
ファイルをダブルクリックするだけ。特別なソフト不要
2 PDF化が簡単
ブラウザの「印刷」→「PDFに保存」で一瞬。納品にも使える
3 デザインが綺麗
CSS（スタイル指定）が使えるので、プロっぽい見た目になる

実は今見ているこのスライドもHTML。 Claude Code で自動生成しました。

AIに書類を作らせる指示のコツ

この4つを伝えるだけで、品質が劇的に変わります

1. 枚数・分量

「5枚のスライド」「A4で2ページ」「項目は10個くらい」
→ 量の目安がないとAIが暴走する

2. 目的

「社内発表用」「クライアント提案用」「研修で使う」
→ 目的でトーンやデザインが変わる

3. 対象読者

「IT初心者」「経営者」「小学生」「同僚」
→ 難易度と言葉選びが変わる

4. トーン・雰囲気

「堅め」「カジュアル」「親しみやすく」「フォーマル」
→ 言葉遣いとデザインに影響

実例: 研修スライド274枚を自動生成した話

講師が実際にClaude Codeで作った研修資料の裏話

カリキュラム設計

→

1回分のスライド生成

→

全8回分を一気に

→

274枚完成！

やったこと

・全8回のカリキュラムを先に設計
・1回分のデザインを作り込む
・そのCSSを使い回して残り7回を生成
・手作業ならたぶん2週間。AIなら半日。

コツだったこと

・最初の1回分のデザインを「参考」として渡す
・「CSSは第1回と同じものを使って」と指示
・内容だけ変えれば統一感が出る
・今日みなさんが学ぶのはこのテクニック

HTMLスライドの仕組み（ざっくり理解）

難しいことは覚えなくてOK。AIが全部書いてくれます

HTML = 内容

「ここがタイトル」
「ここが箇条書き」
「ここに表を入れる」

→ 文章の構造を書く

CSS = デザイン

「背景は紺色」
「文字は白」
「角を丸くする」

→ 見た目を指定する

JS = 動き

「矢印キーで次へ」
「Fでフルスクリーン」
「クリックでめくる」

→ 操作を追加する

あなたがやること: 「何を書くか」を日本語で指示するだけ。HTML/CSS/JS はAIが全部書きます。

02

スライド資料を作る

自分のテーマで5枚のHTMLスライドを作ってみよう

ワーク1 でやること

テーマを決める

→

プロンプトを入力

→

AIがスライド生成

→

ブラウザで確認！

テーマ例（迷ったらこれ！）

自分の仕事・サービスの紹介
最近学んだことの共有
チームへの業務報告
趣味のプレゼン

完成イメージ

・5〜10枚のスライド
・1280x720px（プレゼンサイズ）
・矢印キーでページ送り
・Fキーでフルスクリーン
・そのままプレゼンで使える品質

ワーク 1

プロンプトを入力しよう（25分）

以下をコピーしてClaude Codeに入力。[黄色の部分]を自分の情報に書き換えてください

入力するプロンプト
[あなたのテーマ]について5枚のHTMLスライドを作ってください。

【条件】
・対象: [誰に見せるか — 例: 社内メンバー、クライアント]
・目的: [何のために — 例: サービス紹介、勉強会発表]
・トーン: [堅め / カジュアル / 親しみやすく]
・1スライド = 1280x720px
・矢印キーでページ送りできるプレゼンモード付き
・デザインは洗練された配色で、プレゼンで使える品質にしてください

作ったスライドを確認する方法

1Finder でファイルを見つける（Claude Code が保存先を教えてくれます）
2HTMLファイルをダブルクリック → ブラウザで開く
3F キーを押してフルスクリーンに
4← → キーでスライドをめくる

うまくいったら: 「もう少し文字を大きくして」「色を変えて」「スライドを1枚追加して」と追加指示を出してみましょう。AIが即座に修正してくれます。

うまくいかなかったら: 講師に画面を見せてください。一緒にデバッグしましょう！

作った後の「追加指示」テクニック

一発で完璧にならなくてOK。対話で磨いていくのがAIの使い方

デザインの調整

「全体の配色をもう少し落ち着いた色に」
「タイトルのフォントサイズを大きくして」
「背景をグラデーションにして」
「余白をもう少し広くして」

内容の調整

「3枚目と4枚目の間にスライド追加」
「箇条書きをもっと具体的に」
「最後にまとめスライドを足して」
「専門用語を簡単な言葉に変えて」

コツ: 1回の指示で1つの変更。「あれもこれも」と詰め込まず、1つずつ確認しながら進める。

こんな綺麗なスライドが
数分でできた！

PowerPoint を開いてレイアウトを悩む時間、
配色を考える時間、文字の大きさを調整する時間…

全部AIに任せて、あなたは「何を伝えるか」に集中できる。

☕ 休憩（10分）

スライドは作れましたか？
後半は「既存の書類をAIに再現させる」テクニックを学びます

03

参考フォーマットを渡すテクニック

「作って」だけでは不十分。参考を渡すと精度が激変する

「作って」だけだとどうなるか

指示: 「見積書を作って」

・AIが「一般的な見積書」を作る
・レイアウトはAIの判断
・項目もAIの判断
・会社のフォーマットと全然違う

→ 結局やり直し

→

指示: 「この見積書と同じ形式で作って」

・参考画像のレイアウトを再現
・項目名も同じ
・色味・フォント感も揃う
・内容だけ差し替えればOK

→ 一発で使える品質

重要: AIは「正解」を知らない。あなたの会社の書類フォーマットは、教えてあげないとわからない。

参考フォーマットの渡し方

3つの方法を紹介します。おすすめ順に並べました

1 スクリーンショットを渡す（一番簡単！）
画面キャプチャ → 「このフォーマットで再現して」と渡す。Claude Code は画像を読める
2 PDFを読み込ませる
既存の書類がPDFなら、そのまま読み込ませて「このフォーマットで」と指示
3 テキストで構造を伝える
「ヘッダーに会社ロゴ、左上に宛名、右上に日付…」と言葉で説明

スクリーンショットの撮り方（復習）

Mac

画面全体: Command + Shift + 3
範囲選択: Command + Shift + 4
ウィンドウ: Command + Shift + 4 → Space

→ デスクトップに保存される

Windows

画面全体: Print Screen
範囲選択: Win + Shift + S
ウィンドウ: Alt + Print Screen

→ クリップボード or ピクチャフォルダ

ヒント: 書類全体が1画面に収まらない場合は、複数枚のスクショを撮ってすべて渡してOK。

便利ツール紹介: doc-reproducer スキル

講師が作った「帳票再現」専用スキル。こんなことができます

既存書類のスクショ

→

Claude Code に渡す

→

HTMLで完全再現！

プロンプト例
添付のスクリーンショットと同じフォーマットの見積書をHTMLで作ってください。
レイアウト・色・フォントの雰囲気をできるだけ忠実に再現してください。

スキルとは？（第3回の復習）: Claude Code に「この種類の仕事はこうやって」と教えておく仕組み。繰り返す作業を一発で実行できるようになる。

参考を渡すときのプロンプトのコツ

NG: 情報不足

見積書作って。

→ AIが勝手にデザイン。あなたの会社フォーマットと違う

OK: 参考 + 具体的な情報

添付のスクショと同じフォーマットで見積書を作って。
・会社名: 〇〇株式会社
・宛先: △△様
・明細: コンサルティング 3回 @50,000円

→ フォーマットも内容もバッチリ

3点セット: 「参考画像」+「再現してほしい旨」+「差し替える具体的な情報」を必ず揃える

04

見積書・請求書を再現する

既存の書類をAIで忠実に再現してみよう

ワーク2 でやること

自分が持っている書類をClaude Codeで再現します

既存書類がある人

・普段使っている見積書、請求書、
　納品書、報告書テンプレートなど
・スクショを撮って使う
・ExcelやPDFどちらでもOK

→ 自分の書類を再現してみよう

持っていない人

・講師がサンプルを用意しています
・見積書 or 請求書のサンプル画像を
　お渡しします
・それを元に再現ワークをしましょう

→ サンプルで練習しよう

個人情報に注意: 本物の顧客名や金額を使う場合は、ダミーデータに差し替えてからAIに渡しましょう。

ワーク 2

書類を再現しよう（30分）

1再現したい書類のスクリーンショットを撮る（またはサンプルを受け取る）
2スクショをデスクトップに保存する
3Claude Code に以下のプロンプトを入力する

入力するプロンプト
添付のスクリーンショットと同じフォーマットの[見積書/請求書]をHTMLで作ってください。

【差し替え情報】
・会社名: [あなたの会社名]
・宛先: [相手先の名前]
・明細: [サービス名数量単価]
・日付: [発行日]

レイアウト・色・フォントの雰囲気をできるだけ忠実に再現してください。

再現精度を上げるコツ

スクショが綺麗なほど精度UP

ぼやけた画像は読み取り精度が下がる
書類全体が収まるように撮る
余計なウィンドウが写らないように
高解像度（Retinaディスプレイ）だとベスト

追加指示で微調整

「罫線をもう少し細くして」
「ヘッダーの背景色をもう少し濃く」
「フォントサイズを全体的に1段階小さく」
「印刷したときにA4に収まるようにして」

PDF化のコツ: ブラウザで開く → Cmd+P（印刷） → 「PDFに保存」を選択。余白は「なし」にするとピッタリ。

うちの書類が
そっくりに再現された！

Excel で毎回フォーマットをコピーして、
セルの幅を調整して、印刷範囲を設定して…

AIに参考を渡せば、同じ品質の書類が何枚でも作れる。

応用: こんなものも作れます

今日学んだテクニックの応用範囲は広い

名刺デザイン

名刺サイズ（91x55mm）のHTMLを作り、印刷→PDF→入稿。デザイン費を節約できる。

サービス紹介シート

A4 1枚のサービス案内。営業資料として紹介者に渡せるクオリティ。

社内マニュアル

業務手順書をHTMLで作成。ブラウザで開けるので共有も簡単。

契約書テンプレート

※下書きとして作成。最終版は必ず専門家にチェックしてもらうこと。

イベントチラシ

セミナーや勉強会の告知チラシ。QRコード付きの申込み案内も作れる。

レポート・報告書

グラフや表を含む月次報告。データを渡せば自動でHTML化。

今日のまとめ

1 AIにスライド資料を作らせた
「枚数・目的・対象・トーン」を伝えるだけで、プレゼン品質のスライドが完成
2 既存書類のフォーマットをAIに再現させた
スクショ + 差し替え情報を渡すだけで、自社の書類がそっくりに再現できた
3 「参考を渡す」テクニックを習得した
AIに「作って」だけではなく「これを参考に」と渡すことで精度が激変する

持ち帰り成果物: 自分のテーマで作ったHTMLスライド＋既存書類をAIで再現したHTML

今日のキーフレーズ

「作って」ではなく
「これを参考に作って」

参考を渡すだけで、AIの出力品質は劇的に変わる。
スクショ1枚が、あなたの指示の「精度」を一気に引き上げる。

次回までにやってみてほしいこと

基本（10分でできます）

普段使っている書類を1つ選んで
スクショを撮り、Claude Code で再現してみる。

→ 「意外とちゃんとできる！」を体感する

チャレンジ（余裕がある人）

今日作ったスライドを実際の
プレゼンや会議で使ってみる。

→ 「AIで作った資料で仕事した」体験を得る

コツ: 完璧を目指さなくてOK。「80点で十分使える」ことを実感できれば大成功。

次回予告 -- 第5回: 情報収集・リサーチを自動化しよう

次回学ぶこと

AIにWebリサーチをさせる方法
競合調査・市場調査の自動化
情報を構造化してまとめるテクニック
リサーチ結果を書類やスライドに反映

次回の成功体験

「1時間かけていた情報収集が、
AIなら5分でレポートになる」

→ その体験を一緒にします

実践コースの後半: 第6回: スプレッドシート自動化、第7回: メール・LINE連携、第8回: 動画編集とパーソナルスキル構築

お疲れさまでした！

第4回: スライド・書類を作ってみよう -- 完了

次回: 情報収集・リサーチを自動化しよう

ご質問はいつでもお気軽にどうぞ -- LINE / メール / 次回の講座で

Claude Code パーソナル講座

講師: 山本朋美