進行台本

スライドHTML化サポート会

8月22日（土）11:00–12:00　八田さんと画面共有・60分

テーマ: スライド資料をHTML1枚にして、Cloudflare PagesでURL化するまで

今日のゴール: 終了時に、八田さんのスライドが1つURLになっている

最低ライン: 全フローを1回通しで見てもらう（手を動かすのは次回でもOK）。技術を教える会ではなく、「怖くない」という成功体験を作る会。

前日までの準備3分で終わる

タイムテーブル

11:00–11:05

ゴール共有

冒頭のひとこと: 「60分後に、八田さんのスライドのURLが1個できてる状態を目指しましょう」

先にゴールを宣言すると、途中で脱線しても戻ってこられる。「難しいことは全部AIがやるので、今日はコマンドを1回も打ちません」と伝えて安心させる。

11:05–11:15

デモ: いつものフローを通しで1回見せる

自分の素材で、プロンプト → HTML完成 → ブラウザで開く → 「デプロイして」→ URL発行、まで一気に。説明は最小限にして、まず「速さ」と「簡単さ」を見せる。

見せながらのひとこと: 「今、僕は2行しか打ってないです」「八田さんもClaude Code使ってるので、今日でこれと同じことができるようになります」

11:15–11:50

ハンズオン: 八田さんの素材でやってもらう

プロンプトは八田さん自身に打ってもらう（コピペでOK）。拓海さんは誘導役に徹する。

  1. スライドの中身をAIに渡すスライドのテキストをコピーして貼るだけでいい、と伝える。きれいに整理されてなくてもAIが汲み取ってくれる。
  2. HTML1枚を作らせる下の「コピペ用プロンプト①」をそのまま使う。ファイル名がindex.htmlになっていることだけ確認。
  3. できたファイルをダブルクリックして確認崩れていたら、それは失敗ではなくチャンス。「ここが崩れてるので直して」と追加指示する姿（プロンプト②）を見せるのが一番の学びになる。
  4. 初回セットアップをして「デプロイして」で公開プロンプト③を打つと、Claude Codeがセットアップから公開まで案内してくれる。途中で一度だけブラウザが開いて「Allow」を押す場面がある（Cloudflareの鍵をClaude Codeに渡す作業・初回だけ）。URLが出たら、八田さんのスマホでも開いてもらう。ここが今日のクライマックス。
11:50–12:00

振り返りと次の一歩

今日やった流れを八田さんに口頭で言ってもらう（「AIに作らせて、置くだけ、でしたよね」と言えたら合格）。

締めのひとこと: 「次に一人でやってみて、詰まったらSlackでいつでも聞いてください」

コピペ用プロンプト

① スライドをHTML化する
以下のスライドの内容を、1枚のHTMLファイル（ファイル名: index.html）にまとめてください。

条件:
- デザインはシンプルで見やすく、スマホでも読めるように
- CSSも含めてこの1枚のファイルの中に全部入れる（外部ファイルは使わない）
- 内容の追加や創作はせず、渡した内容だけで構成する

---
（ここにスライドの内容を貼り付け）
② 崩れたときの修正指示
「◯◯」の部分のレイアウトが崩れています。△△のように表示されるように直して、index.htmlを丸ごと出し直してください。
③ 公開する（初回セットアップ込み）
このindex.htmlを、Cloudflare Pagesで誰でも見られるように公開してください。プロジェクト名は hatta-slide-01 でお願いします。

Cloudflareのアカウントは作成済みですが、このパソコンからデプロイするのは初めてです。必要な初期設定（wranglerのログインなど）があれば、手順を一つずつ案内してください。

公開のしくみ初回だけ接続あり

プロンプト③を打つ→ 初回のみ: ブラウザが開く→ 「Allow」を押す→ Claude Codeがアップロード→ URL発行

「Allow」はCloudflareの鍵をClaude Codeに渡す一度きりの作業。2回目以降は「デプロイして」だけでURLが出る。発行されるURLは「プロジェクト名.pages.dev」。更新したいときは「直してもう一度デプロイして」でOK。

wrangler（ラングラー）と聞かれたら: Cloudflare公式の「コマンドで操作するための無料ツール」。Claude Codeが裏で使ってくれるので、僕らは名前だけ知っていればOK。

プロジェクト名のルール

保険用: ドラッグ&ドロップでの公開詰まったとき用

Compute（コンピュート）→ Workers & Pages（ワーカーズ&ペイジズ）→ Create（クリエイト）→ 一番下の Get started（ゲット・スターテッド）→ Drag and drop your files（ドラッグ・アンド・ドロップ・ユア・ファイルズ）→ 名前を入力 → Create project（クリエイト・プロジェクト）→ フォルダをドロップ→ Deploy site（デプロイ・サイト）

「Create」を押すと最初にWorkers作成画面が出るが、慌てず画面一番下の小さな「Looking to deploy Pages? Get started」を押せばPagesの道に入れる。ファイル名は index.html にすること。更新は同じプロジェクトの「Create new deployment（クリエイト・ニュー・デプロイメント）」に再ドロップ。できたてのURLは開けるまで1〜2分かかることがある（待って再読み込み）。

つまづき予報起きやすい順

デモの冒頭で予告しておくひとこと: 「今日は途中で2回くらい、変な待ち時間や確認画面が出ますが、全部正常です」——これで体感トラブル数はゼロになる。

★★★ 起きる前提で構える

★★ 五分五分で起きる

★ 念のため

詰まったときの保険

初回セットアップ（wranglerログイン）で詰まった

深追いしない。上の「保険用: ドラッグ&ドロップ」に切り替えれば、ブラウザだけで公開までいける。セットアップの続きは後日Slackでフォロー。

Cloudflareのアカウント作成で詰まった

「今日はアップロードは僕が受け取ってやりますね」に切り替える。八田さんはHTML作成までできれば十分な成功体験。

HTMLが大きく崩れた・思い通りにならない

直そうと頑張らない。「AIに直させる」デモに切り替えて、プロンプト②を見せる。それでもダメなら素材を小さくして再挑戦。

即答できない質問が来た

「そこは持ち帰って確認しますね」でOK。講師が全部即答する必要はない。

時間が押した

ハンズオンのStep 4（公開）だけは削らない。Step 3の微調整を飛ばして、多少崩れたままでもURL発行までいく。

当日の心得