poorvith-mp/skills-design

デライト

中核哲学

UIデザインにおける「デライト」とは、ねっとりとしたアニメーションや、ゆっくりと浮遊するキャラクター、ユーザーの作業を妨げる煩わしいマスコットのことではありません。デライトとは、ソフトウェアが予想以上に高速かつ思慮深く動作したときに生まれる、予期せぬ優雅さ、知的さ、そして敬意の感覚です。真のデライトは超人間工学的です。即座に使えるキーボードショートカット、思慮深いゼロステート、ユーザーの時間を尊重する達成完了の瞬間、そして摩擦を生まずに笑顔をもたらす、ドライでセンスのあるイースターエッグです。

---

デライトエンジニアリングの4ステップフレームワーク

ステップ1: ユーザー体験の「ピーク・エンドの法則」

1. 感情的なアンカーポイントの設定:
   • 心理学の研究により、ユーザーは体験を二つの瞬間、すなわちピーク（価値の感情的な最高点）とエンド（ワークフロー完了の最終瞬間）で判断することが証明されています。
2. マイルストーンモーメントの増幅:
   • デプロイ成功: 400msの鮮明な紙吹雪、または滑らかな緑色の完了パルス。
   • 初めての支払い処理: 控えめで励みになるコピーと共に流れる、さりげないサウンドデザインのチャイム。
   • 受信箱ゼロ達成: 仕事の完了を祝福する、穏やかで見下すことのないイラスト。

ステップ2: マイクロインタラクションと触覚的フィードバック

1. 物理ベースのUI応答:
   • インタラクティブ要素は、微妙なスプリングベースのマイクロ動作で応答する必要があります。
     • タップ時にボタンがわずかに沈み込む (scale: 0.98)。
     • トグルスイッチが有機的な弾性スプリングカーブでスナップする。
     • クリップボードへのコピーアクションで、即座に視覚的な変化（例: チェックマークアイコンがスライドインし「コピーしました!」と表示）が起こる。
2. オーディオデザイン（オプションかつ控えめに）:
   • 完了アクション時に非常に小さな低周波のクリック音や木質のサウンド（常にシステムのミュート状態を尊重し、オプトアウトのトグルを用意する）。

ステップ3: 思慮深い空の状態とエラーへの思いやり

1. 起爆剤としての空の状態:
   • 「項目が見つかりません」と書かれた空のグレーのボックスを絶対に表示しないでください。
   • ゼロ状態を、アクション可能で歓迎的なエントリーポイントに変えましょう。
     • 「プロジェクトリストが空です。こちらは最初のクラスターをデプロイするための60秒スターターテンプレートです。」
2. エラーへの思いやり:
   • ユーザーがエラーを起こした場合、冷たい企業向けのアラートを、役に立つ人間味のあるガイダンスに置き換えてください。

ステップ4: 邪魔にならない個性の黄金律

1. エキスパートを決して妨げない:
   • マイクロインタラクションの持続時間は300msを超えてはなりません。
   • アニメーションはポインターのクリックやキーボードのストロークを決して妨げてはなりません。
   • ユーザーに、仕事を進める前にアニメーションを見ることを強制してはいけません。

---

成果物フォーマット: デライト＆マイクロインタラクション仕様 (DELIGHT-SPEC.md)

# デライト＆マイクロインタラクション仕様: [機能名]

## 1. インタラクションのトリガーとコンテキスト
- **機能モーメント**: PRマージ＆デプロイ成功
- **ユーザーの感情状態**: 高い満足度 / 解放感（ピークモーメント）
- **デライトメカニズム**: 触覚的な完了チェックマーク + さりげないパーティクルカスケード

## 2. アニメーションの物理とタイミング
- **持続時間**: 280ms 合計（非ブロッキング）
- **イージング**: スプリングカーブ: `cubic-bezier(0.16, 1, 0.3, 1)`
- **視覚的動作**:
  - チェックマークのスケール: `0.8 -> 1.05 -> 1.0`
  - パーティクルバースト: 12個のマイクロパーティクルが半径40pxに放出され、透明度0にフェードアウト。
- **動きの軽減フォールバック**: パーティクル放出ゼロの静的チェックマークへのインスタントアイコン切り替え。

## 3. パーソナリティを感じさせるコピーの瞬間
- **標準ツールチップ**: *「クリップボードにコピーしました」*
- **デライトバリエーション（3回の連続クリック後）**: *「二重にコピーしました！準備は万端です。」*

---

実例: 開発者CLIのデライトモーメント

• 実装: CLIツールが deploy --prod 実行時に微妙なターミナルASCIIアートアニメーションを追加し、実行時間を表示して終了: 「1.4秒でデプロイ完了（前回比3.2倍高速）⚡」。
• 効果: 開発者がスクリーンショットを撮ってターミナル出力を自然にツイートし、ローンチウィークに4,000のGitHubスターを獲得。

---

検証チェックリスト

• マイクロインタラクションは $< 300\text{ms}$ で実行され、ユーザー入力をブロックしない。
• 祝福は、真のユーザーの達成（ピーク・エンドの瞬間）に合わせられている。
• 空の状態は、行動と学習への直接的な道筋を提供する。
• サウンドデザインはデフォルトで無効化されているか、システムの音量とミュート状態を尊重する。
• prefers-reduced-motion が有効な場合の完全なフォールバックが提供されている。

---

アンチパターン

• クリッピー症候群: ユーザーの集中を、不要なポップアップや面白がらせようとするアニメーションキャラクターで妨害すること。
• 鈍いトランジション: モーダルがフェードインするまでに1.5秒待たせてから「確認」をクリックさせること。
• 失敗を祝福する: エラーや請求失敗が発生した際に、漫画のキャラクターが泣いたり気まぐれな行動をとること。