AIに全部書いてもらいながら眺めているだけ——そんな「観客モード」では、いつまでたっても自分でコードは書けない。
この記事では、ClaudeのProjects機能とArtifacts機能を組み合わせ、演習主体でコーディングを教えてくれる個別AIチューターを2分以内に構築する方法を解説します。
この記事でわかること:
- ClaudeのProjects＋Artifactsが学習に適している理由
- 「観客モード」を防ぐ演習形式の仕組み
- セッション要約で習熟度を追跡する方法
- プロジェクト作成からプロンプト設定までの手順
- 対応言語と現時点での限界
ClaudeのProjectsとArtifactsが組み合わさると何が起きるか
LLMを使って学習するとき、最大の問題は「答えを見るだけで理解した気になってしまう」ことだ。特にコーディング学習では、AIがコードを書いてくれるのを眺めても、自分の手は動いていない。
Claudeには、この問題を構造的に解決する仕組みが2つある。
Artifactsは、生成したコードをチャット画面の横のパネルにリアルタイムで描画する機能だ。HTML・CSS・JavaScript・Reactで書いたコードであれば、ブラウザを開かなくても動作確認ができる。コードエディタ、ブラウザ、チャットウィンドウの3画面を行き来しなくていい。
Projectsは、関連するチャットをひとつのプロジェクトにまとめる機能だ。単なる整理ツールではなく、プロジェクト内のチャット履歴からClaudeが自動的にコンテキストを構築する。「前回どこまで進んだか」「どの概念でつまずいたか」を次のセッション開始時に参照するため、都度説明し直す必要がない。
この2つを組み合わせると、進捗を記憶したまま演習を継続できる学習環境ができあがる。
演習モードが「観客モード」を防ぐ理由
後述するプロンプトには、AIが答えを丸ごと書いてしまわないよう明示的な制約が入っている。仕組みはこうだ。
- Claudeが概念を説明し、小さなサンプルコードをArtifactで描画する
- 「このコードを修正して○○を実現せよ」という課題を出す
- 学習者がArtifactからコードをコピーし、VS Codeなどのエディタで自分で変更する
- 変更後のコードをチャットに貼り付けて提出する
- Claudeがロジックと構文を評価し、正誤と理由を返す
- 正解するまで次の概念に進まない
プロンプトにはClaudeが「意図的に頑固に振る舞う」よう指示が含まれている。「答えを教えて」「スキップしたい」と言っても、「どこで詰まっていますか」と切り返してヒントを段階的に提供する仕様だ。詰まっているときは1行だけヒントを提示することも許可されているが、最終的に「コードを完成させるのは自分」という原則は崩れない。
セットアップ手順
所要時間は2分程度だ。
ステップ1: Projectを作成する
Claude.aiを開き、左サイドバーの「New Project」をクリックする。プロジェクト名は「Learning Web Design」や「コーディング学習」など、学習内容がわかる名前をつけておくと後から振り返りやすい。
ステップ2: プロジェクト指示にプロンプトを貼り付ける
プロジェクト設定の「Project instructions」に、以下のプロンプトをそのまま貼り付ける。このプロンプトがClaude全体の振る舞いを定義する。
Explain the why, not just the what. When introducing display: flex or useState or a pandas DataFrame, explain what problem it solves and what the alternative was. Concepts stick when students understand the motivation.
Tutorial mode — the core practice loop:
Never just write the full solution for the student. The biggest risk with AI coding help is spectator mode — watching code appear and retaining nothing. Prevent it by running every concept through this loop:
1. Introduce the concept and show a small example (Artifact for web, Analysis tool for Python).
2. Give the student a specific challenge: modify the code to achieve a concrete result.
3. Tell them to copy the code into VS Code, make the change locally, then paste their version back into chat.
4. When they paste it back, review their logic and syntax. Tell them specifically what's right, what's wrong, and why.
5. Do not move to the next concept until they've submitted a working solution.
If they are stuck, answer clarifying questions, offer progressively bigger hints, even show one line — but never write the full answer and move on. They have to be the one who finishes the code.
Ending a session: When the student says "wrap up" or "done for today," generate a session summary Artifact covering: concepts covered, what clicked, sticking points, still needs work, and suggested next session. Remind them to save it to the Project knowledge base using the Add Content button.
Tone: Encouraging but honest. Celebrate real understanding. Flag confusion instead of papering over it.
ステップ3: 最初のチャットを始める
プロジェクト内で新しいチャットを開き、「HTMLとCSSを基礎から学びたい」など、学びたい内容をそのまま伝える。何から始めるかわからなければ「どこから始めたらいいですか」と聞けば、現在のスキルレベルに合った出発点を提案してくれる。
セッション要約で習熟度を記録する
学習の継続性を保つ鍵は、セッション終了時の振る舞いにある。チャットを閉じる前に「終わります」「今日はここまで」と伝えると、Claudeが以下の構造でセッション要約のArtifactを生成する。
- 今日扱った概念の一覧
- 理解が定着したこと
- 詰まった箇所
- 次回以降に再確認すべきこと
- 次回セッションの推奨内容
このArtifactをProjectの「Add Content」ボタンからナレッジベースに保存しておくと、次のセッション開始時にClaudeが自動的に参照する。「前回どこまで学んだか」を毎回説明し直す手間がなくなる。
対応言語と現時点での限界
このシステムがもっともスムーズに機能するのは、Artifactsで実行・描画できる言語だ。現在はHTML・CSS・JavaScript・Reactが対象で、PythonもAnalysisツール経由でデータ可視化に使える。
Ruby・PHP・Go・Java・C++のようにサーバーやデータベースを必要とするバックエンド言語、またはモバイル開発環境が必要な言語は、Artifactsで直接実行できない。これらを学ぶ場合はローカルのIDEでコードを実行する必要があり、フィードバックループが遅くなる。ただし、演習形式の進め方と習熟度の追跡はどの言語でも機能する。コードを手で書いてClaudeに貼り付けるサイクル自体は変わらない。
ClaudeのArtifacts機能を最大限に使うために
Artifactsはコードの実行環境としてだけでなく、学習記録としても機能する点が見落とされやすい。セッション要約もArtifactとして生成されるため、Projectに蓄積するだけで学習の変遷が一本のタイムラインになる。
「何を学んだか」より「どこでつまずいたか」を追跡できることが、このシステムの核心だ。観客席に座ったままのAI利用を脱するひとつの実践として、試してみる価値はある。