fintech-banking

フィンテック・銀行向けアニメーションの原則

ディズニーの12の原則を応用し、お金を扱うのにふさわしい重みと、信頼性・安全性を感じられる体験を作りましょう。

12の原則の応用

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

• 控えめに使用：お金の扱いは真剣に。遊び心のあるスクワッシュは避けます
• 数字カウンター：数値の更新時に、わずかなストレッチを加えます
• カードのフリップ：カード情報を表示する際に、わずかにしならせます

2. 予備動作

• 取引の送信：処理を始める前に短い間を置きます
• 残高の更新：表示する前に準備の動きを入れます
• セキュリティチェック：確認ステップに入る前の準備を視覚的に示します

3. 演出

• 残高を最初に表示：口座残高を主役となる要素にします
• 取引の流れ：現在のステップに明確に焦点を当てます
• セキュリティバッジ：目立たせつつ、注意をそらさないようにします

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

• 送金：ステップごとに明確に進めます（ポーズ・トゥ・ポーズ）
• リアルタイム価格：滑らかに連続して更新します（ストレート・アヘッド）
• 取引履歴：スクロールに合わせて順番に表示します

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

• 支払いの成功：チェックマークが表示された後に金額を確定します
• ダッシュボードの読み込み：残高、カード、取引の順に表示します
• グラフ：軸を表示してからデータをアニメーション表示します

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

• すべての金融アクション：滑らかで、意図が伝わるイージングにします
• カードのアニメーション：イーズイン・アウトで高級感を演出します
• モーダルの遷移：自信に満ちた印象を与える300-400msの動きにします

7. アーク

• 資金の流れ：曲線の軌跡で送金を可視化します
• 支出グラフ：円グラフやドーナツグラフに滑らかな弧を使います
• カードの選択：カード間の移動に弧を描く動きを使います

8. 副次的アクション

• 送金の成功：残高の更新中に控えめなチェックマークを表示します
• 請求書の支払い完了：確認を表示する際に、控えめな紙吹雪を加えます
• 投資利益：数値の更新中に緑色の光彩を加えます

9. タイミング

• 標準的なアクション：確かな印象を与える250-350ms
• セキュリティ確認：意図が伝わる400-500ms
• すばやいフィードバック：入力の検証には150ms

10. 誇張

• ごく控えめに：金融データには正確さが必要です
• 成功の瞬間：よい結果をわずかに強調します
• 不正利用の警告：緊急性は適切に伝えつつ、警報のような印象は避けます

11. 立体感のある描画

• 数字の読みやすさ：あらゆるサイズで明瞭なタイポグラフィを使います
• カードのリアリティ：適切な遠近感と影を使います
• グラフの正確さ：データの可視化は正確でなければなりません

12. アピール

• 高級感：滑らかで、Apple Payのように洗練された印象にします
• 控えめな表現で信頼を築く：シンプルにするほど効果的です
• プロフェッショナルな個性：遊び心ではなく、自信を感じさせます

業界標準のタイミング

アクション	時間	イージング
ボタンのフィードバック	150ms	ease-out
カードのフリップ	400ms	ease-in-out
送金ステップ	300ms	ease-in-out
残高の更新	250ms	ease-out
モーダルを開く	350ms	ease-out

基本原則

すべてのアニメーションは、信頼性と安全性を強めるものでなければなりません。ユーザーは自分のお金をあなたに託しています。その動きには、意図と正確さ、高級感が感じられるようにしましょう。