【初心者エンジニア向け】アフォーダンスとは？日常とUIデザインで役立つ心理学的ヒント！

2025年5月12日 2025年5月12日山崎講師

山崎講師

こんにちは。ゆうせいです。

今日は、新人エンジニアの方にぜひ知っておいてほしい「アフォーダンス」という考え方について、わかりやすくお話しします！

この言葉、聞き慣れないかもしれませんが、UI/UXデザインやプロダクト設計、さらには日常生活にも深く関係する非常に重要な概念なんです。

アフォーダンスとは？ざっくり言うと…

アフォーダンス（affordance） とは、「ある物体が、どんな行動をとれるかを自然に示す性質」のことです。

もっと簡単に言うと、「見ただけで、どう使うかがわかる仕組み」と考えてください！

例えで理解しよう！

たとえば、ドアを思い浮かべてください。

ドアノブがついていたら、「回すんだな」と感じますよね？
押し板がついていたら、「押すんだな」と自然にわかります。

これは、形やデザインが「こう使ってください」と無言で教えてくれているのです。これこそがアフォーダンスです！

アフォーダンスの起源と定義

アフォーダンスは、心理学者ジェームズ・J・ギブソンが1970年代に提唱した概念です。もともとは人間の知覚に関する理論で、「環境が人に与える行動のきっかけ（= afford）」という意味合いでした。

後に、ドナルド・ノーマンという認知科学者がこの概念をUIやデザインに応用しました。

ノーマン的アフォーダンス（知覚可能なアフォーダンス）

「使い方が目で見てわかる」
デザインによって正しい操作を誘導できる

というのがポイントです。

UIデザインにおける活用例

ボタンのデザイン

立体的に見えるボタン → 「押せそう」
カーソルを当てたら色が変わる → 「クリックできるとわかる」

スクロールの誘導

コンテンツの下にちょっとだけ次の要素が見えている → 「下にスクロールできそう」と感じる

これらはすべて、ユーザーが迷わずに操作できるよう、アフォーダンスを意識したデザインになっています。

メリットとデメリット

メリット	デメリット
ユーザーが直感的に操作できる	アフォーダンスが過剰だと逆に混乱を招くことも
操作マニュアル不要で使いやすくなる	デザインに制限が出る場合もある

物理的アフォーダンス vs デジタルアフォーダンス

種類	説明	例
物理的アフォーダンス	実物の形や材質が示す使い方	ドアノブ、取っ手、椅子の形
デジタルアフォーダンス	UIやアイコンが示す使い方	ボタンの影、カーソル変化、リンクの色

たとえば「下線付きの青い文字」は、たいてい「リンクだ」と理解されます。これも、ネット時代に育まれたアフォーダンスの一種です。

アフォーダンスとサイン（signifier）の違いは？

ノーマンは、サイン（signifier）という言葉も紹介しています。

アフォーダンス＝「行動できる可能性」
サイン＝「その可能性があることを示すもの」

つまり、「ドアノブを見て、回せるとわかる」→ サインがアフォーダンスを伝えているという構造です！

図解で理解しよう！

アフォーダンスの関係図

[物の形] → [人の直感] → [行動]  
      ↑       ↓  
    サイン（signifier）

なぜエンジニアが知っておくべき？

エンジニアも、ただ機能を実装するだけでなく、

「ユーザーはどう感じるか？」
「この操作は直感的か？」
を考える必要があります。

アフォーダンスを意識すれば、ユーザーが迷わないプロダクトを作れます！

まとめ

アフォーダンスとは「使い方を自然に伝える性質」
UIデザインでも超重要
ユーザーが操作を間違えにくくなる
サイン（signifier）とセットで考えると理解しやすい

今後の学び方

次のステップとしては、以下のような学びがおすすめです！

ノーマンの著書『誰のためのデザイン？』を読む
自分がよく使うアプリの中で「アフォーダンス」がどう活かされているか観察する
自分で簡単なUIを作り、「自然に操作できるか？」をユーザーに聞いてみる

それでは、楽しい学習を！

投稿者プロフィール

山崎講師代表取締役

セイ・コンサルティング・グループ株式会社代表取締役。
岐阜県出身。
2000年創業、2004年会社設立。
IT企業向け人材育成研修歴業界歴20年以上。
すべての無駄を省いた費用対効果の高い「筋肉質」な研修を提供します！
この記事に間違い等ありましたらぜひお知らせください。