AIはどこまでわかってくれるのか
生成AIに様々なコンテキストを与えることで期待する動きをさせることができるようになってきました。一方で、「あきらめないこと」「負けないこと」みたいな感情的なプロンプトの有効性が最近薄れてきています。
そもそものAIの精度が向上していること、AIツール側の仕組みが洗練されてきたことが原因かなと思います。（ちょっと前まで有効だったビーストモードとかも今はあってもなくても、ほぼ変わらないようになりました）
今回はUIの美学的な文章をプロンプトに与えることで、AIが作るUIがどう変わるのかを検証してみます。
やったこと
SvelteKit(SSG) で簡易的なWebサイトを以下の3パターンで作成してみます。なお、利用したのはGitHub Copilot Agent Mode + Opus 4.5です。
- 作るものの指示のみ
- 作るものの指示＋UIに関する言及
- 作るものの指示＋UIの美学
基本となる"作るものの指示"は以下のようなプロンプトです。
SvelteKitのSSGサイトを開発します。
# 開発するもの
作業チケット管理ポータル
# 期待される動き
作業チケットの登録、削除、更新、一覧表示
# 初期データ
作業チケットのダミーデータを3件用意すること
# 制約
ポータルは1ページで完結するようにしてください。
その上で、 2.のパターンでは、以下のプロンプトを追加しました。
# UIに関して
ユーザフレンドリーかつ、最先端の企業が利用するような素敵なサイトとなるようにしてください。
また、3. のパターンでは、Claude Skillsサンプルに素晴らしいプロンプトがあったので、これを参考に以下のような内容をカスタムインストラクションに設定しました。
- 汎用的なAIっぽさを避け、制作レベルの高品質なフロントエンドを作る指針。
- 目的・制約を整理し、強い美学コンセプトを決めてから実装する。
- タイポグラフィや配色、動き、レイアウト、質感まで作り込み、テンプレ表現は避ける。
できたもの
1. 作るものの指示のみ
（削除の確認がアラートダイアログになる…）
2. 作るものの指示＋UIに関する言及
（削除の確認がアラートダイアログになる…）
3. 作るものの指示＋UIの美学
（削除ボタンは確認もされなかった…）
はたしてどれが良いのか
完成したサイトを確認したところ1.と2.はほとんど同じUIになりました。ただ2.ではユーザフレンドリーというキーワードに反応したのかフィルターが追加されているところは好感が持てます。
一方美学や指示を盛り込んだ3.はかなり違うUIが生成されました。ダークモードとなり、またグラデーションが使われていたりします。あと機能面では、削除ボタンが問答無用削除になっていたりしますね。。
・・・
やはりUIは好みの問題かなというのが個人的な感想です。UIに関しても美学だけではなく、やりたいことをきちんと盛り込んだ上で、こういうUIにしたい、という人間側からの提示が必要なのかなと感じました。
結論
ちょっと違うものを作りたい場合、美学は有効なのかなと思いつつも、やはりUIは人間の思いをきちんと反映させる必要がありそうですね。という当たり前といえば当たり前の結論に至りました。