【完全初心者向け】Codex Appで体験する「バイブコーディング」入門〜ゼロからWebアプリ公開まで〜

「プログラミングの知識は全くないけれど、自分のアイデアを動く形にしてみたい」

そんな夢を叶える魔法のような開発手法が、いま世界中で話題になっています。

この記事では、環境構築が全くない（ゼロの）状態から、最新のAIツールを使って最低限のシステムを作り、インターネット上に公開するまでの全手順を、一つ一つのクリックやキーボード操作まで事細かに解説します。

途中で絶対に迷わないよう設計していますので、安心してついてきてください。

最初に知っておくべき基礎用語集

作業を始める前に、「そもそもこれって何？」という疑問をなくすための簡単な用語集です。

1. 超基礎編

Webアプリ（アプリケーション）
インターネット（SafariやGoogle Chromeなどのブラウザ）を通じて使える「便利な道具」のことです。単に文章を読むだけのWebサイト（企業の紹介ページなど）とは違い、文字を入力したり、ボタンを押してデータを保存したりできます。
- 具体例： Gmail（メールの送受信）、Amazon（商品の検索と購入）、X / Twitter（投稿やいいね）、YouTube（動画の検索と再生）などはすべてWebアプリです。これから作る「おみくじアプリ」も立派なWebアプリの一つです。
OpenAI（オープンエーアイ）
いま世界で一番有名なAIを作っている「会社の名前」です。
ChatGPT（チャットジーピーティー）
OpenAI社が作った、人間のように自然な会話ができる「AIサービス（商品）の名前」です。（※今回はChatGPTそのものは使いませんが、同じ会社が作った別のツールを使います）

2. 今回使うツールの名前

バイブコーディング (Vibe Coding)
人間が直接キーボードで難しいプログラムの暗号のような文字（コード）を打ち込むのではなく、「AIに日本語で指示を出すだけ」でAIが勝手にシステムを作り上げる新しい開発手法のことです。「こんな感じのものを作って（バイブスを伝える）」と指示するだけで、AIが手を動かしてくれます。
Codex App（コーデックス・アプリ）
あなたのパソコン上で動く「優秀なAIアシスタント」のアプリです。チャット画面で指示を出すと、あなたのパソコン内にあるファイルを直接編集したり、設定を行ったりして、実際にアプリを組み上げてくれます。
Vercel（バーセル）
完成したアプリを、世界中の人がスマホやパソコンから見られるように「インターネット上に公開（デプロイ）」するためのサービスです。今回はこのVercelの無料プランを使います。

⚠️ 【重要】事前注記：対応OSについて（Windowsの方へ）

現在、AIにパソコンの操作を任せるCodex Appは「macOS（Mac）」のみの対応となっております。Windowsのパソコンをご利用の方は、誠に残念ですが現在のバージョンでは動作しません。

ただし、Windowsの方もここでページを閉じないでください！

「Step 1」で解説しているVercelのアカウント作成やNode.jsの準備は、Windowsでも全く同じ手順で行えます。これらは他のAI開発ツール（v0やCursorなど）を使う際にも必ず必要になる「現代の必須知識」ですので、今のうちに準備を済ませておくことを強くおすすめします！

💰 【重要】事前注記：OpenAIのサブスクリプション（料金）について

Codex App自体は、無料のOpenAIアカウントでもログインして利用を始めることができます。

しかし、無料プランのままでは「AIとやり取りできる回数」に厳しい制限があったり、最も賢いAIモデルが使えない場合があります。

アプリ開発では「ここを直して」「デザインを変えて」とAIと何度もやり取りを重ねることになります。途中で挫折せず、快適にバイブコーディングを体験するためには、OpenAIの有料サブスクリプション（ChatGPT Plus / 月額20ドル）へのご加入を強くおすすめします。

Step 1: ゼロからのスタート準備（必要なものを揃える）

まずは、AIを動かすための土台作りです。この手順は最初の一回だけ必要で、Windows・Mac共通の作業です。

1-1. Vercelの無料アカウントを作成する

作ったアプリを置くための「インターネット上の土地」を確保します。

ブラウザ（SafariやGoogle Chromeなど）を開き、Vercelの公式サイト（ https://vercel.com/signup ）にアクセスします。
画面上の【Sign Up】（登録）ボタンをクリックします。
プラン選択画面が出たら、無料の【Hobby】を選びます。
名前を入力する欄が出たら、ご自身の名前（ローマ字）を入力して【Continue】を押します。
「Continue with GitHub」や「Continue with Google」などのボタンが出ます。一番簡単な【Continue with Google】を選び、お持ちのGoogleアカウント（Gmailアドレス）でログイン・連携を完了させてください。

1-2. Node.js（ノード・ジェイエス）をインストールする

Vercelのシステムをパソコン上で動かすための「翻訳機」のようなソフトを入れます。

ブラウザで Node.jsの公式サイト（ https://nodejs.org/ja/ ）にアクセスします。
画面の左側にある 「〇〇 LTS（推奨版）」 と書かれた大きな緑色のボタンをクリックし、ファイルをダウンロードします。
ダウンロードしたファイルをダブルクリックして開きます。
インストール画面が開くので、【続ける】（Windowsの場合は【Next】）と進め、画面の指示に従ってインストールを完了させます。

1-3. Codex Appをインストールする（※Macのみ）

いよいよ主役のAIアプリを入れます。

ブラウザでOpenAIのCodex関連のダウンロードページにアクセスします。
【Download for macOS】というボタンをクリックし、.dmg ファイルをダウンロードします。
ダウンロードしたファイルをダブルクリックして開きます。
新しいウィンドウが開くので、Codexのアイコンを、隣にある「Applications（アプリケーション）」フォルダのアイコンに向かってドラッグ＆ドロップします。これでMacにインストール完了です。
Macの「アプリケーション」一覧から Codex を探して起動します。（※「インターネットからダウンロードされたアプリケーションです。開いてもよろしいですか？」と聞かれたら【開く】をクリックします）。
アプリが開いたら、お持ちのOpenAIアカウントで【Sign In】（ログイン）を行います。

Step 2: 実践！バイブコーディングで「おみくじアプリ」を作ってみよう

準備が整いました！今回は実践的なロールプレイとして、**「今日のおみくじアプリ」**を作ってみましょう。AIにお願いして、気に入らないところを修正してもらう流れを体験します。

2-1. アプリの「空箱（フォルダ）」を作る

Macのデスクトップ画面の何もないところで右クリックし、「新規フォルダ」 を作成します。
フォルダの名前を半角英数字で omikuji-app に変更します。

2-2. Codex Appでプロジェクトを開始する

Codex Appの画面で【Open Folder】（または【Open Project】）というボタンをクリックします。
先ほどデスクトップに作った omikuji-app フォルダを選択して【開く】をクリックします。

2-3. AIへの指示第1弾（まずは土台作り）

Codex Appの下部にあるチャット入力欄に、以下の文章をコピー＆ペーストして、【Enter】キーで送信します。

指示文 1回目（ここからコピー）:

Next.jsという技術を使って、「今日のおみくじアプリ」を作ってください。

画面に「おみくじを引く」というボタンがあり、押すと「大吉」「中吉」「小吉」「凶」のどれかがランダムで表示されるようにしてください。

必要な設定やパッケージのインストールはすべてあなたに任せます。

送信後、AIが勝手に考え始め、画面に英語の文字が流れます。ここではマウスやキーボードを触らず、コーヒーでも飲みながら数分間見守ってください。

AIが「完了しました。プレビューで確認できます」と返事をしてきたら、簡易的なおみくじアプリの完成です！

2-4. AIへの指示第2弾（デザインと機能の修正）

出来上がったアプリを見て、「ちょっとデザインが味気ないな」「もう少し面白くしたいな」と思ったとします。ここからがバイブコーディングの真骨頂です。 AIに「修正のお願い」をしましょう。

続けてチャット欄に、以下の文章を入力して送信します。

指示文 2回目（ここからコピー）:

ありがとうございます！ちゃんと動きました。もう少しアレンジを加えます。

デザインを「和風」で「神社っぽい」リッチな見た目にしてください。背景色なども工夫してください。
ボタンを押してから結果が出るまでに、3秒間「シャカシャカ…」という文字を表示して、じらしてから結果を出すようにしてください。

するとAIは「わかりました！」と、先ほど自分で書いたコードを自動的に書き換えてくれます。

このように、「作ってもらう → 気に入らない部分を日本語で伝える → 修正してもらう」 のキャッチボールを繰り返すことで、プログラミングの知識がなくても理想のアプリに近づけていくことができます。

Step 3: 世界に向けて公開する（Vercelへのデプロイ）

アプリが完成したら、最後はそれをインターネット上に公開（デプロイ）します。

ここでは、AIがあなたのMacの裏側のシステム（ターミナル）を使って操作を行いますが、セキュリティ上の理由で「人間の承認」が必要な場面がいくつかあります。 ここが一番の山場です！

3-1. デプロイの指示を出す

Codex Appのチャット入力欄に、以下の文章をコピー＆ペーストして送信します。

指示文（ここからコピー）:

最高です！それでは、このおみくじアプリをVercelにデプロイして、インターネット上に公開してください。

Vercel CLIを利用するため、ターミナルで npx vercel コマンドを実行して進めてください。

3-2. 🚨 【超重要】人間による「権限の許可」と「アシスト」

AIが黒い画面（ターミナル）で作業を始めます。しかし、以下の3つのタイミングで作業が「ピタッ」と止まり、あなたのアシストを待つ状態になります。焦らず順番に対応してください。

① Macの「セキュリティ権限」を聞かれたら

AIがシステムを操作しようとした瞬間、Macの画面中央にポップアップが出ることがあります。

画面表示： 「"Codex"がデスクトップフォルダ内のファイルにアクセスしようとしています」など
あなたの操作： 必ず【許可 (Allow)】または【OK】をクリックしてください。

② ブラウザでの「Vercelログイン」を求められたら（★一番つまずきやすいポイント！）

AIがインターネット（Vercel）と通信するためには、あなたのVercelアカウントの鍵が必要です。ターミナルの文字の動きが止まり、以下のような英語が出ます。

画面表示： Vercel CLI wants to log you in.（ログインしてください）
あなたの操作：
1. AIはセキュリティ上、代わりにログインボタンを押せません。この文字が出ると同時に、自動的にSafariなどのWebブラウザが開きます。
2. ブラウザ画面に【Log in to Vercel】というボタンが出るので、それをクリックしてログインを完了させます。
3. ブラウザ上に「Success! You are now authenticated.（認証成功！）」と表示されたら、ブラウザを閉じて、再びCodex Appの画面に戻ります。
  (※もしブラウザが自動で開かない場合は、ターミナルに表示されている https://vercel.com/verify... というURLをコピーして、自分でブラウザに貼り付けて開いてください)

③ ターミナルで「質問（Y/N）」が出たら

ログイン成功後、ターミナル上でVercelからアプリの設定についていくつか英語で質問されます。カーソルがチカチカ点滅して止まっていたら、あなたがキーボードで答えてあげます。

質問: Set up and deploy ~/Desktop/omikuji-app? [Y/n] (ここをデプロイしますか？)
- あなたの操作: キーボードの【Y】を押して、【Enter】キーを押す。
質問: Which scope do you want to deploy to? (どのアカウントに公開しますか？)
- あなたの操作: ご自身の名前が出ているはずなので、そのまま何も入力せず【Enter】キーを押す。
質問: Link to existing project? [y/N] (既存のプロジェクトに繋ぎますか？)
- あなたの操作: 今回は新規作成なので、【N】を押して、【Enter】キーを押す。
質問: What's your project's name? (プロジェクト名は何にしますか？)
- あなたの操作: デフォルトの名前が出ているので、そのまま【Enter】キーを押す。
質問: In which directory is your code located? ./ (コードはどこにありますか？)
- あなたの操作: そのまま【Enter】キーを押す。

3-3. 公開完了！URLを確認する

上記のアシストを終えると、AI（ターミナル）が再び猛スピードで文字を出力し始めます。

1〜2分ほど待つと、ターミナルの最後に以下のような文字が表示されます。

✅ Production: https://omikuji-app-xxxx.vercel.app

おめでとうございます！ この https://~ から始まるURLが、あなたのアプリの公開アドレス（世界中からアクセスできるURL）です。

このURLをスマホに送って開いてみてください。あなたがAIに指示して作った「おみくじアプリ」が、世界中どこからでも遊べるようになっています！

いかがでしたでしょうか。

「プログラミング言語を覚える」のではなく、「AIへの指示の出し方（バイブス）」と「ツールの使い方」さえ分かれば、今日から誰でもアプリ開発者になれる時代です。

ぜひ、この感動を忘れないうちに、あなたの好きなアイデアをAIにぶつけてみてください！