motion-design

モーションデザイン

概要

プロダクトの UI に、意図的で目的のあるモーションを設計します。このスキルでは、アニメーションの必要性を評価し、操作の頻度と目的に基づいて、具体的なイージング曲線、時間、実装方法を提案します。

すべてのアニメーションには役割が必要です。役割がない場合は、アニメーションを付けないでください。

プロセス

フェーズ 1：リファレンスを読み込む（必須）

提案を行う前に、次の 2 つのリファレンスファイルを読んでください。

1. Decision Tree (references/decision-tree.md) - 操作の種類に基づいて使用するイージングのカテゴリに加え、スケール、原点、ホバーに関するガイダンス
2. Easing Tokens (references/easing-tokens.md) - 具体的な曲線、時間の値、パフォーマンスに関するガイドライン

フェーズ 2：アニメーションを評価する

各コンポーネントまたは操作について、次の項目を判断します。

2.1 目的

このアニメーションの役割は何ですか？

• 応答性 - ボタンの押下、メニューを開く操作、即時のフィードバック
• 空間的な連続性 - 何かがどこかから現れ、どこかへ移動すること
• 理解 - 概念の説明、オンボーディング、マーケティング
• 楽しさ - まれな操作に限る（控えめに使用）

明確な目的がない場合は、アニメーションを付けないことを提案します。

2.2 頻度

ユーザーはどのくらいの頻度でこの操作を行いますか？

• 高頻度／キーボード操作 - アニメーションなし、またはほぼ瞬時の表示を優先します
• 中頻度／よくある操作 - 速さを保ちます（120-240ms）
• 低頻度／説明目的 - より遅く、豊かなモーションを使用できます

2.3 パターンの種類

どのような種類のモーションですか？

• 入場／退場 - ポップオーバー、モーダル、トースト、ドロップダウンの表示または非表示（退場は通常、入場より速くします。ユーザーは要素がすぐに消えることを望みます）
• 画面上での変形 - レイアウトの変化、コンテンツの展開、位置の変更
• 時間ベース - 進行状況インジケーター、マーキー、長押しして削除
• ホバー／控えめな変化 - 色の変化、不透明度のフェード、背景の変化
• キーボード操作 - 矢印キー、Tab キーのフォーカス、素早い選択

フェーズ 3：提案する

評価に基づいて、リファレンスファイルのトークンを使用した具体的な提案を提示します。

出力形式

アニメーションに関する各リクエストに対して、次のように提示します。

## Animation Recommendation

**Component**: [What's being animated]

### Evaluation
- **Purpose**: [responsiveness / spatial / understanding / delight / none]
- **Frequency**: [high / medium / low]
- **Pattern**: [enter-exit / morph / time-based / hover / keyboard]

### Recommendation
- **Easing**: [token name] — `[cubic-bezier value]`
- **Duration**: [token name] — `[ms value]`
- **Properties**: [transform, opacity, etc.]
- **Transform Origin**: [if applicable]
- **Spring vs Bezier**: [recommendation and why]
- **Bounce**: [yes/no and why]

### Implementation
[Code snippet or CSS/JS example]

### Notes
[Any specific guidance for this case]

操作の例

ユーザー：「このドロップダウンメニューには、どのようなアニメーションを付ければよいですか？」

回答：

## Animation Recommendation

**Component**: Dropdown menu

### Evaluation
- **Purpose**: Responsiveness — immediate feedback when user clicks trigger
- **Frequency**: Medium — common interaction but not rapid-fire
- **Pattern**: Enter/exit — appearing and disappearing from screen

### Recommendation
- **Easing**: --ease-out-quart — `cubic-bezier(.165, .84, .44, 1)`
- **Duration**: --dur-2 — `180ms`
- **Properties**: transform (scale, translateY), opacity
- **Transform Origin**: Top center (or top-left/top-right based on trigger position)
- **Spring vs Bezier**: Bezier is fine here; spring useful if menu can be interrupted mid-animation
- **Bounce**: No — tap-to-open shouldn't bounce

### Implementation
```css
.dropdown {
  transform-origin: top center;
  transition:
    transform 180ms cubic-bezier(.165, .84, .44, 1),
    opacity 180ms cubic-bezier(.165, .84, .44, 1);
}

.dropdown[data-state="closed"] {
  opacity: 0;
  transform: scale(0.96) translateY(-8px);
}

.dropdown[data-state="open"] {
  opacity: 1;
  transform: scale(1) translateY(0);
}

メモ

• scale(0) ではなく、scale(0.96) を使用します
• transform-origin は、トリガーの位置に合わせて設定します
• きびきびとした印象を保つため、240ms 未満にします

## Tips for Best Results

1. **Be specific about the component** - "dropdown" vs "modal" vs "tooltip" matters
2. **Mention the trigger** - Click, hover, keyboard, scroll
3. **Share context** - "This is a productivity app" vs "marketing landing page"
4. **Ask about multiple states** - Open, close, hover, disabled
5. **Specify framework** - CSS, Framer Motion, GSAP, React Spring

## Resources

This skill includes:

### references/decision-tree.md
Flowchart for choosing the right easing category based on interaction type. Includes scale values, transform-origin guidance, hover/touch considerations, and accessibility.

### references/easing-tokens.md
Complete set of easing curves (ease-out, ease-in-out families), duration tokens, and performance guidelines.