interaction-patterns

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

よくある UX の失敗を防ぐ、コード化可能な UI インタラクションパターンです。ローディング状態、コンテンツのページネーション、段階的開示、オーバーレイ、ドラッグ＆ドロップ、タブのオーバーフロー、通知システムを、アクセシビリティを組み込んだ形で網羅します。

クイックリファレンス

ルール	ファイル	影響度	使用する場面
スケルトンローディング	rules/interaction-skeleton-loading.md	HIGH	非同期データ用のコンテンツ形状のプレースホルダー
無限スクロール	rules/interaction-infinite-scroll.md	CRITICAL	アクセシビリティとキーボード操作に対応したページネーションコンテンツ
段階的開示	rules/interaction-progressive-disclosure.md	HIGH	ユーザーのニーズに応じて複雑さを明らかにする
モーダル／ドロワー／インライン	rules/interaction-modal-drawer-inline.md	HIGH	オーバーレイとインライン表示のパターンを選ぶ
ドラッグ＆ドロップ	rules/interaction-drag-drop.md	CRITICAL	キーボード操作の代替手段を備えた並べ替え可能なリスト
タブのオーバーフロー	rules/interaction-tabs-overflow.md	MEDIUM	7 個以上の項目があるタブバー、または動的なタブ
トースト通知	rules/interaction-toast-notifications.md	HIGH	成功／エラーのフィードバックと通知のスタッキング
認知負荷のしきい値	rules/interaction-cognitive-load-thresholds.md	HIGH	数値制限を用いてミラーの法則、ヒックの法則、ドハティのしきい値を適用する
フォーム UX	rules/interaction-form-ux.md	HIGH	ターゲットのサイズ、ラベルの配置、エラー防止、スマートデフォルト
説得の倫理	rules/interaction-persuasion-ethics.md	HIGH	ダークパターンを検出し、倫理的なエンゲージメント原則を適用する

合計：6 カテゴリーにわたる 10 個のルール

判断表 — ローディング状態

シナリオ	パターン	理由
リスト／カードコンテンツの読み込み	スケルトン	コンテンツの形状に合わせ、体感遅延を軽減します
フォーム送信	スピナー	完了時点が不明で、短時間で終わる操作です
ファイルのアップロード	プログレスバー	合計が分かる、進捗を測定可能な操作です
画像の読み込み	ぼかしプレースホルダー	レイアウトシフトを防ぎ、段階的に表示します
ルート遷移	スケルトン	データの読み込み中もレイアウトを維持します
バックグラウンド同期	なし／控えめなインジケーター	操作を妨げず、優先度も低いためです

クイックスタート

スケルトンローディング

function CardSkeleton() {
  return (
    <div className="animate-pulse space-y-3">
      <div className="h-48 w-full rounded-lg bg-muted" />
      <div className="h-4 w-3/4 rounded bg-muted" />
      <div className="h-4 w-1/2 rounded bg-muted" />
    </div>
  )
}

function CardList({ items, isLoading }: { items: Item[]; isLoading: boolean }) {
  if (isLoading) {
    return (
      <div className="grid grid-cols-3 gap-4">
        {Array.from({ length: 6 }).map((_, i) => (
          <CardSkeleton key={i} />
        ))}
      </div>
    )
  }
  return (
    <div className="grid grid-cols-3 gap-4">
      {items.map((item) => <Card key={item.id} item={item} />)}
    </div>
  )
}

アクセシビリティに対応した無限スクロール

function InfiniteList({ fetchNextPage, hasNextPage, items }: Props) {
  const sentinelRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => { if (entry.isIntersecting && hasNextPage) fetchNextPage() },
      { rootMargin: "200px" }
    )
    if (sentinelRef.current) observer.observe(sentinelRef.current)
    return () => observer.disconnect()
  }, [fetchNextPage, hasNextPage])

  return (
    <div role="feed" aria-busy={isFetching}>
      {items.map((item) => (
        <article key={item.id} aria-posinset={item.index} aria-setsize={-1}>
          <ItemCard item={item} />
        </article>
      ))}
      <div ref={sentinelRef} />
      {hasNextPage && (
        <button onClick={() => fetchNextPage()}>Load more items</button>
      )}
      <div aria-live="polite" className="sr-only">
        {`Showing ${items.length} items`}
      </div>
    </div>
  )
}

ルールの詳細

スケルトンローディング

最終的なレイアウトに合った、コンテンツ形状のプレースホルダーです。リスト、カード、テキストブロックにはスケルトンを使用します。

読み込み先: rules/interaction-skeleton-loading.md

無限スクロール

IntersectionObserver、スクリーンリーダーへの通知、「さらに読み込む」フォールバックに対応したアクセシブルな無限スクロールです。

読み込み先: rules/interaction-infinite-scroll.md

段階的開示

ツールチップ、アコーディオン、ウィザード、コンテキストパネルを使い、複雑さを段階的に明らかにします。

読み込み先: rules/interaction-progressive-disclosure.md

モーダル／ドロワー／インライン

適切なオーバーレイパターンを選びます。確認にはモーダル、詳細表示にはドロワー、単純な切り替えにはインラインを使用します。

読み込み先: rules/interaction-modal-drawer-inline.md

ドラッグ＆ドロップ

@dnd-kit/core を使ったドラッグ＆ドロップと、必須のキーボード操作による代替手段です。

読み込み先: rules/interaction-drag-drop.md

タブのオーバーフロー

動的なタブや多数のタブに対応する、オーバーフローメニュー付きのスクロール可能なタブバーです。

読み込み先: rules/interaction-tabs-overflow.md

トースト通知

ARIA ロールとスタッキングに対応した、配置可能で自動的に消える通知です。

読み込み先: rules/interaction-toast-notifications.md

認知負荷のしきい値

ミラーの法則（グループあたり最大 7 項目）、ヒックの法則（主要な CTA は最大 1 つ）、ドハティのしきい値（400ms 以内のフィードバック）を、具体的で計測可能な制限とともに適用します。

読み込み先: rules/interaction-cognitive-load-thresholds.md

フォーム UX

フィッツの法則に基づくタッチターゲット（モバイルでは 44px）、上揃えのラベル、ぼかし時のみの検証によるポカヨケのエラー防止、スマートデフォルトを採用します。

読み込み先: rules/interaction-form-ux.md

説得の倫理

検出して拒否すべき13のダークパターンの危険信号、Hook Model の倫理的テスト（認識可能、取り消し可能、ユーザーに利益がある）、EU DSA 第25条への準拠。

読み込み: rules/interaction-persuasion-ethics.md

主な原則

1. キーボード操作の同等性 — すべてのマウス操作には、必ずキーボードでの代替操作を用意します。ドラッグのみ、ホバーのみの操作は禁止です。
2. スピナーよりスケルトン — データの読み込みにはコンテンツの形状に合わせたプレースホルダーを使用し、スピナーは進行状況が不確定な操作に限って使用します。
3. まずネイティブHTML — 独自の実装よりも、<dialog>、<details>、role="feed" を優先します。
4. プログレッシブエンハンスメント — 可能な限り、機能はJavaScriptなしでも動作するようにし、その後、インタラクションで拡張します。
5. 状態の変化を通知する — aria-live 領域を使用して、動的なコンテンツの変化をスクリーンリーダーに通知します。
6. スクロール位置を維持する — 戻る操作ではスクロール位置を復元する必要があります。無限スクロールでは、ユーザーの現在位置を失わないようにします。

アンチパターン（禁止）

• コンテンツの読み込みにスピナーを使用する — スピナーでは位置関係がわかりません。コンテンツの形状に合わせたスケルトンを使用します。
• 「もっと読み込む」ボタンのない無限スクロール — スクリーンリーダーやキーボードのユーザーは、フッターのコンテンツにたどり着けません。必ず代替となるボタンを用意します。
• 閲覧可能なコンテンツにモーダルを使用する — モーダルはフォーカスを閉じ込め、操作を妨げます。閲覧にはドロワーまたはインライン展開を使用します。
• ドラッグのみで並べ替える — キーボードや支援技術を使うユーザーを排除します。必ず、矢印キーとEnterキーによる代替操作を用意します。
• ARIAロールのないトースト — トーストはスクリーンリーダーから認識できません。成功時には role="status"、エラー時には role="alert" を使用します。
• エラートーストを自動的に閉じる — ユーザーがエラーを読む時間が必要です。エラー通知を自動的に閉じてはいけません。

詳細ドキュメント

リソース	説明
references/loading-states-decision-tree.md	スケルトン、スピナー、プログレスバーを選択するための判断ツリー
references/interaction-pattern-catalog.md	使用場面のガイダンスを含む、15種類以上のインタラクションパターンのカタログ
references/keyboard-interaction-matrix.md	すべてのインタラクティブパターンを対象としたキーボードショートカットの一覧（WAI-ARIA APG）

関連スキル

• ork:ui-components — shadcn/ui のコンポーネントパターンとCVAバリアント
• ork:animation-motion-design — MotionライブラリとView Transitions API
• ork:accessibility — WCAG準拠、ARIAパターン、スクリーンリーダー対応
• ork:responsive-patterns — レスポンシブレイアウトとコンテナークエリのパターン
• ork:performance — Core Web Vitalsとランタイムパフォーマンスの最適化