「自分のウェブサイトを作りたいけど、プログラミングは無理…」
「外注は高すぎるし、何より時間がかかりすぎる…」
「AIがすごいって聞くけど、結局どう使えばいいの？」
もしあなたが今、そう感じているなら、この記事は過去の私からあなたへの「手紙」です。
こんにちは、当ブログ VibeCoding を運営しているYamadaCodeの山田（X(旧Twitter)）です。
ほんの数ヶ月前までプログラミングに挫折し、黒い画面に恐怖すら感じていた私が、今ではAIを最高の相棒に、コードを書き、Webサイトを作っています。
この記事では、プログラミング経験ゼロのあなたでも、AIに的確な指示を出すだけで、本格的なランディングページ（LP）をわずか半日で作り上げる具体的な手順と時間術を、私の失敗談も交えながら、世界一わかりやすく解説します。
この記事を読み終える頃、あなたは「サイト作成は専門家だけのもの」という古い常識から解放され、AIと共に創造する未来への第一歩を、確信を持って踏み出しているはずです。
もう「サイト作成は無理」と言わせない – AIが変える常識
Webサイト作成は、かつては専門知識を持つ人だけの聖域でした。しかし、AI、特にコード生成に特化したAIの登場が、その常識を根底から覆したのです。
これからの時代、私たちに必要なのは、複雑なコードを一行一行書くスキルだけではありません。「AIに、何を、どのように作ってほしいか」を的確に伝える対話スキルです。
あなたが監督となり、AIという超優秀なエンジニアに指示を出す。この新しいものづくりの形こそ、私たちが実践するVibeCodingとは？の核心に他なりません。
半日でLPを完成させるための作戦会議
「本当に半日でできるの？」もちろんです。ただし、闇雲に始めてはいけません。成功の鍵は、明確な作戦と時間配分にあります。
| 時間 | 工程 (合計 約4時間) | 主な使用AI | 目的 |
|---|---|---|---|
| 最初の1時間 | Step1: 最高の「設計図」を作る | ChatGPT | LPの骨格と魂（プロンプト）を固める |
| 次の2時間 | Step2: AIとの対話でコードを生成する | Claude Code | 設計図を元に、AIと対話しながらコードを実装する |
| 最後の1時間 | Step3: 微調整と世界への公開 | - | 最終チェックと、Github等での簡単デプロイ |
このタイムラインに沿って進めれば、あなたもAIとのセッションに没頭し、気づけばLPが完成している。そんな未来が待っています。
Claude Codeとは？– あなた専用のAIフロントエンドエンジニア
今回の主役は、Anthropic社が開発した「Claude Code」です。
簡単に言えば、「ターミナル（黒い画面）上で対話しながら、Webサイトのコードを丸ごと生成してくれる、あなた専属のAIエンジニア」です。
ここで重要なのが、AIの役割分担。それぞれの得意分野を理解することが、AIを使いこなす鍵となります。
- ChatGPT: 天才的な戦略家。私たちの曖昧なイメージを、具体的な「設計図（プロンプト）」に落とし込むのが得意。
- Claude Code: 忠実な実行部隊。ChatGPTが作った設計図を元に、HTML, CSS, JavaScriptといった専門的なコードを正確に書き上げるのが得意。
この2つのAIを使い分ける方法については、こちらのAIチャット比較記事も参考にしてみてください。
Step0: 環境準備 (所要時間: 約15分)
まずは、あなたのMacをAIが活躍できるステージに整えましょう。一つずつ進めれば、何も怖くありません。
Homebrew / Node.js インストール
ターミナルを開き（`command` + `space`で「terminal」と検索）、以下のコマンドを順番に実行します。これは、AIツールを動かすための基盤を整える作業です。
1. Homebrewのインストール（もし未導入の場合）
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"2. Node.jsのインストール
brew install node私が初めてこの黒い画面でコマンドを実行した時、心臓はバクバクでした。「Macが壊れたらどうしよう」と。でも、ただ待つだけでインストールが終わった時、自分が少しだけ強くなったような、不思議な高揚感を覚えています。ターミナル操作に不慣れな方は、こちらのGemini-CLIブログ生成ガイドで、より詳しい画面付きの解説をしていますので、ご安心ください。
Claude Code のセットアップ
次に、主役であるClaude Codeをインストールします。
npm install -g @anthropic/claude-codeインストール後、バージョンを確認しておきましょう。
claude --version`1.0.43`と表示されれば成功です。初回起動時に認証を求められた場合は、画面の指示に従ってログインしてください。
Step1: ChatGPTで“魔法の指示文”を作る (所要時間: 約1時間)
Claude Codeに最高の仕事をしてもらうには、最高の「指示文（プロンプト）」が必要です。このLPの魂とも言える設計図作りは、対話の天才、ChatGPTと共に行いましょう。
なぜプロンプトが重要なのか？
プロンプトは、単なる「お願い」ではありません。AIの思考を誘導し、アウトプットの品質を決定づける「設計図」です。良い設計図がなければ、AIは的外れなコードしか生成できません。
LPの骨格を定義する
まず、どんなLPを作りたいかを、人間の言葉で明確にします。
* 誰に？: 地域の患者さんやそのご家族
* 何を？: 信頼できて便利な「かかりつけ薬局」
* どうしてほしい？: 安心して来局・相談してほしい
この骨子を元に、LPに必要な要素を洗い出します。
* キャッチコピー
* 薬局の強み（3つのポイント）
* サービス内容の詳細
* 利用者の声
* 店舗情報とアクセス
* よくある質問
プロンプト全文サンプル (調剤薬局LP)
これらの要素を盛り込み、ChatGPTに「Claude Code向けのプロンプト」を作成してもらいます。以下のようなプロンプトをChatGPTに実行させましょう。
あなたは、Anthropic社のAIコーディングアシスタント「Claude Code」を操作するプロのプロンプトエンジニアです。
以下の要件に基づき、Claude Codeが最高のランディングページ（LP）を生成するための、完璧な指示プロンプトを作成してください。ultrathinkの思考で、最高の品質を追求してください。
そうすると、以下のようなClaude Code用のプロンプトを生成してくれます。
生成したいLPの仕様書
#役割
- あなたは、HTML, CSS, JavaScriptを完璧に使いこなすフロントエンドエンジニアです。
#目的
- 地域の皆様に信頼される「かかりつけ薬局」の魅力を伝え、来局を促進するLPを作成します。
#ターゲット
- 地域の患者様やそのご家族。ITに不慣れな方でも分かりやすい、清潔感と安心感のあるデザインを希望します。
#LPの構成要素
1. ヘッダー: ロゴ（テキストでOK）とナビゲーション（ホーム, サービス, 店舗情報, よくある質問）。
2. メインビジュアル: 心地よいキャッチコピーとサブコピーを配置。
3. 3つの強み: アイコン付きで「スマホ処方箋」「専門相談」「在宅サポート」をアピール。
4. サービス詳細: 各サービス内容を分かりやすく説明。
5. お客様の声: 2〜3名の架空のレビューを掲載。
6. 店舗情報: 住所、地図（Google Map埋め込み）、営業時間、電話番号を記載。
7. よくある質問 (FAQ): アコーディオン形式で3つほどのQ&Aを設置。
8. フッター: コピーライト。
#デザインと技術要件
- CSS: 全体のスタイルを記述。レスポンシブ対応で、スマホでも美しく表示されるようにしてください。
- JavaScript: FAQのアコーディオン機能など、動的な要素を実装してください。
- ファイル構成: `index.html`, `style.css`, `script.js` の3つのファイルに分けて生成してください。
#トーン＆マナー
- 全体的に、白と緑を基調とした、清潔感と信頼感のあるデザイン。
- フォントは読みやすいゴシック体を使用。
以上のすべてを考慮し、Claude Codeが一括でファイルを生成できるような、完璧な単一のプロンプトを生成してください。Step2: Claude Codeとの対話でコードを生成する (所要時間: 約2時間)
ChatGPTが生成してくれたClaude Code用プロンプトをコピーし、いよいよClaude Codeとのセッション開始です。
ターミナルで、LPのファイルを保存したいフォルダ（ディレクトリ）に移動し、Claude起動のコマンド"claude"を実行します。
その後、先ほどChatGPTに生成してもらったプロンプトを貼り付けて実行します。
数十秒待つと、Claude Codeが思考を終え、`index.html`, `style.css`, `script.js`などのファイルが魔法のようにフォルダ内に出現します。
私が最初にLPを生成した時、AIは完璧なコードを一発では出してくれませんでした。CSSが崩れたり、JavaScriptが動かなかったり…。しかし、そこで諦めませんでした。「メインビジュアルの文字が中央に寄っていません。修正してください」と対話を続けたのです。数回のやり取りの後、デザインがピタッと決まった瞬間、私はAIが「ツール」から「相棒」に変わる音を聞きました。この挫折から復活した私の体験こそが、VibeCodingの原点です。
AIが生成したデザインがイメージと少し違う場合でも、心配ありません。対話形式で修正を依頼できます。
"メインボタンの色を、もっと落ち着いた緑色に変更してください。""フォントサイズを全体的に少し大きくして、読みやすく調整してください。"このように、対話を繰り返すことで、理想のデザインに近づけていくことができます。
Step3: 微調整と世界への公開 (所要時間: 約1時間)
生成された`index.html`ファイルをブラウザで開くことでLPのプレビューが確認できます。
GitHub Pagesへのデプロイ概要
完成したLPは、世界中に公開できます。
GitHub Pagesなどの無料サービスを使えば、作成したフォルダをドラッグ＆ドロップするだけで、数分後にはあなただけのウェブサイトがインターネット上に公開されます。詳しい手順は各サービスの公式サイトで非常に分かりやすく解説されています。
トラブル解決の方法 (FAQ)
Q1. エラーが出たり、うまく動かなかったりしたら？
A. 落ち着いて、エラーメッセージをAIに相談しましょう。 エラーは敵ではなく、解決へのヒントが書かれた「道しるべ」です。メッセージをコピーして、ChatGPTやClaude Code自身に「これはどういう意味で、どうすれば解決できる？」と聞いてみてください。AIはエラー解決の優秀なパートナーにもなってくれます。
Q2. デザインがどうしても気に入らないのですが…
A. 完璧を目指さないことが、挫折しない最大のコツです。 まずは70点でOK。公開してから、少しずつ改善していくのがおすすめです。AIとのものづくりは、完成度よりも「まず動かす」「まず公開する」というスピード感が何より大切です。
まとめ – あなたもAIと作る一歩を踏み出そう
お疲れ様でした。
あなたは今、AIに指示を出し、一つのランディングページを構成するコードを生成するという、革命的な体験をしました。
プログラミングはもはや、一部の専門家だけのものではありません。
あなたの頭の中にあるアイデアを、AIという最高の相棒に伝えさえすれば、形にできる時代なのです。
黒い画面への恐怖は、もうありません。それは、あなたの創造性を解き放つための、魔法のキャンバスに変わりました。
行動喚起 – さあ、あなたのLPの設計図を描こう！
知識を得るだけでは、1ミリも現実は変わりません。行動こそが、あなたを未来へ進ませます。
- Step 1: この記事のStep1で紹介したプロンプトをコピーする。
- Step 2: ChatGPTを開き、プロンプトを、あなたが作ってみたいLPのテーマ（例: カフェの紹介、個人のポートフォリオなど）に書き換えて、投げてみる。
- Step 3: ChatGPTが生成した「あなただけの設計図」をClaude Codeに渡して一緒にLPを制作していく。
さあ、AIとの共同創造の旅へ。あなたのVibeCodingは、今、ここから始まります。