universal-industry

万能なアニメーションの原則

Disneyの12原則を、業界を問わず適切なデフォルト設定で柔軟に応用できる基盤として適用します。

適用する12原則

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

• デフォルト：インタラクティブな要素をわずかに圧縮します
• 調整基準：ブランドの個性（遊び心がある場合は強め、落ち着いた場合は控えめ）
• 普遍的なルール：データや重要なコンテンツを変形させないでください

2. 予備動作

• デフォルト：重要なアクションの前に短い間を設けます
• 調整基準：アクションの重要度（大きなアクションほど予備動作を長くします）
• 普遍的なルール：取り消せないアクションの前には必ず予告してください

3. 演出

• デフォルト：主要なアクションに視覚的な焦点を当てます
• 調整基準：コンテンツの階層とユーザーの目標
• 普遍的なルール：画面の状態ごとに主な焦点を1つに絞ります

4. ストレート・アヘッドとポーズ・トゥ・ポーズ

• デフォルト：UIにはポーズ・トゥ・ポーズ、データにはストレート・アヘッドを使用します
• 調整基準：コンテンツの種類とインタラクションのパターン
• 普遍的なルール：コンテンツの予測可能性に合わせて手法を選びます

5. 後追いとオーバーラッピング・アクション

• デフォルト：関連する要素を順番にアニメーションさせます
• 調整基準：視覚的な複雑さと要素間の関係
• 普遍的なルール：主要な要素の動作が完了してから、二次的な要素を動かします

6. スローインとスローアウト

• デフォルト：ほとんどのトランジションでease-in-outを使用します
• 調整基準：UIの状況（表示にはease-out、終了にはease-in）
• 普遍的なルール：UIの動きにリニアを使用しないでください

7. アーク

• デフォルト：自然な動きのために緩やかなカーブを使用します
• 調整基準：インターフェースのフォーマルさ（カジュアルな場合はアークを強めます）
• 普遍的なルール：データには直線、キャラクターには曲線を使用します

8. セカンダリー・アクション

• デフォルト：主要なアクションごとに、補助的なアニメーションを1つ加えます
• 調整基準：その場面の重要度とブランド表現
• 普遍的なルール：二次的な動きが主要な動きを目立たなくしてはいけません

9. タイミング

• デフォルト：標準的なインタラクションには200～300msを使用します
• 調整基準：業界のペースとユーザーの期待
• 普遍的なルール：頻繁なアクションは速く、重要なアクションはゆっくりにします

10. 誇張

• デフォルト：文字どおりの表現を超える程度を控えめにし、10～20％に抑えます
• 調整基準：ブランドの個性と状況への適切さ
• 普遍的なルール：成功は強調し、失敗は控えめに表現します

11. 立体感のある描画

• デフォルト：全体を通して一貫した視覚表現を用います
• 調整基準：プラットフォームの慣例とブランドガイドライン
• 普遍的なルール：遠近感と比率を保ちます

12. 魅力

• デフォルト：意図が感じられる、すっきりと洗練された動きを用います
• 調整基準：対象ユーザーとブランドの個性
• 普遍的なルール：アニメーションが偶然に見えてはいけません

万能なタイミングのデフォルト設定

アクション	時間	イージング
マイクロインタラクション	100-150ms	ease-out
標準的なトランジション	200-300ms	ease-in-out
複雑なアニメーション	300-500ms	ease-in-out
強調する場面	400-600ms	カスタム
ページ遷移	300-400ms	ease-in-out

適応フレームワーク

ブランドの個性に応じた調整

• プロフェッショナル：スクワッシュ＆ストレッチを弱め、誇張を最小限に抑えます
• 遊び心のある表現：バウンスを強め、二次的な動きを加えます
• プレミアム：タイミングをゆっくりにし、イージングカーブを洗練させます
• エネルギッシュ：タイミングを速くし、よりダイナミックな動きを加えます

ユーザーの状況に応じた調整

• 作業中：アニメーションを最小限に抑え、効率を最大化します
• 閲覧中：動きによって発見を促します
• 祝う場面：ポジティブな瞬間を際立たせます
• 学習中：動きによって理解を助けます

重要な原則

まず適切なデフォルト設定から始め、業界の期待、ブランドの個性、ユーザーの状況に合わせて調整します。判断に迷った場合は、控えめさと効率を優先してください。