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

インタラクションデザイン（IxD: Interaction Design）とは、ユーザーとシステムの双方向のやり取りを設計する領域である。単に「見た目を美しくする」ことではなく、ユーザーの操作に対してシステムがどう応答するか、その応答がユーザーの意図に沿っているかを設計することに焦点を当てる。優れたインタラクションデザインは意識されないものであり、ユーザーがシステムの操作方法を考えることなくゴールに集中できる状態を作り出す。

フォーダビリティ（Affordance）とは、デザインの物理的・視覚的な特性がその使い方を示唆する性質のことである。ボタンは押せるように見え、リンクは青色でクリックできることを示唆し、スライダーはドラッグできることをその形状で伝える。シグニファイア（Signifier）はフォーダビリティをユーザーに知覚させるための明示的なシグナルであり、「クリックしてください」というラベルや、ホバー時のカーソル変化などがこれにあたる。フィードバックはユーザーの操作が受け付けられたことをシステムが伝える仕組みで、視覚・聴覚・触覚（バイブレーション）の各チャネルで提供できる。フィードフォワードは操作の前に結果を予測させる情報提示（例: ボタンのホバー時ツールチップ）である。

マイクロインタラクションとは、一つのタスクを中心とした小さなインタラクションの単位（例: 「いいね」ボタンを押す、フォームのバリデーション、プルトゥリフレッシュ）であり、ダン・サファーは「トリガー・ルール・フィードバック・ループ/モード」の4要素で定義している。エラー防止とエラーからの回復容易性は、ニールセンの10ヒューリスティクスにも含まれる重要な設計原則であり、操作前の確認ダイアログ・入力のバリデーション・Undo 機能がこれを実現する。

コードレビューで着目するポイント

操作可能な要素（ボタン・リンク・入力フォーム）がフォーダビリティを視覚的に持っているか
ローディング状態・成功・エラーの各状態でユーザーへのフィードバックが実装されているか
フォームのバリデーションがリアルタイム（インライン）で行われているか、またはサブミット後のみか（UX観点で適切か）
非可逆な操作（削除・送信）に確認ステップが存在するか
アニメーションのタイミングと種類がユーザーの認知を助けているか（過剰・過少ではないか）
キーボード操作でもマウスと同等の操作フローが実現できているか
エラーメッセージが「何が問題で・どう修正すべきか」を具体的に伝えているか

典型的なアンチパターン

見えない操作可能要素（Hidden Affordance）: フラットデザインを意識するあまり、ボタンやリンクがクリックできると視覚的に認識できない状態。ユーザーが操作可能な要素を発見できずにタスクを完了できなくなる。

フィードバックの欠如: ボタンを押しても何も反応がない（処理中のインジケーターがない）状態。ユーザーは操作が受け付けられたか分からず、再度クリックして二重送信を引き起こすことがある。

破壊的操作のUndoなし: 削除や上書きなどの取り消し不能な操作に対して確認ダイアログのみを提供し、Undo 機能を持たない設計。確認ダイアログはユーザーが習慣的に「OK」を押すことで形骸化するため、Undo の方が安全性が高い。

参考リソース

“Designing Interactions” Bill Moggridge（MIT Press）
“Microinteractions” Dan Saffer（O’Reilly）
“The Design of Everyday Things” Don Norman（Basic Books）
Nielsen Norman Group: Interaction Design（https://www.nngroup.com/topic/interaction-design/）
Material Design Guidelines（https://m3.material.io/）