フレームワーク活用ガイドひとことで言うと#
モノの見た目や形状が「どう使えばいいか」を自然に伝える性質のこと。ドアの取っ手が「引く」を示し、ボタンの立体感が「押せる」を示すように、説明書なしでも操作方法がわかるデザインを作るための概念。
押さえておきたい用語#
- アフォーダンス（Affordance）
- 物体が行為者に対して可能にする行為の性質のこと。ギブソンが生態心理学で提唱した概念で、環境と行為者の関係性を示す。
- 知覚されたアフォーダンス（Perceived Affordance）
- ユーザーが「できそう」と知覚する行為の手がかりを指す。UIデザインではこの知覚されたアフォーダンスが最も重要。
- シグニファイア（Signifier）
- アフォーダンスを伝えるための視覚的・聴覚的な手がかりのこと。ノーマンが「デザインで重要なのはシグニファイアだ」と強調した概念。
- 偽のアフォーダンス（False Affordance）
- 操作できないのに**「できそう」に見える**UI要素である。下線付きテキストがリンクでない場合などが該当し、ユーザーの不信感を招く。
アフォーダンスの全体像#
こんな悩みに効く#
- ユーザーが「このボタン押せるの？」と迷ってしまう
- 説明文やツールチップを大量に付けないとUIが使えない
- 見た目はきれいだが、操作方法がわかりにくいと言われる
基本の使い方#
アフォーダンスには複数の種類がある。デザインで特に重要なのは知覚されたアフォーダンス（Perceived Affordance）。
- 物理的アフォーダンス: 物体が物理的に可能にする行為（ドアノブは「回せる」）
- 知覚されたアフォーダンス: ユーザーが「できそう」と感じる行為（立体的なボタンは「押せそう」）
- シグニファイア: アフォーダンスを伝えるための手がかり（矢印、下線、色の変化など）
ノーマンは「デザインで重要なのは実際のアフォーダンスよりもシグニファイアだ」と強調している。
ユーザーが操作できる要素に、見た目で「操作できる」と伝わるデザインを施す。
- ボタン：立体感、色の変化、ホバーエフェクトで「押せる」を表現
- リンク：下線や色の違いで「クリックできる」を表現
- スライダー：つまみの形状で「左右に動かせる」を表現
- ドラッグ可能要素：ハンドル（≡ アイコン）で「掴める」を表現
「見た目通りに操作すればいい」状態が理想。
操作できないのに「できそう」に見える要素を見つけて修正する。
- 下線付きのテキストなのにリンクではない → 下線を外す
- ボタンに見えるがクリックしても反応しない → デザインを変える
- 画像がクリッカブルに見えるが実は静的 → カーソルやホバーの挙動を統一する
ユーザーが操作を試みて反応がないと、不信感が生まれ離脱につながる。
具体例#
状況: 月間アクティブユーザー8万人のファッションECアプリ。「商品詳細が見られない」という問い合わせが月120件。ユーザーテストで「どこをタップすれば詳細に進めるかわからない」が判明。
改善前:
- 「詳細を見る」のテキストが本文と同じスタイル → タップできると気づかない
- リストの各行がタップ可能だが視覚的な手がかりがない
- フォームの送信ボタンが背景と同系色
改善後:
- 「詳細を見る」をブランドカラー＋右矢印アイコン付きに変更
- リスト各行の右端に「>」シェブロンを追加
- 送信ボタンを対比色（コントラスト比4.5:1以上）にし、角丸と影を付与
| 指標 | 改善前 | 改善後 |
|---|---|---|
| 「操作に迷った」フィードバック | 月120件 | 月33件（72%減） |
| 商品詳細ページへの遷移率 | 28% | 51% |
| カート追加率 | 3.2% | 5.8% |
シグニファイアを追加するだけで遷移率が82%向上し、売上に直結するカート追加率も1.8倍になった。
状況: 従業員500名の物流企業が導入した在庫管理システム。UIをモダンなフラットデザインにリニューアルしたが、現場スタッフから「どこが押せるかわからない」とクレームが殺到。導入1ヶ月で操作ミスが旧システム比3倍に増加。
問題の分析:
- ボタンとラベルが同じフラットな見た目で区別がつかない
- クリック可能なテーブル行と不可能な行が同じスタイル
- 「保存」と「キャンセル」が同サイズ・同色で並列
改善策:
- ボタンに2pxのシャドウと8pxの角丸を追加（「浮いている＝押せる」）
- クリック可能行にホバー時の背景色変化を追加
- 「保存」をプライマリカラー、「キャンセル」をゴースト（枠線のみ）に差別化
| 指標 | リニューアル後 | 修正後 |
|---|---|---|
| 操作ミス件数 | 月180件 | 月45件 |
| タスク完了時間 | 平均4分20秒 | 平均2分50秒 |
| スタッフ満足度 | 10点中3.2 | 10点中7.8 |
「見た目のモダンさ」を優先した結果、現場が混乱した典型例といえる。フラットデザインで失ったアフォーダンスを復元するだけで操作ミスが75%減少し、スタッフ満足度も3.2→7.8に急回復した。
状況: 65歳以上をターゲットにした健康管理アプリ。登録ユーザー2万人のうち、1週間後の継続率が15%と極めて低い。ユーザーインタビューで「スマホに慣れていないので操作がわからない」が最多の回答。
アフォーダンス改善:
- スワイプ操作を廃止 → すべてタップ操作に統一（「押す」は直感的にわかる）
- ボタンサイズを44pt→60ptに拡大し、影付きの立体デザインに
- アイコンに必ずテキストラベルを併記（アイコンだけでは伝わらない）
- 「戻る」ボタンを画面左上から画面下部に移動（親指で届く位置）
| 指標 | 改善前 | 改善後 |
|---|---|---|
| 1週間後継続率 | 15% | 42% |
| 1回の操作あたりのタップミス率 | 23% | 6% |
| 「使い方がわかりやすい」回答率 | 18% | 71% |
ターゲットユーザーの身体的・認知的特性に合わせたアフォーダンス設計が、継続率を2.8倍に引き上げた。「誰にでもわかる」ではなく「その人にわかる」を目指すことが重要だ。
やりがちな失敗パターン#
- フラットデザインを追求しすぎて操作ヒントを消す — ミニマルな見た目は美しいが、ボタンとテキストの区別がつかないレベルまでフラットにすると操作性が犠牲になる。見た目と操作性のバランスを取る
- プラットフォームの慣習を無視する — iOSユーザーは「戻る」が左上にあると期待する。独自の操作体系はユーザーの学習コストを跳ね上げる。慣習に従った上で差別化する
- 自分が使えるから大丈夫と思い込む — デザイナーは自分のUIに慣れすぎている。初見のユーザーにテストしてもらい、「何ができるかわかるか」を確認する
- すべての要素に同じ強さのシグニファイアを付ける — 全部が目立つと何も目立たない。重要な操作ほど強いシグニファイア、補助的な操作は控えめにするという優先順位が必要
まとめ#
アフォーダンスは「見ればわかるUI」を作るための核心的な考え方。ユーザーに説明を読ませるのではなく、デザインそのもので操作方法を伝える。「このUI、説明なしで使えるか？」と自問することが、使いやすいプロダクトへの第一歩になる。