画像生成AIに「伝わる指示」を出すって、思ったより難しくない？——そのモヤモヤを丸ごと解消するツールを作りました

「Midjourney にプロンプト打ち込んだら、なんか違うものが出てきた……」

エンジニアやSEの皆さんの中に、こういう経験をした方、きっといますよね？（というか、私の周りがみんなそうでした笑）

バナーとかサムネとか、ちょっとしたデザインが必要な場面って、意外と多いんですよね。でも「デザイナーに頼むほどでもないし、自分でやると時間が溶けるし……」という板挟みで、結局なんとなく雰囲気でMidjourneyを触って、「まあこれでいっか」と妥協した経験、ありませんか。

その問題の根っこって、実は「プロンプトが下手」なんじゃなくて、「デザインを言語化する語彙を持っていない」 ことなんです。

今回は、そのもどかしさをスパッと解消するために作ったWebツール、Banner Design Prompt Generator を紹介させてください！

ツールの概要と使い方

Banner Design Prompt Generator、何者？

一言で言うと、「バナーを作りたいけどプロンプト何て書けばいいかわからん」問題を解決するツールです。

構成・スタイル・フォント・カラーなどのデザイン要素を、テキストじゃなくて視覚的なカードから選ぶだけで、画像生成AI用の詳細プロンプトが自動で完成します。

「レイアウトは左テキスト・右ビジュアルの2カラムで、フォントはサンセリフ系の太字見出しで……」みたいな、自分じゃなかなか思いつかない指示をツールが全部肩代わりしてくれます。
登録不要・完全無料なので、とりあえず開いてみてください笑。

実際の使い方（具体的な事例で）

では、実際にどんな感じで使うのか、もう少し具体的に見ていきましょう。

今回の例として、「社内向けの勉強会への参加を呼びかけるバナー」 を作ってみます。部署の Slack に貼るやつですね。デザイナーに頼むほどでもないけど、テキストだけじゃ素通りされそう……という、ありがちな場面です。

ツールはSTEPが5つに分かれていて、上から順に埋めていくだけです。

STEP 1｜要件定義（誰に・何を）

まず「ターゲット（誰に）」と「価値提案（何を）」を決めます。ここはプルダウン選択 ＋ 自由入力の組み合わせなので、ざっくり書いてOKです。

• ターゲット：社内エンジニア・開発部門メンバー

• 価値提案：最新のAI活用事例を30分でキャッチアップできる

STEP 2｜掲載文字

バナーに入れるテキストを決めます。

• メインコピー：「AI × 開発、最前線のはなし。」

• サブコピー：社内LT会 vol.12　5月15日（木）19:00〜

• 補足情報 / CTA：参加登録はこちら →

STEP 3｜ビジュアル構成

アイキャッチや背景のイメージを選びます。ここがプロンプト生成AIっぽさが出るところで、「人物なし・テクノロジー系の抽象ビジュアル」「ダークトーンの背景」みたいなことを入れると、それがそのままプロンプトに反映されます。参考画像を添付して「この雰囲気で」と渡すこともできます。

STEP 4｜デザイン構成

ここがこのツールの見せ場です。視覚的なカードからポチポチ選ぶだけ。

• レイアウト：左右分割

• スタイル：テック

• フォント：ゴシック

• サイズ：横長（16:9）

• 配色：ベース（70%）= ダークネイビー、メイン（25%）= ブルー、アクセント（5%）= シアン

重要度・比率のスライダーで「メインコピーは特大・アイキャッチは大」みたいな調整もできます。

入力が終わったら、右側のプレビューに日本語のプロンプトが自動生成されます。

実際に生成されるプロンプトはこちら↓

そしてこのプロンプトをGPT image 2 などに貼り付けると……

こういうものが出てきます。操作時間は全部で5〜10分くらいでしょうか。「なんかそれっぽいものを作りたいけど、プロンプト何書けばいいかわからん」という状態から、一気に完成に近いものが出てくる感覚は、初めて触ったとき地味に感動しました笑。

エンジニアにうれしいメリット、まとめて4つ

① プロンプト設計を自動化できる

デザインの語彙って、ちゃんとやろうとすると結構深くて、「モダンとミニマルって何が違うの？」くらいのところから詰まったりするんですよね。このツールは、そういった迷いやすいデザインの選択肢をあらかじめカード化してくれているので、「これかな？」と選ぶだけでOKです。全部を網羅しているわけではないですが、バナー制作でよく使うスタイルやレイアウトはひと通り揃っているので、ゼロからプロンプトを考えるよりずっと早く、それらしい指示が作れます。

② 試行錯誤の沼から抜け出せる

プロンプトを書いては生成、「なんか違う」→修正→再生成……を延々繰り返す、あの時間泥棒ループとお別れできます。最初からちゃんと伝わる指示が出せるので、だいたい1〜2発で「これでいい」というものが出てきます。

③ 再現性が担保される（エンジニア的にここ大事）

プリセット保存機能があるので、「あのときうまくいったバナーのプロンプト、もう一回出したい」が即座に実現できます。生成履歴はブラウザに自動保存されるので、「あれどこいった」が起きにくい設計になっています。再現性のなさはエンジニア的に一番つらいと思うので、ここは力を入れました。JSONエクスポートなど、さらに便利な機能も順次アップデートで追加予定です。

④ プロンプトエンジニアリングの勉強にもなる

余談ですが、生成されたプロンプトをじっくり読んでいると「あ、こういう構造で書けばいいのか」という感覚が自然と身につきます。プロンプトエンジニアリングの5原則（方向性・フォーマット・例示・品質評価・タスク分割）が実はこのツールのUI設計に全部入っているので、使いながら学べる構造になっています。……ちょっとした隠し要素みたいな感じですね笑。

ちなみに、入力した情報はサーバには送られません

エンジニア的に気になる方もいると思うので一応書いておくと、入力した内容はすべてブラウザのローカルストレージに保存されます。外部サーバには一切送信されないので、社名・商品名・コピーなど、ちょっとセンシティブな情報を入れていても安心して使っていただけます。「業務で使っていいか不安」という方の背中を押せれば、と思ってこの設計にしました。

まとめ

「デザインに苦手意識があるからって、ずっと後回しにしてきた」というエンジニアの方に、特に使ってみてほしいツールです。

このツールの発想のコアは、「AIへの指示書（プロンプト）を作るAIを作ればいいじゃないか」 というシンプルなものです。プロンプトを書くのが難しいなら、プロンプトを書くところを自動化してしまえばいい。エンジニア的な発想ですよね笑。

自動化・効率化・再現性という、私たちが仕事でずっと追いかけている価値を、デザインの領域に持ち込むとこういうツールになります。

ぜひ一度、ブラウザで触ってみてください。本当に登録不要で、秒で起動します。

👇 こちらから！

バナーデザインや画像生成ではなく、汎用的なプロンプトのジェネレーターも作ってます。↓こちらです！