universal-solutions

汎用アニメーションソリューション

ディズニーの12原則をすべて活用した、包括的な診断フレームワークです。

12原則チェックリスト

各原則に沿って確認し、アニメーションの問題を診断します。

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

確認項目：適切な柔軟性がありますか？ 問題の兆候：動きが硬く、生気がない 対処法：衝撃や加速の際に、わずかなスケール変化を加えます

2. 予備動作

確認項目：動作の前に準備動作がありますか？ 問題の兆候：動きが突然だったり、意外に感じられたりする 対処法：小さな逆方向の動きや、動き出す前の構えを加えます

3. 演出

確認項目：重要な要素が明確ですか？ 問題の兆候：ユーザーが重要な情報を見落とす 対処法：アニメーション要素を際立たせ、競合する動きを減らします

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

確認項目：効果に合った手法を使っていますか？ 問題の兆候：動きが制御されていない、または硬すぎる 対処法：UIにはキーフレームを、有機的な動きにはコマ撮りを使います

5. 後追いの動き

確認項目：動きが自然に収まりますか？ 問題の兆候：終わり方が唐突で機械的 対処法：行き過ぎてから戻る動きや、柔らかな減速を加えます

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

確認項目：適切なイージングが使われていますか？ 問題の兆候：動きがロボットのように直線的 対処法：登場時にはイーズアウト、退出時にはイーズインを適用します

7. アーク

確認項目：動きの軌跡は自然ですか？ 問題の兆候：直線的な動きが不自然に見える 対処法：有機的な動きには曲線の軌跡を加えます

8. 副次動作

確認項目：補助的な要素が動きを引き立てていますか？ 問題の兆候：アニメーションが平坦で単調 対処法：さりげない補完的な動きを加えます

9. タイミング

確認項目：速度は適切ですか？ 問題の兆候：速すぎる、または遅すぎる 対処法：微細な動き：100-200ms、トランジション：200-400ms

10. 誇張

確認項目：演出の強さは適切ですか？ 問題の兆候：控えめすぎる、または大げさすぎる 対処法：文脈における重要度に合わせて誇張の度合いを調整します

11. 立体感のある描画

確認項目：描画は正確ですか？ 問題の兆候：視覚的な乱れや歪みがある 対処法：transform/opacityのみを使用し、GPUレイヤーを確認します

12. 魅力

確認項目：しっくりくる動きですか？ 問題の兆候：何が悪いのかを説明しにくい 対処法：動きをブランドや感情面の意図に合わせます

クイック診断

1. 問題を1文で説明する
2. 最も直接関係する原則を特定する
3. 隣接する原則も確認する（問題は複数の原則にまたがることがあります）
4. その原則に基づき、的を絞った対処を行う

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

• アニメーションに目的がありますか？
• タイミングは適切ですか（通常150-300ms）？
• イージングが適用されていますか（直線的ではありませんか）？
• prefers-reduced-motionに対応していますか？
• アニメーション対象はtransform/opacityのみですか？
• 動きによって、注意を適切に誘導できていますか？
• ブランドや感情面の文脈に合っていますか？
• ユーザーはアニメーションなしでもタスクを完了できますか？
• 対象となる最も低速なデバイスでテストします
• 感情を表す言葉を使って、ユーザーからフィードバックを得ます

アニメーションを削除する場合

次の場合は、アニメーションを完全に削除します：

• 明確な目的がない
• ユーザーから不満が出る、またはスキップされる
• タスクの完了を遅らせる
• アクセシビリティ上の問題を引き起こす
• パフォーマンスが許容できない
• 存在する理由を説明できない