Claude Artifacts + React：教師が20分で角度学習用ミニゴルフゲームを構築

ある教師（u/cram213）がClaudeを使って角度を教えるミニチュアゴルフゲームを素早く構築し、学校の制限を回避するためにArtifactから生のHTMLにエクスポートしました。電話での音声プロンプトから公開Webゲームまで、全体の作業時間は約20分でした。

作業の流れ

• 初期構築: ClaudeのArtifact機能とReactを使用して、教師は角度を視覚的に示すプレイ可能なミニゴルフゲームを作成しました。学校ではGeminiを使用しているため、公開されたArtifactsのURLはアクセスできませんでした。
• エクスポートの回避策: 教師はClaudeにArtifactをスタンドアロンHTMLファイルに変換するよう依頼し、個人のウェブサイト（constraintlayer.ai/educational-engines/golf.html）にホストしました。
• 反復: プロセスでは、電話に向かってプロンプトを話し、Artifactプレビューでゲームをテストした後にClaudeにフィードバックを与えました。
• 生徒への拡張: プレイ後、生徒たちは紙に自分だけのコースデザインを描きました。教師が各絵をClaudeにアップロードすると、約1分でクラス全員がカスタムコースをプレイできるようになりました。

主な技術的教訓

教師はシステムエンジニアのように考えることの重要性を強調しています。つまり、問題を記述し、エッジケース（「生徒がやりそうな愚かなこと」）を計画し、展開の制約に適した出力形式を選択することです。Reactを使ったArtifactはプロトタイピングには最適ですが、プレーンなHTML（外部依存なし）にエクスポートすることで、どんな学校のネットワークでも動作し、GeminiもClaude ArtifactのURLも必要ありません。