アフォーダンスとシグニファイア
アフォーダンスは「その物でできること」、シグニファイアは「できることを示す手掛かり」。画面では後者を意図して描かないと操作は伝わらない。
Affordance and Signifier
なぜ効くか
アフォーダンスは心理学者 J. J. Gibson の概念で、Donald Norman が 1988 年の著書でデザインに持ち込んだ。その後 Norman は、画面のように物理的な手掛かりが無い場所では「できること」より「できると分かる印」が重要だとして、シグニファイアという語を分けて使うようになった。Web UI で起きる失敗は、スワイプで削除できるのにその印が無い、ドラッグで並べ替えられるのにつまむ場所が無い、境界線を動かせるのに線が普通の罫線と同じ、といった「機能はあるが伝わらない」状態。シートの上端のハンドル、並べ替えの⠿、リサイズの縦線、Before/After のつまみ、ページ送りのドット、品切れの取り消し線、これらはすべて描かなければ存在しない印である。
UIでの当て方
- 01ドラッグできるものにはつまむ場所（ハンドル・⠿・太い境界線）を描き、カーソルも grab / ew-resize に変える。
- 02隠れた操作（スワイプ・長押し）には、端の見切れ・ドット・初回の案内など、存在を示す印を 1 つ以上添える。
- 03押せるものと押せないものを見た目で分ける。無効な選択肢は取り消し線や淡色にし、押しても何も起きない理由を出す。
- 04フォーカスの位置はリングで示し、入力欄は枠で「ここに書ける」と分かる形にする。色だけに頼らず、線や形で示す。
誤用・反例
- 見た目をボタンに寄せた飾り（押せないバッジ・下線付きの非リンク）で、押せると誤解させる。
- フラットにしすぎて、入力欄と見出しの区別がつかない。
この原則を体現するパーツ
- ドラッグ
ドラッグ式ボトムシート解説あり
Draggable Bottom Sheet
画面下からせり出すシート。ハンドルをドラッグして「半分／全開／閉じる」の3段階にスナップする。iOS/AndroidのモバイルUI定番。
- JS
- ドラッグ
ドラッグ並べ替え
Drag-to-Reorder List
ハンドルをつまんで縦リストの順序を入れ替える。掴んだ項目に合わせて他の項目がスッと動いて場所を空ける（並べ替えの定番）。PC・スマホ両対応。
- JS
- ドラッグ
分割ビュー
Resizable Split View
中央の仕切りをドラッグして左右ペインの幅を自由に変えられる。Pointer Events で実装しタッチ操作にも対応。
- JS
- ドラッグ
Before/After スライダー解説あり
Before/After Comparison Slider
中央のハンドルをドラッグして2枚の画像を見比べる。加工前後やリフォーム事例の比較に。
- JS
- ドラッグ
慣性スナップのスワイプページャー
Swipe Pager with Snap
4枚のカードを横スワイプでめくる。指の速さで次へ飛ぶか戻るかを決め、必ず1枚の位置にスナップする。ドットが連動し、PC ではドラッグと矢印ボタンで操作できる。
- JS
- クリック
サイズ選択
Size Selector
S/M/L/XL のピルをタップしてサイズを選ぶ。品切れは取り消し線で無効化。未選択でカートを押すと選択を促すシェイクと案内が出る。
- JS
- 入力
パスワード表示切替解説あり
Password Visibility Toggle
目のアイコンをクリックするとパスワードの表示・非表示を切り替えられる。入力ミスを確認しやすい。
- JS
- クリック
強制カラーモード対応
Forced Colors Mode Support
Windows のハイコントラスト（forced-colors: active）では背景色と影が消える。透明な border を持たせた「対応済み」と、色だけで形を作った「未対応」を模擬トグルで比べる。
- JS
関わるカテゴリ
出典
- Interaction Design Foundation別サイト ↗Affordances と Signifiers の項目。Gibson と Norman の定義の違いを整理している。
- Nielsen Norman Group別サイト ↗ヒューリスティック 6「記憶より認識」。操作の手掛かりを画面に出す根拠。