本文へ移動
KOUHEI AI
記事一覧

AIに「高級なスライド」のようなWeb教材を作らせる方法

先に原稿、次に絵コンテ。スタイルは名指しで決めて、使わないものも書く。そのまま使えるプロンプト、サンプル教材、スライド版つき。

スライド版：同じ内容を16ページのスライドにしました。左で見た目を確認し、右のプロンプトをワンクリックでコピーできます。スライド版を開く →

先日、AIに26ページのスライド型Web教材を作らせました。ホイールや矢印キーでページ送りができ、原理を説明するページにはアニメーションが付き、スライダーを動かすと数値がどう変わるか見られるページもあります。機能も完成度も満足でしたが、見た目は平凡でした。きれいで破綻はないけれど、記憶に残るところがありません。

この記事では、そのやり方を全部書きます。あとから足した「スタイル」の手順も含めて。コードが書けなくても、ChatGPTやClaudeとチャットできれば同じように作れます。

記事の例は、ネオブルータリズムのサンプル教材にしてあるので、先に開いて見てみてください：サンプル教材（右上で日本語・中国語・英語を切り替えられます）。

時間がない人向け：エージェントにそのまま渡す

全部読む時間がなければ、下の枠の右上にある「コピー」を押して、使っているAI（ClaudeでもChatGPTでも）に貼り付けてください。波かっこの中を自分の内容に変えれば、この記事の手順どおりに進めてくれます。

次の手順で、高級なスライドのようなWeb教材を作ってください。

テーマ：{あなたのテーマ。例：「テスラRoadsterはどうやって飛び、どうやって逆さまに張り付くのか」}
読者：{誰が読むか、何をすでに知っているか、読んだあと何ができるようになるか}
スタイル：{例：「ネオブルータリズム」「Appleの発表会」。決まっていなければ2〜3種類提案して選ばせてください}

手順（各ステップが終わったら止まって、私の確認を待ってから次へ）：
1. まず原稿だけをMarkdownで書く。1パートで1つのことを説明する。事実と数字には出典を書き、「確認された事実」と「発表・主張にすぎないもの」を分ける。
2. 原稿を絵コンテの表にする：ページ | そのページの結論（1文） | 絵 | アニメーションで何を説明するか（なければ「なし」）。1ページに言いたいことは1つだけ。
3. 絵コンテを私が確認してから、ページを作る：
   - 1つのHTMLファイルにまとめ、外部リソースは読み込まない。オフラインでも開ける
   - 16:9で中央に拡大縮小。ホイール・矢印キー・スペースでページ送り、ホイール1回で1ページだけ進む。下部に章の名前とページ番号
   - 原理を説明するページはcanvasでアニメーションを作る。1つのアニメーションで「なぜ」に1つ答える。3〜6秒、1回再生したら止まり、もう一度再生ボタンを付ける。パラメーターの関係があるところにはドラッグできるスライダーを1つ置く
   - スタイルは参照するもの、具体的なカラーコード、フォントを明記する。アクセントカラーは3色まで、色ごとの意味は最後まで変えない
   - 使わないもの：中央寄せの大見出し＋ボタン2つの表紙、同じ幅のカード3枚並び、青紫のグラデーション、光る球、パーティクル、ぼかしながら出てくる演出、要素が順番に飛んでくる演出、絵文字アイコン、枠の中にさらに枠
   - 本文は18px以上、図の注釈は13px以上
4. 完成したら全ページのスクリーンショットを撮り（アニメーションのページは始め・途中・終わりの3枚）、文字の重なり・はみ出し・小さすぎる文字を自分で確認して、直してから渡す。コードの実行やスクリーンショットができない場合は、完成したHTMLファイルを渡して、私に1ページずつ確認するよう伝える。

ここから先は、やり方の全体と、それぞれの手順の理由です。

なぜPowerPointではなくWebページなのか

PowerPointでできることは、Webページでもほぼできます。Webページにしかないものは3つあります。

  • アニメーションで原理を見せられる。 たとえば「車が坂の頂上で逆さまになっても落ちないのはなぜか」。5秒のアニメーションのほうが、3行の文章よりずっと伝わります。
  • 読む人が自分で動かせる。 スライダーを置いて推力を変えると、車がどの瞬間に浮くかが見える。自分で動かしたことは忘れにくいものです。
  • ファイル1つで、どこでも開ける。 1つの .html ファイルにすれば、送られた人はダブルクリックするだけでブラウザで開けます。パソコンでもスマホでも、ソフトのインストールは要りません。

その代わり、PowerPointのようにテキストボックスを直接ドラッグして直すことはできません。だから最初の準備を少し丁寧にして、あとで何度も直さずに済むようにします。

用意するもの

  • コードを書けるAI。ClaudeのArtifactsやChatGPTのCanvasなら、会話の横でそのままページをプレビューできるので、初めてならこれがいちばん楽です。
  • ブラウザ。AIの画面にプレビューがなければ、出てきたコードを丸ごとコピーして「教材.html」として保存し、ダブルクリックで開きます。
  • 自分がちゃんと説明できるテーマ。この記事では、テスラの新型Roadsterが「飛ぶ」しくみと「逆さまに張り付く」しくみを例にします。

いちばん大事な3つのこと

1. 先に原稿、ページはそのあと

いきなり「テスラRoadsterのしくみを説明する教材を作って」と頼むと、AIは内容を考えながらレイアウトもするので、どのページも文字でぎっしりになります。背景を変えたWord文書のような仕上がりです。

順番はこうです。まずAIに原稿（文字だけ）を書かせて、自分で読んで直す。次に原稿を「1ページに1つの主張と1つの絵」という絵コンテに分ける。ページを作らせるのは最後です。内容とレイアウトを分けておけば、1文直してもページのレイアウトが崩れません。

2. アニメーションは原理を説明するためのもの。飾りではない

アニメーションは1つずつ「なぜ」に答えるようにします。ガスを噴くとなぜ車が浮くのか、逆さまなのになぜ落ちないのか。こういうものはアニメーション向きです。タイトルが飛んでくる、カードが順番にポンポン出てくる、といったものは作りません。気が散るだけです。

長さは3〜6秒。ページを開いたら1回だけ再生して止まり、横に「もう一度」ボタンを置きます。パラメーターの関係（角度、距離、速度など）があるところはスライダーにして、読む人に動かしてもらいます。

3. スタイルは名指しで決めて、「使わないもの」も書く

ここが最初にうまくいかなかったところです。スタイルを指定しないと、AIは「平均的なセンス」で作ります。白い背景、青いボタン、角の丸いカード。どこかで見たような見た目です。

個性を出すには、プロンプトに次の4つを入れます。

  • 参照するもの：たとえば「Appleの発表会」や「ネオブルータリズムの個人開発プロダクトのサイト」
  • 具体的なカラーコード：背景、本文、アクセントカラーがそれぞれ何色か
  • フォント：見出しと本文に何を使うか
  • 使わないもののリスト：青紫のグラデーション、同じ大きさのカードを3枚並べる、絵文字をアイコン代わりにする、など

ポイント：最後の1つがいちばん抜けやすく、いちばん効きます。AIの「平均的なセンス」は、こうしたよくある要素の組み合わせでできています。それを1つずつ外していくと、指定したスタイルが残ります。

手順：「テスラRoadsterはどうやって飛び、どうやって壁に張り付くのか」を例に

10月15日、テスラは新型Roadsterを発表し、会場で2つのことを見せました。ガスを噴いて宙に跳び回転すること、そして弧を描くランプを登り、いちばん上で逆さまのまま止まること。どちらも中学で習う物理で説明でき、原理アニメーションにぴったりです。

ステップ1：原稿を書く

AIにこう頼みます。

「テスラRoadsterはどうやって飛び、どうやって壁に張り付くのか」というテーマで、7ページくらいのWeb教材を作りたいです。読むのは物理を習っていない大人です。
まずは原稿だけをMarkdownで書いてください。1つのパートで1つのことを説明します。ページはまだ作らないでください。
会場で実際に見せたことと、テスラが発表しただけの数字は、はっきり分けて書いてください。

原稿が出てきたら自分で読みます。話題のニュースは特に確認が必要です。数字は公式発表と信頼できる報道に合わせます。AIが覚えているのは古い情報かもしれないし、作り話かもしれません。この例でいうと、「飛ぶ」は実際には数秒間のジャンプと回転で、持続的な飛行ではありません。約4,700kgという吸着力はテスラ自身が発表した数字で、高すぎるという指摘もあります。こういうことは原稿の段階で正しく書いておきます。アニメーションにしてから直すのは大変です。

ステップ2：絵コンテに分ける

原稿を絵コンテの表にしてください。1ページ1行で：ページ | そのページの結論（1文） | 絵 | アニメーションで何を説明するか（なければ「なし」）

この例だと、だいたいこうなります。

ページ 結論（1文） 絵 アニメーション
1 車が、どうやって飛ぶ？ 逆さまに張り付く？ 表紙：車の横からのシルエット なし
2 後ろにガスを噴くと、車は前に進む 後部の噴射口、ガスの流れ、車にかかる力の矢印 ガスが後ろへ噴き出し、車が前へ加速する（作用・反作用）
3 推力が車重を超えると、車は浮く 下向きの噴射口、推力と重力の矢印 スライダーで推力を変え、車重を超えた瞬間に車が浮く
4 数秒しか飛べないのは、タンクのガスがすぐ尽きるから タンクと残りのガス量 ガスの量が減り、推力が消え、車が着地する
5 ファンが車の下の空気を抜くと、外の大気が車を路面に押し付ける 車の下の断面：スカート、ファン、空気 車の下の気圧の矢印が短くなり、屋根にかかる大気圧の矢印はそのまま
6 圧力差 × 車底の面積が車重より大きければ、逆さまでも落ちない 逆さまの車、圧力と重力の矢印 スライダーで車の下の気圧を変え、頂上で落ちるか張り付くかを見る
7 まとめ：ひとつは外へ押し出し、ひとつは内へ押し付ける 小さな図を2つ並べる なし

チェック：この表を見るときは、1つだけ確認します。どのページも言いたいことが1つだけになっているか。2つ言おうとしているページがあれば、2ページに分けます。

ステップ3：スタイルを選ぶ

どのスタイルにするか迷ったら、VibeHubのデザインスタイルのページ（vibe-hub.org）を眺めてみてください。24種類のスタイルが、説明と例つきでまとまっています。ここでは2つ選びます。

  • Apple風：黒か薄いグレーの背景に、1ページ1文と大きな絵を1つ。余白をたっぷり取ります。原理や概念の説明に向いています。
  • ネオブルータリズム：生成りの背景、太い黒の線、鮮やかな色のブロック、ぼかしのない影。パッと目を引きたいとき、軽めのテーマに向いています。

ステップ4：プロンプトで生成する

絵コンテが固まったら、次のテンプレートを使います。4つのブロックは、入力・スタイルの方向・構成・技術的な条件です。この分け方は、Prompt Motion（prompt-motion.com）で特に出来のよかったアニメーション用プロンプトを参考にしています。波かっこの中を自分の内容に置き換えてください。書かなかったところはAIがデフォルトで埋めます。

<inputs>
テーマ：{教材のテーマ}
読者：{誰が読むか、何をすでに知っているか、読んだあと何ができるようになるか}
原稿：{確認済みの原稿と絵コンテを貼る}
ページ数：{約Nページ}
</inputs>

<direction>
参照：{例：「Appleの発表会のキーノート」}
キャンバス：背景 {カラーコード}、本文 {カラーコード}、アクセントカラーは2色まで {カラーコード}。色ごとに意味を固定する：{色=意味}
フォント：日本語はシステムフォント（ヒラギノ角ゴなど）、数字とコードは等幅フォント
レイアウト：1ページに1つの主張。大見出しは1文で結論を言い切る。余白は焦点を絞るために使う
使わないもの：
- 中央寄せの大見出し＋ボタン2つ、という表紙
- 同じ幅のカードを3枚並べる
- 青紫のグラデーション、光る球、パーティクル、ぼかしながら出てくる演出、3D回転
- 要素が順番に飛んでくる演出
- 絵文字をアイコン代わりに使う
- 枠の中にさらに枠、段落ごとの区切り線、左側の色付き縦線
- テンプレートっぽく見えるもの全般
</direction>

<structure>
絵コンテどおりに、1ページ1つのsectionで作る。
- 原理を説明するページにはアニメーションを付ける。アニメーションは「なぜ」に1つ答えるもの。3〜6秒、1回再生したら止まり、もう一度再生できる
- パラメーターの関係があるところには、ドラッグできるスライダーを1つ置く
</structure>

<build>
- 1つのHTMLファイルにまとめ、外部リソースは一切読み込まない。オフラインでも開ける
- 16:9で中央に拡大縮小。ホイール・矢印キー・スペースでページ送りでき、ホイールで一度に何ページも進まないようにする
- 下部に章の名前とページ番号を表示する
- 色・フォント・文字サイズは変数にまとめ、全ページでその変数だけを使う
- アニメーションはcanvasで描き、各フレームを時間から計算する
- 本文は18px以上、図の注釈は13px以上
</build>

2つのスタイルの「スタイルの方向」は、上の <direction> とそのまま差し替えられます。

Apple風

参照：Appleの発表会のキーノートと apple.com の製品ページ
キャンバス：#000000 か #F5F5F7。本文は #1D1D1F（明るい背景）/ #F5F5F7（暗い背景）。アクセントカラーは1色だけ
フォント：SF Pro / ヒラギノ角ゴ。大見出しは64〜96px、ウェイト600、字間はやや詰める。本文は20〜24px
レイアウト：1ページに1文と大きな絵を1つだけ。余白をたっぷり
アニメーション：ゆっくり始まってすっと止まるイージング。一度に動かすのは1つだけ。バウンドはしない
使わないもの：上と同じ。すりガラスはオーバーレイにだけ、グラデーションは要となる1語にだけ使う

ネオブルータリズム

参照：ネオブルータリズム（Neo-Brutalism）の個人開発プロダクトのサイトやイベントページ
キャンバス：#FFF8E7 のような生成り。黒の3pxの太い線。ぼかしのない真っ黒な影（6pxずらす）
アクセントカラー：鮮やかな色のブロックを2〜3色（例：#FFD23F、#3BCEAC、#EE4266）。色ごとに意味を固定する
フォント：見出しは極太（ウェイト800以上）、本文はふつうの太さで読みやすく
レイアウト：色のブロックのカード、ステッカーのようなラベル、少し傾けた強調要素。それでも情報の階層ははっきりさせる
アニメーション：きびきびした移動と、押し込むような動き。ふわっとしたフェードはしない
使わないもの：上と同じ。装飾が内容より目立たないこと。強い色は全体で3色まで

できあがりの例

上のプロンプトに沿って、ネオブルータリズムの <direction> で作りました：サンプル教材を開く。生成りの背景、太い黒線、ぼかしのない影。ラベルはステッカー風です。

スライダーを動かし、推力が車重を超えると車が浮く

ファンが車の下の空気を抜き、大気が車を路面に押し付ける

色の意味は最後まで同じです。推力はいつも赤、気圧はいつも青緑、重力はいつも黒。3ページ目と6ページ目はスライダーを動かせて、2・4・5ページ目のアニメーションはもう一度再生できます。パソコンで見るのがいちばんきれいです。スマホなら横向きにしてください。

ステップ5：1ページずつ確認する

AIが作ったページは、必ず1ページずつ自分の目で見ます。AIの「完成しました」だけで終わりにしないでください。よくある問題は、文字と図が重なる、ラベルが線にかぶる、アニメーションの最後のコマが正しい位置で止まらない、文字が小さすぎて読めない、などです。おかしなページがあったら、そのページのスクリーンショットをそのままAIに貼り、何ページ目の、どの要素を、どう直してほしいかをはっきり伝えます。たとえば「5ページ目の『外：ふつうの大気圧』のラベルが車体に重なっているので、屋根の上に移して」。直すのは1回に1か所だけにして、直ったらまた見ます。何か所も同時に直させると、1つ直ってほかが崩れることがよくあります。

自分でコードを実行できるエージェント（Claude Codeなど）を使っているなら、プロンプトの最後に「完成したら全ページのスクリーンショットを撮って、アニメーションのページは始め・途中・終わりの3枚を撮り、文字の重なりやはみ出しを自分で確認して、直してから渡して」と1行足しておくと、先に自分でチェックしてくれるので、こちらで見つける問題がかなり減ります。

つまずきやすいところ

  • 色の意味を固定する。 この例では、推力の矢印はずっと赤、重力はずっと黒、大気圧はずっと青緑です。最後まで変えなければ、読む人は色を見ただけで何のことかわかります。
  • ホイール1回で何ページも進む。 ノートパソコンのトラックパッドは、1回なぞっただけでページ送りが何度も起きます。プロンプトに「ホイールで一度に何ページも進まないようにする」と書いておけば防げます。
  • 文字がどんどん小さくなる。 AIは内容を1ページに収めようとして、黙って文字を小さくします。だから最小の文字サイズを書いておきます。
  • アニメーションがループし続ける。 ずっと繰り返されると気が散ります。「1回再生したら止まり、もう一度再生できる」と書きます。
  • ページが多いと一度で作りきれない。 ページ数が多いと、AIの1回の出力では最後まで書ききれないことがあります（これは私の経験からの判断で、上限はツールによって違います）。最初の数ページでスタイルを決めてから、同じスタイルで1章ずつ足してもらいましょう。足すときは「追加するページの部分だけ出力して」と頼み、自分でファイルに貼り付けます。色・フォント・ページ送りのコードを毎回書き直させると、前後で食い違いやすくなります。
  • 原理をまちがえたら全部直す。 原稿の1文がまちがっていたら、ページもアニメーションも自分のメモも全部直すことになります。だからステップ1の確認がいちばん手間が少なくて済みます。

仕上げ前の10項目チェック

  1. どのページも言いたいことは1つだけ？ 見出しは1文で言い切れている？
  2. 色の意味は最後まで同じ？
  3. 中央寄せの大見出し、青紫のグラデーション、同じ幅のカード3枚のような、テンプレートっぽさはない？
  4. アニメーションは原理を説明している？ もう一度再生できる？ 最後のコマできちんと止まる？
  5. 本文の文字は十分大きい？
  6. オフラインでも開ける？
  7. ホイールで一度に何ページも進まない？
  8. 全ページを自分の目で見た？
  9. 原稿の事実は確認した？
  10. スタイルは自分で名指しして選んだもの？ それともAIの平均的なセンス？

さいごに

このやり方でいちばん時間がかかるのは、最初の2つ、原稿を書くことと絵コンテに分けることです。ページの生成そのものはむしろすぐ終わります。まずは試してみたいだけなら、上のプロンプトのテンプレートを使って、自分がよく知っているテーマで5ページ作ってみてください。

この記事で参考にしたもの：

  • VibeHub デザインスタイル：vibe-hub.org
  • Prompt Motion アニメーション用プロンプト集：prompt-motion.com
  • VibeHub「AIっぽさを防ぐ」：vibe-hub.org/anti-ai-flavor