interaction-design

インタラクションデザイン

目次

• 概要
• 使用する場面
• クイックスタート
• リファレンスガイド
• ベストプラクティス

概要

インタラクションデザインでは、ユーザーがシステムをどのように利用するかに焦点を当て、フィードバックと応答性を通じて、直感的で心地よい体験を生み出します。

使用する場面

• ユーザーフローや接点を設計するとき
• アニメーションやトランジションを作成するとき
• エラー状態や読み込み状態を定義するとき
• マイクロインタラクションを構築するとき
• 使いやすさやフィードバックを改善するとき
• モバイル向けのインタラクションパターンを設計するとき

クイックスタート

最小限の動作例：

Common Interaction Patterns:

Swipe:
  Use: Mobile lists, carousels
  Feedback: Visual sliding, momentum
  Accessibility: Keyboard alternative (arrows)

Tap & Hold:
  Use: Context menus, drag prep
  Feedback: Visual feedback after delay
  Duration: ~500ms before trigger

Pinch & Zoom:
  Use: Image viewing, maps
  Feedback: Smooth zoom animation
  Boundaries: Set min/max zoom levels

Drag & Drop:
  Use: Reordering, moving items
  Feedback: Visual during drag, drop confirmation
  Fallback: Alternative method (buttons)

Double Tap:
  Use: Zoom, favorite, select
  Feedback: Immediate visual response
// ... (see reference guides for full implementation)

リファレンスガイド

詳細な実装は references/ ディレクトリにあります：

ガイド	内容
アニメーションとトランジションのデザイン	アニメーションとトランジションのデザイン
エラー処理とフィードバック	エラー処理とフィードバック
インタラクションのアクセシビリティ	インタラクションのアクセシビリティ

ベストプラクティス

✅ 推奨事項

• アニメーションは400ms未満にします
• 明確な視覚的フィードバックを提供します
• 注意を促すためにアニメーションを使います
• 動きに関する設定を尊重します
• インタラクションを元に戻せるようにします
• キーボードとスクリーンリーダーでテストします
• 複数の操作方法を提供します
• タッチとマウスの両方に対応したデザインにします
• 適切なイージングカーブを使います
• インタラクションの動作を文書化します

❌ 禁止事項

• 装飾だけを目的にアニメーションを使わないでください
• 500msを超えるアニメーションを使わないでください
• 動きに敏感なユーザーを無視しないでください
• フォーカスインジケーターを削除しないでください
• モーダル内にユーザーを閉じ込めないでください
• わかりにくいアニメーションを使わないでください
• すべてをアニメーション化しないでください
• 読み込み状態を無視しないでください
• エラー状態を忘れないでください
• アクセシビリティテストを省略しないでください