interaction-design

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

実際の人々が実際の目標を、最小限の摩擦と最大限の意義をもって達成できるよう、インタラクションを設計します。

根本的な問い

パターンやタイミングの値を検討する前に、次のように問いかけます。ユーザーは何を達成しようとしているのか。また、このインタラクションはその目標をどのように助け、あるいは妨げるのか。

インタラクションデザインは、仕組みについて考えるものではありません。特定の人々が、時間や注意、そして人間性を尊重されながら、それぞれの目的を達成できるよう支援するものです。

出力仕様

インタラクション仕様

## Interaction Spec: [Component Name]

### User Goal
What is the user trying to accomplish? What are the stakes?

### Conceptual Model
How should users understand this interaction? What mental model should they form?

### States & Transitions
| State | Appearance | Transition | Emotional Tone |
|-------|------------|------------|----------------|
| Default | [appearance] | — | [calm/ready/inviting] |
| Hover | [changes] | 150ms ease-out | [responsive/acknowledged] |
| Active | [pressed] | 50ms | [committed/engaged] |
| Loading | [feedback] | — | [progressing/patient] |
| Success | [confirmation] | 200ms | [accomplished/closure] |
| Error | [clear indication] | — | [recoverable/guided] |

### Keyboard & Input
- Tab: [focus behavior]
- Enter/Space: [activation]
- Escape: [reversal/dismissal]
- Touch: [gesture, target size]

### Error Prevention & Recovery
- How does design prevent errors?
- What happens when errors occur?
- How does user recover?

### Accessibility
- Screen reader announcement
- Focus management
- Reduced motion behavior

フロー分析

## Flow Analysis: [Journey Name]

### User Goal & Stakes
What does success mean? What does failure cost?

### Dramatic Arc
- Setup: How does user enter this flow?
- Rising action: What builds toward the goal?
- Climax: The moment of commitment/completion
- Resolution: Confirmation and next steps

### Steps
1. [Step] → [Interaction] → [User feeling]

### Friction Analysis
- Necessary friction (builds engagement/prevents errors)
- Excise to eliminate (work that doesn't serve the goal)

### Error Paths
- [Error scenario]: [Prevention] → [Recovery]

基本原則

1. 目標指向のデザイン

ユーザーは状態変化を起こす「オペレーター」ではありません。それぞれの目的を持った人々です。

まず確認すること：

• 誰が使うのか。（抽象的な「ユーザー」ではなく、具体的な人物像）
• 何を達成しようとしているのか。
• どのような無駄を取り除けるのか。（目標達成に役立たない作業）
• 利用中や利用後に、どのような気持ちになってほしいのか。

いつまでも中級者： ほとんどのユーザーは、学び始めたばかりの初心者でも、効率を追求するエキスパートでもありません。作業に必要なことは身につけていますが、それ以上は学ぼうとしません。そうしたユーザーに向けてデザインしましょう。一般的な操作は素早く行えるようにしながら、高度なオプションは目立ちすぎない形で見つけやすくします。

2. 概念モデル

ユーザーがシステムの仕組みを正確に理解できるようにする必要があります。デザイナーのモデルとユーザーのモデルとの隔たりが、混乱を生みます。

システムイメージ（ユーザーが目にし、操作するもの）は、デザイナーのモデルを正確に伝える必要があります。ユーザーが混乱したときは、ユーザーではなくシステムイメージに問題があります。

シグニファイアは、どこでどのような操作ができるかを伝えます。ドラッグハンドルのアイコンはシグニファイアであり、ドラッグできることはアフォーダンスです。アフォーダンスを見つけやすくするシグニファイアをデザインしましょう。

3. 直接操作

ユーザーがタスクに集中できるよう、コンピューターの存在を意識させないようにします。

主な特性：

• 関心のあるオブジェクトが常に表示され、いつでも操作できる
• 素早く、段階的に、元に戻せる操作
• 即座のフィードバック。操作と結果が目に見える形で結びついている
• コマンド構文ではなく、問題領域そのものを操作する

構文と意味に関する知見： 直接操作が有効なのは、構文上のコマンドへの変換を求めず、意味のレベル（問題領域）で操作できるためです。この仕組みによって変換の手順が不要になり、認知負荷が軽減されます。

直接操作が適さない場合：

• 正確な指定が必要な場合（ドラッグするより「24pt」と入力するほうが適切なことがあります）
• 多数のオブジェクトに対する一括操作
• 空間的なメタファーで表せない抽象的な操作
• キーボードの効率性を好むエキスパートユーザー

エラーの心理学と防止パターンについては、references/cognitive-foundations.mdを参照してください。

4. 取り消し可能性が試行を促す

取り消し可能性は機能ではなく、システムを気後れするものから安心して使えるものへと変える、心理的な安全の仕組みです。

• 取り消しの深さ： 1段階だけでなく、複数段階の取り消しに対応する
• 対応する反対操作： Cmd+Bで太字にできるなら、同じCmd+Bで太字を解除する
• 状態の可視性： 取り消しが可能であることを示す
• 適切な代替策： 完全に取り消せない場合は、破壊的な操作の前に確認する

5. エラー処理よりエラー防止を優先する

エラーの多くは、ユーザーの失敗ではなくデザインの失敗です。

スリップ（実行エラー）：ユーザーの意図は正しいものの、誤った操作をしてしまう

• 制約やデフォルト値を設け、破壊的な操作には確認を求めて防止する

ミステイク（意図のエラー）：ユーザーが誤った目標や計画を立てる

• 明確な概念モデルと、見える形でのシステム状態によって防止する

デザインによる強制機能：

• インターロック：前提となる操作を必須にする
• ロックイン：危険な場合、操作の途中で中断できないようにする
• ロックアウト：危険な状態に入れないようにする

6. フィードバックとシステムの状態

あらゆる操作には応答が必要です。ユーザーに「操作は成功したのだろうか？」と疑問を抱かせてはいけません。

応答時間	ユーザーの感じ方	デザイン上の対応
<100ms	即時	直接結果を表示し、インジケーターは不要
100ms–1s	短い遅延	さりげない状態変化（カーソル、不透明度）
1–10s	待ち時間を感じる	スピナーまたは進捗状況の表示
>10s	長時間の処理	プログレスバー、見積もり時間、キャンセル機能

楽観的 UI： すぐに更新し、エラーがあれば適切に調整します。ただし、重要な操作では確認が取れる前に成功したように見せず、正直な表示を心がけてください。

7. モダリティ：やむを得ない悪

ユーザーが現在のモードを忘れると、モードが原因でエラーが発生します。一方で、モードによって認知範囲を切り分けられ、ユーザーが文脈を忘れてしまう状況ではエラーを減らせます。

モードレスなデザイン（インスペクター、インライン編集）は、次の場合に使用します。

• 調整しながら結果を確認する必要がある
• 試行錯誤が想定される
• 文脈の切り替えが頻繁に発生する

モダリティを許容するのは、次の場合です。

• 範囲を切り分けることでエラーが減る（複雑な複数ステップのウィザード）
• 操作が破壊的であり、確認によって誤操作を防げる
• システムにユーザーの注意を集中させる必要がある（認証）

モードを使用する必要がある場合：

• 現在のモードを明確に表示する（ステータスバーだけに表示しない）
• モードのインジケーターを、注意が向けられている場所の近くに配置する
• すばやく抜け出せるようにする（Escape キー、明確な終了方法）

8. 意味と感情を重視したデザイン

操作は単に効率的か非効率的かだけではなく、意味を伴います。

本能的なレベル： 見た目に対する即時の感情的反応
行動的なレベル： 使用によって得られる満足感や苛立ち
内省的なレベル： その体験が持つ意味、どのように記憶されるか

期待感を高めるローディング状態と、苛立ちを生むローディング状態は異なります。仕組みは同じでも、意味が違います。次の点を検討してください。

• この操作中、ユーザーにどのような気持ちになってほしいか？
• この操作はどのような物語を伝えるか？
• この操作を完了すると、ユーザーの状況はどのように変わるか？

劇的な構成と感情を重視したデザインについては、references/goals-and-context.md を参照してください。

判断フレームワーク

起動方法

使用頻度	推奨される起動方法	理由
常時	常に表示（空間的）	起動コストがゼロ
頻繁	キーボードショートカット＋表示されたコントロール	常連ユーザーはすばやく操作でき、他のユーザーも見つけやすい
たまに	メニューまたはコマンドパレット	省スペースでありながら、見つけやすい
まれ／危険	メニューのみ、必要に応じて階層化	事故を防止

アニメーションを使う場合

アニメーションには目的があります。装飾ではありません。

アニメーションを使う場合：

• 遷移中もオブジェクトの同一性を保つ
• 因果関係（これがあれを引き起こした）を伝える
• 変化の見落としを減らす
• 文脈にふさわしい感情的なトーンを伝える

アニメーションを使わない場合：

• ユーザーが習慣的に操作する場合（アニメーションが余計な負担になる）
• 速度が重要な場合（熟練者向けのワークフロー）
• ユーザーが動きを減らす設定を指定している場合
• アニメーションが分かりやすくするどころか、かえって分かりにくくする場合

タイミング、曲線、感情的な特性については、references/animation-timing.md を参照してください。

摩擦：なくすか、活用するか？

すべての摩擦が悪いわけではありません。次のように区別してください。

余計な作業（取り除く）： ユーザーの目標に役立たない作業

• 埋もれたメニューを探す
• システムが把握している情報を再入力する
• 不要なアニメーションを待つ
• 破壊的でない操作を確認する

有益な摩擦（残すことを検討する）：

• 元に戻せない操作の前に確認する
• 急いで起こるエラーを防ぐために、あえてゆっくり進める
• 期待感を高めたり、重要性を際立たせたりする瞬間
• 「これは重要です」と示す抵抗

入力と物理性

デバイスによって操作は変わります。ガラスに触れる指は、スタイラスともマウスとも異なります。

タッチターゲット

プラットフォーム	最小サイズ	快適なサイズ
iOS	44×44pt	48pt+
Android	48×48dp	56dp+
Web（タッチ）	44×44px	48px+

ジェスチャーの語彙

ジェスチャー	用途	考慮事項
タップ	主な操作	明確なアフォーダンスが必要です
長押し	副次的な操作／コンテキスト操作	発見できるようヒントが必要です
スワイプ	表示、削除、移動	必ず取り消し手段を用意し、主な操作を隠さないでください
ピンチ	ズーム	指の下のフォーカスを維持してください

両手での操作

タブレット向けに設計する場合や、デスクトップのパワーユーザーを考慮する場合：

• 非利き手：大まかな位置調整、コンテキストの設定
• 利き手：細かな操作、アクション
• 検討事項：両手を有効に活用できますか？

デバイス固有のパターンや触覚フィードバックについては、references/input-and-physicality.mdを参照してください。

プラットフォームごとの考慮事項

Web

• SPAでのフォーカス管理（モーダル内に閉じ込め、閉じたときに元に戻す）
• prefers-reduced-motionを尊重する
• タッチとマウスの両方に対応するデザインにする。ホバーだけに依存するインタラクションは避ける
• すべてのインタラクティブ要素でキーボード操作に対応する

iOS

• システムジェスチャーとスクロールの物理挙動を尊重する
• Dynamic Typeに対応する（最大サイズでテストする）
• 重要な場面で触覚フィードバックを提供する
• 適切な特性を設定してVoiceOverに対応する

Android

• Materialのモーション原則
• 予測型の戻るジェスチャー（Android 14+）
• 適切なインセットを設定したエッジツーエッジ表示
• TalkBackへの対応

デスクトップ

• 発見しやすいキーボードショートカット
• マルチウィンドウの状態管理
• 適切な場面でのトラックパッドジェスチャー
• パワーユーザー向けの高密度な情報表示オプション

アンチパターン

直接操作を妨げる

❌ プレビューボタンのあるモーダルダイアログ ✓ ユーザーの調整に応じたライブプレビュー

❌ 変更を確認するには「適用」をクリックする必要がある ✓ 変更を即座に表示し、取り消しも可能にする

隠れた状態

❌ 現在のモードがステータスバーにしか表示されない ✓ 注目している場所にモードを表示する

❌ 保存されていない変更を示す表示がない ✓ 変更状態を明確に示す（タイトル、ドット、変更されたボタン）

余計な操作の積み重ね

❌ すべての操作に確認を求める ✓ 取り消しに対応し、破壊的または不可逆な操作だけ確認する

❌ ユーザーが終わるまで待たなければならないアニメーション ✓ ユーザーが途中で止められる、または操作を妨げないアニメーション

認知的過負荷

❌ すべての選択肢を一度に表示する ✓ タスクの段階に応じて段階的に情報を開示する

❌ ユーザーを責めるエラーメッセージ ✓ 明確な説明と復旧方法

参考ファイル

詳細なガイダンスが必要な場合は、以下を読み込んでください。

• references/goals-and-context.md — ユーザーの目標、ペルソナ、ドラマ構成、感情に訴えるデザイン
• references/cognitive-foundations.md — メンタルモデル、エラー心理、測定方法
• references/input-and-physicality.md — 入力デバイス、触覚フィードバック、両手での操作、スケッチ
• references/component-patterns.md — フォーム、モーダル、メニューなどの詳細なパターン
• references/animation-timing.md — タイミング、イージング、スプリング、感情的な特性
• references/accessibility-patterns.md — ARIA、フォーカス管理、スクリーンリーダー

理論的基盤

• 直接操作（Shneiderman）：可視性、可逆性、即時のフィードバック。references/direct-manipulation.mdを参照
• 道具的インタラクション（Beaudouin-Lafon）：ユーザーと対象の関係を仲介するツール、間接性・統合・互換性の度合い。references/instrumental-interaction.mdを参照
• 目標指向デザイン（Cooper）：ペルソナ、常に中間段階にいるユーザー、余計な操作の排除
• エモーショナル・デザイン（Norman）：本能的、行動的、内省的なレベル
• 劇場としてのコンピューター（Laurel）：ドラマ構成、意味、エンゲージメント