バイブコーディングでホームページを作る入門マニュアル（Codex版）
バイブコーディングでホームページを作る入門マニュアル（Codex版）
メインツールは Codex です。無料から始められて、僕が実際に触った感じだと一番ハードル低いと思ってます。
プログラミングの知識とかは特別いらないです。日本語で「こうして」って伝えれば、それで進みます。
1. なぜCodexなのか
従来のWeb制作だと、
- HTML/CSSを一から覚える → 数ヶ月〜数年
- 制作会社に外注する → 高くなりがち
- ノーコードツールを使う → 自由度に限界がある
みたいな選択肢が多かったと思います。
Codex×バイブコーディングだと、
- AIがコードの下書きをやってくれる
- 人間は「何を作るか」「どう直すか」に集中できる
- 無料プランから始められる
- 修正も会話で回せる（「ここもう少し大きく」「スマホで見やすく」とか）
正直、パソコン苦手なタイプでも、「こうしたい」を言葉にする練習ができれば、形に近づけられると実感してます。名刺・ポートフォリオ・初受注案件、全部Codexメインでやってます。
2. Codexの準備（15分くらい）
📸 画面付きの手順、用意してあります
初めての人はこっちを見ながら進めてください。
👉 Codexでホームページ制作を始める準備ガイド（実画面スクショ付き）
STEP 1｜ChatGPTアカウントを作る
- chatgpt.com にアクセス
- アカウント作成（無料プランでOK）
- ログインできれば準備完了
STEP 2｜作業用フォルダをPCに作る
- デスクトップとかに
my-first-hpフォルダを新規作成 - 中身は空でOK
- このフォルダに、Codexが
index.htmlとかを作っていきます
ポイント： フォルダ名は半角英数字がおすすめです。日本語フォルダ名は避けたほうが無難です。
STEP 3｜Codexを開く
ChatGPT内の Codex（コーディング機能） を使います。
- アプリ版・Web版どっちでもOK
- 「コードを書いて」「ホームページを作って」って指示できる画面を開く
- 作業フォルダへのアクセスを求められたら
my-first-hpを指定
画面の名称とか場所はアップデートで変わることがあるので、「Codex」「コーディング」「コード生成」みたいな項目を探してみてください。
STEP 4｜動作テスト（最初の1指示）
Codexに、こう送ってみてください。
デスクトップの my-first-hp フォルダに、
「テストページ」と表示するだけの index.html を1ファイルで作ってください。成功の確認：
- フォルダ内に
index.htmlができている - ダブルクリックでブラウザに「テストページ」と表示される
ここまでできたら、環境構築は完了です。
3. 僕のおすすめ分担（Codex＋ChatGPT）
| 役割 | ツール | やること |
|---|---|---|
| 設計・文案 | ChatGPT | キャッチコピー、構成案、文章の下書き |
| 実装・修正 | Codex | HTML/CSS生成、レイアウト修正、ファイル保存 |
| 公開 | Netlify | フォルダーをアップロードしてURL取得 |
僕の実際の流れは、
- ChatGPTで「このカフェのFV文案を3パターン」って壁打ち
- 気に入った案をCodexに渡す
- Codexでページを組み立てる
- スクリーンショットを撮って「ここ直して」とCodexに送る
こんな感じで回してます。
4. バイブコーディングの基本の流れ（Codex版）
① 作りたいものを言葉で決める
↓
② ChatGPTで構成・文案を整理（任意）
↓
③ Codexに「このフォルダに作って」と指示
↓
④ index.html をブラウザでプレビュー
↓
⑤ 「ここを直して」とCodexに会話で修正
↓
⑥ 満足いくまで ④⑤ を繰り返す
↓
⑦ Netlifyで公開大事なのは「一発完璧」を目指さないことです。プロの現場でも、何度も直してます。
5. 初めての1枚を作るプロンプト例（Codexにコピペ）
あなたはWeb制作のプロです。
【作業フォルダ】
my-first-hp フォルダに作成してください。
【作りたいもの】
架空のカフェ「街角コーヒー」の1ページサイト
【含めたいセクション】
- ファーストビュー（店名・キャッチコピー・営業時間）
- お店のこだわり（3つ）
- メニュー（ドリンク3種・フード2種）
- アクセス（名古屋市南区・架空の住所でOK）
- お問い合わせボタン（LINEへのリンクは # で仮置き）
【デザイン】
- 温かみのあるカフェ系
- スマホで見やすい（レスポンシブ）
- HTMLとCSSは1ファイル（index.html）にまとめる
まず index.html を作成してください。出力されたら：
my-first-hp/index.htmlをブラウザで開く- Codexに「文字をもう少し大きく」「背景をベージュに」みたいに、1点ずつ 直していく
一気に全部直そうとしなくて大丈夫です。
6. うまくいかないときの直し方
| 症状 | Codexへの指示例 |
|---|---|
| 真っ白な画面 | 「index.html がフォルダの直下にあるか確認して。なければ作り直して」 |
| スマホで崩れる | 「スマホ幅（375px）で見やすくレスポンシブに修正して」 |
| デザインがダサい | 「参考URL：〇〇。この雰囲気に近づけて」 |
| 何度直しても違う | スクリーンショットを添付して「赤枠の部分だけ直して」 |
| わからなくなった | 「いったんシンプルな1ページ構成に戻して」 |
僕のコツは、一度に10個直そうとしないことです。1箇所ずつ 「ここだけ」って言う。あと画面のスクショをCodexに貼ると、修正の精度がだいぶ上がります。
7. WordPressとの関係（初受注で使った話）
初受注したカフェさんは、オーナーさんがもともと WordPress＋独自ドメイン を持ってました。
僕がやったのは、
- CodexでバイブコーディングしたデザインをWPテーマ化
- 導入・更新方法を運営マニュアルにまとめて納品
初心者の段階では、まずCodexで静的HTML（1ファイル）を1枚作れるようになることが先です。WordPressは「受注が来てから」学んでも全然遅くないです。
8. バイブコーディングでやらないほうがいいこと
- AIの出力をそのまま納品する（必ず自分の目で確認・修正してください）
- クライアントの写真・文章を無断使用する
- 「誰でも簡単に稼げる」みたいな煽り方をする（僕はこういう言い方はしません）
- ツール探しだけで満足して終わる
- 見せずに完璧を待ち続ける（60点でいいから見せる）
9. 1日30分の練習メニュー（Codex版・忙しい人向け）
| 日 | やること | 時間 |
|---|---|---|
| 月 | Codexでサンプル1枚生成 | 30分 |
| 火 | ChatGPTでキャッチコピー3パターン | 20分 |
| 水 | CodexでFVの色・フォントを1箇所修正 | 30分 |
| 木 | Codexでセクションを1つ追加 | 30分 |
| 金 | スマホ表示を確認してCodexで1点修正 | 30分 |
| 土 | Netlifyで公開してURLを取得 | 40分 |
| 日 | 家族か友人に「見て」と送る | 10分 |
10. もっと体系的に学びたい人へ
この入門マニュアルは、あくまで「Codexでまず触ってみる」ためのものです。
本気でポートフォリオレベルまで仕上げたいって人には、僕が実際に買って初受注5万円につなげた教材を紹介しておきます。
ぞろ屋さん「AIで作るホームページの教科書」（Brain）
- エージェントスキル・サンプルサイト・FV100選とか、設計の型が学べます
- 教材内の説明はCursor想定の部分もありますが、考え方はCodexでもそのまま使えます
- 僕は教材で学んだ流れを、実際の制作ではCodex中心で回してます
これから制作代行のクライアントワークをやりたい人や、ビジネス目的でサイトを作りたい人には、正直買ったほうがいいと思ってます。長年の知見が詰まった教材と自己流だと、成果の出方が比較になりません。逆に、友達に気軽にプレゼントするとか趣味で触るくらいなら、無理に買わなくて大丈夫です。
これもアフィリエイトリンクです。あくまで体験ベースでの紹介なので、買うかどうかは任意で大丈夫です。
11. 次のステップ
- ホームページを作ってみよう7日チャレンジ … Codexで7日、1枚公開まで
- 初受注5万円までのロードマップ … 受注までの全体像
- ホームページ制作チャレンジ・登録特典ハブ … 特典一覧に戻る
最初の1枚は、たぶん完璧じゃないです。それで大丈夫です。
でも「Codexで自分で作った」って言える1枚は、間違いなく自信になります。
イロドリ