e-commerce-retail

Eコマースと小売のアニメーション原則

ディズニーの12原則を適用し、高級感と信頼感があり、購入を促すショッピング体験を作りましょう。

12原則の適用

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

• カートに追加：タップするとボタンが押し縮み、商品サムネイルがカートアイコンに向かってつぶれます
• 数量バッジ：数量をすばやく増やすと、数字が伸びます
• セールタグ：少し伸びながら脈打ち、注意を引きます

2. 予備動作

• 購入ボタン：購入確認の前に、わずかに持ち上がります
• 画像ズーム：商品画像が拡大する前に、短い間を置きます
• チェックアウトのステップ：進行状況インジケーターが次のセクションを示唆します

3. 演出

• 商品ヒーロー：背景を暗くし、商品を中央に配置します
• 価格表示：価格を目立たせてアニメーション表示し、割引は控えめに表示します
• CTAの優先順位：主要なアクションが最初に目に入るようにします

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

• 閲覧フロー：カタログの閲覧ではスムーズにスクロールします（ストレート・アヘッド）
• チェックアウト：明確な切り替えを設けた段階的なステップを設定します（ポーズ・トゥ・ポーズ）
• 検索結果：商品グリッドを段階的に表示します

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

• 商品カード：価格テキストより先に画像が静止します
• カートドロワー：商品がスライドインした後、合計金額が更新されます
• フィルター：検索結果が更新される前にタグがアニメーションします

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

• モーダルを開く：商品クイックビューにはイーズアウトを使います
• 画像カルーセル：スライド間をスムーズに減速します
• チェックアウトの切り替え：イーズイン・イーズアウトで300～400msにします

7. アーク

• カートに追加：商品サムネイルがカートアイコンに向かって弧を描きます
• ウィッシュリスト：ハートアイコンが保存済みセクションへ弧を描きます
• ドラッグして比較：商品が自然な曲線に沿って動きます

8. 副次アクション

• 購入完了：確認画面の読み込み中に紙吹雪を表示します
• レビューの星：評価の保存中にきらめきます
• 割引適用：新しい価格が表示される間に、元の価格に取り消し線を引きます

9. タイミング

• クイック追加：すばやくカートに追加できるよう、150～200msにします
• チェックアウトのステップ：安心感のある切り替えのため、300～400msにします
• 読み込み状態：体感速度を高めるため、スケルトン画面を使います

10. 誇張

• フラッシュセール：目立つパルスを使った緊急感のあるカウントダウン
• 在庫僅少：注意を引く揺れを加えた警告バッジ
• 大幅割引：取り消し線を引いてから、ドラマチックに表示します

11. 立体感のある描画

• 商品画像：ズーム中も縦横比を維持します
• 3Dビュー：ライティングと視点を統一します
• アイコン：カート、検索、メニューの線幅を統一します

12. 魅力

• ささやかな喜び：アクションが成功したときに、控えめに弾ませます
• ブランドの個性：高級感には滑らかな動き、遊び心には弾む動きを使います
• 信頼の証：セキュリティバッジに穏やかなアニメーションを加えます

業界標準のタイミング

アクション	時間	イージング
カートに追加	200ms	ease-out
クイックビュー	250ms	ease-in-out
チェックアウトのステップ	350ms	ease-in-out
カートの更新	150ms	ease-out
画像ズーム	300ms	ease-out

重要な原則

アニメーションで購入までの流れを遅らせてはいけません。すべての動きは効率的で、購入への安心感を高めるものにしましょう。