この記事の要点(UIXHERO視点) UIXHEROでは、アフォーダンスを「潜んでいる可能性」、シグニファイアを「それを教える合図」と定義し区別する。 多くの現場で使われる「アフォーダンスをつける」は誤用であり、正しくは「シグニファイアを付与する」である。
導入:「このボタン、押せるの?」の正体
「このドア、押すの?引くの?」 「このテキスト、リンクなの?ただの強調なの?」
Webサイトやアプリ、あるいは物理的な世界で、このような迷いを感じたことはないでしょうか。 これは、対象物が持つ「機能(何ができるか)」と、それが「どう見えるか」の間にズレがあるために起こります。
押せないボタンは、ユーザーのせいではない。設計の責任である。
この問題を解く鍵が、 アフォーダンス(Affordance) ** と シグニファイア(Signifier)**です。 これらはUXデザインにおいて最も重要かつ、最も混同されている概念ペアです。
アフォーダンスとシグニファイアの違い(定義)
用語データ
アフォーダンスは「行為の可能性」であり、シグニファイアは「その可能性を伝える信号」である。
| 項目 | アフォーダンス (Affordance) | シグニファイア (Signifier) |
|---|---|---|
| 主体 | 環境とユーザーの関係性 | 意図的な提示 |
| 役割 | 何ができるかを提供する | 何ができるかを教える |
| 例 | 椅子は「座れる」 | 「ここに座ってください」という張り紙 |
語源と背景
元々「アフォーダンス」は心理学者ジェームズ・J・ギブソンが提唱した概念ですが、デザイン界の巨匠ドナルド・ノーマンが著書『誰のためのデザイン?』で紹介したことで広まりました。 しかし、ノーマン自身が後に「私が広めたアフォーダンスという言葉は、実はシグニファイアのことだった」と訂正し、この2つを明確に区別するようになりました。
研究からの引用 : 「アフォーダンスは存在するものであり、デザインするものではない。デザイナーがデザインするのはシグニファイアである。」(Donald Norman)
なぜ重要なのか(心理的背景)
ユーザーは超能力者ではありません。どんなに素晴らしい機能(アフォーダンス)があっても、それが知覚できなければ(シグニファイアがなければ)、その機能は存在しないのと同じです。 脳の 予測処理 ** や ヒューリスティック(経験則) を裏切るデザインは、ユーザーに不要な ** 認知的負荷 を与えます。
1. 知覚可能なアフォーダンス
この概念が両者の架け橋になります。アフォーダンス(座れる)があり、シグニファイア(座面に見える形状)があるとき、初めてユーザーは「座る」という行動を自然に選択できます。
2. 誤ったシグニファイア(偽のアフォーダンス / False Affordance)
逆に、シグニファイアがあるのにアフォーダンスがない状態(例:押せそうなのに押せないボタン)は、ユーザーにフラストレーションを与えます。
具体例(Before/After)
ケース1:フラットデザインのボタン
- アフォーダンス : プログラム上、その矩形領域はクリック可能である。
- シグニファイア(弱い) : 平坦な色面だけでは、ただの装飾に見えるかもしれない。
- シグニファイア(強い) : 影をつける、角を丸くする、ホバーで色を変えることで「押せる」と伝える。
ケース2:ドアの取っ手(ノーマン・ドア)
- アフォーダンス : ドアは「引く」ことも「押す」ことも物理的には可能かもしれない。
- シグニファイア : 「取っ手(Handle)」が付いていれば「引く」シグニファイア。「平らな板(Plate)」が付いていれば「押す」シグニファイア。
- エラー : 「押す」べきドアに「取っ手」が付いていると、ユーザーは誤って引いてしまう。
UXとしてなぜ区別すべきか
UIXHEROがこの2つを厳密に区別する理由は2つあります。
1. 議論の解像度を上げるため
「アフォーダンスがない」と指摘されたとき、それは「機能がない」のか「見つけられない」のか曖昧になります。「機能はあるがシグニファイアが不足している」と言語化することで、具体的な解決策(デザインの修正)が見えてきます。
2. 隠れたアフォーダンスの活用
スワイプ操作や長押しなど、視覚的な手がかり(シグニファイア)がなくても、学習によって発見されるアフォーダンスもあります(魔法のアフォーダンス)。これを意図的に使い分けるために、両者の違いを理解する必要があります。
改善のための設計原則と対策
具体的な改善策(OK/NG比較)
原則1:機能があるなら「音」を出せ
ここでの「音」は視覚的なシグナルのこと。クリックできるならクリックできそうな見た目に。スクロールできるならスクロールバーや見切れを表示する。沈黙した機能は死んでいるのと同じです。
- NG : クリック可能だが下線も色変化もないテキスト
- OK : ホバーで色が変わり、カーソルが指の形(pointer)になる
原則2:標準に従う(ヤコブの法則)
ユーザーは他のサイトで見た「シグニファイア」のルールを学習しています。青い文字はリンク、ボタンの形はボタン。この既存のルール(メンタルモデル)を利用することが、最も強力なシグニファイアになります。
良い改善例(After)
⭕ 良い例
- メッセージ : フォームの必須項目
- アクション : 必須マーク(*)を付けるだけでなく、「必須」と明記し、未入力時は赤枠で強調する。
- ポイント : 色、テキスト、アイコンの複数のシグニファイアを重ねることで、誰にでも伝わるようにする(アクセシビリティ)。
よくある質問 (FAQ)
Q1. アフォーダンスをデザインすることはできないのですか?
厳密な意味では、アフォーダンスは「関係性」なので、物理的な環境(画面やデバイス)を作った時点で発生します。デザイナーができるのは、そのアフォーダンスを「いかにわかりやすく伝えるか(シグニファイアの設計)」、あるいは「不要なアフォーダンスを隠すか(制約の設計)」です。
Q2. ミニマリズムとシグニファイアは矛盾しませんか?
良い質問です。過剰な装飾を削ぎ落とすミニマリズムは美しいですが、必要なシグニファイアまで削ぎ落とすと「使いにくい」UIになります(質素なUI)。優れたミニマリズムは、余白や配置自体をシグニファイアとして機能させ、少ない要素で多くを語ります。
UX倫理と長期価値
ユーザーに「迷い」を与えることは、ユーザーの脳のエネルギー(認知的負荷)を奪う行為です。 適切なシグニファイアを提供することは、ユーザーのエスコートであり、ホスピタリティです。 「説明しなくてもわかる」状態を目指し、沈黙の中でユーザーを導くことこそ、熟練したデザイナーの仕事です。
アフォーダンスは「実在する機能」であり、身体である。 シグニファイアは「知覚される情報」であり、言葉である。
まとめ
- アフォーダンス : 何ができるか(Action Possibility)
- シグニファイア : 何ができるかを教えるサイン(Perceptible Signal)
- 使い分け : 機能を作るのがエンジニアリング、それを伝えるのがデザイン(シグニファイア)。