アフォーダンス (Affordance)

「このボタン、押せるの？」「ここってクリックできる？」——ユーザーがこう思った瞬間、UIは失敗しています。優れたUIは、説明書なしに「ここは押せる」「ここは入力できる」「ここはドラッグできる」を伝えます。それがアフォーダンスの力です。

フラットデザインが流行した2010年代、多くのUIが「シンプルさ」を追求するあまり、ボタンがただのテキストに、入力欄が背景と区別のつかない白い領域になりました。「押せるのかわからない」「入力できるのかわからない」——ユーザーは操作を躊躇し、離脱します。

よくある失敗は「デザイナーには押せると分かるが、ユーザーには分からない」です。デザイナーは自分が作ったUIを知っているから押せると分かる。しかしユーザーは初めて見る。その非対称性を忘れた設計が、アフォーダンスの崩壊を招きます。

1. 原則の定義

アフォーダンス（Affordance）とは、UI要素が「どう操作できるか」をユーザーに視覚的・感覚的に伝える性質のこと。シグニファイア（視覚的手がかり）を適切に設計することで、説明なしに直感的な操作を可能にする原則。

本質は「操作方法を教えるのではなく、操作方法が見えるようにすること」です。マニュアルを読まなくても使えるUIは、アフォーダンスが正しく設計されています。ドナルド・ノーマンが「The Design of Everyday Things」で提唱した概念で、デジタルUIにおいては「シグニファイア（知覚可能な手がかり）」として実装されます。

2. いつ使うか（適用場面）

特に重要になるケース

• 新規ユーザーが多い場面: 初めて使うユーザーは「どこを押せばいいか」を知らない。アフォーダンスが弱いと、操作方法を探すだけで疲弊する。
• フラットデザイン・ミニマルデザイン: 装飾を省くほど、操作可能性を伝えるシグニファイアが失われやすい。意識的に補完する必要がある。
• 新しいインタラクションパターン: スワイプ・長押し・ドラッグなど、見た目だけでは分からない操作には必ずシグニファイアが必要。
• モバイルUI: タッチ操作はマウスのホバーがないため、操作可能性をデフォルト状態で伝えなければならない。

トレードオフが起きる場面

• シンプルさとの兼ね合い: 影・枠線・グラデーションなどのシグニファイアを追加するほど、視覚的な複雑さが増す。ミニマルなデザインとのバランスが必要。
• 慣れたユーザーへの配慮: 上級者には冗長に見えるシグニファイアも、初心者には必要。ユーザー層に応じて強度を調整する。

3. なぜ重要か（設計判断の核）

アフォーダンスは「見た目を整える」技術ではなく、「操作方法を伝える」設計である。

設計判断の基準

• 「このUI要素を初めて見たユーザーが、説明なしに操作方法を理解できるか？」→ できなければシグニファイアを追加する。
• 「ホバー・フォーカス・アクティブ状態で、操作可能であることが伝わるか？」→ 伝わらなければ状態変化を設計する。

優先順位の考え方

• 1. デフォルト状態での明示（最優先）: ホバー前の状態で「押せる」「入力できる」が伝わるか。モバイルではホバーがないため特に重要。
• 2. インタラクション状態の設計: ホバー・フォーカス・アクティブ・ディセーブルの各状態を設計する。
• 3. 隠れた操作のシグニファイア: スワイプ・長押しなど、見た目に現れない操作には補助的な手がかりを添える。

例外条件

• 慣れ親しんだパターン（ハンバーガーメニュー・FABボタンなど）は、シグニファイアが弱くても認識される。ただし新規ユーザーが多い場合は補完が必要。

4. 具体の設計ルール（チェックリスト）

最低ライン（Must - これ守らないと危険）

これがないと、ユーザーは操作方法を理解できません。

ボタンがボタンに見えるか: 背景色・影・枠線・角丸など、何らかのシグニファイアによって「押せる要素」であることが伝わるか？テキストと区別がつかないボタンになっていないか？
入力欄が入力欄に見えるか: フォームの入力フィールドが、枠線・背景色・プレースホルダーなどによって「文字を入力できる領域」であることが伝わるか？
クリッカブルなテキストリンクが識別できるか: リンクテキストが、色・下線・アイコンなどによって周囲のテキストと区別できるか？「どこかクリックできるのか分からない」状態になっていないか？

理想ライン（Better - できると強い/プロの品質）

「説明なしに使える」「迷わない」状態です。

ホバー・フォーカス状態が設計されているか: インタラクティブな要素はホバー時・フォーカス時に視覚的変化があるか？（色変化・影の増減・カーソル変化）
ディセーブル状態が明確か: 操作できない要素はグレーアウトなどで「今は押せない」ことが伝わるか？なぜ押せないかの理由も伝えているか？（例：「入力を完了してください」）
隠れた操作にシグニファイアがあるか: スワイプ・長押し・ドラッグなど、見た目に現れない操作には、ドットインジケーター・ツールチップ・アニメーションヒントなどの手がかりを添えているか？

5. UI例

同じボタンでも、シグニファイアの設計で「押せる感」が大きく変わります。

改善プロセス

1. シグニファイア監査: UIの全インタラクティブ要素を書き出し、「初めて見たユーザーが操作方法を理解できるか」を一つずつ確認する。
2. 状態設計の徹底: デフォルト・ホバー・フォーカス・アクティブ・ディセーブルの5状態を全ボタン・入力欄に設計する。
3. ユーザーテストで検証: 「このページで何かできそうなことを探してください」というタスクを出し、ユーザーが迷う箇所を特定する。

6. 関連リンク

• 関連リファレンス（理論）: アフォーダンス
• 用語集（定義）: アフォーダンス, シグニファイア, フィードバック
• 関連するUI原則（横）: フィードバック (Feedback), 状態の可視化 (Visibility of System Status), 既知パターンの活用 (Familiar Patterns)
• 関連するUIコンポーネント: Button（ボタン）, Text Input（テキスト入力）, Toggle（トグルボタン）, Switch（スイッチ）, Checkbox（チェックボックス）, Radio Button（ラジオボタン）, Menubar（メニューバー）

7. まとめ

今日から直せる一手 担当しているサービスのボタンを1つ選んで、「枠線・背景色・影のうち何もない」なら今すぐ追加してください。それだけで「押せる感」は劇的に改善します。フラットすぎるデザインは、シグニファイアを意識的に補完することで直感的な操作性を取り戻せます。

チームに共有するなら一言 「ユーザーに操作方法を教えるのではなく、操作方法が見えるUIを作れ。」