手作業は不要！ Codex を活用して 1 日で収益性の高い Web サイトを立ち上げるステップバイステップガイド

Figma、React、Supabase、Vercel の知識は一切不要です。この記事では、Codex を使って面倒な手続きをすべてスキップし、収益化できる Web サイトを立ち上げる方法を解説します。

sudoku.com は月間 1,269 万 のオーガニック検索を獲得しています（SimilarWeb 2026 年 4 月データ）。中国語話者の開発者の多くは、まだこうした米国市場向けのテキスト／数字ゲームサイトを作っていません——ここに情報格差があります。

先週、私は NYT Connections スタイルの単語グループ分けゲームサイト 「Daily Word Categories」 を 1 日で作りました。

デザイン経験ゼロ、フロントエンド／バックエンドのコードもゼロ、月額費用は Codex のサブスクリプション $20 だけです。残り 4 つのツールはすべて 無料から始められます。

プロセス中、私はコマンドを 1 行も入力せず、マウスも 1 回もクリックしませんでした——Codex がコマンドを実行し、Codex がコンピュータ上のあらゆるアプリ（ブラウザ / Finder / デザインソフト）を操作し、Codex がデータベースを設定してくれました。

さらに良いことに、Codex はブラウザを占有せずに複数のバックグラウンドタブで並行して実行できるようになりました。つまり、Codex がアカウント登録や DNS 変更を行っている間、あなたは同時に他の作業をコンピュータで行えるのです。

デザインを学ぶ必要も、コードを書く必要も、デプロイコマンドを覚える必要もありません——あなたは Codex と話すだけです。

Codex は今、3 つのことができる——これがあなたの「ゼロ労力」アプローチの鍵です

中国語コミュニティの多くの人は、まだ Codex を「AI コーディングツール」だと思っています。しかし実際には、2026 年 5 月以降、Codex は 3 つのことができ、この 3 つを組み合わせる = サイドプロジェクトのサイトを完全に運用することになります：

▸ CLI コマンド実行: npm / git / pnpm / vercel コマンドを実行。使用時: ツールのインストール / プロジェクトの開始 / デプロイ。

▸ Computer Use: コンピュータ上のあらゆるアプリを操作——Chrome / Safari / Finder / デザインソフト / あらゆる GUI。一度許可すれば、Codex がクリック、入力、スクリーンショットを代行。Chrome には専用拡張機能あり（ログイン済みセッションを最も安定して使用）。使用時: 5 つのアカウント登録 / DNS 変更 / Search Console 設定 / コマンドラインがないアプリの操作。

▸ MCP サービス呼び出し:（Supabase / GitHub / Stripe などに対応）外部サービスの API と設定を直接呼び出し。使用時: データベーススキーマの設定 / リポジトリ作成 / 支払い設定。

このスタックとは？

5 つのツールの組み合わせ、1 つ有料 + 4 つ無料から開始：

Codex — メインドライバー + Computer Use + MCP の 3 つ → 月額 $20（サブスクリプション）
Open Design — デザイン案生成（オープンソース、9 つの CLI に対応） → $0（ローカルファースト）
Supabase — データベース + ログイン + ファイルストレージ（MCP インターフェースあり） → $0（無料枠 500MB DB / 50k MAU）
Vercel — デプロイ + ドメインホスティング + CDN → $0（無料枠月 100GB 帯域）
Replicate — AI モデル API（必要な場合） → 従量制 1 回 $0.001〜0.01
ドメイン（必須） — お好みで → 年間 $10（Namecheap）

→ 初年度の総費用は約 $250（$20×12 + $10 ドメイン、従量 API は除く）。

なぜ Daily Word Categories をデモに選んだのか？

米国市場のテキスト／数字ゲームは 2026 年のブルーオーシャンです。3 つのデータポイント（公開情報）：

sudoku.com: 月間 1,269 万のオーガニック検索（SimilarWeb 2026 年 4 月）、まだ成長中。
NYT Games: New York Times によると、1,000 万以上のデイリーアクティブユーザー。
"Connections hints today" のようなロングテールキーワードは、膨大なデイリー検索ボリュームがある（Google Keyword Planner 調べ）。

Daily Word Categories が AI サイト構築に最適な理由：

AI が無限のレベルを直接生成 — 毎日 16 単語 + 4 つのテーマカテゴリー、Codex が一文で生成。
初心者でも 5 秒でルールを理解 — ミニマルな UI、複雑な状態は不要。
収益化の道筋が明確 — AdSense（高トラフィック） + アフィリエイト（類似ツールの宣伝） + プレミアム購読（デイリーヒント）。
情報格差が存在 — ほとんどの中国語開発者は米国のテキストゲームを手掛けておらず、競争が少ない。

Open Design とは？なぜインストールが必要か

Open Design は、@tuturetom の nexu-io チームがオープンソース化した Claude Design の代替品です（GitHub: github.com/nexu-io/open-design）。

3 つのコア機能：

ローカルファースト: コンピュータにインストール、データはアップロードされません。
BYOK（Bring-your-own-key）: コストをコントロール可能。
19 のスキル + 71 のブランドグレードデザインシステム: E コマース / SaaS / ゲーム / 個人サイトに対応。
9 つの CLI ユニバーサル: Codex / Claude Code / Cursor / Gemini / OpenCode / Qwen / Copilot / Hermes / Kimi に対応。

これにより、バイブコーディング派の最大の弱点——UI デザイン——を解決します。

具体的な操作方法は？

5 ステップで完了します。各ステップでは「あなたがやること / Codex が代行すること」を明確にします——あなたの作業は音声／テキストのみです。

1. Codex が 5 つのアカウントを登録（15 分）

あなたがやることは 3 つだけ: Codex に「5 つのアカウントを登録して」と伝える → 画面を見ながらメール / パスワード / 確認コードを入力 → OAuth 認証時に「許可」をクリック。

Codex が代行: Computer Use でブラウザを起動 → 各サイトの登録ページを順に開く → フォームを自動入力 + OAuth リダイレクト処理 + アカウント情報を記録 → 確認を促して次のサイトへ。

これを Codex に送信：

"Computer Use を使って、順番に GitHub / Vercel / Supabase / Namecheap / Replicate のアカウントを登録して。GitHub OAuth ログインを優先（Vercel / Supabase が対応）。メールとパスワードは私が入力するので、あなたは処理を進めて、最後に 5 つのアカウント情報をリストにまとめて。"

Codex が自動で Chrome を起動（既存セッションで安定する Chrome 拡張機能推奨）し、サイトを順に処理します。あなたは画面を見て、個人情報を入力し、「許可」をクリックするだけです。

2. Codex が Open Design + 全ツールチェーンをインストール（10 分）

あなたがやることは 2 つだけ: 1 つのプロンプトを送信 → 各ステップで 'y' を押して同意。

Codex が代行: ローカル環境を確認 → 不足しているものをインストール → Open Design をインストール → 起動 → すべてのコマンドを実行 + 進捗を表示 + 完了時にアクセスアドレスを通知。

送信：

"github.com/nexu-io/open-design にアクセスして、Open Design を ~/Tools/open-design にインストールして。Mac ユーザーは公式署名済みアプリを優先。Supabase CLI + Vercel CLI もインストールして。Open Design のローカルアドレスと 3 つのツールのバージョンを教えて、インストールを確認したい。"

Codex が自動実行：

bash

1# これらは Codex が実行します。あなたは見ているだけ
2git clone https://github.com/nexu-io/open-design ~/Tools/open-design
3cd ~/Tools/open-design && pnpm install && pnpm dev
4npm install -g supabase
5npm install -g vercel

3〜8 分で完了し、Codex が Open Design のローカルアドレスを教えてくれます。

3. Codex が Open Design を操作してデザイン案を生成（5 分）

あなたがやることは 2 つだけ: ゲームサイトの説明を送信 → 気に入ったデザインを 1 つ選択。

Codex が代行: Computer Use で Open Design インターフェースを起動 → デザイン要件を入力 → 生成を待機 → 3 つの候補を提示 → 選択されたデザインをプロジェクトディレクトリに保存。

送信：

"Computer Use を使ってローカルの Open Design を開いて。Daily Word Categories ゲームサイトのデザインを作成して——NYT Connections 風で、毎日 16 の英単語を 4 グループに分けるタイプ。ダークテーマ、モバイルファースト、NYT Games のようなミニマルスタイル。3 つの候補を出して、選べるようにして。"

Codex が自動で Open Design インターフェースを操作し、画像を生成します。

4. Codex がフロントエンドを作成 + Supabase MCP でデータベースを設定（15〜20 分）

あなたがやることは 2 つだけ: 機能説明のプロンプトを送信 → Codex の完了を待つ。

Codex が代行: React フロントエンドを作成 + Supabase MCP を使ってデータベーススキーマ / RLS / API を直接設定 → cron ジョブを自動設定（Supabase ダッシュボードを開く必要なし）。

送信：

"2 番目のデザイン案を Next.js プロジェクトに変換して。Supabase MCP を使って 2 つのテーブルを直接設定：(1) puzzles（日付 + 16 単語 + 4 カテゴリー）(2) user_progress（user_id + puzzle_date + solved_at）。基本的な RLS ルールも設定して。毎日 6 時に GPT-5 を使って新しいレベルを生成する cron ジョブを設定して。"

Codex が自動で Supabase MCP を呼び出してデータベースを直接設定（SQL エディタを開く必要なし）+ フロントエンドコードを作成 + cron ジョブを設定。

7〜15 分で、localhost:3000 でプレイ可能になります。

5. Codex が Vercel にデプロイ + Computer Use で Namecheap の DNS を変更（15 分）

あなたがやることは 3 つだけ: プロンプトを送信 → Namecheap のログインパスワードを入力 → Google Search Console のパスワードを入力。

Codex が代行: CLI で git push + vercel deploy + 環境変数を同期 → Computer Use でブラウザを起動 → Namecheap 管理画面を操作して DNS 変更 → Google Search Console に切り替えて確認 + サイトマップを送信。

送信：

"新しい GitHub リポジトリにプッシュして、Vercel にデプロイし、環境変数を自動同期して。Computer Use を使って Namecheap にログインし、dailywordcat.com の DNS を Vercel が提供するネームサーバーに変更して。さらに Google Search Console を設定し、sitemap.xml を送信して。"

Codex が自動実行：

CLI 部分: git init + push + vercel deploy + env vars を同期
Computer Use 部分: ブラウザを起動 → Namecheap を操作して DNS 変更 → Google Search Console で確認 + サイトマップ送信

プロセス中、あなたは Namecheap / Google のパスワードを求められたときに入力するだけで、残りは Codex がすべてクリックします。

ドメイン解決は 20〜30 分で完了します。

この時点で、あなたは稼働中の Web サイトを手に入れています。

3 つのよくある落とし穴

落とし穴 1: Computer Use がステップ 1 / 3 / 5 で許可なしに止まる

Codex Computer Use は、各アプリを初めて操作するときに「許可」を求めるウィンドウを表示します。以前に Codex App の Computer Use を使ったことがない場合は、設定 → プライバシー → アクセシビリティ / 画面収録 で事前に Codex を許可しておくことをお勧めします。そうしないと、権限ポップアップを探して 5 分間停止する可能性があります。Chrome タスクには Chrome 拡張機能が最も安定しています。

落とし穴 2: Supabase RLS（行レベルセキュリティ）が未設定 = データベースが露出

Codex は MCP 経由で基本的な RLS を設定します。本番公開前に RLS ルールが適切かどうか必ず確認してください。詳細は次の記事で説明します。

落とし穴 3: Chrome のバックグラウンド並列タスク ≠ すべての Computer Use タスクが並列可能

5/21 の OpenAI 発表以降、Chrome 内の Codex タスクはすでにバックグラウンド並列であり、ブラウザを占有しません——ステップ 1 のアカウント登録 / ステップ 5 の DNS 変更は Chrome タスクなので、同時に他の作業ができます。

ただし: Codex がネイティブアプリ（Finder / Photoshop / ブラウザ以外のアプリ）を操作するときは、依然として順次処理です——その間はマウスを掴まない / cmd+tab で離れないで、そのステップが終わるのを待ってください。ステップ 2〜4 でローカルの Open Design とやり取りする際に、ネイティブモードを使用する場合がありますので、注意してください。

これでどんなサイトが作れるのか？

4 つのペルソナにマッチ：

米国市場向けテキスト／数字ゲームサイトを作りたい（ブルーオーシャンの選択） → Wordle バリアント / Connections バリアント / Sudoku / クロスワード

毎日のパズル回答サイトを作りたい（ロングテールトラフィック収穫機） → "Connections hints today" / "Wordle answer today" 系サイト；Sudoku トッププレイヤーは月間 1,269 万のオーガニック検索を獲得。

話題のツールサイトを作りたい（"AI XX ジェネレーター" タイプ） → 新モデルリリースに合わせたツールのランディングページ。

ログインと支払い機能付き SaaS を作りたい → Supabase auth + Stripe + Vercel = 完全な商用サイト。

月額コストと収入の見込み

1 ヶ月目: 月額コスト $20〜30 / 収入 $0〜50（構築 + Google インデックス待ち）
3 ヶ月目: 月額コスト $30〜50 / 収入 $50〜300（単一サイトのトラフィック上昇）
6 ヶ月目: 月額コスト $50〜100 / 収入 $500〜1,000+（複数サイト累積 / AdSense + アフィリエイト）

収入額は一般的な業界範囲であり、実際の AdSense / アフィリエイトダッシュボードを参照してください。参考上限: sudoku.com は単一サイトで月間 1,269 万のオーガニック検索。

最後に一言

かつてサイトを立ち上げるには 3 つの役割が必要でした: デザイナー + フロントエンド + バックエンド。あるいは 1 人が 3 ヶ月かけて 3 つのスキルを学ぶ必要がありました。

今では、1 つの Codex サブスクリプション + Open Design オープンソース = 3 つの役割すべてをカバー。月額 $20 はスターバックスのコーヒー 1 杯分程度です。

さらに重要なのは——Codex は今やコードを書くだけでなく、Computer Use を使ってコンピュータ上のあらゆるアプリを操作でき（ブラウザだけでなく、Finder / Photoshop / あらゆる GUI）+ MCP を呼び出してバックエンドサービスを設定できることです。本日（5/21）、OpenAI はさらに 1 つの機能を追加しました: Chrome タスクはバックグラウンドの並列タブで実行され、ブラウザを占有しません。初心者は本当に手作業ゼロ + 待ち時間ゼロ: あなたは音声を使い、画面を見て、'y' を押すだけで、残りの時間は Twitter をスクロールしたり会議に出たりできます。

米国市場のテキスト／数字ゲームサイトはまだブルーオーシャンです——sudoku.com の 1,269 万検索はまだ成長しており、ほとんどの中国語開発者はまだ動いていません。情報格差はお金です。

1 日選んで、この 5 つのステップを実行してみてください。一度経験すれば、新しいサイトを立ち上げるのは 30 分の仕事です。週末の予定を妨げることはありません。