interaction-design について
Interaction Design は、モーションやフィードバック、状態遷移を通じて直感的な操作を設計するスキルです。React のアニメーションライブラリ、時間設定、アクセシビリティの指針を示します。
主な機能
- 01React では Framer Motion を推奨
- 02CSS アニメーションは transform と opacity を使用
- 03中断可能なスプリングモーション
- 04操作の種類に応じた時間設定
- 05動きを抑える設定への対応
活用シーン
- 01React インターフェースへのモーション追加
- 02ボタンやトグルのフィードバック設計
- 03動きを抑える設定に配慮した遷移の実装
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/interaction-designを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
references/animation-libraries.mdmicrointeraction-patterns.mdscroll-animations.md詳細
インタラクションデザイン
モーション、フィードバック、細やかな状態遷移を通じて、魅力的で直感的なインタラクションを作成します。
プロジェクトの規約
- 推奨ライブラリ： React コンポーネントのアニメーションには Framer Motion を使用します
- CSS アニメーション： 60fps のパフォーマンスを実現するため、
transformとopacityのみを使用します - スプリング物理： インタラクティブな要素には、線形またはイージングよりもスプリングアニメーションを優先します
- 中断可能： ユーザーがすべてのアニメーションをキャンセルまたは上書きできるようにします
時間の目安
| 継続時間 | 使用例 |
|---|---|
| 100-150ms | マイクロフィードバック（ホバー、クリック） |
| 200-300ms | 小規模な遷移（トグル、ドロップダウン） |
| 300-500ms | 中規模な遷移（モーダル、ページ切り替え） |
| 500ms+ | 複雑に演出されたアニメーション |
アクセシビリティ
常に prefers-reduced-motion: reduce を尊重します。ユーザーが動きを減らす設定を選んでいる場合は、アニメーションの継続時間を 0 に設定します。これは必須です。
参考ファイル
タスクに応じて、以下を必要に応じて読みます。
| ファイル | 読むタイミング |
|---|---|
| animation-libraries.md | Framer Motion、GSAP、CSS ベースの手法を選択または設定するとき |
| microinteraction-patterns.md | ボタンのフィードバック、トグル、リップル、ローディングインジケーター、トーストを構築するとき |
| scroll-animations.md | スクロールをトリガーとする表示、パララックス、交差ベースのアニメーションを実装するとき |
コメント
Markdown 対応