Claudeが概念の仕組みを可視化しながら説明する
動きを伴う概念をClaudeに質問すると、会話の途中にスライダー付きの図が生成されます。狙って引き出す言葉選びと使い方をまとめます。
「なぜ惑星は太陽に近づくと速くなるのか」のように、動きを伴う概念をテキストだけで理解しようとすると、言葉が像を結ばないまま止まることがあります。Claudeにこの種の質問をすると、説明の途中にスライダーで動かせる図が生成され、動きそのものを見ながら理解を進められます。教員がそばにいない自習の場面で、質問した本人のためだけに図が組み上がる点が、板書や教科書の図とは違います。狙って引き出すための言葉選びと、生成後の使い方をまとめます。
Claudeが概念を可視化しながら説明するとは何か
Claudeが概念を可視化しながら説明するとは、文章では像を結びにくい概念を尋ねたときに、説明の文章とインタラクティブな図が同じ応答の中に生成される機能です。会話の中に組み込まれた「カスタムビジュアル」というベータ機能の応用で、図を単体で作らせるのではなく、疑問への回答の一部として図が現れます。全画面に広げたり、ボタンを押したりして触れます。
対象になるのは、動く部品を持ち、文章では見せにくい概念です。公転する惑星の速度と距離のトレードオフ、化学反応の平衡、需給の均衡といった「一方を動かすと他方も動く」構造を持つ概念で役立ちます。動かす部品がない質問では、Claudeが図を作らず、文章だけで答えることがあります。
利用できるのはWeb版・デスクトップ版のClaudeで、全ユーザーが対象です。Claude for iOS・Claude for Androidでは図が表示されません。図は、Claudeが質問ごとにHTMLで組み立てたものです。写真やイラストではなく、Webページと同じ部品でできているので、スライダーやボタンが付きます。
Team・Enterpriseプランでは、組織の設定で変わる部分があります。地図(Google Maps)と画像検索(Bing)を使った表示は、Teamでは既定で有効、Enterpriseでは既定で無効です。OwnerかPrimary Ownerが「Organization settings > Capabilities」で有効にします。スライダーなどの対話入力は外部サービスを使いません。
図を手元に残すには
図は既定では会話の中に一時的に表示されるだけで、会話が先へ進むと単独では保存されません。ホワイトボードのスケッチのような位置づけです。図にカーソルを合わせると出てくる操作から、残し方を選びます。
図を残す3つの方法
画像としてコピー
静止画のスナップショットです。ノートやスライドにそのまま貼れます。
ダウンロード
.svgか.htmlのファイルとして保存します。Artifact化
後から開き直して、スライダーを動かせる形で残せます。
Artifactとして残した後の扱い方はClaude Projects完全ガイドにまとめています。
手順1: 「知っていること」と「知りたいこと」を分けて伝える
自分がどこまで理解しているかを先に書くと、Claudeはその手前を説明せずに済み、まだ分かっていない部分に図の重心を置けます。惑星の例では、「近づくと速くなることは知っているが、なぜその釣り合いが成立するのかが分からない」と質問しています。
〇〇(概念名)について、△△までは理解していますが、□□がなぜそうなるのかが分かりません。よく練られたインタラクティブで動かせる可視化を使って説明してください。
すでに知っている部分を書かないと、Claudeは基礎の説明に紙面を使ってしまい、肝心の「なぜ」に図が回らないことがあります。一行足すだけで、図に描かれる範囲が変わります。ファイルのアップロードは要らず、依頼文だけで始められます。所要時間の目安は15分で、Claude.aiで試す使い方として紹介されています。
手順2: 言葉選びでインタラクティブか静止画かが決まる
同じ質問でも、言葉の選び方で返ってくるものが変わります。上のプロンプト例が「よく練られたインタラクティブで動かせる可視化」とやや具体的に書いているのはこのためです。図そのものを頼む定番の言い方として、「これを図にして」「時間による変化を見せて」「このデータをグラフにして」が例に挙がっています。
頼み方で変わる図の形
動きを求める言い方
「インタラクティブ」「自分で調整したい」「動かして遊べる形で」といった語を入れます。変数を動かせる図になりやすい言い方です。
平易な描写だけ
「図で説明して」のように動かす前提を書かない頼み方です。静止画が1枚返ってくることがあります。
生成される図は1枚とは限りません。惑星の例では、同じスライダーに連動する3つのパネルが1つの応答の中に並び、スライダーを動かすとすべてが同時に動きます。エネルギーの棒グラフが合計を固定していて、速度と距離が引き換えに動くところを目で追えます。「なぜ一定の速さで進めないのか」という問いに、文章より早く答えが出ます。
文章だけの説明が同じ質問にどう答えるかと比べると違いがはっきりします。文章だけの説明は、たとえば「エネルギー保存則により、近日点では位置エネルギーが運動エネルギーに変わり速度が増す」と一文で済ませやすい内容です。この一文から動きを頭の中で再生できる読者ばかりではありません。スライダーで動く形なら、その再生作業をClaude側が代わりに担います。
手順3: ボタンで深掘りし、別の条件で描き直させる
図の下にボタンが並ぶことがあります。「角運動量の保存についてもっと詳しく」のようなボタンを押すと、最初の図はそのまま残り、その問いに絞った2つ目の図が下に追加されます。ボタンは追質問を自動で送る仕組みです。両方を見比べながら会話を続けられるので、話題を切り替えるたびに最初からやり直す必要はありません。
図の調整も、文章を直してもらうときと同じ頼み方でできます。同じ仕組みを別の条件で見たいときは、「同じ速度と距離のトレードオフを、離心率の高い彗星の軌道に描き直して、何が変わるか見せて」のように頼みます。パネルの構成は保ったまま、入力する条件だけが変わるので、何が固定で何が変化したのかを比較しやすくなります。
物理以外でも、同じ組み立てのプロンプトが書けます。化学の平衡なら「温度を上げると平衡がどちらに動くか、濃度をスライダーで動かして確かめられる図にして」と頼みます。経済の需給なら「価格を動かすと売買される数量がどう変わるか、自分で動かして見たい」です。どんな図になるかはClaudeが質問に合わせて組み立てます。共通するのは、「一方を動かすと他方が反応する」構造を依頼文に書く点です。
手順4: 説明をクイズに変換して理解度を確認する
図を眺めるだけで終わらせず、「このアニメーションが示していることをクイズにして。軌道上の異なる地点で何が起こるか聞いて、合っているか教えて」と頼むと、同じ3つのパネルを使った小テストに変わります。軌道上の異なる地点で何が起こるかをClaudeが尋ね、答えると、合っていた点を返してくれます。説明を読んだだけの理解と、問われて答えられる理解は別物です。覚えたつもりを確かめる最後の一手になります。
このクイズ変換は、説明用に作った図をそのまま使い回す点がポイントです。別の練習問題を新しく用意させるより、理解したい対象そのものを使うので、自分がどこで詰まっているかが同じ画面上で分かります。
学んだ内容を自分の言葉で残したいときは、図が腑に落ちた後に「何が分かったかをノート用に書き出して」と頼む手もあります。出てきた文章を自分で直してノートに入れます。
Coworkで使うと何が変わるか
カスタムビジュアルはCoworkのセッションでも使えますが、チャットとは2点違います。手順3のボタンでの深掘りが特に影響を受けます。
チャットとCoworkの違い
チャット
図の中のクリックが追質問としてClaudeに送られます。チャットを共有すると、受け手はWeb版かデスクトップ版で、ログインしていれば図を見られます。
Cowork
クリックで追質問を送る近道はまだありません。深掘りしたいときは文章で頼みます。共有リンクを作っても、他の人には図が描画されません。
授業や勉強会で図を見せたいときは、チャットで作って画面共有する、.htmlとして保存して渡す、といった選択肢があります。
どんな概念で効果が出やすいか
| 概念の性質 | 向き不向き | 理由 |
|---|---|---|
| 速度・平衡・均衡など、変数が連動して動く仕組み | 向き不向き◎ | 理由スライダーで動きを再現でき、文章だけでは像を結びにくい部分を直接埋める |
| プロセスの手順 | 向き不向き◯ | 理由「このプロセスがどう動くか見せて」と頼むと、フローチャートが生成される例が示されている |
概念の説明以外では、CSVをアップロードして「データから何が分かるか」と聞くと、対話型のグラフが返る使い方も例示されています。2つの選択肢を並べて比べたいときは、左右に並べた比較図も作れます。
図の数値はどこまで信用できるか
カスタムビジュアルは、質問ごとにClaudeがその場でHTMLを組み立てる仕組みで、品質や複雑さにはばらつきがあります。定期試験の答案に使う数値や、レポートに引用する数値は、教科書や解答と突き合わせる前提で使います。
図は仕組みの構造をつかむために使い、数値は解答と照らして確かめます。図を見て納得した内容を、そのまま数値として引用しない使い分けです。
Claudeのインタラクティブコンテンツ全体との違い
Claudeが会話中に生成する図の仕組み自体はClaudeのインタラクティブコンテンツで扱った「カスタムビジュアル」と同じベータ機能です。あの記事は天気カードやレシピカードも含めた視覚コンテンツ全体の仕組みと制限をまとめたもので、この記事はそのうち「概念の説明にどう使うか」という一場面に絞っています。
教員が授業準備の場面で同じ機能を使う手順はClaudeでホワイトボードの授業準備をリアルタイムに可視化するにあります。教育機関向けプランの詳細はClaude for Educationとはを参照してください。
よくあるつまずき
- 図が出ない: Claudeが図の要否を自分で判断するため、テキストだけの回答が返ることがあります。「これがどう動くか、図で見せて」と言い直すと出ることがあります
- 図が窮屈で見づらい: レイアウトが崩れて見える場合、「フォーマットを整理して」と頼み直すと、次のやり取りで直ることが多いとされています
- 複雑な図の出来が安定しない: 図の生成にはOpusが最も向くとされています。凝った図が必要なら、賢いモデルを選んで頼みます
- 毎回同じ見た目にしたい: 「これからの図はすべてピンクにして」のように頼むと、Claudeが覚えて以後の図に反映します
まとめ
変数が連動して動く仕組みを尋ねるときは、「知っていること」と「動かしたいこと」を依頼文に書き、「インタラクティブ」「自分で調整したい」と形式を指定すると、動かせる図になりやすくなります。図の行き先が決まっているなら、生成の前に残し方と、使う場所がチャットかCoworkかを決めておくと迷いません。