delight

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

必須の準備

frontend-designを読み、コンテキスト収集プロトコルに従います。利用可能なコンテキストを活用し、重要な情報が不足している場合に限って質問します。さらに、対象の領域にふさわしい雰囲気（遊び心のあるもの、プロフェッショナルなもの、風変わりなもの、エレガントなもの）を確認します。

---

喜びを加える機会を評価する

体験を損なわずに高められる場所を特定します。

1. 自然に喜びを加えられる場面を見つけます：

   • 成功状態：操作の完了（保存、送信、公開）
   • 空の状態：初回の利用体験、オンボーディング
   • 読み込み状態：待ち時間を楽しくできる場面
   • 達成：節目、連続記録、完了
   • インタラクション：ホバー状態、クリック、ドラッグ
   • エラー：苛立ちを和らげる場面
   • イースターエッグ：好奇心のあるユーザーが見つける隠し要素

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

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

3. 喜びを加える方針を決めます：

   • 控えめな洗練：上品なマイクロインタラクション（高級ブランド）
   • 遊び心のある個性：気まぐれなイラストや文言（コンシューマー向けアプリ）
   • 役立つサプライズ：ユーザーに求められる前にニーズを先読みする（生産性ツール）
   • 豊かな感覚体験：心地よいサウンド、滑らかなアニメーション（クリエイティブツール）

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

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

喜びを加えることは、無秩序な奇抜さを取り入れる許可ではありません。製品カテゴリーが落ち着いたものであるほど、喜びを加える表現も控えめにする必要があります。

喜びを加える表現がありきたりな流行の装飾にならず、独自性を保てるよう、ai slop detectionのリファレンスを確認してください。 喜びを、既定の設定の改善、アクセントボーダー、控えめな背景処理、予想外のコンポーネント表現によって生み出す場合は、finishing touchesを確認してください。

喜びを加える原則

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

喜びは高めるものであり、妨げてはなりません

• 喜びを加える要素はすぐに終わるようにします（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回目でも心地よく感じられますか？
• 妨げにならない：ユーザーはオプトアウトまたはスキップできますか？
• 高いパフォーマンス：カクつきや速度低下はありませんか？
• 適切：ブランドや状況に合っていますか？
• アクセシブル：モーション低減設定やスクリーンリーダーに対応していますか？

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