brand-consistency

ブランドの一貫性

ディズニーの原則を活用して、アニメーションのスタイルをブランドアイデンティティに合わせます。

問題の兆候

• アニメーションがブランドに合っていないと感じる
• どの製品にも当てはまりそうなありきたりな動き
• 機能によってアニメーションのスタイルに一貫性がない
• 動きがブランドの声と相反している
• ユーザーが製品の個性を認識できない

原則に基づく診断

魅力

問題：アニメーションに際立った個性がない 対処：ブランドの動きの特徴を定義します。ブランドの印象は、遊び心のあるもの（弾むようなイージング）、プロフェッショナルなもの（滑らかで控えめ）、エネルギッシュなもの（素早く、きびきび）でしょうか？

誇張

問題：ブランドに対して演出が過剰、または控えめ 対処：誇張の度合いをブランドの個性に合わせます。高級感なら控えめに。遊び心のあるブランドなら弾むように。企業向けなら抑制的にします。

タイミング

問題：速度がブランドのエネルギーに合っていない 対処：スピード感のあるブランドは100～200ms、落ち着いたブランドは300～500msにします。タイミングの基準を定め、一貫して使用します。

伸縮

問題：弾力のある効果が、真面目なブランドと相反している 対処：スクワッシュ／ストレッチは遊び心のあるブランドに限定します。プロフェッショナルなブランドではスケール変換を使用します。

二次アクション

問題：細部がブランドを引き立てていない 対処：二次アクションでブランドの個性を際立たせます。楽しいブランドなら遊び心のある波紋を加え、真面目なブランドなら控えめなフェードを使います。

すぐにできる改善

1. モーションスタイルガイドを作成する - イージング、継続時間、使用する原則を文書化します
2. ブランドの動きを表す言葉を3～5個定義する - 「素早く、正確で、自信に満ちた」
3. 再利用可能なアニメーションのトークンを作成する - 一貫したタイミング／イージングの変数を用意します
4. 既存のアニメーションを監査する - 例外的なものを見つけます
5. アニメーションコンポーネントを作成する - コードを通じて一貫性を保ちます

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

• アニメーションをブランドの言葉3つで説明できますか？
• 動きはブランドボイスのガイドラインに合っていますか？
• 機能間でイージングカーブに一貫性がありますか？
• タイミングの基準が文書化され、それに従っていますか？
• 競合他社が同じアニメーションを使っても違和感がありませんか？
• アニメーションに製品全体としての一貫性がありますか？
• テスト：UIなしでアニメーションを見せたとき、自社ブランドだと認識できますか？
• ブランド／デザインチームと確認します

コードパターン

:root {
  /* Brand motion tokens */
  --brand-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --brand-ease-enter: cubic-bezier(0, 0, 0.2, 1);
  --brand-ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --brand-duration-fast: 150ms;
  --brand-duration-normal: 250ms;
  --brand-duration-slow: 400ms;
}