生成AIでの抜け漏れを防ぐレビュープロンプト
最後に、AIにUIを構築・チェックさせる際の効果的なプロンプトの例を紹介します。AIにある程度画面を作成してもらった後、「問題がないか」を確認するコードレビューの文脈で活用すると効果的です。
プロンプト例
操作直後・処理中・成功時・失敗時の各状態に対して、適切なフィードバックを追加してください。
処理に時間がかかる場合は「時間がかかっています」など、処理が進行中であることが継続してわかるメッセージ変化を実装してください。
ユーザーが「押せていない」と誤解して連打したり、処理中に離脱したりしないUIにしてください。
特に「ローディング表示とボタンの無効化を実装してください」といった指示は、AIが自主的に考慮しない場合もあるため、プロンプトに明記することを推奨します。
ユーザーの体感を意識したUI実装のための3原則
- ユーザーは内部処理までは見えていない
- 「反応がない」状態は、ユーザーにとっては「エラー」と同じ
- 処理の高速化だけでなく、体感上の安心感を設計することが必要
画面上に反応がなければ、ユーザーは違和感を覚え、「押せていない」と判断してしまいます。その結果、連打による二重送信や、サーバー負荷の増大を招くおそれがあります。AIが自然なUIを即座に生成できる時代だからこそ、エンジニア自身が「ユーザーの体感」を想像し、適切なフィードバックが実装されているかを検証することが不可欠です。
