AIへの「最初の指示」はこう書く｜Cursor×Claude Codeでファイル自動生成を体験する実践ガイド【コピペOK】「Day6」
🏠 ホーム›Day 6 — Cursor × Claude Code 最初の仕事をやってみよう
Cursor × Claude Code 最初の仕事をやってみよう
Cursor の作業部屋でAI職人と初めての仕事。日本語で頼むだけでファイルが生まれる魔法を体験。
⏱ 目安：約60〜90分
📌 Day5 でClaude Code が動くようになりました。今日は AI職人に初めて仕事を依頼して、Webページを作ります。
🎯 今日のゴール
🎯 今日終わったら：AIと一緒に作ったWebページがブラウザで表示されている状態
- ✅ プロジェクトフォルダを作ってCursorで開ける
- ✅ Claude Codeを起動してフォルダを認識させられる
- ✅ 日本語でファイル作成を依頼できる
- ✅ 「指示→生成→確認」のサイクルを体験できる
📁プロジェクトフォルダを作ってCursorで開く
工房に仕事スペースを確保します
Claude Codeを使う前に、まず作業する場所（プロジェクトフォルダ）を作ります。工房に仕事スペースを確保するイメージです。
1
デスクトップに新しいフォルダを作成
Macなら Finder、Windowsなら エクスプローラーでデスクトップを右クリック→新規フォルダ。名前は my-first-project（英語推奨）
2
Cursor でそのフォルダを開く
Cursor メニューバー → File → Open Folder → 作ったフォルダを選択
3
フォルダがサイドバーに表示されることを確認
Cursor左側のファイルツリーに MY-FIRST-PROJECT が表示されればOK
💡 フォルダ名は英語・小文字・ハイフン推奨日本語フォルダ名はエラーの原因になることがあります。my-project や sample-app のように英語・小文字・ハイフンで作ることをおすすめします。
🤖Claude Code を起動する
ターミナルで claude と打つだけ。AI職人が目覚めます
フォルダを開いた状態でターミナルを開き、Claude Codeを起動します。ここが魔法の始まりです！
これだけ！現在のフォルダをClaude Codeが認識して、AI職人が「何か頼みますか？」と待機します。
✅ 起動成功サイン> プロンプトが表示されてクロくんのバナーが出ればOK。Claude Codeがあなたのプロジェクトフォルダの中を見渡した状態です。
📂 フォルダの場所が大事！ターミナルで claude を実行するとき、プロジェクトフォルダの中にいることが重要です。pwd で確認して、プロジェクトフォルダ内でなければ cd で移動してから起動しましょう。
🆘 「claude」と打ってもエラーになる場合（クリックで開く）
❓ 「command not found: claude」と表示される（Mac）
npmでインストールしたコマンドをターミナルが認識できていない状態です。以下を順番に試してください。
① まずCursorを完全に閉じて再起動（これだけで解決することが多い）
② それでも出る場合：以下を実行してインストールをやり直す
npm install -g @anthropic-ai/claude-codeコピー
③ まだ出る場合：以下を実行してパスを通す
export PATH=”$PATH:$(npm root -g)/.bin”コピー
実行後に
claude --version で確認
❓ 「’claude’ は認識されていません」と表示される（Windows）
WindowsではnpmのグローバルコマンドがPATHに登録されていないことがあります。
① PCを再起動する（Node.js インストール後の再起動でPATHが更新されます）
② Git Bash で実行する（PowerShellやコマンドプロンプトではなく、Day4でインストールしたGit Bashを使う）
Cursorのターミナルで「+」の右の「▽」→「Git Bash」を選択
③ インストールし直すnpm install -g @anthropic-ai/claude-codeコピー
❓ 起動したけどすぐ止まる・ログインを求められる
Day5でログインした認証が切れている場合があります。claude を実行するとログイン画面が出るので、Day5の手順と同じように「1. Claude account with subscription」を選んで再認証してください。
❓ 「rate limited」「usage limit reached」と出る
Proプランの1日の使用上限に達しました。数時間待てばリセットされます。上限を増やしたい場合は Maxプランへのアップグレードを検討してください。
💡 それでも解決しない場合：Claude Codeに「command not found: claude というエラーが出てclaude コマンドが使えません。解決方法を教えてください」とCursor のAI Chat（Ctrl+L）で聞いてみてください。環境に合わせた解決策を教えてくれます。
✨初めての指示！ファイルを作ってもらおう
日本語で頼むだけでコードが生まれる魔法を体験
では実際に日本語で頼んでみましょう！Claude Codeは完全な日本語で指示を出せます。
💬 試してみよう！（コピーして貼り付けてもOK）
「index.html というファイルを作って、「Hello, World! こんにちは世界」と表示するシンプルなWebページを作ってください」
🔍 何が起こる？Claude Codeがコードを書いて index.html を作成します。Cursorのファイルツリーにファイルが現れるのが確認できます。これが「AI職人が仕事をした」瞬間です！
2
Claude Codeがコードを生成するのを眺める（数秒〜30秒）
3
Cursorのファイルツリーに index.html が現れる！
4
ファイルをクリックして内容を確認。ブラウザで開いてみる
🌐生成されたHTMLファイルをブラウザで開く方法
「ブラウザで開く」ってどうやるの？3つの方法を紹介
index.htmlができたけど、どうやってブラウザで表示するの？という疑問に答えます。
🖥️ 方法①：ターミナルから開く（いちばん速い）
Claude Codeのターミナルで以下を入力するだけ：
📁 方法②：Cursorの右クリックメニューから開く
Cursorのファイルツリーで index.html を右クリック
→「Reveal in Finder（Mac）」または「Reveal in File Explorer（Windows）」
→ 開いたフォルダでファイルをダブルクリック
🖱️ 方法③：ドラッグ＆ドロップで開く
エクスプローラー（Windows）またはFinder（Mac）で index.html を見つけて、ブラウザのウィンドウにドラッグして放せばOK
💡 アドレスバーに「file://」と表示されていればOKブラウザで開くと、URLが file:///Users/.../index.html のように表示されます。これはローカル（自分のパソコン）で動いている証拠。インターネットには公開されていません。
✅ 今日のチェックリスト
✓
デスクトップに my-first-project フォルダを作った
✓
ターミナルで claude を実行してAI職人を起動した
🔍 「生成されたコード」が気になる方へ ── HTMLの読み方（クリックで開く）
Claude Code が作った index.html を開いたとき「これ何？」ってなる部分を解説します。
覚えなくていい。読めば「あ〜そういう意味か」とわかる程度でOK。
📄 HTML ファイルの骨格
<!DOCTYPE html> ← 「これはHTMLです」という最初の宣言。必ずある。
<html lang=”ja”> ← ページ全体を囲む箱。lang=”ja”は日本語サイトの印
<head> ← 画面に表示しない「設定エリア」。タイトルやCSSを置く
<title>My App</title> ← ブラウザのタブに出るタイトル
</head>
<body> ← ここから下が画面に表示されるもの全部！
<h1>見出し</h1> ← 一番大きい見出し（h2, h3と数字が増えると小さくなる）
<p>文章</p> ← 段落（普通のテキスト）
<div>…</div> ← 仕切り箱。画面に何も出ないが「グループ分け」に使う
<button>押す</button> ← クリックできるボタン
</body>
</html>
class=”名前”CSSでデザインするときの「ラベル」。同じclassを複数の要素に付けて、まとめてデザインできる
id=”名前”JavaScriptから「この部品」を特定するための固有名。1ページに1つしか使わない
style=”…”その要素だけにデザインを直接書く方法。style="color:red" で赤文字になる
onclick=”…”クリックしたときに実行するJSの命令。onclick="alert('こんにちは')" でポップアップが出る
💡 「これ何？」と思ったときは：そのコードを選択してコピー → Claude Code に「このコードは何をしていますか？」と貼り付けて聞くのが最速。AIは喜んで教えてくれます。
📋コピペOK！最初に使える指示文テンプレート
何を頼めばいいか迷ったらここから始めよう
「何を指示すればいいかわからない」は誰もが通る壁です。まずはこのテンプレートをそのままClaude Codeに貼り付けてみましょう。
🌐 ① 自己紹介ページを作る
「名前・趣味・一言メッセージが書いてある
シンプルな自己紹介ページを
index.html として作って。
デザインはシンプルでOK、
スマホでも見やすくして」コピー
📝 ② メモアプリを作る
「テキストを入力して保存できる
シンプルなメモアプリを作って。
ブラウザを閉じても消えないようにして（localStorage使用）。
HTML/CSS/JSの3ファイル構成で」コピー
🎲 ③ サイコロアプリを作る（一番簡単）
「ボタンを押すと1〜6のランダムな数字が
大きく表示されるサイコロアプリを
index.html 1ファイルで作って。
アニメーション付きで」コピー
✅ 成功のコツ最初は一番簡単なもの（③サイコロ）から始めるのがおすすめ。5分で完成して「動いた！」という感動が次への原動力になります。
✅
Day 6 クリア！
Cursor × Claude Code 最初の仕事をやってみようを完了しました。次へ進もう！
コメント
コメント一覧 （1件）
[…] […]