Claude でファイルを作る
あなたが説明し、Claude が作る
⏱ 想定 ~7 分
01 · 読む
ここまで Claude Code でコードを理解してきました。次はそれを使ってゼロから作っていきます。
ここから面白くなります。HTML、CSS、JavaScript の各行を自分で書く代わりに、欲しいものを自然な言葉で説明します。Claude がコードを書き、ファイルを作り、あなたが結果をレビューします。
あなたの役割はタイピストからディレクターへ変わります。何を作るかを決め、明確に説明し、Claude を正しい方向に導く。Claude のアウトプットの質は、あなたの説明の明確さに直結します。
💡 想像してみてくださいとても有能だけど言葉どおりに動く建築家と一緒に働くようなものです。「家を建てて」と言えば、家はもらえます —— でも思っていたものではないかも。「2 階建てで、回廊風のベランダがあって、外壁が青で、キッチンに大きな窓のある家を建てて」と言えば、想像に近いものが手に入ります。
02 · プロンプトテンプレート
Web ページを作ってみましょう。Claude にナビゲーションバー付きの HTML ページを作るよう依頼してください。ナビバーに何があるべきかを明確に伝えましょう。
Home、About、Contact の 3 つのリンクを持つナビバーがある HTML ページを作ってください。スタイルはクリーンでモダンに。
03 · 実機演習
Claude が作ったファイルをブラウザで開いて結果を見ましょう。ターミナルから開けます。
open index.html
04 · プロンプトテンプレート
次に Claude に、作ったものに何かを追加させます。これは Claude がコンテキストを理解する力を見せます —— どのファイルが存在するか分かっていて、賢くそれを変更します。
このページにダークモードの配色を追加してください。別の CSS ファイルを作り、HTML からリンクしてください。
05 · 読む
今起きたことを見ましょう。あなたは自然な言葉で欲しいものを説明した —— 2 回とも。Claude は 2 回ともコードを書いた。あなたの仕事はレビューし、ブラウザでテストし、イテレーションすることです。
これが AI を使った現代の開発フローです。
1. 欲しいものを説明する 2. Claude が作ったものをレビューする 3. テストする（ブラウザで開く、実行する、など） 4. 変更を依頼してイテレーションする
あなたは乗客ではなく、意思決定者です。Claude は速いですが、結果が正しいか、十分かを判断するのはあなたです。
ポイントまとめ
- Claude はプロジェクトディレクトリに実際のファイルを作る
- Claude のアウトプットは必ずレビューしテストする
- Claude はコンテキストを覚えている —— どのファイルが存在するか把握している
- 変更依頼でイテレーションする。最初からやり直さない
06 · 空欄補充
Claude がファイルを作り終えたら、コミット前に必ず _____ しましょう。
07 · クイズ
Claude Code でファイルを作るときの推奨フローは？
- Web からコピー → 貼り付け → 実行
- 説明 → レビュー → テスト → イテレーション
- 自分でコードを書いて、エラーを Claude に直してもらう
- Claude にすべて作らせてレビューしない
⚠ 全機能のインタラクティブ体験には JavaScript が必要です。JavaScript を有効にして再読み込みしてください。
※ このサイトは独立した教育プロジェクトで、Anthropic の公式製品ではありません。Claude™ は Anthropic, PBC の商標です。