Scale
インタラクティブ要素のスケール変形トークン。押下時の視覚的フィードバック（0.98）、モーダル出現アニメーション（0.95）、コンポーネント出現アニメーションの開始スケール（0.5/0.75）を定義します。
Scale Tokens
押下フィードバック、モーダル出現、コンポーネント出現アニメーション用のスケール値
scale-pressedButton activeボタンのアクティブ/押下状態
scale-95Modal enterモーダルコンテンツの出現アニメーション
scale-50Enter animationアニメーション開始スケール（Radio dot等）
scale-75Enter animationアニメーション開始スケール（Checkbox等）
Why This Value?
各スケール値の設計根拠
0.99
0.99認識困難0.98
0.98最適 ★0.95
0.95Modal出現scale-pressedButton・Card2%の縮小は知覚できるが自然。0.99は変化が小さすぎ、0.95は要素が飛び跳ねるように見える。
0%不可視
50%開始点 ★
100%完了
scale-50Radio dot半分のサイズから出現。小さいドットには大きめのスケール変化で「ポップ」感を演出。
0%不可視
75%開始点 ★
100%完了
scale-75Checkbox75%から出現。チェックマークは形状が複雑なため、控えめなスケール変化で自然に。
Modal
90%過剰Modal
95%開始点 ★Modal
100%完了scale-95Modal content95%から出現。モーダルコンテンツは大きな要素なので、わずかなスケール変化で十分な視覚効果。translateYと組み合わせて自然な出現感を演出。
Interactive Demo
各ボックスをクリックして、スケール効果を体験してください。
Component Demo
実際のUIコンポーネントでスケール効果を体験
Button1.00
active:scale-pressed
Icon Button1.00
active:scale-pressed
Clickable Card1.00
active:scale-pressed
Use Cases
スケールトークンの一般的な使用パターン
ボタン押下0.98
active:scale-pressedボタンをクリック/タップした時の視覚的フィードバック
カード押下0.98
active:scale-pressedクリック可能なカードのアクティブ状態
アイコンボタン0.98
active:scale-pressedアイコンボタンの押下フィードバック
| パターン | 値 | Tailwind | 説明 |
|---|---|---|---|
| ボタン押下 | 0.98 | active:scale-pressed | ボタンをクリック/タップした時の視覚的フィードバック |
| カード押下 | 0.98 | active:scale-pressed | クリック可能なカードのアクティブ状態 |
| アイコンボタン | 0.98 | active:scale-pressed | アイコンボタンの押下フィードバック |
Best Practices
✓
推奨
- ✓単独ボタンにscale-pressed
- ✓duration-microと組み合わせる
- ✓クリック可能な要素にのみ使用
- ✓active:疑似クラスで適用
✕
避けるべき
- ✗グループ/連結ボタンにscale使用
- ✗0.95以下の極端なスケール
- ✗長いdurationとの組み合わせ
- ✗hover状態でのスケール縮小