この記事を読んでわかること

・CodexでWebアプリを作る手順
・Codexに伝わりやすい指示の出し方
・機能追加や修正の進め方

この記事では制作手順の解説に加えて、完成版のAI画像生成プロンプトメーカーもそのまま利用できます。

■読む前と読んだ後

・何を指示すればいいか分からない
→ 実際のプロンプトを参考に作り始められる

・コードを書けないから難しそう
→ 日本語の指示だけでアプリを形にできる

・作成後の改善方法が分からない
→ 機能追加や修正を段階的に進められる

※本コンテンツはnoteでも同内容を販売しています。すでにnote版を購入済みの方は、重複購入にご注意ください。

AI画像を生成していると、毎回プロンプトを考えるのが地味に面倒なんですよね。

「髪型はこれで、表情はこれで、背景は……」

と毎回入力するのも大変なので、今回はキャラクター設定をプルダウンから選び、「プロンプトを作成」ボタンを押すだけで、日本語と英語のプロンプトを作れるツールにしてみました。

まずは無料版をWeb上に公開しています。

無料版：AI画像生成プロンプトメーカー

https://ai-prompt-maker-free.aisu-lab.workers.dev/

まずは簡単なプロンプトメーカーを作る

最初から細かい機能まで作り込むのではなく、まずはCodexに「こういうツールを作りたい」と伝えて、シンプルな形から作っていきます。

今回、最初にCodexへ送った指示はこんな感じです。

【Codexへのプロンプト】

プログラミング初心者です。

ブラウザ上で使える「AI画像生成プロンプトメーカー」を作ってください。

ユーザーが項目を選択し、「プロンプトを作成」ボタンを押すと、選択した内容を1つのAI画像生成用プロンプトとしてまとめるWebアプリにしてください。

まずは以下の項目を用意してください。

・性別
・年齢感
・髪型
・髪色
・体型
・表情
・ポーズ
・背景

各項目はプルダウン形式で選べるようにしてください。

選択した内容をもとに、

・日本語プロンプト
・英語プロンプト

の両方を生成してください。

日本語と英語それぞれに「コピー」ボタンを付けてください。

HTML、CSS、JavaScriptだけで動くシンプルなWebアプリにしてください。

外部API、データベース、ログイン機能は使用しないでください。

必要なファイルをすべて作成してください。

完成後、初心者でも分かるように起動方法を説明してください。

この時点では、かなりシンプルな内容です。
まずは、「項目を選ぶ > プロンプトを作る」
という最低限の流れが動けばOK、くらいの感覚で進めました。

実際に使ってみる

使い方はかなり簡単です。

「キャラクターを設定」の項目から、性別や年齢感、髪型、髪色、表情、ポーズ、背景などを選択します。

そのあと中央の「プロンプトを作成」ボタンを押すと、日本語と英語のプロンプトがそれぞれ表示されます。

あとはコピーして、普段使っているAI画像生成サービスに貼り付けるだけです。

英語プロンプトを毎回自分で考えなくてもいいので、個人的にはこの時点でも結構便利でした。

ここから機能を増やしていく

基本的なプロンプト生成はできるようになりましたが、実際に使ってみると、

「もう少し細かく設定したい」
「毎回同じような設定を選ぶのが面倒」
「背景やライティングも指定したい」
など、欲しい機能がいろいろ出てきました。

そこでCodexに追加の要望を伝えながら、少しずつ機能を増やしていきます。

最終的な完全版では、無料版に加えて以下のような機能を追加しました。

・用途プリセット／雰囲気プリセット
・より細かいキャラクター設定
・詳細設定
・ライティングやカメラ設定
・追加したい要素の自由入力
・ネガティブプロンプト
・マイプリセット保存
・成人向け設定

無料版は「まずプロンプトメーカーを試してみる」ためのシンプルな構成ですが、完全版ではかなり細かく調整できるようにしています。

次の章からは、完成版の機能や実際に追加した設定、Codexへ送った指示などを順番に紹介していきます。