インタラクティブなダイアグラムツールを構築
身体システムから分子構造まで、指定された深さやデザインに基づき、詳細なプロンプトを実用的な参照アプリへと変換します。
- 作成者Anthropic
- カテゴリ個人向け
- モデルOpus 4.5
- 機能
- 共有リンクをコピー
1
タスクを説明する
Claude は、解剖学、化学の図解、歴史的なタイムラインなどの資料を、直接操作・理解できるインタラクティブなツールとして構築できます。 プロンプトの精度が結果の洗練度を左右します。
学習したい内容、どのように操作・体験したいか、データの出所、美的な基準など、求める体験を記述します。 プロンプトは、デザインブリーフとして捉えることができます。
npm から @ebi-gene-expression-group/anatomogram を使用して、インタラクティブな解剖学エクスプローラを構築します。 homo_sapiens.male.svg と homo_sapiens.brain.svg を使用します。 自分でダイアグラムを生成しないでください。これらの SVG には、UBERON オントロジー ID がすでに埋め込まれている正確なイラストが含まれています。 SVG を HTML に直接埋め込みます。フェッチリクエストは不要です。
重要：SVG は、デフォルトで全要素に fill:none; stroke:none が適用されているため、表示されません。 読み込み後、他のスタイリングを実行する前にデフォルトの塗りつぶしとストロークを適用します。 また、最適化時には cleanupIds: false を設定します（UBERON ID は要素の指定に使用されます）。あわせて、JavaScript で visibility:hidden 属性を削除します。
設計要件：抑制的で洗練されたデザイン。 発光効果、絵文字、ネオンは使用しません。 寒色よりも暖色を優先します。 見出しにはセリフ体、本文にはサンセリフ体、データにはモノスペース体を使用します。 汎用的な AI 出力ではなく、プレミアムな医療リファレンスを想定します。
タブ付きの情報パネル、操作に応じた物理的な感触を伴うサウンドフィードバック、そして実際に学習できる十分な情報量のコンテンツを追加します。 最初からフラッグシップ品質を前提に構築し、卓越した完成度に到達するまで改善を重ねます。
2
Claudeにコンテキストを与える
インタラクティブな学習ツールを作成する際は、学習したい内容とその操作方法の両方を明確にしたうえで、必要な機能や権限が有効になっていることを確認します。
必要なコンテキスト
Claude がアーティファクトを作成できるよう、設定でファイル作成が有効になっていることを確認します。
No items found.
任意のコンテキスト
複雑な多要素アプリケーションの場合は、拡張思考を有効にすることで、Claude は構築の前にアーキテクチャを計画できます。
拡張思考
3
Claudeの生成内容
Claude は、指定されたビジュアルデザイン、インタラクションパターン、教育コンテンツを備えた完全に機能する React アプリケーションを構築し、アーティファクトビューアですぐに利用できる状態で提供します。
Claudeの回答
完了！ 医療グレードの SVG、適切な UBERON ターゲティング、そしてご要望に沿った抑制的で洗練されたデザインシステムを用いて、解剖学エクスプローラを構築しました。
含まれる内容：
1. デュアルビューエクスプローラ
全身ビューと脳ビューを切り替えます。 全身ビューでは、骨格・筋肉・神経・循環器・呼吸器・消化器といった各システムを、解剖学的に正しい位置関係を保ちながら色分けして表示します。
2. インタラクティブ要素
構造物にカーソルを合わせると、その名前、UBERON ID、主要機能がわかります。 クリックすると、臨床的な関連性、関連構造、要点など、より詳細な情報が表示されます。 約 40 の構造について、学習用途に適したコンテンツを収録しています。
3. システムフィルタ
タブを使用して、各身体システムを個別に表示できます。 「骨格」を選択すると、骨格以外の構造はフェードアウトし、関連する骨が強調表示され、操作可能になります。
4. サウンドデザイン
ホバーや選択時に、控えめなオーディオフィードバックを提供します。 デジタル的ではなく、物理的な感触を想起させる柔らかなクリック音やトーンを採用しています。 デフォルトではミュートされており、画面の隅にあるトグルで切り替え可能です。
5. 設計の詳細
暖かみのあるベージュの背景に、テラコッタとスレートのアクセントを配し、刺激の強い色は使用しません。 見出しには Playfair Display、本文には Inter、データには IBM Plex Mono を使用します。 十分なホワイトスペースを確保し、視覚的な雑然さを排除します。
4
フォローアッププロンプト
Claudeとの会話を続けて、内容を洗練させたり、広げたり、さらに掘り下げたりしましょう。
セルフテスト機能を追加
記憶の定着を促すアクティブラーニングモードなど、さらなる機能を段階的に追加します。
説明や機能が提示され、それに基づいて正しい構造を特定するクイズモードを追加します。 正答率を追跡し、理解が不十分なシステムを可視化します。
高度な機能を追加
より詳細な解剖学的情報が必要な箇所については、Claude に質問して内容を拡充できます。
図に身体システムをさらに追加します。 また、脳ビューをさらに詳細化します。
同じセッションから関連資料を生成
さまざまなメディアを通じて学習を継続できます。 アプリと学習資料は、単一の情報源を共有できます。
このエクスプローラ内の解剖データを基に、構造をシステム別に整理した印刷可能な PDF 学習ガイドと、Anki 互換のフラッシュカードセットを生成します。 用語や臨床的な関連性については、アプリ内の内容と一貫性を保ちます。
5
コツ・ヒント・トラブルシューティング
エラーをチャットに直接貼り付け
何か問題が発生した場合は、エラーメッセージを共有するか、状況を説明します。 Claude はロジックを追跡してトラブルシューティングを行い、問題を特定できるため、自分でデバッグする必要はありません。
長時間のセッションでも、内容はドリフトせず積み重なる
Opus 4.5 は、長時間にわたる会話を通じて、設計上の判断や技術的なコンテキストを維持します。 10 回目のイテレーションにおいても、当初の美的要件や技術的制約、その間に行われたすべての改良が保持されます。 すべてを最初から指定しようとするのではなく、継続的な構築セッションを前提に計画できます。
既知のトラブルシューティングをあらかじめ含める
以前の Claude セッションや自身のデバッグで既知の癖や問題点に遭遇したことがある場合は、それらをプロンプトに明記します。 この例では、anatomogram の SVG がデフォルトで非表示になること、および最適化時に UBERON ID が削除されることを明記しています。 これらの注記がない場合、Claude は動作するものの空白画面しか表示しないコードを書いてしまい、その後のイテレーションを原因特定に費やすことになります。
ソースを追加して、独自のものにしよう
Opus 4.5 のコンテキストウィンドウは、大量の資料を扱うことができます。 教科書の章や講義ノート、シラバスなどをアプリに反映させたい場合は、要約せずに全文を貼り付けます。 Claude は、要約版よりも完全なソースからの方が、構造を正確に把握し、コンテンツを効果的に整理できます。
さあ、体験してみませんか？
以前から理解したいと思っていたテーマを選択します。 ツールは Claude が構築し、学習は自身が行います。
