fitness-wellness

フィットネス＆ウェルネスのアニメーション原則

ディズニーの12の原則を応用して、達成を称え、健康的な習慣をサポートする、やる気と活力を引き出す体験を作りましょう。

応用する12の原則

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

• ワークアウトボタン：タップ時に弾むように変形させます
• 進捗リング：達成に合わせて脈打たせます
• アクティビティアイコン：完了時に弾ませます

2. 予備動作

• ワークアウト開始：カウントダウンで気分を高めます
• タイマー開始：「よーい、スタート」のシーケンスを表示します
• 目標達成：期待感を高めながら達成に近づきます

3. 演出

• 現在のエクササイズ：実行中の動きに意識を集中させます
• 統計表示：ワークアウト中は補助的な役割にします
• 休憩時間：回復に関する指標を強調します

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

• ライブワークアウト：タイマーを連続して動かします（ストレート・アヘッド）
• エクササイズの順序：動作ごとに進行します（ポーズ・トゥ・ポーズ）
• 瞑想ガイド：呼吸の段階を明確にします

5. フォロースルーとオーバーラッピング・アクション

• ワークアウト完了：バッジが着地してから統計を表示します
• カロリーカウンター：数字をフォロースルーさせてから落ち着かせます
• アクティビティリング：動きを重ねながら順番にアニメーションさせます

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

• 高揚感のある瞬間：素早く、歯切れのよいタイミングにします
• 回復／瞑想：ゆっくりと落ち着いたイージングにします
• トランジション：現在のアクティビティの強度に合わせます

7. アーク

• 進捗サークル：滑らかな弧を描いて完了します
• ランニングルート：曲線の経路を視覚化します
• ジェスチャー操作：自然な弧を描く動きにします

8. 副次的なアクション

• 目標達成：達成内容を保存している間に花火を表示します
• 自己記録更新：お祝いの演出とともに王冠を表示します
• 連続記録の継続：カウンターの更新中に炎を燃え続けさせます

9. タイミング

• 激しい運動の瞬間：活力を出すために100〜150msと素早くします
• マインドフルネス：落ち着きを促すために500〜700msとゆっくりにします
• 標準的なUI：200〜300msと適度な速さにします

10. 誇張

• 盛大に祝う：フィットネスではモチベーションが大切です
• 自己記録更新：ドラマチックに達成を表示します
• 連続記録の節目：記憶に残るお祝いを演出します

11. 立体感のある描画

• 身体の動き：正確な動作を実演します
• データの視覚化：指標を明確で読みやすく表示します
• エクササイズのイラスト：正しいフォームを表現します

12. 魅力

• やる気を引き出す活力：気分を高め、励ます動きを取り入れます
• 2つのモード：ワークアウトには強度を、ウェルネスには落ち着きを持たせます
• 達成を重視：どの成功も意義あるものに感じられるようにします

業界標準のタイミング

アクション	時間	イージング
ボタンを押す	150ms	ease-out
リング完了	600ms	spring
ワークアウトのトランジション	250ms	ease-in-out
瞑想時のフェード	500ms	ease-in-out
達成時のポップ	800ms	custom-bounce

重要な原則

アニメーションの活力をアクティビティの強度に合わせましょう。ワークアウトには活力とやる気を引き出す動きが必要ですが、瞑想には落ち着いた呼吸に同期するアニメーションが必要です。進捗は必ず祝いましょう。