healthcare-medical

ヘルスケア・医療アニメーションの原則

Disneyの12の原則を応用し、明確さを優先して不安を軽減する、落ち着きと信頼感のある体験を作りましょう。

応用する12の原則

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

• 最小限に使用：健康データを遊び心のあるスクワッシュで表現するのは避けます
• 呼吸エクササイズ：ガイド付き呼吸に、穏やかな拡大・縮小を取り入れます
• 心拍数：実際のリズムに合わせた控えめな脈動を使います

2. 予備動作

• 予約：確定前に短い準備の動きを入れます
• 検査結果：機微なデータを表示する前に、慎重な間を設けます
• 服薬リマインダー：穏やかにフェードインさせ、決して唐突に表示しません

3. 演出

• 重要なアラート：画面中央に配置し、明確な視覚的優先順位を付けます
• バイタルサイン：最も重要な指標を目立つように表示します
• プライバシー優先：フォーカスされるまでは、機微な情報をぼかすか非表示にします

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

• 健康に関する取り組み：段階的な進捗を表示します（ポーズ・トゥ・ポーズ）
• リアルタイムモニタリング：データを継続的に表示します（ストレート・アヘッド）
• オンボーディング：明確な順序で手順を示します

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

• ダッシュボードの読み込み：健康に関する論理的な順序でカードを表示します
• 処方内容の更新：詳細の表示前に薬のアイコンを静止させます
• グラフのアニメーション：データポイントを順番につなぎます

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

• すべてのトランジション：急な動きを避け、穏やかなイージングを使います
• モーダルの表示：機微な情報をソフトにフェードインさせます
• ナビゲーション：400～500msの滑らかなトランジションを使います

7. アーク

• 進捗インジケーター：完了状況を円弧で示します
• 身体図：身体の部位間を滑らかな軌跡でつなぎます
• タイムラインナビゲーション：健康の履歴を曲線でたどれるようにします

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

• 確認のチェックマーク：予約後に穏やかに脈動させます
• 読み込み状態：データ取得中に落ち着いたアニメーションを表示します
• 成功状態：控えめな色の変化を使います

9. タイミング

• 全体的にゆっくり：落ち着いた、余裕のある印象にするため400～600msにします
• 重要なアラート：注意を確実に引くため200msと速めにします
• データ入力：150msで応答し、すばやくフィードバックします

10. 誇張

• ほとんどの場合は避ける：医療の文脈では抑制が必要です
• 緊急時のみ：緊急アラートに限って使用します
• お祝い：健康上の節目には控えめに使います

11. 立体感のある描画

• 解剖学的な正確さ：身体を正確に表現します
• グラフの明瞭さ：どのサイズでも読みやすいグラフにします
• アクセシビリティ：高いコントラストと、読み取りやすいアニメーションを確保します

12. アピール

• 落ち着いたプロフェッショナルさ：抑制の効いた表現で信頼感を築きます
• 温かみのある色：安心感のある、柔らかな青や緑を使います
• 人間味：穏やかなトランジションで思いやりを感じさせます

業界標準のタイミング

アクション	時間	イージング
ページ遷移	400～500ms	ease-in-out
モーダルを開く	350ms	ease-out
アラートの表示	200ms	ease-out
データの更新	300ms	ease-in-out
成功時のフィードバック	400ms	ease-out

重要な原則

アニメーションによって不安や混乱を引き起こしてはなりません。明確さ、アクセシビリティ、落ち着いた印象を優先してください。迷ったときは、アニメーションを控えめにしましょう。