プロンプトジェネレーター「PROMP」

課題 ─ キャラクター考案を「量産」できる仕組みがない

Stable Diffusionでキャラクター案を出すとき、プロンプトを毎回手打ちしていると語彙が偏り、試行回数も伸びません。「発想の量」を確保するには、プロンプトを組み立てる作業そのものを仕組み化する必要があると考え、専門書でプロンプトの構造を学んだうえで、ブラウザだけで使えるWebアプリとして企画しました。

検証 ─ 複数モチーフの扱いを手描きフローで整理

「モチーフは何体？」「1体ずつ設定するか、複製してから変更するか」。同じものしか出せない、状態を記憶しなければならない、モチーフごとにIDを発行する必要がある──それぞれの案のトレードオフを手描きのフローで洗い出してから実装に入り、手戻りを減らしました。

設計・実装 ─ 20カテゴリを「データ」で定義し、UIを自動生成

キャラクターデザインを目的に、モチーフ・年齢・体格・肌・表情・髪型・背景・ライティングなど20カテゴリに要素を分解し、すべてをスプレッドシート上の「定義データ」として管理。カテゴリ／表示名／ID／プロンプト／入力タイプ／アイコンを1行ずつ定義し、そのデータから画面のカードや選択肢を自動生成する構成にしました。キーワードの追加・変更はシートに行を足すだけで済み、コードを触らずに語彙を拡張できます。

カテゴリ	表示名	ID	PROMPT	入力タイプ	補足
101:年齢	子供	101:年齢01	child	ラジオ	🧒
101:年齢	20代	101:年齢04	twenties	ラジオセレクト	何代
101:年齢	〇歳	101:年齢12	{}years old	ラジオ数値入力	歳
101:年齢	年齢の任意指定	101:年齢13	─	自由入力
102:体格	スレンダーな	102:体格04	slender	ラジオ
103:肌	顔にほくろ	103:肌02	mole on face	チェックセレクト	ほくろ
104:表情	笑顔	104:表情01	smiling	ラジオ	😃
1xx:各カテゴリ	強調する	1xx:…	─	チェック強調	(重み付け)

入力タイプ(ラジオ／チェック／数値入力／自由入力／強調)もデータ側で指定するため、UI部品の出し分けは共通ロジック1つで完結。HTML / CSS / JavaScript と Bootstrap のみで構築し、サーバー側の処理に依存しない、登録不要・無料の軽量なアプリとして設計しました。

プロトタイプ ─ Figmaで画面を組み、操作の流れを先に検証

コードを書く前に、Figmaでプロトタイプを制作。「カテゴリを開く → キーワードを選ぶ → 生成出力に反映される」という中核の流れを想定し、アコーディオン型UIで20カテゴリを扱ったときの操作感やボリュームを確認しました。ここで見えた「目的のカテゴリにたどり着くまでの手数」「全体を見渡せない」という課題が、次のリデザインの出発点になりました。

リデザイン ─ 「創造を掻き立て、ワクワクさせる」道具へ

リデザインのコンセプトは「触っているだけで創造を掻き立てられ、ワクワクする」こと。単なる入力フォームではなく、キーワードを眺めるうちに次のキャラクター案が浮かんでくるような雰囲気を目指しました。プロトタイプのアコーディオン型から、カテゴリをカードで一覧できるレイアウトと常時表示の左ナビに再設計し、色・余白・タイポグラフィも「作業ツール」ではなく「発想の遊び場」として感じられるトーンに統一しています。

各カテゴリのアイコンは既存のアイコンセットを使わず、すべてオリジナルで自作。年齢・体格・表情・髪型・背景など、カテゴリごとの意味が一目で伝わるよう、線の太さと角の丸みを揃えて描き起こし、世界観と統一感の両方を担保しました。

完成版 ─ プロトタイプにはなかった機能を追加実装

Figmaのプロトタイプで検証した中核の流れを実装したうえで、完成版では「何度も使い続けられる道具」にするための機能を新たに追加しました。使いたい表現へ一気にたどり着くキーワード検索、組み立てた設定を残して呼び出すセーブ／ロード／プリセット、試行錯誤の途中に戻れる履歴、同じ構成をそのまま渡せる共有リンク、そして作業環境に合わせられるライト／ダーク切替。いずれもブラウザだけで完結し、サーバー側の処理に依存しない構成のまま公開しました。

→ PROMPを使ってみる(無料)