前回はプロンプトの基本的な書き方をご紹介しました。
前よりはいいけどボタンの位置が違う……
なんか、配色が気に入らない！
こういうこともままあります。プロンプト(言葉）だけでは伝わらないこともあるから。致し方ないのです。
でも、大丈夫！
答えは百聞は一見にしかずですよ❗️
そして、百見は一文にしかずの場合もあるので、今回はその両方を説明したいと思います。
生成AIで理想とのズレが起こる本当の理由
AIにアプリを作らせたとき、
残念パパなんか違う…
と感じるのはよくあることです。
検索でも「プロンプトとは」「プロンプトの書き方」「生成AI プロンプト例」といったキーワードが多く調べられているように、理由の多くはプロンプト（指示文）の伝わり方のズレにあります。
生成AIに“デザインの細部”が伝わらない
文章での説明はお手軽なんですが、次のような情報はどうしても曖昧になりがちです。
- ボタンの位置関係
- 配色のニュアンス
- 画面のバランス
- 重要度の優先順位
すると、AIは「平均的なデザイン」を出しがちで、
あなたのイメージとズレてしまいます。
生成AIはあなたの“前提知識”を知らない
人間なら通じる曖昧さも、AIには通じません。
- 好きな色味
- よく見るデザインの系統
- アプリの目的やターゲット
これらが共有されていないため、プロンプトが曖昧だとズレはさらに大きくなります。
……というか、人間相手でも言わなければ伝わらないことがあるのですから、生成AIに伝わるはずもありません。
ワイヤーフレームを生成AIに見せる
AIにアプリを作らせるとき、もっとも効果があるのが 「イラスト（ワイヤーフレーム）」を添えること です。
文章だけでは伝わらない細部が、“1枚の図” で一瞬にして共有できます。実際にこのイラストでChatGPTに指示をしてみました。
ワイヤーフレームは「ズレ防止フィルター」
ワイヤーフレームとは、アプリ画面のレイアウトを簡単に描いた図のこと。
これがあるだけで、AIは次を正確に読み取れます。
- ボタンの配置
- 見出しの位置
- 余白（マージン）の広さ
- 全体の構造
- 画面内の優先度
文章で説明すると長くなる部分を、たった数秒で伝えられるのが最大のメリットです。
手書きでもOK。とにかく“形”があると強いワイヤーフレームというと難しそうですが、実は ノートにサッと描いた手書きで十分 です。
AIにとっては、「情報が視覚化されている」こと自体が価値になります。
実際に先ほどの手書きのワイヤーフレームで試してみました。
その結果、こんな画面が出てきました。
見た目のUIは文字数の兼ね合い（説明で書いた文言をつけられてしまった・・・）で崩れていますが、ほぼ正解です。
色は必ず“カラーコード”で指定する
AIにデザインを作らせるとき、もっともズレやすいのが 色 です。
検索キーワードでも
「生成AI プロンプト コツ」
「画像生成AI 色 指定」
などのニーズが高いように、色の伝え方は多くの人が悩むポイントです。
言葉の色指定はほぼ必ず誤解される
- 「淡い青」
- 「深めの赤」
- 「落ち着いた緑」
こういった表現は、人によってイメージが大きく違います。AIも例外ではなく、あなたの“感覚”までは理解できません。
その結果、「青すぎる」「イメージより暗い」「なんか派手」といったズレが生まれます。
カラーコードを指定すると一発で統一できる
この問題を完全に解決するのが カラーコード指定（HEX / RGB）。以下は例です。
- 青：
#4A90E2 - 緑：
#27AE60 - グレー：
#F2F2F2
コードを使うことで、AIは“正確な色”を再現できるようになります。文章の曖昧さを排除し、ブランドカラーや世界観の統一も簡単です。
試しに先ほどの計算ツールで色指定をしてみました。
こんな感じに指定していきます。もっと具体的に指示すれば手書きのイメージとかなり近いものが出てきます。
残念パパこれが”百見は一文にしかず”です（ドヤッ！）
うまいこと言っているつもりなんだけろうけど、うまくもないし、語呂もよくないよ･･･
カラーコードの探し方
かんたんに言うけど、カラーコードなんてどうやって探せばいいのさ！？
いのっち大丈夫です。なので画像から色を探したり、パレットから色を探すツールを作りました！
下の画像をスマホやパソコンでタップ（クリック）すると、選択した場所のカラーコードを表示してくれます。補足ですが、カラーコード自体はHEX（16進数）やRGB、CYMK方式と有名なところは全部対応してあります。
カラーコード横のコピーを押すとカラーコードをコピーしたり、「この色を記録する」を選ぶと色の履歴を残すことができます。
「パレットから選ぶ」タブを選択すると、パレットから直接色を選ぶこともできます。
ということでよろしければ、こちらをお使いください。
まとめ プロンプトの精度を上げる3つのコツ
ということで、プロンプトの精度を上げる3つのコツはこちらです！
① ワイヤーフレームでレイアウトを“見える化”する
文章では伝わりにくい位置関係・構造を1枚の図で伝えることで、AIの解釈ミスが大幅に減ります。
② 色は必ずカラーコードで指定する
“淡い青”“落ち着いた緑”ではズレるので、HEX / RGB で正確に指定するのが必須。
③ 絶対条件と可変条件を分けて伝える
「ここは絶対」「ここは相談可」を明示すると、AIが勝手に変えてほしくない部分を触らなくなり、完成度が一気に上がります。
AIは万能ではありませんが、視覚情報（イラスト）＋言語（プロンプト） を組み合わせれば驚くほど再現率が上がります。
「うまく伝わらない」という悩みは、伝え方を工夫するだけでほぼ解消できます。
さて、今回本シリーズは2回目になります。次で最後なんですが、今までのおさらいも含めてよりもう少し高度な方法をご紹介したいと思います。
残念パパいのっちでした。
では、また！
コメント