フレームワーク活用ガイドひとことで言うと#
ユーザーが「何かをしたい」と思った瞬間から「できた」と感じるまでの一連の対話を設計する分野。ボタンの形や色だけでなく、クリック後の反応、エラー時のガイダンス、状態の変化の伝え方まで——ユーザーとプロダクトの「会話」全体をデザインする。見た目（Visual Design）が「どう見えるか」なら、インタラクションデザインは「どう振る舞うか」。
押さえておきたい用語#
- 5次元モデル
- インタラクションを言葉・視覚・物理・時間・振る舞いの5次元で捉えるフレームワーク。ギリアン・クランプトン・スミスが提唱。
- インタラクションループ
- 意図の形成→行動の実行→フィードバックの評価の3ステップで成り立つ、すべてのインタラクションの基本構造。
- 状態設計
- 正常・エラー・ローディング・空・オフラインなど、UIが取りうるあらゆる状態を網羅的に設計すること。
- ハッピーパス
- ユーザーがエラーなく理想的にタスクを完了する最短経路。ハッピーパスだけ設計して他の状態を無視するのが最大の落とし穴。
インタラクションデザインの全体像#
こんな悩みに効く#
- 見た目は整っているのに「使いにくい」と言われる
- ユーザーが機能を見つけられない、使い方がわからない
- エラーが起きたときにユーザーが行き詰まる
基本の使い方#
| 次元 | 内容 | 例 |
|---|---|---|
| 1D: 言葉 | ラベル、ボタンテキスト、エラーメッセージ | 「送信」vs「注文を確定する」 |
| 2D: 視覚的表現 | アイコン、画像、タイポグラフィ | ゴミ箱アイコン = 削除 |
| 3D: 物理的オブジェクト | 操作するデバイスや環境 | スマホ片手操作、マウス |
| 4D: 時間 | アニメーション、フィードバックの速度 | ローディング表示、遷移 |
| 5D: 振る舞い | 上記4つが組み合わさった操作体験全体 | スワイプで削除する一連の流れ |
インタラクションデザインは5つすべてを統合して考える。
すべてのインタラクションは3ステップのループで成り立つ。
- 意図の形成: ユーザーが「〜したい」と思う → 何ができるかを明示する
- 行動の実行: ボタンを押す、テキストを入力する → 最小の労力で操作できるようにする
- フィードバックの評価: 結果を確認する → 即座に・明確に伝える
「ユーザーは常に3つの質問をしている」: 今何ができるのか？ 今何が起きているのか？ 次に何が起きるのか？
UIは「正常時」だけでなく、あらゆる状態で適切に振る舞う必要がある。
| 状態 | 説明 | 設計例 |
|---|---|---|
| 空の状態 | データがまだない | 「最初の項目を追加しましょう」のガイド |
| ローディング | 処理中 | スケルトンスクリーン、プログレスバー |
| 成功 | 操作が完了 | 緑のチェックマーク + メッセージ |
| エラー | 操作が失敗 | 原因 + 解決方法の提示 |
| 部分的な成功 | 一部だけ完了 | 完了分の表示 + 未完了分のリトライ |
「ハッピーパスだけ設計して終わり」は最も多いインタラクション設計の失敗。
具体例#
状況: ECサイトの注文フォーム。入力完了率が62%と低い。「今どこまで進んだかわからない」「エラーが出ても何が間違っているかわからない」という声。
改善:
- 進捗の可視化: ステップインジケーター（1/3 → 2/3 → 3/3）を上部に追加
- リアルタイムバリデーション: 入力欄を離れた瞬間にチェック（送信ボタンを押す前に）
- エラーメッセージの改善: 「入力エラー」→「電話番号はハイフンなしの11桁で入力してください」
- 成功フィードバック: 正しく入力された欄に緑のチェックマークをリアルタイム表示
フォーム完了率が62%から81%に向上。エラーによる離脱が23%から8%に。見た目は大きく変えていない。「振る舞い」を改善しただけで完了率が19ポイント向上した。
課題: 新規ユーザーがアプリを開いても、真っ白な画面が表示されるだけ。「何をすればいいかわからない」と初日に離脱する割合が68%。
改善（空の状態のインタラクション設計）:
- 空のリストに「最初のタスクを追加しましょう」のイラスト＋ボタンを表示
- ボタンをタップすると、サンプルタスク3件が自動で追加される（「このタスクを完了してみよう」）
- 最初のタスクを完了すると、チェックマークアニメーション＋「素晴らしい！次のタスクも完了しましょう」のメッセージ
初日にタスクを1件以上作成するユーザーが22%から67%に。初週の継続率が31%から52%に向上した。
課題: ファイルアップロード機能でエラーが発生すると「アップロードに失敗しました」のみ表示。月間サポート問い合わせの34%がアップロード関連。
改善（エラー状態のインタラクション設計）:
- エラーの種類ごとに具体的なメッセージ:「ファイルサイズが10MBを超えています（現在: 15.2MB）。画像を圧縮してから再度お試しください」
- アップロード前にファイルサイズ・形式をプレチェック（エラーの防止）
- 部分的な成功: 5ファイル中3ファイルが成功した場合、成功分を表示し、失敗分だけリトライボタンを表示
アップロード関連のサポート問い合わせが月間340件から62件に82%削減。ユーザーが自己解決できるようになった。
やりがちな失敗パターン#
- ハッピーパスしか設計しない — 正常系だけ作り込み、エラー・ローディング・空の状態を後回しにする。ユーザーはハッピーパス以外の状態に頻繁に遭遇する。全状態を最初から設計に含める
- フィードバックが遅い、または無い — ボタンを押しても0.5秒以上反応がないとユーザーは「壊れている」と感じる。100ms以内に何らかのフィードバックを返す
- アニメーションが目的化する — かっこいいアニメーションを付けたいがために、操作に不要な演出を追加。すべてのモーションに「意味」があるか確認する
- 静的モックアップだけで検証する — インタラクションは動かさないとわからない。必ず動くプロトタイプで検証し、5人のユーザーテストで問題を発見する
まとめ#
インタラクションデザインは、ユーザーとプロダクトの 「対話」 を設計する分野。意図→行動→フィードバックのループを最適化し、あらゆる状態（正常・エラー・ローディング・空）で適切に振る舞うUIを作る。見た目のデザインと同等以上に、振る舞いのデザインがユーザー体験を左右する。プロトタイプで動きを検証し、ユーザーテストで磨き上げることが成功の鍵。