Codex で最初の Project を作ってみる

前回は、Codex デスクトップアプリがどんなものなのかを、自分なりに整理してみました。

ざっくり言うと、Codex は ChatGPT のように相談するだけの場所ではなく、
フォルダの中身を見ながら、実際に作業を進めてもらうための環境です。

今回は、実際に手を動かしてみます。

とはいっても、いきなり本格的なアプリを作るわけではありません。
最初から大きなものを作ろうとすると、何が起きているのか追いきれなくなります。

なので今回は、練習用の Project を作って、
小さなプロフィールページを Codex に作ってもらうところまでやってみます。

最初は小さく試す

Codex を開くと、つい大きなことを頼みたくなります。

「予約管理アプリを作って」
「社内ポータルを作って」
「Webサービスを一式作って」

こんなふうに頼めたら便利そうですが、最初の練習には少し重いです。

Codex は作業をかなり進めてくれます。
ただ、作業範囲が広すぎると、こちらも確認しづらくなります。

なので、最初は本当に小さくていいと思います。

今回は、1つの HTML ファイルだけを作ってみます。

イメージとしては、こんな感じです。

これくらいなら、Codex が何をしているのかも見やすいです。
失敗してもやり直しやすいです。

Codex を起動して、画面を見てみる

Codex デスクトップアプリを開くと、まずログイン画面が出ます。
普段使っている ChatGPT アカウントでログインします。

ログインすると、Codex の画面が表示されます。

最初は少し情報が多く見えるかもしれません。
でも、最初に見るところはそこまで多くありません。

左側に Project と Thread。
右側に Codex とのやり取り。
下に指示を入力する欄。

まずはこの3つだけ見れば大丈夫です。

練習用の Project を作る

次に、Project を作ります。

Codex でいう Project は、作業対象になるフォルダのことです。

今回は練習なので、まず空のフォルダをひとつ作りました。
名前は何でもいいのですが、ここではわかりやすく、

codex-first-test

にします。

このフォルダを Codex に登録すると、Codex はその中を作業場所として扱います。

ここで少し注意したいのは、最初から大きなフォルダを選ばないことです。

たとえば、デスクトップ全体や書類フォルダ全体を Project にする必要はありません。
関係ないファイルまで見えてしまいますし、あとで自分でも管理しづらくなります。

最初は、練習用の空フォルダで十分です。

Thread を作って、作業を分ける

Project を作ったら、その中で Thread を作ります。

Thread は、ひとつの作業のまとまりです。

今回は、

プロフィールページを作る

という Thread を作ります。

最初は Project と Thread の違いが少しわかりにくいかもしれません。

私の理解では、

Project：作業場所
Thread：その中で行う具体的な作業

です。

たとえば、ひとつの Web サイトの Project があって、
その中に「トップページを直す」「問い合わせフォームを作る」「README を整理する」という Thread があるイメージです。

今回は練習なので、Thread は1つだけで進めます。

最初の依頼を書く

Thread を開いたら、下の入力欄に依頼を書きます。

今回は、こんなふうに頼みました。

個人用のプロフィールページを作ってください。

要件：
- 1つの HTML ファイルで作成してください
- ファイル名は index.html にしてください
- 背景は深色にしてください
- 文字は白を中心にしてください
- 上部に大きなタイトルを置いてください
- タイトルは「AI Workflow Notes」にしてください
- その下に短い自己紹介文を入れてください
- 最後に問い合わせリンクを置いてください
- デザインはシンプルで、note の読者に見せても自然な雰囲気にしてください

ここで気をつけたのは、「いい感じに」だけで終わらせないことです。

Codex はかなり考えてくれますが、こちらの希望が曖昧だと、出てくるものも曖昧になります。

なので今回は、

• どんなファイルを作るか

• ファイル名は何か

• 色はどうするか

• 何を入れるか

• どんな雰囲気にしたいか

を最初に書いておきました。

細かく書くというより、Codex が迷わないようにしておく感じです。

Codex が作業しているところを見る

依頼を送ると、Codex が作業を始めます。

このとき、何をしているのかが画面上に表示されます。

ファイルを確認したり、HTML を作ったり、必要に応じて保存したり。
普通のチャットと違って、実際に Project の中にファイルを作ってくれるのが面白いところです。

ChatGPT だと、コードを文章として返してもらうことが多いです。
でも Codex では、フォルダの中に index.html が作られます。

ここで少し感覚が変わります。

「コードを教えてもらう」というより、
「作業を進めてもらう」に近いです。

作られたファイルを確認する

Codex の作業が終わったら、Project に指定したフォルダを開いてみます。

今回であれば、codex-first-test の中に index.html が作られているはずです。

コードの中身が全部わからなくても、最初は問題ありません。
まずは次の3つだけ見れば十分です。

• ファイル名が合っているか

• 依頼した内容が入っているか

• 余計なファイルが増えていないか

特に最初のうちは、Codex が作ったものを何となく受け取るのではなく、
「どこに何ができたのか」を確認するクセをつけたほうが安心です。

ブラウザで開いてみる

次に、作られた index.html をブラウザで開いてみます。

ここで初めて、ページの見た目がわかります。

タイトルの大きさ、余白、色、ボタンの見え方。
コードだけではわかりにくい部分が、一気に見えてきます。

最初の出力を見て、完璧じゃなくても大丈夫です。

むしろ最初は、たたき台だと思って見るほうが使いやすいです。

一度形にしてもらって、
そこから「ここを少し直したい」と追加でお願いする。

この流れのほうが、Codex は使いやすいと感じました。

気になるところを追加で直す

ページを見てみると、たぶん何かしら気になるところが出てきます。

たとえば、

• 余白が少し狭い

• タイトルが大きすぎる

• スマホで読みにくそう

• 問い合わせリンクが普通の文字に見える

こういうときは、そのまま Codex に追加で頼みます。

私はこんな感じで依頼しました。

全体の余白をもう少し広くしてください。
タイトルは少し小さくして、スマホでも読みやすいサイズにしてください。
問い合わせリンクはボタンのように見えるデザインにしてください。
変更後、どこを修正したのか簡単に説明してください。

ここでも、「もっとおしゃれにして」より、
気になった点をそのまま書いたほうが伝わりやすいです。

Codex は、前に作った index.html を見ながら修正してくれます。
ゼロから作り直すのではなく、今あるファイルに手を入れていく感覚です。

差分を確認する

修正が終わったら、Review や diff で変更内容を確認します。

ここは、少し面倒でも見たほうがいいと思いました。

どの行が変わったのか。
何が追加されたのか。
何が削除されたのか。

これを見てから反映すると、AI に全部任せている不安がかなり減ります。

練習用の HTML なら、そこまで神経質になる必要はありません。
でも、仕事のファイルや大事な Project で使うなら、この確認はかなり重要です。

最初のうちから、
「作ってもらう → 見る → 直してもらう → 差分を確認する」
という流れに慣れておくとよさそうです。

今回やってみて感じたこと

今回作ったのは、ただの小さな HTML ページです。

でも、この小さな流れの中に、Codex の基本がかなり入っていました。

Project を作る。
Thread を作る。
依頼を書く。
Codex がファイルを作る。
ブラウザで見る。
気になるところを直してもらう。
差分を確認する。

一度この流れを体験すると、Codex が少し使いやすくなります。

最初から大きなものを作るより、
まずは小さなページや小さな修正から始めたほうが、Codex の得意・不得意も見えやすいです。

非エンジニアでも使えるかどうかは、
「コードが読めるか」だけではなく、
「作業を小さく分けて頼めるか」が大きいのかもしれません。

今回使ったプロンプト

最後に、今回使ったプロンプトを置いておきます。
そのまま試しても大丈夫です。

個人用のプロフィールページを作ってください。

要件：
- 1つの HTML ファイルで作成してください
- ファイル名は index.html にしてください
- 背景は深色にしてください
- 文字は白を中心にしてください
- 上部に大きなタイトルを置いてください
- タイトルは「AI Workflow Notes」にしてください
- その下に短い自己紹介文を入れてください
- 最後に問い合わせリンクを置いてください
- デザインはシンプルで、note の読者に見せても自然な雰囲気にしてください

追加修正は、こんな感じです。

全体の余白をもう少し広くしてください。
タイトルは少し小さくして、スマホでも読みやすいサイズにしてください。
問い合わせリンクはボタンのように見えるデザインにしてください。
変更後、どこを修正したのか簡単に説明してください。

まとめ

今回は、Codex を使って最初の Project を作り、小さな HTML ページを作ってみました。

やってみる前は、少し難しそうに見えました。
でも、流れを小さく分けると、思ったより入りやすいです。

最初に覚えることは、それほど多くありません。

Project は作業場所。
Thread は具体的な作業。
依頼はできるだけ具体的に書く。
作られたものは必ず確認する。

この4つだけ意識しておけば、最初の一歩はかなり踏み出しやすいと思います。

次回は、Codex に修正を頼むときのコツをもう少し整理してみます。

うまく伝わる依頼の書き方、失敗しやすい頼み方、作業を小さく分ける考え方などを、実際に使いながらまとめていきます。