「もう、自分にはプログラミングの才能はないのかもしれない…」
divタグの迷宮で遭難し、赤いエラー表示に心を折られ、そっとパソコンを閉じた夜。何を隠そう、これはほんの数年前までの私の姿です。安定した薬剤師という職にはあるものの、心のどこかで新しい挑戦を夢見ては、そのたびに挫折を繰り返していました。この挫折から復活した薬剤師の物語は、決して特別な誰かの話ではありません。
もし、かつての私と同じように、あなたが今、自信を失いかけているのなら。 断言します。悪いのはあなたではありません。その学習法が、あなたの貴重な時間を奪っているだけです。
こんにちは、YamadaCodeの山田（プロフィール）です。 この記事は、過去の私から、未来のあなたへ贈る「再挑戦のためのロードマップ」です。AIという最高の相棒と共に、難しい理論やサーバーのことはすべて後回しにして「まず、作る」。そして、作ったものを“自分のPCのブラウザで表示させる”。そのための具体的な手順を、私の全ての経験を込めてお渡しします。
この記事を読み終える頃、あなたは「私にもできた！」という確かな自信と、実際に自分のブラウザで動くWebサイトをその手にしているはずです。さあ、あなたの創造性を解放する、最高のセッションを始めましょう！
なぜ“1日”でWebサイトが形になるのか？
「1日でWebサイトなんて、専門家でもないと無理だろう？」 その常識は、AIの登場によって過去のものとなりました。VibeCodingが、従来の学習法では考えられなかったスピードを実現できる理由は、極めて論理的です。
原則1：AIが「最も時間を浪費する作業」を代行するから
プログラミング学習の挫折原因は、コードが書けないことではありません。エラー解決や情報検索といった「コードを書く以外の時間」にあります。事実、Stack Overflowの調査によれば、開発者は週に何時間もデバッグに費やしており、これが生産性を下げる大きな要因となっています。
VibeCodingでは、この「悩む時間」をAIがほぼゼロにします。
- コードの爆速生成: 「こんなサイトが欲しい」と伝えれば、AIが数分で土台を組み上げます。
- エラーの瞬間解決: 意味不明なエラー文を貼り付ければ、AIが即座に原因と解決策を提示します。
- 無限のデザイン提案: 「このボタンをもっと魅力的にして」と頼めば、CSSのアイデアを無数に提案します。
あなたがやるべきなのは、暗闇での試行錯誤ではなく「AIとの対話」。これこそが、学習効率を最大化する鍵なのです。
原則2：「成功体験」から「本質理解」へ繋げるから
従来の学習は「理論→実践」でした。しかし、それでは「何のためにこれを学んでいるのか」を見失いがちです。
VibeCodingは、この順番を完全に逆にします。
- まず、動くものを作る（実践）: 完成品を先に手に入れ、達成感という強力なモチベーションを得る。
- 次に、仕組みを理解する（理論）: 「なぜ動くのか？」という知的好奇心を燃料に、AIに質問しながら本質を学ぶ。
このVibeCodingの基本原則は、あなたを退屈な暗記作業から解放し、学習を「自分ごと」として捉えるための、最も効果的な学習サイクルです。
Step 0：最強の制作環境を整える（所要時間：30分）
さあ、理屈はもう十分です。早速、AIとのセッションを始める準備をしましょう。
必要なものリスト
- ChatGPTアカウント: アイデア出しとプロンプト設計の相棒。有料プランが望ましいですが、無料でも始められます。
- Claude (Anthropic) APIキー: 高品質なコード生成の専門家。公式サイトで取得します。
- Node.js (v18以上): AIツールを動かすための実行環境。公式サイトからPCにインストールします。
- Cursorエディタ: AIが統合された次世代エディタ。公式サイトから入手します。
- Google Chrome: 制作サイトの確認に使う標準ブラウザ。
環境設定：Claude Codeの導入
Claude Codeをターミナルから直接呼び出すための公式ツールをインストールします。
1. ターミナルを開く
2. Claude Codeをインストール: ターミナルに以下の公式コマンドを打ち込みます。
npm install -g @anthropic-ai/claude-code3. APIキーを設定: 取得したAPIキーをツールに設定します。
claude auth YOUR_API_KEYこれで、あなたのPCからいつでもClaude Codeの能力を呼び出せるようになりました。
Step 1：AIとの対話で「Webサイトの設計図」を創る（所要時間：30分）
コーディングはまだしません。まず、対話の天才ChatGPTと「どんなサイトを作りたいか」を詰めていきます。
今回は例として「私のお気に入りのサウナ『ザ・センチュリオンサウナレスト&ステイ』の魅力を伝えるファンサイト」の設計図を作ってみましょう。
ChatGPTへの依頼プロンプト例：
あなたは、プロのプロンプトエンジニアです。これから、Claude Codeを使って、Webサイトを構成する3つのファイル（HTML, CSS, JavaScript）を生成させたいです。そのための、3つの独立したプロンプトをそれぞれ作成してください。
Webサイトの要件：
- テーマ:
札幌にある「ザ・センチュリオンサウナレスト&ステイ」の魅力を伝えるファンサイト
- 掲載内容:
- ヘッダー：「札幌の中心でととのう、都会のオアシス」
- 3つの魅力（90℃超えのドライサウナ、キンキンに冷えた水風呂、豊富な休憩スペース）をセクションで紹介
- 店舗情報（住所、営業時間、公式サイトへのリンク）
- 「今日のサウナ飯は？」というボタンを設置
- デザイン:
- 全体的にレトロで落ち着いたデザイン
- ブラウンとオレンジを基調とする
- 機能:
- 「今日のサウナ飯は？」ボタンをクリックすると、「生姜焼き定食がおすすめです！」というアラートが表示される。
出力指示：
1. HTML用プロンプト: 上記要件を満たすindex.htmlのコードを生成するプロンプト。style.cssとscript.jsを正しく読み込むタグと`<link>`タグと`<script>`タグを含めること。2. CSS用プロンプト: 上記デザイン要件を満たす`style.css`のコードを生成するプロンプト。
3. JavaScript用プロンプト: 上記機能要件を満たす`script.js`のコードを生成するプロンプト。それぞれがClaude Codeでそのまま使えるように、簡潔かつ強力な命令文にしてください。Step 2：AIに各ファイルを生成させる（所要時間：15分）
設計図が完成したら、いよいよコード生成です。
- プロジェクトフォルダを作成: Cursorで作業用のフォルダ（例:
my-sauna-site）を新規作成し、開きます。 - 各プロンプトを実行: Cursorの内蔵ターミナルで、Claude Codeを呼び出し(コマンド："claude"と打ち込む)、ChatGPTが生成した3つのプロンプトを使い、以下のコマンドを順番に実行します。
# 1. HTMLファイルを生成
claude "（ここにHTML用のプロンプトを貼り付ける）" > index.html
# 2. CSSファイルを生成
claude "（ここにCSS用のプロンプトを貼り付ける）" > style.css
# 3. JavaScriptファイルを生成
claude "（ここにJavaScript用のプロンプトを貼り付ける）" > script.jsStep 3：ブラウザで魔法をかける！ローカルでサイトを表示する（所要時間：5分）
さあ、クライマックスです。AIと創り出したコードに、命を吹き込みましょう。
- Cursorのファイル一覧を確認: 左側に
index.html,style.css,script.jsが揃っていることを確認します。 - Live Serverを起動:
index.htmlファイルを右クリックし、「Open with Live Server」を選択します。
次の瞬間、ブラウザが立ち上がり、あなたがAIに指示した通りのサイトが表示されるはずです。ボタンをクリックして、メッセージが表示されることも確認してください。
おめでとうございます！あなたは今、プログラミングの最も根源的で、最も感動的な瞬間を体験しました。
Step 4：体験を知識に変える“知性の定着”セッション（所要時間：30分）
サイトが動いた感動に浸ったら、ここからがVibeCodingの真骨頂です。このステップこそが、単なる模倣と本物の学習を分ける、最も重要なプロセスです。
なぜファイルを3つに分けるのか？
まず、AIにこう聞いてみましょう。「なぜHTML, CSS, JavaScriptは別のファイルに分けるのが一般的なのですか？」。AIは「関心の分離」という重要な原則を教えてくれるはずです。これは、各ファイルが持つ役割を明確に分けることで、コードが整理され、後から修正や機能追加がしやすくなる、という考え方です。この基本を理解することが、脱初心者への第一歩です。
AIにコードを解説させる
次に、完成した3つのファイルのコードをChatGPTに見せて、こう質問します。
プロンプト例：
ありがとうございます。あなたのおかげで、私たちのサイトがPCで見事に動きました！ この感動を本物の力に変えたいです。私が今日作ったこの3つのファイルが、どのように連携して一つのWebサイトとして機能しているのか、その仕組みを分解して教えてください。特に、以下の点について、中学生にもわかるように、例え話を交えながら解説していただけますか？
1.index.htmlが「建物の骨格」として、どのような役割を果たしているのでしょうか？
2.style.cssが「内装や家具」として、どのように見た目を飾っているのでしょうか？
3.script.jsが「電気や水道」として、どのような「機能」を与えているのでしょうか？
4.HTMLファイルにある`<link>`タグと`<script>`タグは、どのようにしてこの3つのファイルを繋げているのでしょうか？この「振り返り」の対話が、断片的な体験を、体系的な知識へと変えてくれます。
おわりに：その小さな成功体験が、あなたの未来を創る
「自分のPCのブラウザに、自分が作ったサイトが表示されている」
「そして、それが“なぜ”動いているのか、少しだけ理解できた」
今日あなたが手にしたのは、単なるWebサイトのファイルではありません。それは、AIという相棒と共に、頭の中のアイデアを具体的な形にし、その仕組みまで理解できたという、何物にも代えがたい成功体験です。そして、これからの学習の旅における、強力なコンパスです。
公開なんて、まだ先の話でいいんです。まずは、この「できた！わかった！」という手触りのある感動を、存分に味わってください。この小さな一歩が、あなたの自己肯定感を育み、次のより大きな挑戦への揺るぎない土台となります。
挫折の物語は、今日で終わりです。ここから、あなたの創造の物語を始めましょう。
【論理的な次の一歩】
今日の体験で、あなたはWeb制作の基本を掴みました。次におすすめなのは、初心者向けAIチャットツールの比較記事を読み、各AIの得意・不得意をさらに深く理解することです。ツールの特性を知ることで、あなたのVibeCodingはさらに加速します。
さあ、今すぐ次の知識をインプットし、あなたの創造の物語を次の章へと進めましょう！
よくある質問（FAQ）
Q1: `claude` コマンドでAPIキーのエラーが出ます。どうすればいいですか？
A1: よくあるケースです。まず、claude auth YOUR_API_KEY のコマンドを再実行し、APIキーが正しくコピー＆ペーストできているか確認してください。キーの前後や途中に余計なスペースが入っていないか要注意です。それでも解決しない場合は、ターミナルを再起動すると設定が反映されることがあります。
Q2: なぜ設計図はChatGPTで、コード生成はClaude Codeコマンドなのですか？
A2: 非常に鋭い、本質的な質問です。これは「適材適所」の考え方に基づいています。ChatGPTは、柔軟な対話能力と発想力に長けており、私たちが「どんなサイトを作りたいか」という曖昧なイメージを、具体的な「設計図（プロンプト）」に落とし込む最高の壁打ち相手です。一方、Claude Codeは、単なるチャットツールではありません。これはターミナル上で直接ファイルを生成することに最適化された「開発エージェント」です。つまり、戦略家（ChatGPT）に作戦を練ってもらい、その作戦を最も効率よく実行できる現場のスペシャリスト（Claude Code）に実際の作業を任せる、という分業体制です。