先日公開したAI画像生成プロンプトビルダーは、日本語のGUIから英語プロンプトを自動生成するツールだ。HTML・CSS・JavaScriptの単一ファイルで動き、WordPressのカスタムHTMLブロックにそのまま埋め込める。この記事では、なぜこのツールを作ったのか、どう設計したのか、コードの構造はどうなっているのかを整理する。
なぜ作ったのか
「画像生成 プロンプト」「AI 画像生成 プロンプト」「Stable Diffusion プロンプト 書き方」といったキーワードには継続的な検索需要がある。実際に検索してみると、プロンプトの「書き方」を解説する記事は多いが、その場で使えるインタラクティブなツールはほぼ存在しない。テキストで読んで理解するのと、ボタンをクリックして即座にプロンプトが出来上がるのでは、ユーザー体験がまったく違う。
特に日本語ユーザーにとっては、英語プロンプトのハードルが高い。「写実的」がphotorealisticだと知っていても、それを構図や光の指定と正しく組み合わせるのは別の話だ。日本語GUIで選択するだけで最適化されたプロンプトが出る仕組みなら、その障壁を取り除ける。
設計思想
カテゴリー選択式にした理由
画像生成プロンプトは「被写体」「画風」「構図」「光」「品質」「ネガティブ」の6つの要素に分解できる。自由入力だけだと何を書けばいいか迷うが、カテゴリーごとに選択肢を提示すれば「選ぶだけ」で完成する。各カテゴリーの選択肢は、Stable Diffusion・Midjourney・DALL-Eの実際のプロンプトガイドやコミュニティで頻出するタグを調査して選定した。
マルチモデル対応
Stable Diffusionはカンマ区切りのタグ形式、Midjourneyはパラメータ付きのテキスト、DALL-Eは自然言語と、モデルによって最適なプロンプト形式が異なる。ビルダーでは上部のタブでモデルを切り替えると、同じ選択内容でも出力形式が自動的に変わる仕組みにした。
日本語→英語の変換ロジック
被写体の入力欄には日本語をそのまま入力できる。内部に約60語の日本語→英語変換辞書を持っていて、「猫」→cat、「桜」→cherry blossomのように自動変換する。助詞（の、で、に、を等）は除去し、変換辞書にない単語はそのまま残す。完璧な翻訳ではないが、よく使う被写体の組み合わせはほぼカバーできる。
コードの構造
全体はHTML・CSS・JavaScriptの単一ファイルで構成されている。WordPressのカスタムHTMLブロックに貼り付けるだけで動くように、外部ライブラリへの依存はゼロにした。
CSS設計：スコープとテーマ
すべてのCSSセレクタを#aipb-rootでスコープしている。WordPressテーマのスタイルと衝突しないためだ。CSS変数で色やサイズを管理しているため、テーマカラーの変更も容易。背景のグロー効果はCSSのfilter: blur()で、カードのガラスモーフィズムはbackdrop-filter: blur()で実装している。
JavaScript設計：状態管理とリアルタイム更新
状態は1つのオブジェクト（model, subject, styles, comps, lights, qualities, negs）で管理している。ユーザーがチップをクリックすると状態が更新され、update()関数が呼ばれてプロンプト表示とサマリーが再描画される。即時関数（IIFE）で囲んでグローバルスコープの汚染を防ぎつつ、コピー・リセット・削除の関数だけwindowに公開している。
プロンプト生成ロジック
buildPrompt()関数がモデルに応じてプロンプト文字列を組み立てる。Stable Diffusionでは品質タグを先頭に配置（重要度が高いため）、被写体、スタイル、構図、光の順で結合する。Midjourneyでは末尾に--v 6パラメータを付加。DALL-Eでは「Style:」「Composition:」「Lighting:」のラベル付き自然文にする。
WordPressへの埋め込み方法
Gutenbergエディタで「カスタムHTML」ブロックを追加し、ツールのHTMLコードをそのまま貼り付ける。以上。CSSはすべて#aipb-rootでスコープされているので、テーマのスタイルに影響を与えない。JavaScriptもIIFEで囲んであるため、他のスクリプトとの干渉もない。
投稿にはWordPress REST APIを使った。wp.apiFetchで/wp/v2/postsにPOSTし、contentフィールドにGutenbergブロックマークアップ（<!-- wp:html -->で囲んだツールHTML）を含める。管理者権限であれば<script>タグもそのまま保存される。
AIツールの活用
このツールの設計・実装にはClaude Codeを活用した。プロンプトビルダーのHTML/CSS/JS全体をClaude Codeに生成させ、WordPressへの投稿もREST API経由で自動化した。人間が行ったのは、ツールのコンセプト設計、各カテゴリーの選択肢の選定方針、デザインの方向性指定の3つ。コードの実装からWordPressへのデプロイまではAIが一気通貫で処理した。
AIにコードを書かせるときに重要なのは、「何を作るか」と「どう見せるか」を具体的に指定すること。「プロンプトビルダーを作って」だけでは汎用的なものしかできない。カテゴリー構成、選択肢のリスト、CSSのカラーコード、レスポンシブの挙動まで明示すると、一発で使えるレベルのアウトプットが出る。
