この記事の要点（UIXHERO視点） UIXHEROでは、アフォーダンスを「説明せずに行動を誘導するための環境側の手がかり」と定義する。 本記事では、形状や質感だけで操作方法を伝える「直感的なUI」の設計論と、シグニファイアとの違いを整理する。
アフォーダンスとは？
アフォーダンスとは、物理的な対象（またはデジタルインターフェース）がユーザーに対して提供する「行動の可能性」のことです。 認知心理学者J.J.ギブソンが提唱し、後にドナルド・ノーマンがUIデザインの文脈で「知覚されるアフォーダンス（Perceived Affordance）」として広めました。
「ボタンが盛り上がっているから押せそうだ」「リンクが青くて下線があるからクリックできそうだ」といった、説明なしに操作方法が伝わる性質を指します。
なぜ重要なのか
優れたアフォーダンスを持つデザインは、学習コストを最小限に抑えます。 ユーザーはマニュアルを読まなくても、「どこが押せるか」「どこに入力できるか」を直感的に理解できるため、迷いやエラーが激減します。 逆にアフォーダンスが欠如している（または誤解を招く）と、ユーザーは「偽のアフォーダンス」に引っかかり、クリックできない要素を連打するなどのフラストレーションを感じます。
日常の例
- 椅子: 平らな座面と適切な高さは「座る」という行為をアフォードしている。
- マグカップ: 取っ手の形状は「握る」ことをアフォードしている。
- ノーマン・ドア: 「引く（Pull）」と書いてあるのに取っ手がなく鉄板がついているドアは、「押す」アフォーダンスを持っているため、ユーザーは間違って押してしまう（悪い例）。
UXデザインでの活用
1. 物理的なメタファーの利用
現実世界の物理法則を模倣することで、操作性を伝えます。
- 立体的なボタン: 影やグラデーションで「出っ張り」を表現し、押せることを伝える。
- カードUI: 枠線や影で独立したコンテンツであることを示し、タップやドラッグが可能であることを示唆する。
2. インタラクティブなフィードバック
ユーザーのアクション（ホバーやタップ）に対して即座に反応を返すことで、アフォーダンスを補強します。
- ホバーエフェクト: マウスオーバー時に色が明るくなる、ポインターが指差しアイコンに変わる。
- リップルエフェクト: タップした瞬間に波紋が広がり、入力が受け付けられたことを可視化する。
3. 標準的なパターンの採用
ユーザーが既に学習しているメンタルモデルを利用します。
- 青いテキスト: リンクであることを強く示唆する。
- 虫眼鏡アイコン: 検索機能であることをアフォードする。
実装例: クリック可能なカードのアフォーダンス
「押せそう」に見え、かつ操作した瞬間に心地よい反応（沈み込み）を返すことで、強いアフォーダンスを実現するボタンコンポーネントです。
実践ガイドライン (Practical Guidelines)
実装チェックリスト
倫理的配慮 (Ethical Considerations)
- ダークパターン: 「キャンセル」ボタンをわざと薄いグレーにして非活性に見せる（アフォーダンスを隠す）ような手法は避けるべきです。
- 誤解を招くアフォーダンス: 画像に見えるが実は広告リンクである、といった「偽のアフォーダンス」はユーザーの信頼を損ないます。
