interaction-design

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

明確なフィードバックを提供し、あらゆる状態に適切に対応する自然なインタラクションを設計します。ウェブアプリケーションやモバイルアプリケーションのユーザーフロー、マイクロインタラクション、状態遷移、インターフェースの動作パターンを扱います。

このスキルを使う場面

• 新機能のインタラクションフローを設計するとき（ドラッグ＆ドロップ、ウィザード、モーダルなど）
• 読み込み中、空、エラー、成功の各状態を作成するとき
• フォーム、ボタン、ナビゲーションのマイクロインタラクションを改善するとき
• 破壊的な操作に対する取り消し／やり直しや復旧パターンを設計するとき
• 複数ステップのフローでインタラクションの明確さを確認するとき
• アニメーションやトランジションの動作を計画するとき
• アクセシブルなインタラクションパターンを設計するとき

クイックリファレンス

タスク	参照先
状態パターンとマイクロインタラクション	skills/interaction-design/references/state-patterns.md

ワークフロー

1. すべての状態を洗い出す：この要素にはどのような状態がありますか？（読み込み中、空、一部表示、すべて表示、エラー、成功、無効、オフライン）
2. フィードバックを設計する：ユーザーは操作が成功したことをどのように確認できますか？
3. エラーに対処する：問題が発生した場合、どうなりますか？ユーザーはどのように復旧できますか？
4. エッジケースを考慮する：データが空の場合、接続が遅い場合、一部の処理が失敗した場合、操作が同時に行われた場合。
5. 楽しさを加える：煩雑さを増やさずに、マイクロインタラクションで体験を向上できる箇所はありますか？

分野の用語

ユーザーフロー、インタラクションパターン、マイクロインタラクション、状態遷移、フィードバックループ、エラー状態、空の状態、読み込み状態、段階的な情報開示、ジェスチャー設計、アフォーダンス、触覚フィードバック、アニメーションのタイミング、スケルトンスクリーン

指針となる質問

インタラクションを設計するときは、次の質問をしてください。

1. 「ここでは、どのようなインタラクションパターンが自然でしょうか？」
2. 「各ステップでどのようにフィードバックを提供しますか？」
3. 「エラーやエッジケースではどうなりますか？」

機能

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

• 自然なジェスチャーと入力の設計（タッチ、マウス、キーボード）
• マルチモーダルなインタラクション設計
• 音声および会話型 UI のパターン
• アクセシビリティを最優先したインタラクション設計

状態設計

• 読み込み状態の最適化（スケルトンスクリーン、スピナー、プログレスバー）
• ユーザーの行動を促す空の状態の設計
• エラー状態からの復旧パターン
• 成功状態を祝福し、次のステップを示す設計
• オフライン状態と同期状況の表示

マイクロインタラクション

• ボタンと入力欄のフィードバック（ホバー、フォーカス、アクティブ、無効）
• フォームの入力検証フィードバックのタイミング
• 進行状況インジケーターと完了通知
• 通知とアラートのパターン
• トランジションとアニメーションの設計

フロー設計

• 複数ステップのウィザードパターン
• 段階的な情報開示の実装
• モーダルとオーバーレイのインタラクションパターン
• ナビゲーションと誘導
• 取り消し／やり直しや復旧パターン

インタラクションの例

• 「ドラッグ＆ドロップによるファイルアップロードのインタラクションフローを設計してください」
• 「この API 呼び出しの読み込み状態とエラー状態を作成してください」
• 「このフォームのマイクロインタラクションを改善してください」
• 「破壊的な操作に対する取り消しパターンを設計してください」
• 「このウィザードのフローで、インタラクションが明確かどうか確認してください」