atom.web-builder.first-project-and-basic-ai-requests
最初のプロジェクトを作ってAIに指示を出す
最初のプロジェクトを作ってAIに指示を出す 料理を始めるとき、まずはキッチン（＝作業場所）を用意して、レシピ（＝作りたいもののメモ）を決めますよね。AIを使った開発もまったく同じです。 このレッスンでは、あなたのパ...
成果物成果物このレッスンが終わったとき、あなたの手元に残る具体的な成果物です(例: 公開済みの Web ページ、動作するフォームなど)。
証跡証跡成果物が正しく作れたことを確認するためのチェックリストです(例: ブラウザで動作する、フォーム送信で値が保存される)。
メディアメディアレッスン内に出てくる図や動画のスロットです。実際の画面やイメージで理解を補助します。
レッスン本文
最初のプロジェクトを作ってAIに指示を出す
料理を始めるとき、まずはキッチン（＝作業場所）を用意して、レシピ（＝作りたいもののメモ）を決めますよね。AIを使った開発もまったく同じです。
このレッスンでは、あなたのパソコン上に「プロジェクト（＝作品をまとめるフォルダー）」を作り、AIに「こんなWebページを作って」と伝えて、実際にブラウザで表示するところまでを15分で体験します。終わったあとには「自分の指示でAIがページを作ってくれた！」という実感が残ります。
前提を確認する
このレッスンに進む前に、次の準備が終わっているか確認しましょう。
- Claude Code（＝AIアシスタントのツール） がインストール済みであること
- ターミナル（＝パソコンに文字で命令を出す画面） が開けること
💡 もし Claude Code のインストールがまだなら、先に「Claude Code をインストールして動かす」のレッスンを終えてから戻ってきてください。
プロジェクトフォルダーを作る
料理で言えば「まな板を用意する」ステップです。作品のファイルをまとめる場所を作ります。
- ターミナルを開く
- デスクトップに移動する（以下のコマンドをコピーして貼り付け、Enterキーを押します）
cd ~/Desktop
（意味：デスクトップフォルダーに移動する）
- プロジェクト用のフォルダーを作る
mkdir my-first-app
（意味：my-first-app という名前の新しいフォルダーを作る）
- そのフォルダーの中に入る
cd my-first-app
（意味：作ったフォルダーの中に移動する）
良い例と悪い例
- ✅ 良い例：
my-first-appのように、半角英字とハイフンだけのシンプルな名前 - ❌ 悪い例：
新しいフォルダー (3)— 日本語やスペースが入ると、あとでエラーの原因になることがあります
AI（Claude Code）を起動する
フォルダーが用意できたら、AIアシスタントを呼び出します。レストランでウェイターを呼ぶようなイメージです。
claude
（意味：Claude Code をこのフォルダーで起動する）
起動すると、AIからのメッセージが表示され、あなたの入力を待つ状態になります。
💡 「claude と入力しても反応がない…」という場合は、インストールが完了していない可能性があります。前のレッスンに戻って確認してください。
AIに最初の指示を出す
ここが一番楽しい部分です！ AIに「こんなものを作って」と伝えてみましょう。
AIへの指示のことを「プロンプト（＝AIに渡すお願い文）」と呼びます。以下の文をそのままコピーして、Claude Code に貼り付けてください。
シンプルな自己紹介ページをHTMLで作ってください。
以下の内容を含めてください：
- 名前：山田太郎
- 趣味：写真と料理
- 一言メッセージ：「AIと一緒にWeb制作を始めました！」
ファイル名は index.html にしてください。
なぜこの書き方がいいのか
AIへの指示は「注文書」のようなものです。何がほしいかを具体的に書くほど、期待どおりの結果が返ってきます。
良い例と悪い例
- ✅ 良い例：「自己紹介ページをHTMLで作って。名前は山田太郎、趣味は写真と料理です。ファイル名は index.html で。」— 何を、どの形式で、どんな名前で作るかが明確
- ❌ 悪い例：「何か作って」— AIもどう動けばいいか分かりません
- ❌ 悪い例：「おしゃれな感じで」— 「おしゃれ」の基準は人それぞれ。色やレイアウトの希望を具体的に書きましょう
AIの返答を確認する
AIは指示を受け取ると、ファイルを作ったりコード（＝コンピューターに伝える指示書）を書いたりしてくれます。画面に表示される内容をゆっくり読んでみましょう。
確認するポイント：
- 「ファイルを作成しました」のようなメッセージが出たか — AIが実際にファイルを作ったサインです
- エラー（＝予期しない問題）の赤い文字が出ていないか — 赤い文字が出たら、そのメッセージをAIにそのまま伝えてください。「このエラーを直して」と言えばOKです
index.htmlというファイル名が表示されているか — これが次のステップで開くファイルです
💡 AIが「ファイルを作成してもいいですか？」と聞いてくることがあります。その場合は「はい」または y と答えてください。
作ったページをブラウザで見る
AIがファイルを作ったら、実際に見てみましょう。
Mac の場合：
open index.html
（意味：index.html というファイルをブラウザ（＝インターネットを見るソフト）で開く）
Windows の場合：
start index.html
ブラウザが開いて、あなたの名前・趣味・メッセージが書かれた自己紹介ページが表示されたら成功です！ 🎉
AIに修正をお願いしてみる
ページが表示されたら、もう一歩進んでみましょう。AIに修正を頼む体験をします。
Claude Code に以下のように伝えてみてください。
背景色を薄い青にして、名前を大きく表示してください。
AIがファイルを更新したら、ブラウザを再読み込み（Macなら Cmd + R、Windowsなら F5）して変化を確認しましょう。
このように「指示 → 確認 → 修正依頼」を繰り返すのが、AIを使った制作の基本リズムです。
他のAIツールでも同じことができる
このレッスンでは Claude Code を使いましたが、同じような流れは他のAIツールでも体験できます。参考として紹介します。
| ツール名 | 特徴 | 同じことをやるには |
|---|---|---|
| Cursor（＝AI機能付きのコード編集ソフト） | ファイル編集画面の中でAIに指示が出せる | Cursorでフォルダーを開き、チャット欄に同じ指示を入力する |
| ChatGPT | ブラウザで使えるAI。コードも生成できる | 同じプロンプトを貼り付け、返ってきたコードを index.html にコピーして保存する |
💡 どのツールでも「具体的に何がほしいかを文章で伝える」という基本は変わりません。
うまくいかないときは
| つまずきポイント | 対処法 |
|---|---|
claude と入力しても「command not found」と出る | Claude Code のインストールが完了していません。インストールのレッスンに戻りましょう |
| AIが英語で返してくる | 最初に「日本語で答えてください」と伝えてください。以降は日本語で対応してくれます |
| ページが真っ白に表示される | AIに「index.html の中身を見せて」と聞いてみましょう。ファイルが空だった場合はもう一度指示を出します |
| ファイルが見つからない | ターミナルで ls と入力すると、今いるフォルダーの中身が一覧表示されます。index.html があるか確認しましょう |
| ブラウザではなく別のアプリで開いてしまう | ブラウザ（Chrome や Safari）を先に開いてから、index.html ファイルをブラウザのウィンドウにドラッグ＆ドロップしてください |
完了を確認する
以下の3つがすべてできていれば、このレッスンは完了です。
-
my-first-appフォルダーの中にindex.htmlファイルがある - ブラウザで自己紹介ページが表示され、名前と趣味が読める
- AIに修正を1回以上お願いして、変化をブラウザで確認できた
💡 完了の証拠として、ブラウザに表示された自己紹介ページのスクリーンショット（＝画面の写真）を保存しておきましょう。
振り返る
このレッスンであなたは次のことができるようになりました。
- プロジェクト用のフォルダーを作る — 作品を整理する場所を用意できた
- Claude Code を起動する — AIアシスタントを呼び出せた
- AIに具体的な指示を出す — 「何を」「どのように」を伝えてページを作れた
- 作ったものをブラウザで確認する — 結果を自分の目で見られた
- AIに修正を依頼する — 指示→確認→修正の基本リズムを体験できた
これが AI を使った Web 制作の第一歩です。次のレッスンでは、もう少し複雑なページを作ったり、デザインを整えたりする方法を学びます。
種類: markdown_doc
検証: basic_manual_check_v1
証跡証跡成果物が正しく作れたことを確認するためのチェックリストです(例: ブラウザで動作する、フォーム送信で値が保存される)。
メディア