バイブコーディングでホームページを作る入門マニュアル（Codex版）

メインで使うツールは Codex です。
無料から始められますし、僕が実際に触った感じでは、かなりハードルが低くて導入しやすいと思ってます。プログラミングの知識も特別必要ありません。

基本的には日本語で「〇〇して」「ここをこんな感じに変えて」って伝えれば、それに沿って進めてくれます。「バイブコーディング」って聞くと、僕の経験上それだけで「なんか難しそう…」って思って、触る前から距離を置いちゃう人が多い印象です。でも、それはかなりもったいないです。

実際にやってみると、思っているほど難しくありません。むしろ自分の指示でホームページがどんどん形になっていくので、触っているうちにだんだん楽しくなってきますよ。

1. なぜCodexなのか

従来のWeb制作だと、

• HTML/CSSを一から覚える → 数ヶ月〜数年
• 制作会社に外注する → 高くなりがち
• ノーコードツールを使う → 自由度に限界がある

みたいな選択肢が多かったと思います。

Codex×バイブコーディングだと、

• AIがコードの下書きをやってくれる
• 人間は「何を作るか」「どう直すか」に集中できる
• 無料プランから始められる
• 修正も会話で回せる（「ここもう少し大きく」「スマホで見やすく」とか）※プランにより、上限在り。

正直、パソコン苦手なタイプでも、「こうしたい」を言葉にする練習ができれば、イメージした形に近づけられると実感してます。僕自身、名刺・ポートフォリオ・初受注案件、全部Codexメインでやってます。

2. Codexの準備（15分くらい）

📸 画面付きの手順、用意してあります

初めての人はこっちを見ながら進めてください。

👉 Codexでホームページ制作を始める準備ガイド（実画面スクショ付き）

STEP 1｜ChatGPTアカウントを作る

1. chatgpt.com にアクセス
2. アカウント作成（無料プランでOK）※がっつり取り組みたい方は課金推奨
3. ログインできれば準備完了

【画像なし・例外】ChatGPTのサイトは、開いた直後に「検証中」と出ることがあります。アカウント作成の画面も人によって違うので、登録そのものの見本画像は載せていません。画面の開き方・ChatとWork・Codexへの切り替えは、パソコンが苦手でもできる、ChatGPTの始め方を見てください。

STEP 2｜作業用フォルダをPCに作る

1. デスクトップとかに my-first-hp フォルダを新規作成
2. 中身は空でOK
3. このフォルダに、Codexが index.html とかを作っていきます

ポイント： フォルダ名は半角英数字がおすすめです。日本語フォルダ名は避けたほうが無難です。※AIが認識しやすい為

STEP 3｜Codexを開く

ChatGPT内の Codex（コーディング機能） を使います。

• アプリ版・Web版どっちでもOK
• 「コードを書いて」「ホームページを作って」って指示できる画面を開く
• 作業フォルダへのアクセスを求められたら my-first-hp を指定

画面の名称とか場所はアップデートで変わることがあるので、「Codex」「コーディング」「コード生成」みたいな項目を探してみてください。

切り替えの画面は、ChatGPTの始め方と同じ見本です。実際の見た目はアップデートで少し違うことがあります。

STEP 4｜動作テスト（最初の1指示）

Codexに、こう送ってみてください。

デスクトップの my-first-hp フォルダに、
「テストページ」と表示するだけの index.html を1ファイルで作ってください。

成功の確認：

• フォルダ内に index.html ができている
• ダブルクリックでブラウザに「テストページ」と表示される

ここまでできたら、環境構築は完了です。

3. 僕のおすすめ分担（Codex＋ChatGPT）

僕の実際の流れは、

1. ChatGPTで「このカフェのFV文案を3パターン」って壁打ち
2. 気に入った案をCodexに渡す
3. Codexでページを組み立てる
4. スクリーンショットを撮って「ここ直して」と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 を作成してください。

出力されたら：

1. my-first-hp/index.html をブラウザで開く
2. Codexに「文字をもう少し大きく」「背景をベージュに」みたいに、1点ずつ 直していく

一気に全部直そうとしなくて大丈夫です。

6. うまくいかないときの直し方

僕のコツは、一度に10個直そうとしないことです。1箇所ずつ 「ここだけ」って言う。あと画面のスクショをCodexに貼ると、修正の精度がだいぶ上がります。

7. WordPressとの関係（初受注で使った話）

初受注したカフェさんは、オーナーさんがもともと WordPress＋独自ドメイン を持ってました。

僕がやったのは、

• CodexでバイブコーディングしたデザインをWPに導入
• 導入・更新方法を運営マニュアルにまとめて納品

初心者の段階では、まずCodexで静的HTML（1ファイル）を1枚作れるようになることが先です。WordPressは「受注が来てから」学んでも全然遅くないです。

8. バイブコーディングでやらないほうがいいこと

• AIの出力をそのまま納品する（必ず自分の目で確認・修正してください）
• クライアントの写真・文章を無断使用する
• 「誰でも簡単に稼げる」みたいな煽り方をする（僕はこういう言い方はしません）
• ツール探しだけで満足して終わる
• 見せずに完璧を待ち続ける（60点でいいから見せる）

9. 1日30分の練習メニュー（Codex版・忙しい人向け）

10. もっと体系的に学びたい人へ

この入門マニュアルは、あくまで「Codexでまず触ってみる」ためのものです。

本気でポートフォリオレベルまで仕上げたいって人には、僕が実際に買って初受注5万円につなげた教材を紹介しておきます。

ぞろ屋さん「AIで作るホームページの教科書」（Brain）

• エージェントスキル・サンプルサイト・FV100選とか、設計の型が学べます
• 教材内の説明はCursor想定の部分もありますが、考え方はCodexでもそのまま使えます
• 僕は教材で学んだ流れを、実際の制作ではCodex中心で回してます

これから制作代行のクライアントワークをやりたい人や、ビジネス目的でサイトを作りたい人には、正直買ったほうがいいと思ってます。長年の知見が詰まった教材と自己流だと、成果の出方が比較になりません。逆に、友達に気軽にプレゼントするとか趣味で触るくらいなら、無理に買わなくて大丈夫です。

👉 https://brmk.io/qe9YzX

これもアフィリエイトリンクです。あくまで体験ベースでの紹介なので、買うかどうかは任意で大丈夫です。

11. 次のステップ

• ホームページを作ってみよう7日チャレンジ … Codexで7日、1枚公開まで
• 初受注5万円までのロードマップ … 受注までの全体像
• ホームページ制作チャレンジ・登録特典ハブ … 特典一覧に戻る

最初の1枚は、たぶん完璧じゃないです。でも、それで大丈夫です。

でも「Codexで自分で作った」って言える1枚は、間違いなく自信になります。

イロドリ