delight

機能的なインターフェースを、楽しく心躍る体験へと変えるために、喜びや個性、思いがけない仕上げを加えられる機会を見つけます。

必須の準備

/impeccable を実行してください。デザイン原則、アンチパターン、コンテキスト収集プロトコルが含まれています。作業を進める前に、このプロトコルに従ってください。デザインのコンテキストがまだない場合は、必ず最初に /impeccable teach を実行してください。さらに、その領域にふさわしい雰囲気（遊び心のあるもの、プロフェッショナルなもの、風変わりなもの、エレガントなもの）も確認してください。

---

喜びを生み出す機会を評価する

体験の妨げにならず、より良いものにする喜びのポイントを見つけます。

1. 自然に喜びを生み出せる場面を探す：

   • 成功状態：操作の完了（保存、送信、公開）
   • 空の状態：初回利用時の体験、オンボーディング
   • 読み込み状態：楽しく過ごせる待ち時間
   • 達成：マイルストーン、連続記録、完了
   • インタラクション：ホバー状態、クリック、ドラッグ
   • エラー：もどかしい瞬間を和らげる
   • イースターエッグ：好奇心旺盛なユーザーが見つける隠し要素

2. コンテキストを理解する：

   • ブランドの個性はどのようなものですか？（遊び心のあるもの？プロフェッショナルなもの？風変わりなもの？エレガントなもの？）
   • 対象ユーザーは誰ですか？（技術に詳しい人？クリエイター？企業ユーザー？）
   • 感情的なコンテキストは何ですか？（達成感？探索？いら立ち？）
   • その場面にふさわしいものは何ですか？（銀行アプリとゲームアプリは異なります。）

3. 喜びを生み出す戦略を定める：

   • 控えめな洗練：洗練されたマイクロインタラクション（高級ブランド）
   • 遊び心のある個性：ウィットに富んだイラストやコピー（コンシューマー向けアプリ）
   • 役立つサプライズ：ユーザーに尋ねられる前にニーズを予測する（生産性ツール）
   • 豊かな感覚体験：心地よいサウンド、滑らかなアニメーション（クリエイティブツール）

コードベースから判断できないことがあれば、推測できない点をユーザーに直接確認してください。

重要：喜びは使いやすさを高めるものであり、妨げてはなりません。ユーザーが目的を達成することよりも演出に気を取られるなら、やりすぎです。

喜びを生み出す原則

以下のガイドラインに従ってください。

喜びは後押しするものであり、妨げない

• 喜びを生み出す演出は短くします（1 秒未満）。
• 演出のために主要な機能を遅らせてはいけません。
• 演出はスキップ可能にするか、控えめにします。
• ユーザーの時間とタスクへの集中を尊重します。

驚きと発見

• ユーザーが見つけられるよう、楽しい細部を隠しておきます。
• 探索や好奇心に報います。
• 喜びを生み出す演出をいちいち告知しません。
• ユーザーが発見を他の人と共有できるようにします。

コンテキストにふさわしいものにする

• 感情的な場面に合わせます（成功を祝い、エラーには共感します）。
• ユーザーの状態を尊重します（重大なエラーの最中にふざけてはいけません）。
• ブランドの個性と対象ユーザーの期待に合わせます。
• 文化的な配慮をします（何を楽しいと感じるかは文化によって異なります）。

継続しても新鮮さを保つ

• 繰り返し使っても喜びが薄れないようにします。
• 反応に変化をつけます（毎回同じアニメーションにしません）。
• 使い続けることで、より深い仕掛けが見つかるようにします。
• パターンを通じて期待感を高めます。

喜びを生み出すテクニック

以下の方法で個性と楽しさを加えます。

マイクロインタラクションとアニメーション

ボタンの演出：

/* Satisfying button press */
.button {
  transition: transform 0.1s, box-shadow 0.1s;
}
.button:active {
  transform: translateY(2px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Ripple effect on click */
/* Smooth lift on hover */
.button:hover {
  transform: translateY(-2px);
  transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1); /* ease-out-quart */
}

読み込み時の演出：

• 遊び心のある読み込みアニメーション（単なるスピナーではなく）
• 読み込みメッセージに個性を持たせる（汎用的な AI の埋め草ではなく、製品に合ったものを書く）
• 励ましのメッセージを添えた進捗表示
• 控えめなアニメーションを加えたスケルトンスクリーン

成功時のアニメーション：

• チェックマークを描くアニメーション
• 大きな達成時の紙吹雪
• 確認時の穏やかな拡大とフェード
• 心地よい効果音（控えめに）

ホバー時のサプライズ：

• ホバーするとアニメーションするアイコン
• 色の変化やグロー効果
• 個性のあるツールチップの表示
• カーソルの変化（ブランド体験に合わせたカスタムカーソル）

コピーに個性を持たせる

遊び心のあるエラーメッセージ：

"Error 404"
"This page is playing hide and seek. (And winning)"

"Connection failed"
"Looks like the internet took a coffee break. Want to retry?"

励みになる空の状態：

"No projects"
"Your canvas awaits. Create something amazing."

"No messages"
"Inbox zero! You're crushing it today."

遊び心のあるラベルとツールチップ：

"Delete"
"Send to void" (for playful brand)

"Help"
"Rescue me" (tooltip)

重要：コピーの個性をブランドに合わせます。銀行が奇抜である必要はありませんが、親しみやすくすることはできます。

イラストとビジュアルの個性

カスタムイラスト：

• 空の状態のイラスト（ストックアイコンではなく）
• エラー状態のイラスト（親しみやすいモンスターや風変わりなキャラクター）
• 読み込み状態のイラスト（アニメーションするキャラクター）
• 成功状態のイラスト（お祝いの演出）

アイコンの個性：

• ブランドの個性に合ったカスタムアイコンセット
• アニメーションアイコン（ホバー／クリック時のさりげない動き）
• イラスト風アイコン（一般的なアイコンより詳細）
• すべてのアイコンで一貫したスタイル

背景効果：

• さりげないパーティクル効果
• グラデーションメッシュの背景
• 幾何学模様
• 視差による奥行き
• 時間帯に応じたテーマ（朝と夜）

心地よいインタラクション

ドラッグ＆ドロップを楽しく：

• ドラッグ時の浮き上がり効果（影、拡大）
• ドロップ時のスナップアニメーション
• 配置時の心地よい効果音
• 取り消しトースト（「間違った場所にドロップしましたか？［元に戻す］」）

トグルスイッチ：

• バネのような動きを使った滑らかなスライド
• 色の遷移
• モバイルでの触覚フィードバック
• オプションの効果音

進捗と実績：

• 節目を祝う連続記録カウンター
• 100％になると「お祝い」するプログレスバー
• アニメーション付きのバッジ解除
• 遊び心のある統計情報（「絶好調です！5日連続」）

フォームのインタラクション：

• フォーカス時にアニメーションする入力欄
• チェック時に心地よく弾むチェックボックス
• 有効な入力を祝う成功状態
• 自動で伸縮するテキストエリア

サウンドデザイン

さりげない音の合図（適切な場合）：

• 通知音（印象的でありながら、うるさくない）
• 成功音（心地よい「チン」という音）
• エラー音（冷たくなく、共感的な音）
• チャット／メッセージ用のタイピング音
• 周囲に溶け込む背景音（ごく控えめ）

重要：

• システムのサウンド設定を尊重する
• ミュートのオプションを用意する
• 音量は小さくする（警告音ではなく、さりげない合図にする）
• すべての操作で音を鳴らさない（音による疲労は現実に起こります）

イースターエッグと隠れた楽しみ

発見のご褒美：

• コナミコマンドで特別なテーマを解除
• 隠しキーボードショートカット（特別な機能を開く Cmd+K）
• ロゴやイラストにホバーすると表示される演出
• 画像の代替テキストに含まれるジョーク（スクリーンリーダー利用者にも！）
• 開発者向けのコンソールメッセージ（「気に入っていただけましたか？採用募集中です！」）

季節感のある工夫：

• 祝日のテーマ（控えめで、品よく）
• 季節に応じた色の変化
• 天候に応じたバリエーション
• 時間帯に応じた変化（夜は暗く、昼は明るく）

状況に応じた個性：

• 時間帯に応じて変わるメッセージ
• ユーザーの特定の操作に対する応答
• ランダムなバリエーション（毎回同じにしない）
• 使い続けることで段階的に明らかになる演出

読み込み中・待機中の状態

待ち時間を楽しくする：

• 次々と切り替わる興味深い読み込みメッセージ
• 個性のあるプログレスバー
• 読み込みが長いときのミニゲーム
• 待ち時間に楽しめる豆知識やヒント
• 励ましのメッセージ付きカウントダウン

Loading messages — write ones specific to your product, not generic AI filler:
- "Crunching your latest numbers..."
- "Syncing with your team's changes..."
- "Preparing your dashboard..."
- "Checking for updates since yesterday..."

警告：「ピクセルを集めています」「ロボットにダンスを教えています」「魔法のエイトボールに相談しています」「無限から逆に数えています」のような、ありきたりな読み込みメッセージは避けてください。これらはAIが生成したとすぐにわかる、質の低いコピーです。実際に製品が行うことに即したメッセージを書いてください。

お祝いの瞬間

成功のお祝い：

• 大きな節目に紙吹雪を表示
• 完了時にチェックマークをアニメーション表示
• 100％達成時にプログレスバーでお祝い
• 「実績を解除しました」風の通知
• パーソナライズされたメッセージ（「10本目の記事を公開しました！」）

節目の認識：

• 初めての操作には特別な演出を用意
• 連続記録の追跡とお祝い
• 目標に向けた進捗
• 記念日のお祝い

実装パターン

アニメーションライブラリ：

• Framer Motion（React）
• GSAP（汎用）
• Lottie（After Effects アニメーション）
• Canvas confetti（パーティー効果）

サウンドライブラリ：

• Howler.js（オーディオ管理）
• Use-sound（React フック）

物理演算ライブラリ：

• React Spring（ばね物理）
• Popmotion（アニメーションのプリミティブ）

重要：ファイルサイズは重要です。画像を圧縮し、アニメーションを最適化し、楽しさを演出する機能は遅延読み込みしてください。

絶対に避けること：

• 楽しさを演出するために、主要な機能の提供を遅らせる
• ユーザーに楽しい演出を強制する（スキップできるようにする）
• 劣悪な UX を隠すために、楽しさを演出する
• やりすぎる（少ないほうが効果的です）
• アクセシビリティを無視する（責任を持ってアニメーションを使い、代替手段を用意する）
• すべての操作を楽しい演出にする（特別な瞬間は特別なものにする）
• 楽しさを演出するために、パフォーマンスを犠牲にする
• 状況にそぐわない演出をする（場の空気を読む）

楽しさの質を確認する

演出が本当に楽しさをもたらしているか、テストします。

• ユーザーの反応：ユーザーは笑顔になりますか？スクリーンショットを共有しますか？
• 煩わしくない：100 回目でも快適に感じられますか？
• 妨げにならない：ユーザーは無効にしたり、スキップしたりできますか？
• パフォーマンスが良い：カクつきや速度低下がありませんか？
• 適切：ブランドや状況に合っていますか？
• アクセシブル：動きを減らす設定やスクリーンリーダーに対応していますか？

楽しさこそが、単なるツールと体験の違いです。個性を加え、ユーザーに良い意味での驚きを与え、共有したくなる瞬間を生み出しましょう。ただし、常に使いやすさを尊重してください。楽しさは体験を高めるものであり、決して妨げてはなりません。