buttons-ctas

ボタンと CTA のアニメーション原則

ディズニーの 12 の原則を適用して、生き生きと反応するボタンを作成します。

ボタンに適用する原則

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

押したときにボタンをわずかに拡大・縮小します。:active で transform: scale(0.95) を適用し、離したときに scale(1) に戻します。触覚的なフィードバックを生み出します。

2. アンティシペーション

クリック前に、ホバー時にわずかに持ち上げます。transform: translateY(-2px) を適用して、ユーザーに操作を予感させます。

3. ステージング

主要な CTA は視覚的に目立たせます。サイズ、色のコントラスト、余白を活用します。主要なボタンは、二次的なボタンよりも大胆にアニメーションさせます。

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

ボタンの状態にはポーズ・トゥ・ポーズを使います。デフォルト、ホバー、アクティブ、無効の各状態について、明確なキーフレームを定義します。

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

クリック後、ボタンが元に戻ったあとも、影やグローがわずかに遅れて落ち着くようにします。ボタンの動きより 20〜50ms 遅れて、内部のアイコンを動かすこともできます。

6. イーズイン＆イーズアウト

線形のタイミングは使わないでください。ホバー時の出現には開始が速い ease-out を、ホバー解除時には穏やかに消える ease-in を使います。cubic-bezier(0.4, 0, 0.2, 1) が効果的です。

7. アーク

フローティングアクションボタンの位置を変えるときは、弧を描くように動かします。直線的な動きではなく、イージングを使った transform を適用します。

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

リップル効果、アイコンの回転、影の変化などを、主要な拡大・縮小や色の変化に伴わせます。セカンダリーアクションが主役を超えないようにします。

9. タイミング

• ホバー：150〜200ms
• アクティブ／押下：50〜100ms（きびきびと）
• フォーカスリング：150ms
• ローディング状態への遷移：200〜300ms

10. 誇張

成功ボタンは、落ち着く前に一瞬だけ 1.05 に拡大できます。エラー状態では、わずかな揺れ（3〜5px、2〜3 回のサイクル）を加えることができます。

11. 立体的な描画

各状態で一貫した角丸と比率を保ちます。影は常に光源の向きに沿わせます。

12. 魅力

角丸は親しみやすく、角の立った形状はプロフェッショナルな印象を与えます。ボタンの個性をブランドに合わせます。満足感のあるクリックフィードバックはコンバージョン率を高めます。

CSS の実装

.btn {
  transition: transform 150ms ease-out,
              box-shadow 150ms ease-out,
              background-color 150ms ease-out;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.btn:active {
  transform: scale(0.97) translateY(0);
  transition-duration: 50ms;
}

主なプロパティ

• transform：拡大・縮小、移動
• box-shadow：奥行きの変化
• background-color：状態の表示
• opacity：無効状態
• filter：ホバー時の明るさ