アフォーダンスとは？ ギブソンの原典とノーマンの訂正から読み解く、「見ればわかる」資料設計の科学

先に結論を書きます。「この資料にアフォーダンスをつけよう」という言い方は、じつは原義から外れています。生態心理学者ジェームズ・J・ギブソンが1979年に定義したアフォーダンスとは、環境と行為者のあいだに生まれる行為の可能性のこと。目に見える必要すらありません。

この言葉をデザインの世界へ持ち込んだのはドナルド・ノーマンですが、その本人が後年、「perceived affordance（知覚されたアフォーダンス）と書くべきだった」と訂正しています。さらに2008年には「アフォーダンスは忘れて、シグニファイアを提供せよ」とまで言い切りました。

言葉づかいだけの話ではありません。押せるとわかるボタン、読み手が次に目をやる場所を、資料やスライドのどこにどう仕込むか。そういう実務に直結します。原典と実験データをたどりながら、「見ればわかる」をどう設計するか、そしてどこまでが根拠のある話なのかを整理していきます。

アフォーダンスとは？ 一言でいえば「環境が差し出している行為の可能性」

アフォーダンスとは、モノや環境が、それを知覚する人や動物に向かって差し出している行為の可能性です。デザイナーが後から付け足す視覚的な手がかりのことではありません。

もとは知覚心理学者ジェームズ・J・ギブソンの造語で、1977年の論文「The Theory of Affordances」と、1979年の著書『The Ecological Approach to Visual Perception（生態学的視覚論）』で世に出ました。ノーマンはギブソンの定義をこう要約しています。アフォーダンスとは世界と行為者のあいだの関係であり、自然の一部である。だから目に見える必要も、知られている必要も、望ましい必要もない。まだ誰にも発見されていないアフォーダンスもあれば、危険なアフォーダンスもある、と。

身近な例で考えるとわかりやすいでしょう。階段は「昇る」を差し出し、崖は「落ちる」を差し出します。同じ椅子でも、大人には「座る」を、幼児には「よじ登る」を差し出す。アフォーダンスはモノの側にあるのでも人の側にあるのでもなく、両者の関係のなかにある。ここがギブソン理論の核心です。

日本では佐々木正人『アフォーダンス——新しい認知の理論』（岩波書店, 1994）などを通じてこの生態心理学的な定義が紹介されました。ただ実務の現場では、むしろ「デザインの手がかり」という意味のまま広まって今日に至っています。

「アフォーダンスをデザインする」がなぜ原義から外れるのか

ノーマンが挙げている例が的確なので紹介します。パソコンの画面は、タッチに対応していようがいまいが、全ピクセルが「触る」を差し出している。物理的に指で触れられるからです。タッチ非対応の画面では、触っても何も起きないというだけの話にすぎません。

マウスも同じで、いつでもどこでもクリックできる以上、画面上のオブジェクトが「クリックを差し出しているか」を論じても仕方がない。ノーマンはそう書いています。

本当に問うべきなのは「そこをクリックするのは意味のある行為だと、使う人は感じているか」です。この問いに応えるのが、次に見る「知覚されたアフォーダンス」であり、その後継にあたるシグニファイアという考え方になります。

ノーマンはなぜ「シグニファイア」と言い直したのか

デザイナーが実際に扱えるのは、存在するアフォーダンスではなく「行為が可能だと伝える記号」のほうだ。ノーマンはそう考えて、2008年にこの記号をシグニファイア（signifier）と名づけました。

経緯を時系列で追うとこうなります。

• 1988年：『The Psychology of Everyday Things（誰のためのデザイン？）』でアフォーダンスをデザイン界に持ち込む。
• その後：「責任の一端は私にある。perceived affordance と書くべきだった。デザインで重要なのは、実際に何が真かよりも、使う人が何を知覚するかだから」と自ら訂正。
• 2008年：ACM『interactions』誌のコラム「Signifiers, not affordances」（15巻6号, pp.18–19）で「アフォーダンスは忘れ、シグニファイアを提供せよ」と表明。
• 2013年：『The Design of Everyday Things: Revised and Expanded Edition』でシグニファイアを正式な概念として組み込む。

ノーマンがくり返し指摘するのは、画面上のやりとりの多くが物理的なアフォーダンスではなく文化的な規約（convention）で成り立っている点です。画面右端の細長い帯がスクロールバーであること、それを下にドラッグすると中身が上へ動くこと。どれも学習された約束事にすぎず、初期には逆向きの規約を採用したシステムもありました。「これは文化的な規約であって、アフォーダンスではない」と、ノーマンは釘を刺しています。

4つの用語を1枚の表に整理する

実務にとって大事なのはここです。私たちが資料で設計できるのはシグニファイアと規約であって、アフォーダンスそのものではありません。

手がかりが弱いと、人はどれだけ迷うのか

手がかり（シグニファイア）が弱い画面では、目的の要素を見つけるまでに平均22%長くかかり、視線が止まる回数も25%増えました。アイトラッキング実験の実測値です。

Nielsen Norman Group の Kate Moran が2017年に行った実験では、実在する9サイトのページを素材に、レイアウトも内容もビジュアルスタイルも揃えたうえで、クリックできることを示す手がかりの強さだけを変えた2バージョンを用意しました。71名の一般ユーザーに、どちらか一方だけを見せる被験者間計画です。課題は「予約する場所が見つかったら『見つけた』と言ってください」といった探索型でした。

• 手がかりが弱い版では、平均所要時間が22%増加（対応のあるt検定、サイトを変量因子として p<0.05）
• 視線が止まる回数（固視回数）は25%増加
• 9ペア中6ペアで視線の動き方そのものが変わり、弱い版ではページ全体に視線が散った
• 宝飾サイトの例では、青・下線のリンクを使った強い版で86%（29名中25名）が見出しから目的のリンクへ視線を移したのに対し、本文と同じ書式にした弱い版では50%（24名中12名）にとどまった（p<0.005）。しかも弱い版では24名中9名が見出しを押せると思い込み、その下のリンクを一度も見ていません

Moran の解釈が的を射ています。問題は、弱い要素が目に入らないことではない。目には入っていても「これで合っている」と確信が持てず、探し続けてしまうことにある。彼女はこれを「クリックの不確実性（click uncertainty）」と呼びました。

もう一本、モスクワ国立大学の Burmistrov らが INTERACT 2015 で発表した実験も具体的です。20名（18〜28歳、平均21.2歳）を対象に、EyeLink 1000 で視覚探索を計測しています。

• 9×9のアイコン群から目標を探す課題では、写実的なアイコンが8.0秒だったのに対し、フラットなアイコンは15.4秒。ほぼ2倍かかりました（p<0.001）
• ウェブページ上で「押せそうな要素」をすべてクリックさせる課題では、見落としが26.0%から35.8%へ、押せないものを押してしまう誤答が16.6%から28.0%へ増加（いずれも p<0.001）
• 本文中の単語を探す課題では所要時間に差が出なかったものの、固視時間の延長、サッケード振幅と最大速度の低下という認知負荷の高まりを示す眼球運動の指標には有意差がありました（p=0.001）

最後の結果が示唆的です。時間は変わらないのに、脳の負荷だけが上がっていた。読み手は表向きこなせていても、内側では余計に働いているわけです。負荷が見えないところに出るという話は、AIがプレゼンを作る時代に、なぜ「あえて負荷をかける」のかで扱った「望ましい困難」とちょうど裏返しの関係にあります。負荷には学習を助けるものと、ただ消耗させるだけのものがある。探すための負荷は後者です。

「フラットでも変わらない」という研究もある

フラットデザインがつねに劣るわけではありません。少なくとも査読論文が1本、アイコンの認識しやすさにも課題完了時間にもエラー数にも有意差はなかったと報告しています。

Spiliotopoulos, Rigou & Sirmakessis（2018）は『Multimodal Technologies and Interaction』誌で、20名（男女各10名、20〜41歳、熟練者と初心者が半々）を対象に Tobii アイトラッカーを使った比較実験を行いました。結果は、デザイン様式がアイコンの認識性・課題完了時間・エラー数に影響するという仮説がすべて棄却。しかも参加者は主観的にはフラットデザインのほうを「使いやすい」と評価しています。

NN/g の実験にしても、結論は条件つきです。9ペアのうち3ペアでは視線の動きに差が出ませんでした。差が出なかったページに共通していたのは、次の3点です。

• 情報密度が低い（余白が多く、目立たない要素にも競合相手がいない）
• レイアウトが標準的（ボタンやナビが期待どおりの位置にある）
• 目標がまわりと十分にコントラストしている

争点は「フラットかどうか」ではなく、手がかりの強さと情報密度のつり合いにあります。余白の多い1枚スライドなら手がかりが弱くても迷いませんが、学会ポスターのように情報密度の高い媒体では、手がかりを強く設計しないと視線が迷子になります。

エビデンスの強さについても正直に書いておきます。ここで挙げた3件はいずれも単発の実験（N=20〜71）で、メタアナリシスではありません。Burmistrov らの参加者は20名中19名が女性のモスクワの学生で、実施は2014年11月です。NN/g の研究は査読を経ていない業界レポートで、公開後には方法論をめぐる議論も起きました。「フラットデザインは科学的に否定された」と言い切れる段階ではない、というのが公平な読み方でしょう。

実験心理学の世界では、まだ決着していない

「モノの形そのものが行為を呼び起こす」という主張は、実験室のレベルでは30年近く論争が続いており、確定した話ではありません。

論争の出発点になったのが、Tucker & Ellis（1998, 『Journal of Experimental Psychology: Human Perception and Performance』）の有名な実験です。参加者は日用品の写真が正立か倒立かを、左右のキーで答えます。すると課題とは無関係なはずの取っ手の向きと反応する手が一致したときに、反応が速く正確になりました。取っ手が左を向いたフライパンは左手の反応を促す。これが「握るという行為の準備が自動的に立ち上がった証拠」と受け止められました。

ところが Cho & Proctor（2010）が、この効果は片手のなかで2つのキーを使い分けても同じように出ることを示します。左手と右手を分けなくても効果が出るのなら、それは「握る手が準備される」というアフォーダンスではなく、左右という抽象的な空間コードの一致（サイモン効果）で説明がついてしまいます。

その後も決着はついていません。Pappas（2014, 『Cognition』）はシルエットと写真で両者の効果が別々に動くことを示し、Pellicano ら（2015, 『Frontiers in Human Neuroscience』）は空間的な刺激–反応適合性とアフォーダンス効果は同じ仕組みではないと主張しました。2020年の『Psychological Research』誌の研究にいたっては、取っ手向き効果が輝度の非対称な変化や、注視点から見た対象の位置のずれといったボトムアップの注意要因に強く左右されると報告しています。

ここから持ち帰りたいことは2つあります。ひとつは、「アフォーダンス理論が科学的に証明しているのだから、この図解は直感的だ」と主張するのは踏み込みすぎだということ。もうひとつは、それでも知覚された手がかりと学習された規約が行動を変えることは、UIや視覚探索のレベルでくり返し観察されているということです。実務が拠りどころにすべきは後者のほうです。

なお「身体の状態や動きが意味の理解に影響する」という広い意味での身体性の議論には、これとは別系統の研究蓄積があります。そちらは「身体化された認知」が変えるプレゼンデザインの科学で整理しました。

明日から使える、資料とスライドの「シグニファイア設計」5原則

目指すのは「押せる場所・次に見る場所を、迷わず特定できること」です。見えていることではなく、確信が持てることを基準にしてください。

1. 手がかりは必ず2つ以上重ねる

色だけ、位置だけでは弱い。「色＋下線」「矩形＋影」「アイコン＋ラベル文言」というふうに、独立した手がかりを重ねます。NN/g の実験で唯一差が出なかったリンクの事例は、下線がなくても本文と十分にコントラストする色が残っていたケースでした。逆に本文とまったく同じ書式にしたとたん、半数が見落としています。

2. 規約は破らない

ノーマンは「規約に反する者は、たとえ自分の方法が優れていると確信していても失敗する運命にある」と書いています。リンクは色を変える、行動を促すボタンは矩形と高いコントラストで、進行は左から右・上から下。創意を発揮する場所は、規約ではなく中身のほうです。

3. 情報密度が高いページほど、手がかりを強くする

NN/g が「差が出なかった3条件」に挙げたのは、低い情報密度、標準的なレイアウト、まわりと際立つ目標でした。裏を返すと、詰め込んだページで手がかりを弱めるのが最悪の組み合わせになります。申請書の概念図（ポンチ絵）のように要素の多い図では、「まずここを見てほしい」という1〜2か所だけを枠や番号や色で強く示すのが有効です。

4. 「見出しがゴールに見える」罠を避ける

宝飾サイトの実験では、24名中9名が見出し「3 Year: Pearl」を押せると思い込み、その下にある本当のリンクを一度も見ませんでした。大きく目立つ要素は、それだけで「ここが行き先だ」という記号として働いてしまうのです。スライドでも、大見出しばかり強調して結論の一文を弱く置けば、聴衆は見出しで止まります。学会発表スライドの設計で「1枚1メッセージ」が効くのは、視線の終着点を1つに絞れるからです。

5. 「知覚されたアフォーダンス」を5秒でテストする

作った資料を5秒だけ見せ、閉じてから尋ねます。「次にどこを見ますか。どこを押しますか」。答えが割れたなら、それは設計の欠陥であって読み手の不注意ではありません。NN/g の実験がやったことも、突き詰めればこれと同じ問いかけです。3人に聞くだけでも、自分ではまず気づけない見落としが出てきます。

よくある質問（FAQ）

アフォーダンスとシグニファイアの違いを一言でいうと？

アフォーダンスは「実際に可能な行為」、シグニファイアは「可能だと伝えるための記号」です。ノーマンは2008年のコラムで、モノの形によって行為が明白になっている場合、それはアフォーダンスではなくシグニファイアだと整理しました。デザイナーが直接ふれられるのはシグニファイアのほうです。

日本で「アフォーダンス＝デザインの手がかり」と説明されるのは間違いですか？

原義からは外れています。ただし誤用の出発点はノーマン自身の1988年の使い方にあり、本人も後に「perceived affordance と書くべきだった」と認めました。実務で通じる言葉として使うぶんには構いませんが、生態心理学の文脈（ギブソンや佐々木正人）では意味が違うと知っておくと、議論がかみ合いやすくなります。

フラットデザインは使ってはいけないのですか？

そんなことはありません。NN/g の実験でも9ペア中3ペアでは差が出ておらず、2018年の査読論文では有意差そのものが見つかりませんでした。問題はフラットであること自体ではなく、情報密度が高いのに手がかりが弱い組み合わせです。低い密度、標準的なレイアウト、高いコントラストという3条件がそろえば、フラットでも実害は小さいと報告されています。

スライドやポスターにも同じことが当てはまりますか？

当てはまる部分と、そうでない部分があります。ここで挙げた実験はいずれもクリックできるかどうかを扱ったウェブUIの研究で、印刷物やスライドへの一般化は厳密には検証されていません。ただ「視線の終着点をどう設計するか」という視覚探索の論点は共通しているので、実務の仮説としては十分に使えます。

「取っ手の向き効果」は使えるテクニックですか？

いまのところ、資料設計の根拠に使うのはおすすめしません。Tucker & Ellis（1998）の効果は、Cho & Proctor（2010）以降「アフォーダンスではなく抽象的な空間コードの効果ではないか」という反論を受け、今も決着していないからです。ミリ秒単位の実験室効果を、資料の説得力の裏づけに転用するのは飛躍があります。

まとめ：設計できるのはアフォーダンスではなく、シグニファイアと規約

• アフォーダンス（Gibson 1979）は環境と行為者のあいだにある行為の可能性で、目に見える必要はない。
• ノーマン自身が訂正している。デザインで問題になるのは「知覚されたアフォーダンス」であり、2008年以降はシグニファイアという語を使うべきだと述べた。
• 手がかりが弱いと人は迷う。NN/g（2017, N=71）で所要時間が22%増、固視回数が25%増。Burmistrov ら（2015, N=20）ではフラットなアイコンの探索が約2倍、誤クリックが28%。
• ただし条件つき。情報密度が低く、レイアウトが標準的で、目標が際立っていれば差は消える。2018年の査読論文では有意差が出なかった。
• 実験心理学のレベルではまだ未決着。取っ手向き効果がアフォーダンス由来かサイモン効果かは、1998年から議論が続いている。

次の一歩として、いま手元にある資料を1枚だけ選び、5秒見せて「次にどこを見ますか」と3人に聞いてみてください。答えが割れた場所こそ、あなたの資料に足りていないシグニファイアです。

出典

• Gibson, J. J. (1977). The theory of affordances. In R. E. Shaw & J. Bransford (Eds.), Perceiving, Acting, and Knowing. Lawrence Erlbaum Associates.（書籍の一章。オンライン公開URLは確認できず）
• Gibson, J. J. (1979). The Ecological Approach to Visual Perception. Houghton Mifflin.（書籍。オンライン公開URLは確認できず）
• Norman, D. A. (2008). Affordances and Design. jnd.org. https://jnd.org/affordances-and-design/
• Norman, D. A. (2008). The way I see it: Signifiers, not affordances. interactions, 15(6), 18–19. ACM Digital Library／jnd.org 再掲版
• Norman, D. A. (2013). The Design of Everyday Things: Revised and Expanded Edition. Doubleday.（書籍）
• Moran, K. (2017). Flat UI Elements Attract Less Attention and Cause Uncertainty. Nielsen Norman Group（N=71、9サイト×2版、被験者間計画）. 記事本体／批判への回答
• Burmistrov, I., Zlokazova, T., Izmalkova, A., & Leonova, A. (2015). Flat Design vs Traditional Design: Comparative Experimental Study. INTERACT 2015, LNCS 9297, 106–114（N=20）. Springer／著者公開PDF
• Spiliotopoulos, K., Rigou, M., & Sirmakessis, S. (2018). A Comparative Study of Skeuomorphic and Flat Design from a UX Perspective. Multimodal Technologies and Interaction, 2(2), 31（N=20）. MDPI
• Tucker, M., & Ellis, R. (1998). On the relations between seen objects and components of potential actions. Journal of Experimental Psychology: Human Perception and Performance, 24(3), 830–846. 論文情報
• Pappas, Z. (2014). Dissociating Simon and affordance compatibility effects: Silhouettes and photographs. Cognition, 133(3), 716–728（Cho & Proctor 2010 の主張を検討）. PubMed
• Pellicano, A., et al. (2015). Spatial stimulus-response compatibility and affordance effects are not ruled by the same mechanisms. Frontiers in Human Neuroscience, 9, 283. Frontiers
• Critical bottom-up attentional factors in the handle orientation effect (2020). Psychological Research. Springer
• 佐々木正人 (1994). 『アフォーダンス——新しい認知の理論』岩波書店.（書籍。公式のオンライン全文URLは確認できず）