説明書がなくても直感で使えるデザインの秘密【アフォーダンス】

初めて訪れた建物のドアに丸い取っ手が付いていたら、あなたは何も説明されなくても「回して引く(または押す)」という動作をすると思います。逆に、平らな板が付いていたら「押す」と判断するはずです。この、モノの形状だけで使い方が分かってしまう性質を「アフォーダンス」と呼びます。

目次非表示

アフォーダンスとは何か: 「行為の可能性」を知覚する
Webサイトで確立されているアフォーダンス(シグニファイア)
タッチデバイスで新しく確立されたアフォーダンス
まとめ

目次へ

アフォーダンスとは何か: 「行為の可能性」を知覚する

物や環境が持つ特徴から「こう使えそうだ」と行為の可能性を知覚できることを「アフォーダンス」といいます。UIでは、見た目から操作方法を予測しやすくする考え方として応用されます。

💡 身近な5つの例

ドアノブを見ると「握って回せそう」と感じる
大きく浮き上がったボタンを見ると「押せる」と判断する
テキスト入力欄の枠を見ると「ここに文字を入れる」と分かる
横に少し見切れたカードを見ると「スワイプできそう」と感じる
動画の再生アイコンを見ると、説明がなくても押したくなる

この言葉は、アメリカの知覚心理学者ジェームズ・J・ギブソンによる造語です。環境や物が、それと関わる動物(人間を含む)に対して与える「行為の可能性」のことを指します。取っ手の丸い形は「回して引く/押す」という行為を、リモコンの右向き三角のボタンは「再生する」という行為を、ナイフやフォークの持ち手部分は「握る」という行為を、それぞれ無意識に想起させます。

⚠️ 「アフォーダンス」という言葉、実は誤用が広まっている

デザイン業界でこの言葉を広めたのは、認知科学者ドナルド・ノーマンが1988年に出版した著書『誰のためのデザイン?』ですが、実はノーマン自身が後年、自分の使い方が誤用だったと認めています。

ギブソンが提唱した本来のアフォーダンスは「動物とモノの間に実際に存在する行為の可能性」を指す概念で、形状などからそれが人に知覚できるかどうかとは関係のない話でした。一方ノーマンは、デザインの文脈で「ユーザーがそれを見てどう感じるか(知覚できるか)」の方を重視して論じたため、本来は「知覚されたアフォーダンス(perceived affordance)」と呼ぶべきだったと、著書の改訂版などで訂正しています。

さらにノーマンは後の著作で、この「知覚されたアフォーダンス」をより正確に表す言葉として「シグニファイア(signifier)」という概念を導入しました。シグニファイアとは、「どこで、どんな行為ができるのか」を人に伝えるための、色・形・配置などの具体的な視覚的手がかりを指します。今Web業界で「アフォーダンス」として語られる内容は、厳密にはこの「シグニファイア」を指していることがほとんどです。

Webサイトで確立されているアフォーダンス(シグニファイア)

Webの歴史はまだ30年程度と浅いですが、それでも次のような視覚的手がかりがすでに確立されています。

青文字+下線: リンクである
影のついた立体的なボタン: 押せるボタンである
奥行きのある長方形の枠: テキストを入力できるフォームである

これらは、多くのユーザーがすでに「そういうものだ」と経験的に学習しているパターンです。デザインの好みで青文字・下線をやめる場合も、「クリックできそうに見える」他の視覚的な手がかり(カーソルが変わる、ホバーで色が変わるなど)は残しておくのが安全です。マウス操作を前提にしたホバー変化だけに頼ると、タッチデバイスやキーボード操作(フォーカス状態)では手がかりが伝わらないため、複数の手がかりを組み合わせておくとより安心です。

タッチデバイスで新しく確立されたアフォーダンス

スマホの普及によって、マウス時代にはなかった新しいアフォーダンスも生まれています。「横にスワイプできそうな見切れたカード」「下に引っ張って更新できる感覚」など、iOSやAndroidの標準的な挙動を踏まえたデザインにしておくと、ユーザーは説明なしに直感的に操作できます。逆に、スマホアプリの標準的な挙動から大きく外れた独自のジェスチャー操作を発明してしまうと、かえって使いにくいUIになりがちです。

💡 アフォーダンスを「あえて裏切る」演出もある

基本は「見慣れたパターンから外れない」のが鉄則ですが、唯一のメリットとして「期待を裏切ることによる驚きや感動の演出」があります。手品師が帽子から鳩を出して驚かせられるのは、帽子に何十羽も入っているはずがないと分かっているからです。

エンタメ性の強いサイトであれば、「クリックすると意外な場所が反応する」「スクロールと逆方向に動く」といった、あえてユーザビリティを損なう仕掛けが、体験としての面白さにつながることもあります。ただしこれは、通常のコーポレートサイトやECサイトのような「迷わせないこと」が最優先の場面では避けるべき手法です。