AIは「心地よさ」を実装できるのか？— テキスト指示の限界と「絵コンテ」で探る実験
はじめに
はじめまして！株式会社プレイドでデザインエンジニアをしている、はたゆーです。
2025年、AIによるコーディングはもはや当たり前になりました。
shadcn/ui や Playwright MCP 、Figma MCPなどを活用することで、デザインデータから実装コードを生成すること自体は驚くほど簡単です。
しかし、デザインエンジニアとして日々AIとペアプロをする中で、残念だと思うことがあります。それは、「AIが作るUIは、心地よさがない」ということです。
ロジックも書けるし、レイアウトもある程度作ってくれます。しかし、インタラクションは機械的で、硬い。なぜだろうと考えた仮説はこれです。
AIは「始点」しか見ておらず、「終点」やその間の「過程（インタラクション）」を想像できていないのではないか？
考えてみたら当たり前ですね。LLMは確率で次のトークンを予測しているだけで、「状態Aから状態Bへ、時間を使って移動する」という物理的な連続性を意識していないのですから。
だからこそ、パッと出てパッと消える「瞬間移動」のような実装になってしまうのではないのかと。
今回は、どう伝えればえAIがその部分を意識してうまく作ってくれるか、そしてそもそもAIは「心地よさ」を実装できるのかを探ってみました。
この検証が何かの参考になりましたら幸いです。
今回の実験内容
- 仮説： AIに欠けている「時間の概念」と「変化の道筋」を、「絵コンテ」として外から注入すれば、心地よさを実装できるのではないか？
- 検証： モーダル、ボタンの2つを題材に、AIへの「伝え方」を変えてUIの質がどう変わるかを探る。
実験1：定番UI「モーダル」を作る
まずは、Webアプリケーションでよくある「モーダル」を作ってみます。
Try1
プロンプト
モーダルを実装してください。
結果
指示通り実装してくれましたが、アニメーションの指示を出していないため、パッと表示されるだけの硬い動きになりました。
Try2
アニメーション指示を追加。次に要件を細かく追加し、アニメーションについても依頼してみます。「fade in / out」というシンプルな指示なので、きっと意図通りになるはずです。
プロンプト
モーダルを実装してください。
要件
- 中央に白いボックスを表示
- タイトルと本文、閉じるボタンを配置
- ボタンをクリックするとモーダルが開く
- 背景のオーバーレイをクリックするか、閉じるボタンで閉じる
- 表示/非表示の際に fade in / fade out のアニメーションをつけてほしい。
結果
成功です。「fade in / out」という言葉はWeb開発における共通言語であるため、言葉だけでこちらの意図を100%汲み取ってくれました。
実験２：Xのような「いいねボタン」を作る
次に、少しリッチな表現の「いいねボタン」を試してみます。
Try1
アニメーションのイメージを伝えつつテキストだけで指示してみます。
プロンプト
いいねボタンのコンポーネントを作ってください。
要件
- ハートアイコンを使用
- クリックするとハートが少し縮んでから弾けるように拡大する
- 周囲に小さな粒子が花火のように飛び散る
- x風のいいねボタンのような動きでお願いします
結果
拡大縮小はしていますし、粒子が少しだけ表示されています。 しかし、イメージしていたものとは違い「粒子の飛び散る量」や「ランダム性」が足りておらず、少し惜しい表現になりました。
考察
なぜモーダルはうまくいって、いいねボタンはダメだったのか？ おそらく「弾ける」「リッチ」という言葉の解釈が無数にあり、「X風」と伝えてもAIが実際のXの画面を見て確認できるわけではないからだと推測できます。 私の頭の中にある「動きのイメージ」と言葉の間にズレがあり、AIはそれを補完するために「一番無難な実装」を選んでしまったのではないかと思います。
言葉がだめなら「絵」で見せればいい
そもそも、複雑なインタラクションをテキストだけで伝えること自体に無理があるのではないでしょうか？ アニメーターが「絵コンテ」を描くように、AIに「動きのコマ割り」を見せることで、この認識のズレを埋められるはずです。
そこで、Figmaでこのような「コマ割り画像」を用意しました。
この画像と「アニメーションは画像を参考にしてください」の1文を追加することで、きっと意図通りのアニメーションができるはず…！
プロンプト
いいねボタンのコンポーネントを作ってください。
要件
- ハートアイコンを使用
- クリックするとハートが少し縮んでから弾けるように拡大する
- 周囲に小さな粒子が花火のように飛び散る
- アニメーションは画像を参考にしてください
結果
残念ながら、X風のいいねボタンを再現することはできませんでした。
たしかに、初回のテキスト指示よりはアニメーションに変化が出ました。しかし画像がAIにとって複雑すぎたのか、意図を汲みきれなかったようです。 差分を減らしてシンプルにした画像で再挑戦もしましたが、今度は何かが垂れるような、意図とは異なる動きに改悪されてしまいました。
シンプルなコマ割り画像と結果
まとめ
今回の実験で、AIとの付き合い方の「境界線」が少し見えてきました。
-
「fade in / out」 のような標準的な動き
- 基本的な実装はプロンプトで伝えるだけで実装してくれる。
-
ブランドの個性が出る「リッチな動き」
- 絵コンテで視覚的に伝えても、AIが意図を完全に理解するのはまだ難しい。
正直なところ、実験前は「絵コンテさえあればAIで何でも作れるのではないか？」と期待していました。しかし結果は、意図とは異なる動きになったり、少し不自然な実装になったりと、「心地よさ」の自動化には高い壁があることを痛感しました。
しかし、これはネガティブな結果ではありません。「AIがまだここに到達していないからこそ、私たちデザインエンジニアがコードを書く価値がある」 という確信が得られたからです。
土台となるレイアウトや標準的な動きはAIに任せて爆速で作る。そして、ユーザーの心が動くような「最後の手触り」や「複雑なインタラクション」は、人間が丁寧に作り込む。
AIにすべてを任せるのではなく、「AIが得意なこと」と「人間がやるべきこと」を正しく見極めて分業することこそが、今後大事なスキルの一つになると感じました。
（今回はアニメーションでの検証でしたが、次はDrag&Dropのような機能的なインタラクションでも検証してみたいと思います！）
今後もAIを相棒にしつつ、最後の一手間にはこだわっていきたいと思います。
最後まで読んでいただき、ありがとうございました🙏
Discussion