Codex App Serverで画像生成アプリを作り、自分用に育てる

出典: 【超使える】Codex App Serverで画像生成アプリを作ってみた！最新のChatGPT Images 2.5を搭載したオリジナルアプリの作り方を話します

画像を作るたびに、チャットを立ち上げて頼んでいませんか？動画は、画像生成アプリの短いダイジェストから始まります。3案が一気に並ぶ画面。

いまにゅ さんは、ChatGPT の画像生成を裏側で使えるアプリを作った、と話します。聞き手からは、サムネ作りにも使えそう、という声も出ました。

同じことは、ChatGPT や Codex 単体でもできる。そう前置きして、毎回チャットを立ち上げる手間の話に入ります。

いまにゅ さん（動画の中で・2:54〜）

毎回毎回のチャット立ち上げて結構めどくさいと思うんだよね。

いまにゅ さんの説明では、手元に Codex を入れている人は、Codex App Server を使って、アプリの裏側で ChatGPT の画像生成を動かせます。チャットを毎回開く代わりに、アプリから呼ぶ形。

画面には、アプリから Codex App Server、Codex、ChatGPT の画像生成へとつながる関係の図解が出ます。いくつものチャット画面を、1つのアプリにまとめる見せ方でした。

いまにゅ さん（動画の中で・6:02〜）

裏側はコーデックスが紐づいてるんだよね。で、コーデックスが紐づいてるので、そのコデックスに紐づいた形でチャットGPTのイメージを呼び出す形になりますと。

アプリの裏側には、Codex がつながっています。その Codex 経由で ChatGPT の画像生成を呼び出す、と説明が続きます。

毎回チャットを立ち上げる手間を、アプリの裏側の Codex に移す作り。手間を道具に移す向きの話です！

私なら、毎回チャットを立ち上げる手間は道具に移します。その分の時間と頭は、何を作りたいかを決める所に使いたいからです。

5月25日の朝LIVEで、Codex App Server で作るアプリを実演しました。その回の様子は、Codex App Server で目の前の困りごとを即アプリ化した朝LIVEの記事に書きました。

私の記事より（Codex App Serverで「目の前の困った」を即アプリ化｜朝LIVE 5/25・5月25日の朝LIVEの発話）

Codex要はOpenAIにログインするとCodex搭載アプリが動く。普通にブラウザで動く。ローカルのパソコンのローカルホストで立ち上げて、ChatGPTにログインするみたいに出てくる。

あの朝、私は Codex App Server で作るアプリを実演して、AI を搭載したアプリが作れてしまう、と話しました。ログインすると Codex を載せたアプリが動く、という私の説明。裏側に Codex を載せる動画の形と、同じ向きの話です。

いまにゅ さんは、画像生成に絞って、バナー制作向けのアプリに仕立てて見せます。私の朝LIVEの実演は、AI を載せたアプリを作れる、という話でした。手元の Codex を裏側に載せる。その1点は、どちらも同じです。

バナーを頼む時、最初に何を決めますか？実演は、新しい制作を1つ作るところから始まります。題材は、セミナーの告知バナー。

頼むのは、AIセキュリティ入門講座という文字入りの、16:9のセミナーバナーです。制作の条件として、用途・比率・必ず入れる文字・配色を入れます。配色は、聞き手の答えを受けて黒と黄色になりました。

参考画像の追加欄では、画像ごとに役割を選べます。人物、商品、ロゴ、作風と配色の参考、構図の参考から選ぶ形です。例として、いまにゅ さん本人の画像を人物として入れました。

いまにゅ さん（動画の中で・4:23〜）

要は人物を入れて、例えば僕の画像を入れてみたいな形だったら、ま、そうだな。僕の画像じゃ入れますか。僕の画像としてはい。こんな感じで、はい。役割をちゃんと参考画像ごとにちょっと分けることができるんよね。

人物を入れたいなら、本人の画像を入れる。役割は、参考画像ごとに分けられる。そう話します。何の画像を、何のために渡すのか。それを欄で先に決めておく作りです。

左側の制作レシピを当てると、裏側にセットされたプロンプトで、3案が並行して作られます。レシピの例は、読みやすいサムネイルや、洗練されたバナーでした。

画面には、3案を並べて選ぶ画面と、案2で仕上げるボタンが出ます。聞き手が選んだのは、真ん中の案でした。

案2で仕上げる時には、追加で頼みます。日本語フォントらしい文字と、背景の動きで、セキュリティ感を強めたい。

いまにゅ さん（動画の中で・10:58〜）

こういう風に範囲だけ修正とかできるのは、ま、かなりいい部分で。あとやっぱりちゃんと人物って言ってたからこうやって僕の顔とかもね、ほぼ変わらず、ほぼか変わってないよね。

範囲だけ指定して直せるのは、かなり良い部分だ、といまにゅ さんは話します。人物の顔も、ほぼ変わらないまま。

条件を先に入れて、3案を並べて選び、範囲だけ直す流れ。頼み方が、順に分けてあるんです！

私なら、3案が並んだら、理屈を考える前に、違和感がないか、ピンとくるかを、自分の目で先に確かめます。

私の手元では、講座の案内バナーを、AI に頼んで4版まで作り直しました。

4版目は、顔写真と、3版目のバナーを参照画像として渡し、Codex 経由で作りました。確定したのも、4版目です。

顔写真と前の版のバナーを参照画像として渡す形は、参考画像を使い分ける動画の作りと、同じ向きです。

手軽に作れる道具ほど、先に知っておきたい注意はありませんか？いまにゅ さんは、実演の途中で注意点を話し始めました。

ChatGPT の画像生成を呼ぶ時の品質は、High（高）、Auto（自動）、Low（低）を、プログラム側で指定できる、という話から入ります。

いまにゅ さん（動画の中で・6:26〜）

ちょっとハイっていうのに設定できずにOとなったりとかローになったりするから、若干チャットGPTとかチャットGPTワーク側で作るバナーよりもクオリティが下がる場合も全然あります。

でも、High に設定できず、Auto や Low になる場合があります。ChatGPT で直接作るバナーより、品質が下がることも十分ある。そんな注意でした。

本格的に作るなら ChatGPT の API をつなぐ案もあるけれど、今のアプリには載せていない、とも添えていました。

生成中の画面には、検品しています、と出ます。Codex を挟んでいるので、画像を作るだけではありません。チェックもしてくれる、と話します。

いまにゅ さん（動画の中で・7:00〜）

これちゃんと検品してますってあるんだけども、これ裏側でコデックス挟んでるからコデックス別に画像生成するだけじゃなくて画像生成ももちろんできるんだけれどもいわゆるちゃんと画像チェックしてくれてもいるんで

Codex 経由の生成は、チェックと裏の Codex の動きの分、やや遅め。それでも、ボタンを押せば勝手に作ってくれる点はバナーを普段作る人に向く、と話をまとめます。

遅さと画質の限界を、使い始める前に言う運び。使う人への、最初の説明になっているんですよね！

私なら、遅さと画質の限界は、使う前に伝えます。期待を先に上げ過ぎず、中身をしっかり見たいからです。

ここで、私の手元の画像生成の話。Codex は 3:2 の画像を返し、道具が中央で 16:9 に切って保存します。

記録にあります。図解23枚のうち、目視で複数枚、上の見出しが欠けていました。

切る前の元の画像を使うと、直りました。生成し直しは、要りませんでした。

品質の指定が通らない場合も、画像の切り取りで見出しが欠けることも、先に知っておけば頼み方を変えられます！

このアプリを、どうやって作ったのか。動画の後半は、作り方の話に移ります。AI に作らせた初版の見た目に、物足りなさを覚えたことはありませんか？

出発点は、要件を伝えること。いまにゅ さんは、画像生成スタジオのようなアプリを Codex App Server で作りたい、と伝えるところから始めたと話します。

いまにゅ さん（動画の中で・13:09〜）

それこそ最初3案作るねとか何するねとかっていうのを要件を詰めていって、ま、ここはもう普通に壁打ちだよね。ま、AIとの壁打ち。ま、僕の今までの動画で何度もお伝えしてるようにAIとどんどんどんどん要件を、ま、ブラッシュアップしていき、その要件でいいなと思ったらそれを元に実装してもらったと。

最初に3案を作るといった要件は、AI との壁打ちで詰めていきます。よいと思えた要件を元に、実装へ。

ただ、UI と UX は Codex だけだと難しい、と続けます。聞き手の相づちを受けて、実装は Codex、デザインは Claude Code と使い分けていると話しますね。

いまにゅ さん（動画の中で・13:39〜）

そうでこれは元々ね、最初は実はコーデックスで作ったものは、まあ、コーデックス感あるというか、デザインは正直微妙でした。それに対してクロードコードで出来上がったアプリケーション、動いてるアプリケーションに対して新たにデザインのみを色々パターン作らせて、で、いくつかこのデザインをブラッシュアップし、で、ブラッシュアップしたデザインでいいなと思ったものをこの本番に適用したっていう流れを取ったのね。

Codex で作った初版は、Codex らしさが出て、デザインは微妙だったと話します。そこで動いているアプリに、Claude Code でデザインの案だけを何通りも作らせ、磨いた物を本番に適用したんですね。

動いているアプリの上で、デザインの案だけを何通りも並べてから選ぶ順番。横に広げて、縦に選ぶ形ですね。

私なら、案は AI に横に広げてもらい、どれを本番にするかは縦に掘って自分で決めます。

Claude と Codex の使い分けで、画面のデザインを AI にやり直させた話は、Claude と Codex の使い分けに迷う人へ、自作アプリの形を整理した記事にも書きました。

私の記事より（ClaudeとCodexの使い分けに迷う人へ、4人が見せた自作アプリの形・10月13日のデザインのやり直し）

プロが使う道具のUIを調べてほしい。人が作り込んだような、AI臭くない見た目にしてほしい。そう伝えて、全部やり直しを頼みました。

引用は、10月13日に画面のデザインを AI に作らせた時の話ですね。私は、AI っぽいデザインはだめだと伝えました。見た目をそのままにせず、作り直してもらう進め方は、動画の流れと近いですね！

動画は、仕上がりと書き出しの画面に進みます。作った画像や直した指示は、後で見返せる場所に残っていますか？

修正版が出ます。粗さは残るものの、指示の伝え方しだいで品質は上げていける、と話しますね。

書き出しは、PNG・JPEG・WebP とファイル名を決めて保存できます。1枚書き出すと、PNG で保存されますね。制作レシピは、レシピ名とルールを入れて新しく作れます。

いまにゅ さん（動画の中で・16:04〜）

しかもこれこうやって溜まってるのは基本的にあのローカルのウェブアプリなので、つまり自分のフォルダー内にどんどんどんどんこの情報は溜まっていくので、今こうやってデータベースとか使っているわけではなくここに溜まっているとこんな感じに入っているという、ま、そんな感じのアプリケーションです。

ローカルの Web アプリなので、情報は自分のフォルダの中に溜まっていく作り。データベースは使っていない、と説明します。

修正履歴（やりとりの記録）には、スタジオ側といまにゅ さん自身のフィードバックが残ります。画面には、背景にあしらいを足してほしい、文字が崩れている、という赤枠のやりとり。

いまにゅ さん（動画の中で・16:56〜）

こんな風にきちんとあの履歴残ってるのやり取りの記録。スタジオ側と僕自身のフィードバックの内容してるので、なんかこの履歴を見ることもできるし

やりとりを、後から見返せる作りですね。できれば修正のところに、どんなフィードバックで出来上がったかも入っているといい、と希望も話します。

検品の結果は、点数とコメントで出ます。画面には95点、90点の表示が見えますね。参考画像の追加や検品し直し、別サイズへの展開、この作り方のレシピ化もできます。

使った指示も、画面で見られます。中身は、いまにゅ さんの言葉を Codex が広げ、自動で足した指示。話を元に、よりよいプロンプトを作る形だと説明します。

作った画像と、直した指示と、検品の結果が一か所に並ぶ作り。後から見直す人の目線で組まれていますね。

私なら、うまくいった指示は見本として残して、次に使います。型と到達水準が、手元に残るからです。

いまにゅ さんは、履歴と制作レシピを、アプリの中に持たせています。画面の点数は、そのアプリの検品の表示です。

動画の終わりは、作り手からの呼びかけです。渡された道具を、そのまま使い続けていませんか？

いまにゅ さんは、細かい部分までは作り込んでいない、と話します。大枠の流れはできている、という位置づけですね。

いまにゅ さん（動画の中で・15:11〜）

是非僕のものをそのまま使うとかじゃなくて改善してって欲しいです。ベースがあるので、このベースのデザインとか機能仕組みがもう出来上がってるわけなので、これを元にいいものを作ってって欲しいなっていう風に思ってるので

呼びかけの中心は、そのまま使わずに改善してほしい、という一言。デザインと機能と仕組みのベースがあるので、それを元によい物を作ってほしい、と続けます。

まとめでは、UI と UX と機能は研ぎ澄ましたつもりでも、改善の余地はまだある、と話します。

いまにゅ さん（動画の中で・18:04〜）

まだまだ改善していける余地はあると思ってるので、ま、是非ぜひあの受け取っていただきこれをベースにご自身オリジナルの画像制作スタジオ、ま、それこそバナーを量産するものとかもいいですよね。

例に挙がるのは、バナーを量産する物。これをベースに、自分オリジナルの画像制作スタジオを作ってもらえると面白い、と結びます。

受け取った物を、そのまま使わずに育てる呼びかけ。直しながら使い続ける向きの話ですね。

私なら、受け取った物は、そのまま使わずに手をかけて育てます。手をかけながら育てる時間も、ワクワクの一部ですから！

配られた物を自分の環境に直させる話は、Codex App Server でアプリを自分仕様に改造する実演の記事の中で話しています。

私の記事より（Codex App ServerでShopifyテーマをZIPで丸ごと作る！アプリを”自分仕様”に改造する実演・6月10日の朝LIVEの発話）

テコでもこっちは動かんぞという感じで、全部向こうにやらせる、手を尽くしてもらうみたいな姿勢で本当に行くのが。それが実はたった5分で終わることなんだけど、1日かけて仕組み化できたおかげで、1年間毎日5分が楽になる。

6月10日の朝LIVEで、私は配られた物を自分の環境に直させる話をしました。手を尽くしてもらう姿勢と、1日かけて仕組み化すると毎日が楽になること。その両方を話しています！

仕組みにして積み上げる向きは、改善して育ててほしいという動画の呼びかけと近いですね。

いまにゅ さんの動画は、Codex App Server で作った画像生成アプリを6つの話で見せます。裏側に Codex を載せる話、3案から選ぶ話、遅さと画質の注意。実装とデザインの分け方、書き出しと修正履歴と検品。受け取って育てる話です。

画像生成を Codex 経由にすると、手元の道具から呼べます。ただし、やや遅く、画質の High が Auto や Low になる場合もある、といまにゅ さんは話します。使う前に知っておきたい限界。

私なら、案は AI に横に広げてもらい、どれを本番にするかは自分の目で選びます。直した指示は、履歴にもレシピにも残して、次の一枚に使います！

動画の終わりの呼びかけは、受け取った物をそのまま使わず、自分用に育ててほしい、というものでした。私も、直しながら育てる側でいたい。手をかけながら育てる時間も、ワクワクの一部です！

毎回チャットで頼んでいる画像づくりのうち、アプリの裏側に載せて手間を移せる物と、手を入れて自分で育てたい物は、どこで分かれていますか？