押したら応える方式
UIで、ユーザーの操作にアプリが応えるフィードバックにはどんな種類がありますか? 視覚フィードバック、ハプティクス、楽観的更新、ローディングボタン、確認の代わりの元に戻すの5種類で、どれをどの大きさで返すかを決めます。
ユーザーの操作に、アプリが応える方式です。画面・振動・音のうち何で、どれくらいの大きさで応えるかを決めます。
名前とプレビュー
プレビューをタップすると止まり、もう一度タップすると再生します。
視覚フィードバック
Visual feedback
色や形の変化で知らせる
ハプティクス
Haptic feedback
短い振動。成功・警告・選択など種類が分かれる
楽観的更新
Optimistic UI
サーバーの応答前に結果を先に見せ、失敗したら元に戻す
ローディングボタン
Loading button
押したボタンの中で進捗を表示し、二重クリックを防ぐ
確認の代わりに元に戻す
Undo instead of confirm
「本当に削除しますか?」の代わりに、削除後に元に戻す手段を用意する
使い方
- すべての押下に、100ms以内に何らかの反応を見せます。反応がないと、もう一度押されます。
- 高評価・保存のように失敗がまれな動作は、楽観的更新ですぐに反映します。
- ハプティクスは、スイッチの切り替え、更新完了、決済成功のように、状態が確定する瞬間にだけ使います。
- AIにコードを任せるときにこれらの名前を使うと、「押したら反応してほしい」よりずっと正確に実装されます。
コピーして使うプロンプト
いいねボタン
いいねボタンを、楽観的更新(Optimistic UI)で作ってください。 - 押した瞬間にハートを塗りつぶし、数字を+1。アイコンはscale 1 → 1.2 → 1(250ms)。 - サーバーへのリクエストが失敗したら元に戻し、「いいねを反映できませんでした」のトーストを表示。 - モバイルでは、成功時に軽いハプティクス(light impact)を1回。 - 連打してもリクエストは1回だけ送られるようにしてください。
参考にした投稿: @davidm_ai