プロンプトは「設計仕様書」:Claudeで学習用インタラクティブ図解ツールを作る
人体の解剖図、分子構造、歴史年表——学びたい対象に直接触れられるツールがあれば、理解は一気に進みます。Claude公式のユースケース紹介に、そうしたインタラクティブな学習ツールをClaudeに作らせる方法が載っていました。この記事の白眉は、プロンプトの精度が成果物の完成度をそのまま決めることを、実例で見せている点です。
考え方:プロンプトを「デザインブリーフ」として書く
Claudeは、解剖学でも化学の図解でも歴史年表でも、対象に直接関われるツールを構築できます。ポイントは、欲しい体験を4つの角度から記述すること——何を学びたいのか、どう操作したいのか、データはどこから来るのか、そして美的な基準はどうか。つまり、思いつきの依頼ではなく設計仕様書(デザインブリーフ)として書くわけです。
実際のプロンプト例:解剖学エクスプローラー
紹介例のプロンプトは、かなり踏み込んだ内容です。要点を整理するとこうなります。
npmの解剖図ライブラリ(anatomogram)を使ったインタラクティブ解剖学エクスプローラーを作って。指定のSVGを使い、図は自分で生成しないこと——これらのSVGにはUBERONオントロジーIDが埋め込まれた正確なイラストが入っている。SVGはHTMLに直接埋め込み、fetchは不要。
重要:これらのSVGはデフォルトで全要素が fill:none;stroke:none になっていて不可視。読み込み後、他のスタイリングの前にデフォルトの塗りと線を適用すること。最適化時は cleanupIds: false(UBERON IDが要素指定の手段だから)、JavaScriptで visibility:hidden 属性を削除すること。
デザイン要件:抑制的で洗練された表現。グロー、絵文字、ネオンは禁止。寒色より暖色。見出しはセリフ、本文はサンセリフ、データは等幅。汎用的なAI出力ではなく、プレミアムな医学リファレンスのイメージで。
タブ切り替えの情報パネル、物理的な感触のサウンドフィードバック、実際に学べるだけの充実した内容を。最初からフラッグシップ品質で作って——例外的な出来になるまで私が反復する。
技術的な注意点、デザインの禁止事項、フォントの使い分け、品質への期待値まで書き込まれています。この精度が、そのまま結果に返ってきます。
セットアップ
必須は、設定でファイル作成を有効化しておくこと(Claudeがアーティファクトを作成するため)。任意で、複数コンポーネントを持つ複雑なアプリの場合は拡張思考(Extended Thinking)をオンにすると、Claudeが構築前にアーキテクチャを設計できます。使用モデルはOpus 4.5です。
返ってくるアウトプット
指定した視覚デザイン、インタラクションパターン、教育コンテンツを備えた完全に動作するReactアプリが、アーティファクトビューアですぐ使える状態で返ってきます。紹介例の中身は5つ。
デュアルビュー:全身図と脳の図を切り替え。全身図は系統ごとに色分け(骨格・筋・神経・循環・呼吸・消化)
インタラクティブ要素:構造にホバーすると名称・UBERON ID・主要機能を表示。クリックで臨床的意義、関連構造、豆知識まで。約40の構造に学習レベルの内容を投入
系統フィルタ:タブで特定の系統だけを分離。「骨格」を選ぶと非骨格の構造がフェードし、骨が強調されて操作可能に
サウンドデザイン:ホバーと選択に控えめな音のフィードバック。デジタルではなく物理的な感触の柔らかいクリック音。デフォルトはミュート
デザインの細部:暖かいベージュの背景、テラコッタとスレートのアクセント、きつい色は不使用。見出しにPlayfair Display、本文にInter、データにIBM Plex Mono。余白は潤沢に
フォローアップの3つの発展
① 自己テスト機能を足す:「クイズモードを追加して。説明や機能が提示されるので、正しい構造を答える形式。正答率を記録して、苦手な系統を表示して」——受動的な閲覧から能動的学習へ。
② 詳細度を上げる:「体の系統をもっと追加して。脳のビューももっと詳細に」。
③ 同じセッションから副教材を生成:「このエクスプローラーの解剖データから、同じ構造を系統別に整理した印刷用PDF学習ガイドと、インポートできるAnki対応のフラッシュカードを作って。用語と臨床的関連はアプリの内容と揃えて」——アプリと学習教材が同じ情報源(source of truth)を共有するので、内容の食い違いが起きません。
うまく使うための4つのコツ
エラーはそのまま貼る。何かが壊れたら、エラーメッセージを共有するか症状を説明すればOK。Claudeがロジックを追って原因を特定してくれるので、自分でデバッグする必要はありません。
長いセッションは「劣化」ではなく「蓄積」する。Opus 4.5は、長い会話をまたいでデザイン上の決定と技術的コンテキストを保持します。10回目の反復でも、最初の美的要件・技術的制約・その間のすべての改善を覚えている。だから、最初に全部を指定しようとせず、腰を据えた構築セッションを前提に計画できます。
既知の落とし穴を先に書く。過去のセッションや自分のデバッグでハマった癖があるなら、プロンプトに書いておきましょう。例のプロンプトが「SVGはデフォルトで不可視」「最適化でUBERON IDが消える」と明記しているのがまさにそれ。この注記がないと、Claudeは動くコードを書いたのに真っ白な画面が出て、原因究明に何度も反復を費やすことになります。
情報源はまるごと渡す。Opus 4.5のコンテキストウィンドウは相当な分量を扱えます。教科書の章、講義ノート、シラバスをアプリに反映させたいなら、要約せず全文を貼りましょう。あなたが縮めた版より、完全な原典のほうがClaudeは構造を抽出し優先順位をつけやすいからです。
まとめ
このユースケースが教えてくれるのは、AIに複雑なものを作らせるときの作法です。技術的な制約・デザインの禁止事項・品質への期待値を最初に書き切ること。そして、既知のハマりどころを共有し、原典を要約せず渡すこと。解剖学は一例にすぎず、この型は製品の仕組みを説明するインタラクティブ資料、社内研修用の理解度チェック付き教材、複雑なシステム構成の可視化ツールなど、あらゆる「触って学べるもの」に応用できます。理解したいと思っていたテーマを1つ選んで、デザインブリーフを書いてみてください。
INNOOV株式会社について
この記事は、AtlassianやIntercomなどのSaaS導入支援と、AIを活用した業務プロセス改善を行うINNOOV株式会社がお届けしました。「自社でもこんな仕組みを作ってみたい」「ツール導入を相談したい」という方は、お気軽にお問い合わせください。