emotional-disconnect

感情の不一致

Disney の原則を使って、アニメーションの感情をコンテキストに合わせます。

問題の兆候

• アニメーションに違和感があるものの、うまく説明できない
• 深刻なコンテンツに対して動きが陽気すぎる
• 温かみのあるコンテンツに対して動きが無機質すぎる
• UI が冷たい／ロボットのよう、または混沌としていて／煩わしいとユーザーが表現する
• アニメーションとメッセージが一致していない

原則に基づく診断

魅力

問題：アニメーションに感情的な響きがない
解決策：目指す感情を定めます。温かみを表すなら、柔らかなイージングとオーバーシュート。プロフェッショナルな印象なら、キレのある動きとリニアな動きにします。動きをメッセージに合わせます。

誇張

問題：感情的なコンテキストに対して強度が適切でない
解決策：深刻なコンテキストでは控えめにします。楽しいコンテキストでは弾む動きを取り入れられます。誇張の度合いを感情的な重要度に合わせます。

タイミング

問題：速度が感情的なトーンと相反している
解決策：穏やかな感情にはゆっくりした動きを、興奮には速い動きを使います。緊張感には変化のある速度を使います。タイミングは感情そのものです。

スクワッシュ＆ストレッチ

問題：硬いコンテキストで弾力のある効果を使っている
解決策：スクワッシュ＆ストレッチは、遊び心や生命感を表します。深刻、臨床的、またはプロフェッショナルなコンテキストでは取り除きます。

フォロースルー

問題：動きの終わり方が意図する感情と一致していない
解決策：唐突な終わり方はきつい印象を与えます。柔らかく着地させると穏やかな印象になります。弾むような終わり方は遊び心を感じさせます。意識して選びましょう。

すぐにできる修正

1. 目標とする感情を言葉にする - 「落ち着いた印象にしたい」
2. イージングを感情に合わせる - 弾む動き＝遊び心、滑らかな動き＝穏やかさ
3. タイミングをコンテキストに合わせて調整する - 深刻な場面では速度を落とす
4. 不一致の原因を取り除く - トーンに反するアニメーションを削除する
5. 感情を表す言葉を使ってテストする - ユーザーに「どんな印象を受けますか？」と尋ねる

トラブルシューティングのチェックリスト

• この場面でどんな感情を引き起こしたいですか？
• アニメーションのイージングはその感情に合っていますか？
• タイミングは感情的なコンテキストに適していますか？
• アニメーションを取り除いたほうがよくなりますか？
• 類似製品では、この場面に異なる動きを使っていますか？
• ユーザーに尋ねます：「このアニメーションを表す言葉を3つ挙げるとしたら？」
• アニメーションはコンテンツの重みに合っていますか？
• テスト：コンテンツを隠しても、動きが表す感情は合っていますか？

感情と動きの対応表

感情	イージング	タイミング	効果
喜び	弾むオーバーシュート	速い	スクワッシュ＆ストレッチ、拡大
穏やかさ	優しいイーズアウト	遅い	フェード、控えめなスライド
信頼	滑らかで予測しやすい動き	中程度	最小限で一貫性のある動き
緊急性	鋭いイーズイン	速い	直接的で、オーバーシュートなし
遊び心	スプリング物理	変化あり	回転、バウンス
深刻さ	リニアまたは控えめなイージング	遅い	最小限の動き

コードパターン

/* Calm/trustworthy */
--ease-calm: cubic-bezier(0.4, 0, 0.2, 1);

/* Playful/joyful */
--ease-playful: cubic-bezier(0.34, 1.56, 0.64, 1);

/* Urgent/serious */
--ease-urgent: cubic-bezier(0.4, 0, 1, 1);