Claudeでホワイトボードの授業準備をリアルタイムに可視化する
板書やスライドをClaudeに見せながら教え方を相談すると、会話の中でインタラクティブな図が生成されます。授業準備での使い方と限界をまとめます。
Claudeにいつも使っている板書の写真やスライドを見せ、「生徒がどこでつまずくか」を相談すると、その場でインタラクティブな図が会話に流れ込んできます。授業本番のスライドを作る前に、教え方そのものを練り直すための使い方です。図はまず自分の準備のために考える道具で、生徒に見せるかどうかは、そのあとで決められます。
板書の相談で図が出てくる仕組み
ここで使うのは、Claude.aiのチャットに備わった「カスタムビジュアル」というベータ機能です。Claudeが図解が役立つと判断したとき、あるいは「動かして確認できる形で見せて」と頼んだときに、HTMLで組んだ図を回答の途中に表示します。画像ではなく、スライダーやボタンを操作できる部品です。テンプレートを当てはめるのではなく、質問に合わせてゼロから組み立てられます。オンにする設定はありません。
対象は、WebまたはデスクトップでClaudeを使うすべてのユーザーです。チャットでもCoworkでも使えます。図が出たあとも、ボタンを押す、スライダーを動かす、そのまま質問を続けるといった操作ができ、全画面表示にも広げられます。そのため、画面に大きく映して見せる準備にも向きます。
必要なものは2つです。1つは、いつも使っている板書の写真やスライド、作りかけの例です(描いてきた内容の説明文でも構いません)。もう1つは、生徒がどこで止まるかという一言です。後者が図の中身を決めます。「需要と供給の交点は追えるが、なぜその価格に落ち着くのかが伝わらない」と書けば、その誤解を埋める図が作られます。「需要と供給のグラフを描いて」だけでは、その欠落に狙いを定められません。
Claudeは渡された枠組みを読み取り、それを土台に作ります。返ってくる図は自分の説明の延長にあたり、説明を置き換えるものではありません。会話が進めば、Claudeは図を更新したり作り直したりします。
カスタムビジュアルが使える場面
チャット(Web・デスクトップ)
図のボタンを押すと、それが次の依頼(たとえば「第3四半期を掘り下げて」)として送られます。会話リンクで共有でき、受け取った人はログインして、WebかデスクトップのClaudeで開きます。
Cowork
図は表示されますが、ボタンのクリックによる追加依頼はできず、共有リンクでも他の人に表示されません。Coworkのセッションはローカルで動くため、リンク経由では図が描画されないからです。続きは文章で頼みます。それ以外はチャットと同じように動きます。
iOS・Androidのアプリでは図が表示されません。出先のスマートフォンで見返すときは、後述の方法で画像かファイルにして持ち出します。
板書とつまずきをセットで伝える
相談の中身は、生徒が止まる場所、もっと伝わる見せ方、いつもの板書が今の説明に合っているか、のどれでも構いません。板書のスケッチやスライドを添付し、「これまでの説明」と「生徒が止まる場所」を同じ依頼に書きます。
そのまま使える依頼文の型は次のとおりです。
来週〇〇(単元名)を教える準備をしています。これまではこのスケッチ(画像を添付)で説明していますが、生徒は△△の部分までは追えても、その先の□□が伝わりません。もっと良い説明の組み立て方はありますか。動かして確認できる形で見せてもらえますか。
単元名・つまずき・添付画像を差し替えれば、教科を問わず使えます。
この流れはAnthropicのAcademyに教材としても載っていて、Education向けにClaude.aiで進める形で、所要時間は15分です。教材の例では、教授が来週の需給均衡を教える準備として、交点だけでなく価格が均衡へ向かう圧力をどう見せるかを尋ねています。
図が出るかどうかはClaudeの判断で、頼んでも出ないことがあります。出ないときは「この仕組みを図にして」「これをグラフにして」と言い換えます。「これを図として描いて」「時間による変化を見せて」と直接頼んでも構いません。「このシステムや概念を可視化して」と頼めば、説明の横に図が組まれます。
返ってくるのは図だけではありません。「動きを扱う概念は、動いて見せる必要がある」のような診断と、教え方の練り直し案が文章で届き、その案が着地する位置に図が現れます。需給曲線なら、板書に描いた曲線をそのまま使い、生徒が動かせる価格スライダーと、設定した価格に応じて書き換わる数値表示です。
図ができたあと、教え方を固める3つの頼み方
図は出た時点で完成ではなく、会話の中で作り替えていく下書きです。図は二つの役目を同時に果たします。動くところを見ると自分の説明の言葉が整い、授業の台本が書きやすくなること。そして、生徒向けの教材の最初の下書きになることです。グラフを年次から月次に変える、比較に3つ目の選択肢を足す、のように、文章の修正と同じ感覚で頼めます。授業準備向けの追い依頼は、次の3種類です。教材ページには3つとも例文があり、「Open in Claude」でそのまま開けます。
図を授業向けに育てる順番
- 1
操作の手順を変える
「スナップボタンの前に、生徒に価格の動く方向を予想させるステップを足して、予想と実際の結果を並べて表示して」のように、インタラクションそのものの変更を頼みます。
- 2
図のボタンで次の場面へ進む
図の下にボタンが並ぶことがあります。教材の例では、図の下の「需要が急増したら曲線がどうずれ、新しい均衡点がどこに落ちるかを見せて」というボタンを押すと、元の図を上に残したまま、その場面の2つ目の図が下に生成されます。
- 3
同じ形で別の単元に描き直す
「同じ予想→確認の形式で、価格の上限・下限規制に描き直して。差が埋まらない理由も見せて」と頼むと、価格を動かして予想し、確かめる操作の型は同じまま、曲線は題材に合わせて描き直されます。
理科や社会でも同じ発想が使えます。光合成なら「光の強さを変えると反応速度がどう変わるかを、スライダーで動かして確認できる図にして」、歴史なら「ある出来事が起きなかった場合の流れを、選択式のボタンで分岐させて」と頼む形です。どちらも、暗記対象を並べるのではなく、条件を変えると結果が変わる構造を図に持たせる依頼になっています。
複雑な図を狙うなら、モデルの選択も効きます。可視化タスクではOpusの出来が最もよく、込み入った図には上位のモデルが向きます。
図を残す方法は用途で選ぶ
カスタムビジュアルは既定では一時的で、会話が先へ進んでも単独では保存されません。完成した成果物というより「ホワイトボードのスケッチ」にあたります。準備のために使い切るなら、そのままで構いません。授業で使うなら、用途に応じて次の4つから選びます。
図を残す4つの方法
画像としてコピー
静止画のスナップショットを作ります。授業スライドやノートに貼る、メモ代わりに手早く貼り付けて見せる、といった用途なら、これで足ります。
ファイルでダウンロード
SVGまたはHTMLのファイルとして保存します。共有リンクは受け取る側のログインが必須ですが、ファイルで渡せばログインは要りません。
アーティファクトとして保存
図にカーソルを合わせると出る「Save as Artifact」で、残して公開し、繰り返し直せる形にします。生徒が各自のリンクで開く教材は、この形です。
スキルにする
「Create skill from visual」を選ぶと、予想させてから正解を見せるという操作の型をClaudeが覚えます。別の単元を持ち込んだときに、ドラッグして予想し確かめる同じ形式を、作り直さずに再現できます。
図の見た目を揃えたいときは、「すべての可視化をピンクにして」と一度頼めば、以後の図に引き継がれます。学年や単元をまたいで教材のトーンを揃えたいときに使えます。
アーティファクトは、最初から残せて共有もできる成果物です。カスタムビジュアルは、その場で考えるためのもので、残すと選んだときだけ残ります。ツールやアプリ、配布する文書のように最初から手元に残すものを作るなら、図ではなくアーティファクトを作るよう依頼する選択肢があります。
どの単元で使うと効果が出るか
すべての板書に向く使い方ではありません。効果が出やすいのは、時間や条件に応じて値が動く概念です。暗記や定義の確認が中心の単元は、動かす対象がなく、通常の説明で足ります。
| 単元の性質 | 向き不向き | 理由 |
|---|---|---|
| 需給曲線・力学の速度変化など、変数が連動して動く概念 | 向き不向き◎ | 理由スライダーで動きを再現でき、静的な板書の弱点を直接埋める |
| 手順・アルゴリズムの流れ | 向き不向き◯ | 理由フローチャートで流れは示せるが、動きの再現ほどの伸びしろは小さい |
| 年号・用語の暗記、定義の確認 | 向き不向き△ | 理由動かす対象が無く、通常のテキスト説明で足りる |
成績データや説明の2案比較にも使える
CSVを渡して「このデータは何を示していますか」と尋ねると、インタラクティブなグラフが返ります。「このデータをグラフにして」と頼む形でも構いません。小テストの結果を渡して、設問ごとの正答の傾向を図で眺める使い方も考えられます。
手順の説明なら「この手順がどう進むか見せて」でフローチャートが返ります。説明の組み立てで迷うときは、2つの案のどちらにするか決めたいと伝えます。両案を並べて比べる表示が返ってくるので、板書の順序を決める材料になります。
相談から仕上げまでの往復には時間がかかるため、毎年同じ場所で生徒がつまずく単元に絞ると、手間に見合いやすくなります。使い捨ての補習プリントまで毎回この手順を踏む必要はありません。
教室に持ち込む前の落とし穴
- 「予想→確認」の型が自分のクラスに合うとは限らない: Academyはこの型を「Claudeの推測」と位置づけ、本番の前に数人の生徒で試すよう勧めています。予想を飛ばしてクリックだけで進める生徒がいた、余剰の領域が伝わらなかった、といった様子をそのままClaudeに伝えると、次の版はその観察を踏まえて作り直されます
- 生徒に配る手段は端末で決まる: 教室の端末がiOS・Android中心なら共有リンクは使えないので、画像かファイルで配ります
- 授業準備の相談と、生徒向けの学習モードは別物: 生徒がClaudeと対話して学ぶ設計はClaude for Educationとはの領域で、ここで扱ったのは教員が教え方を練る側です。他校の取り組みはClaude教育導入事例にあります
まとめ
毎年同じ場所でつまずく、変数が連動して動く単元を1つ選び、つまずきの内容と一緒に見せるところから始められます。
会話内でのビジュアル生成そのものはClaudeのインタラクティブコンテンツ、恒久的に保管・共有する使い方はClaude Projects完全ガイドで扱っています。