delight

機能的なインターフェースを魅力的な体験へと変える、喜びや個性、思いがけない仕上げを加える機会を見つけます。

必須の準備

ユーザーは /delight を使ってこのワークフローを開始します。このスキルが有効になったら、$frontend-design を読み込みます。デザイン原則、アンチパターン、および コンテキスト収集プロトコル が含まれています。先に進む前に、このプロトコルに従ってください。デザインのコンテキストがまだない場合は、必ず先に $setup を読み込んでください。さらに、そのドメインに適した方向性（遊び心のあるものか、プロフェッショナルなものか、ひねりのあるものか、エレガントなものか）も確認します。

---

喜びをもたらす機会を評価する

体験を損なわず、より良くできる箇所を特定します。

1. 喜びが生まれる自然なタイミングを見つけます：

   • 成功状態：操作の完了（保存、送信、公開）
   • 空の状態：初回の体験、オンボーディング
   • 読み込み状態：待ち時間を楽しめる時間に変えられる箇所
   • 達成：マイルストーン、連続記録、完了
   • インタラクション：ホバー、クリック、ドラッグ
   • エラー：苛立たしい場面を和らげる
   • イースターエッグ：好奇心旺盛なユーザーが見つける隠し要素

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

   • ブランドの個性はどのようなものですか？（遊び心がある？ プロフェッショナル？ ひねりがある？ エレガント？）
   • 対象ユーザーは誰ですか？（テクノロジーに詳しい？ クリエイティブ？ 企業ユーザー？）
   • 感情的なコンテキストはどのようなものですか？（達成感？ 探索？ 苛立ち？）
   • 何が適切ですか？（銀行アプリとゲームアプリは異なります。）

3. 喜びをもたらす方針を定めます：

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

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

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

喜びをもたらすことは、理由のない気まぐれを加える許可ではありません。製品カテゴリが落ち着いたものであるほど、喜びの演出も控えめにする必要があります。

喜びの演出がありきたりなトレンド装飾に陥らず、独自性を保てるよう、AIスロップの検出のリファレンスを参照してください。 喜びを、デフォルト設定の改善、アクセントボーダー、さりげない背景処理、または意外性のあるコンポーネントの見せ方で表現する場合は、仕上げの工夫を参照してください。

喜びをもたらす原則

以下のガイドラインに従います。

喜びは強化するものであり、妨げてはいけません

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

サプライズと発見

• ユーザーが発見できるよう、楽しい細部を隠しておきます
• 探索や好奇心に報います
• 喜びの演出があるたびに告知しないでください
• 発見を他の人と共有できるようにします

コンテキストに適した演出

• 感情的な場面に合った演出にします（成功を祝う、エラーに寄り添う）
• ユーザーの状況を尊重します（重大なエラーの最中にふざけない）
• ブランドの個性と対象ユーザーの期待に合わせます
• 文化への配慮を忘れません（何を喜ばしいと感じるかは文化によって異なります）

ノイズではなく個性

• 選んだ個性を際立たせるために喜びを活用し、個性に逆らうものにしないでください
• まったく新しい UI パターンを考案する前に、デフォルト設定を複雑さの少ない方法で改善することを優先します
• 空の状態は、主要なタスク画面よりも視覚的な工夫がふさわしいことがよくあります

積み重ねていく

• 繰り返し使っても新鮮さを保てるようにします
• 反応に変化をつけます（毎回同じアニメーションにしない）
• 継続的な利用に応じて、より深い仕掛けを見せます
• パターンを通じて期待感を高めます

喜びをもたらすテクニック

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

デフォルトを強化する

• 新しいコンポーネントを一から作る前に、既存の箇条書き、リンク、チェックボックス、見出し、カードを改善します
• 小さなアクセントボーダーを加え、手軽かつすっきりと個性を演出します
• ボーダーをたくさん加える前に、余白、控えめな背景の変化、さりげないシャドウを活用します
• 装飾的な背景はコントラストを抑え、コンテンツを主役にします

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

ボタンに楽しさを加える：

/* 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..."

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

お祝いの瞬間

成功を祝う演出：

• 大きな節目に紙吹雪を表示する
• 完了時にチェックマークをアニメーション表示する
• 進捗バーが100％に達したときにお祝いの演出をする
• 「実績を解除しました」風の通知
• 個人に合わせたメッセージ（「記事を10件公開しました！」など）

節目を認める演出：

• 初めて行う操作を特別に扱う
• 連続記録を追跡して祝う
• 目標に向けた進捗を表示する
• 記念日を祝う

実装パターン

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

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

サウンドライブラリ：

• Howler.js（音声管理）
• Use-sound（React フック）

物理演算ライブラリ：

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

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

絶対に避けること：

• 楽しさを加えるために、コア機能を遅らせる
• 楽しい演出をユーザーに強制する（スキップ可能にする）
• UX の悪さを隠すために、楽しさを利用する
• やりすぎる（控えめが一番です）
• アクセシビリティを無視する（アニメーションは責任を持って使い、代替手段を用意する）
• あらゆる操作に楽しさを加える（特別な瞬間は特別なままにする）
• 楽しさのためにパフォーマンスを犠牲にする
• 場面にそぐわない演出をする（場の雰囲気を読む）
• 楽しさを、無作為な奇抜さやブランドに合わない装飾の口実にする
• 余白、アクセントカラー、または控えめな背景色の変更で十分な場面で、余分な枠線を追加する

楽しさの質を確認する

演出が実際に楽しさをもたらすかテストします。

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

覚えておいてください。楽しさこそが、ツールと体験の違いです。個性を加え、ユーザーにうれしい驚きを与え、共有したくなる瞬間を作りましょう。ただし、常に使いやすさを尊重してください。楽しさは体験を向上させるものであり、決して妨げてはいけません。