trust-reliability

信頼性と安心感を高めるアニメーション

安心感、一貫性、信頼できるユーザー体験を実現するアニメーションを作成します。

感情的な目標

信頼は、ユーザーの期待を尊重した、予測可能で制御された動きによって育まれます。信頼性とは、アニメーションが一貫して動作し、ユーザーを不意に驚かせないことです。

信頼性を高めるディズニーの原則

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

ストレッチは最小限に抑えます（最大でも5〜10％）。制御された変形によって安定感を表現します。要素はゴムのようではなく、しっかりと地に足がついた印象にします。

予備動作

控えめながらも取り入れます（50〜100ms）。短い準備動作によって、驚かせることなく次に何が起きるかを示します。ユーザーが常に次の動きを予測できるようにします。

演出

明確で曖昧さのない見せ方にします。一度に一つの動作だけを行います。重要な要素がひと目でわかるようにします。隠れた動きや混乱を招く動きは避けます。

ストレート・アヘッド・アクション

信頼性を高める目的では避けます。予測可能で制御しやすい結果を得るため、ポーズ・トゥ・ポーズを優先します。すべてのフレームに意図を持たせます。

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

フォロースルーは控えめにします。過度に跳ね返ることなく、要素がすばやく静止するようにします。動作の完了は、プロフェッショナルで制御された印象にします。

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

滑らかで左右対称なイージングを使います。ease-in-out によって、予測可能でプロフェッショナルな動きを実現します。急な加速や唐突な停止は避けます。

アーク

緩やかで予測しやすい曲線を使います。類似する操作では、一貫したアークのパターンを使います。不規則な軌道や予想外の軌道は避けます。

副次的な動作

最小限にとどめ、目的を明確にします。補助的なアニメーションは、注意をそらすのではなく、動作を補強するものにします。ローディングインジケーターは、落ち着いた一定の動きにします。

タイミング

中程度で一貫したタイミングにします（250〜400ms）。速すぎると急かされる印象になり、遅すぎると動作していないように感じられるため、どちらも避けます。同じ要素は常に同じ速度でアニメーションさせます。

誇張

ごく最小限にします（5〜10％）。現実に近い動きは、プロフェッショナルで信頼できる印象を与えます。劇的な効果よりも、さりげない洗練を優先します。

立体感のある描画

完璧なプロポーションを保ちます。ゆがみや変形は避けます。要素が安定し、しっかりと構築されているように感じられるようにします。

魅力

すっきりとバランスの取れたデザインにします。対称性は安定感を与えます。遊び心のある魅力よりも、プロフェッショナルな美しさを優先します。

タイミングの推奨事項

要素	期間	イージング
トランジション	250-350ms	ease-in-out
フィードバック	150-200ms	ease-out
ローディング	連続	linear
モーダル	200-300ms	ease-out

CSS イージング

--trust-smooth: cubic-bezier(0.4, 0, 0.2, 1);
--trust-enter: cubic-bezier(0, 0, 0.2, 1);
--trust-exit: cubic-bezier(0.4, 0, 1, 1);

一貫性のルール

1. 同じ操作には、常に同じアニメーションを使います
2. 期間のばらつきは最大±50msにします
3. ランダムなタイミングや変動するタイミングは使いません
4. システムのモーション設定を尊重します
5. 無効にされた場合も、自然に機能が低下するようにします

使用する場面

• 金融取引と支払い
• フォームの送信とデータ入力
• 認証フロー
• 設定と構成
• 進行状況インジケーター
• 確認ダイアログ
• エンタープライズアプリケーション