【初心者エンジニア向け】アフォーダンスとは？日常とUIデザインで役立つ心理学的ヒント！
山崎講師こんにちは。ゆうせいです。
今日は、新人エンジニアの方にぜひ知っておいてほしい「アフォーダンス」という考え方について、わかりやすくお話しします！
この言葉、聞き慣れないかもしれませんが、UI/UXデザインやプロダクト設計、さらには日常生活にも深く関係する非常に重要な概念なんです。
アフォーダンスとは？ざっくり言うと…
アフォーダンス（affordance） とは、「ある物体が、どんな行動をとれるかを自然に示す性質」のことです。
もっと簡単に言うと、「見ただけで、どう使うかがわかる仕組み」と考えてください！
例えで理解しよう！
たとえば、ドアを思い浮かべてください。
- ドアノブがついていたら、「回すんだな」と感じますよね？
- 押し板がついていたら、「押すんだな」と自然にわかります。
これは、形やデザインが「こう使ってください」と無言で教えてくれているのです。これこそがアフォーダンスです！
アフォーダンスの起源と定義
アフォーダンスは、心理学者ジェームズ・J・ギブソンが1970年代に提唱した概念です。もともとは人間の知覚に関する理論で、「環境が人に与える行動のきっかけ（= afford）」という意味合いでした。
後に、ドナルド・ノーマンという認知科学者がこの概念をUIやデザインに応用しました。
ノーマン的アフォーダンス（知覚可能なアフォーダンス）
- 「使い方が目で見てわかる」
- デザインによって正しい操作を誘導できる
というのがポイントです。
UIデザインにおける活用例
ボタンのデザイン
- 立体的に見えるボタン → 「押せそう」
- カーソルを当てたら色が変わる → 「クリックできるとわかる」
スクロールの誘導
- コンテンツの下にちょっとだけ次の要素が見えている → 「下にスクロールできそう」と感じる
これらはすべて、ユーザーが迷わずに操作できるよう、アフォーダンスを意識したデザインになっています。
メリットとデメリット
| メリット | デメリット |
|---|---|
| ユーザーが直感的に操作できる | アフォーダンスが過剰だと逆に混乱を招くことも |
| 操作マニュアル不要で使いやすくなる | デザインに制限が出る場合もある |
物理的アフォーダンス vs デジタルアフォーダンス
| 種類 | 説明 | 例 |
|---|---|---|
| 物理的アフォーダンス | 実物の形や材質が示す使い方 | ドアノブ、取っ手、椅子の形 |
| デジタルアフォーダンス | UIやアイコンが示す使い方 | ボタンの影、カーソル変化、リンクの色 |
たとえば「下線付きの青い文字」は、たいてい「リンクだ」と理解されます。これも、ネット時代に育まれたアフォーダンスの一種です。
アフォーダンスとサイン（signifier）の違いは？
ノーマンは、サイン（signifier）という言葉も紹介しています。
- アフォーダンス＝「行動できる可能性」
- サイン＝「その可能性があることを示すもの」
つまり、「ドアノブを見て、回せるとわかる」→ サインがアフォーダンスを伝えているという構造です！
図解で理解しよう！
アフォーダンスの関係図
[物の形] → [人の直感] → [行動]
↑ ↓
サイン（signifier）
なぜエンジニアが知っておくべき？
エンジニアも、ただ機能を実装するだけでなく、
- 「ユーザーはどう感じるか？」
- 「この操作は直感的か？」
を考える必要があります。
アフォーダンスを意識すれば、ユーザーが迷わないプロダクトを作れます！
まとめ
- アフォーダンスとは「使い方を自然に伝える性質」
- UIデザインでも超重要
- ユーザーが操作を間違えにくくなる
- サイン（signifier）とセットで考えると理解しやすい
今後の学び方
次のステップとしては、以下のような学びがおすすめです！
- ノーマンの著書『誰のためのデザイン？』を読む
- 自分がよく使うアプリの中で「アフォーダンス」がどう活かされているか観察する
- 自分で簡単なUIを作り、「自然に操作できるか？」をユーザーに聞いてみる
それでは、楽しい学習を！
投稿者プロフィール
