interaction-design

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

思慮深いフィードバックとインタラクションパターンを通じて、直感的なユーザー体験を作りましょう。

インタラクションパターン

パターン	所要時間	使用例
マイクロインタラクション	100-200ms	ボタンの押下、切り替え
トランジション	200-400ms	ページ遷移、モーダル
表示アニメーション	300-500ms	リスト項目の表示

ローディング状態

/* Skeleton loader */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

function LoadingState({ isLoading, children }) {
  if (isLoading) {
    return <div className="skeleton" style={{ height: 200 }} />;
  }
  return children;
}

エラー状態

function ErrorState({ error, onRetry }) {
  return (
    <div className="error-container" role="alert">
      <Icon name="warning" />
      <h3>Something went wrong</h3>
      <p>{error.message}</p>
      <button onClick={onRetry}>Try Again</button>
    </div>
  );
}

空の状態

function EmptyState({ title, description, action }) {
  return (
    <div className="empty-state">
      <Illustration name="empty-inbox" />
      <h3>{title}</h3>
      <p>{description}</p>
      {action && <button onClick={action.onClick}>{action.label}</button>}
    </div>
  );
}

アクセシビリティ

// Announce state changes to screen readers
function StatusAnnouncer({ message }) {
  return (
    <div aria-live="polite" aria-atomic="true" className="sr-only">
      {message}
    </div>
  );
}

// Respect motion preferences
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

アニメーションのガイドライン

• アニメーションは500ms未満にします（それ以上は遅く感じられます）
• 表示にはease-out、非表示にはease-inを使います
• prefers-reduced-motionを尊重します
• フォーカスインジケーターが常に表示されるようにします
• キーボード操作でテストします

ベストプラクティス

• すべての操作に即座にフィードバックを提供します
• 0.5秒を超える待ち時間にはローディング状態を表示します
• 復旧方法を含む明確なエラーメッセージを表示します
• 意味のある空の状態をデザインします
• キーボード操作をサポートします