アフォーダンス理論とは?シグニファイアとの違いや具体例、Webデザインとの関係を解説

Sprocket編集部

イメージ:アフォーダンス理論とは?シグニファイアとの違いや具体例、Webデザインとの関係を解説

アフォーダンス理論は認知心理学の用語で、デザインの文脈などで使われます。ここでは、アフォーダンス理論とは本来どのようなものかを確認した上で、Webデザインやマーケティングとの関係についても考えていきます。

アフォーダンス理論とは?

現在アフォーダンス理論(Affordance)と呼ばれるものには、アメリカの心理学者であるジェームス・ジェローム・ギブソンが提唱したものと、アメリカの認知科学者であるドナルド・アーサー・ノーマンが提唱したものの2つがあります。デザインの文脈で広く使われているのは、ノーマンが提唱した理論です。まずは、この2つの理論について見ていきましょう。

ギブソンのアフォーダンス理論

まずは、ギブソンが提唱した本来の「アフォーダンス理論」を紹介します。ギブソンの提唱するアフォーダンス理論は、1950年後半に提唱されたもので、認知心理学で「情報は環境に存在し、人や動物はそこから意味や価値を見いだす」という概念になります。ちなみに、アフォーダンスは英語の「アフォード(afford)」が、「与える」や「提供する」という意味から、ギブソンの作った造語です。

例えば「定規」と「人」関係の場合、「人」が「定規」を使って「定規は長さを測るもの」という役割を持つようになるのではなく、「定規」にある「長さを測るもの」という性質が、「人」に「長さを測る」という行動を引き出しているということです。この場合「定規には長さを測ることができるというアフォーダンスが存在する」と表現します。

アフォーダンスは環境に無数に存在し、「プール」があれば「泳ぐことができる」、「ベッド」があれば「寝ることができる」、「扉」なら「開けることができる」というアフォーダンスによって、人が行動を起こしていることになります。

ノーマンのアフォーダンス理論

現在広く使われているアフォーダンスは「物の持つ性質が、行動のヒントや意味を伝達する」という意味であることのほうが多いでしょう。これは、1988年にアメリカの認知科学者であるドナルド・アーサー・ノーマンが提唱したもので、人が過去の経験などをもとに行動や意味に結びつけると考えました。

例えば「定規」と「人」関係の場合、「定規」に目盛りが付いているから人は「長さを測るもの」だとわかるということです。この場合「目盛りがある物は、長さを測ることができる」という「知覚のアフォーダンスが存在すると表現します。

同じようにトイレの入り口に「青」と「赤」の表示があれば、「男性用」と「女性用」と認識しますし、「ドア」に「ノブ」が付いて入れば、「押す」か「引く」かして開けることができるとわかる知覚のアフォーダンスによって、人は行動のヒントを得ているのです。

「知覚のアフォーダンス」改め「シグニファイア」

2つのアフォーダンス理論は同じようで少し違う意味を持つため、ノーマンは、自身の著書の中で知覚のアフォーダンスを「シグニファイア(Signifier)」という名称に改めました。この「シグニファイア」も造語で、もとは英語の「シグナル」からきています。

例えば、先ほどの定規でいえば「目盛りがある物は、長さを測ることができる」という「シグナルを発している」といえます。「適切なシグナル(サイン)がユーザーの行動を誘導する」という意味では、こちらが近いといえるでしょう。

シグニファイアがデザインの文脈で利用される理由

シグニファイアは、適切な行動を誘導する役割を持ちます。定規の例であれば、ぱっと見て目盛りだとわからないデザインの定規があった場合、ユーザーは「長さを測る」という期待する行動をとってくれず、直線を引いたり、ペーパーナイフのように使おうとしたりするかもしれません。このような間違った使い方をされないようにするには、誤解を受けないようデザインする(=シグナルを発信する)ことが重要です。

アフォーダンス(シグニファイア)の具体例

ご紹介したように、デザインの現場で「アフォーダンス」というと、多くの場合シグニファイアのことを指します。ここでは、実際にシグニファイアを意識してデザインされた具体例を見ていきましょう。

電車の駅:進行方向・電車の種類

電車の駅には、シグニファイアを意識したデザインが多数見られます。例えば、駅のホームにある「駅名標」です。ホームに「有楽町―東京→神田」という駅名標があれば、人は現在の駅が「東京駅」で、進行方向の電車に乗れば次の駅が「神田」だと直感的にわかります。また「有楽町」は前の駅なので、進行方向が逆の電車に乗らなければいけないことがわかるでしょう。

複数の電車が乗り入れしている駅であれば、電車の種類ごとに文字だけでなく「色」などを付けることで、人が判断しやすくします。例えば、東京の地下鉄であれば赤が丸ノ内線、オレンジが銀座線などです。しかし、あくまでもシグニファイアは、過去の経験が影響するため、大阪から来た人がこの色を見ても反応できない可能性は高いです。

車:信号・交通標識

車を運転していると、シグニファイアを意識したデザインをよく見かけます。一番わかりやすいのは「信号」でしょう。青は「進め」、黄、赤は「止まれ」だとわかります。また、交通標識も、「数字」を書いた速度制限、駐車禁止の「×」マーク、「緑」で示された高速道路など、シグニファイアを意識したデザインです。

信号はともかく、交通標識は免許取得の際に会得した「過去の経験」としての知覚ですが、わからない人が見ても、大人であれば過去の経験からある程度は予測できるものになっています。

AV機器:操作ボタン・接続端子

AV機器の操作ボタンや接続端子も、シグニファイアを意識したデザインです。例えばCDやDVDの操作ボタンで、横を向いた△があれば「再生」、□は「停止」など、ひと目見れば想像できるでしょう。

また、ビデオカメラでいえば「録画ボタン」だけが赤くなっているはずです。オーディオ関係の接続端子も同様で、ステレオ音声の右と左を「右=R=赤」、「左=L=白」とし、端子に色を付けることで、正しく接続できるようにしています。

WebデザインのUIにおける知覚的アフォーダンスとマーケティングの関係

具体例を見てわかるように、アフォーダンス理論はUI(ユーザーインターフェース)に応用されていることがわかります。シグニファイアが適切であれば、ユーザーは見ただけで行動や意味を理解するため、画像や説明などなしでも期待する行動を取ってくれやすくなります。ここでは、WebデザインのUIにおける知覚的アフォーダンスを見ていきましょう。

明示的な知覚的アフォーダンス

行動を視覚で明示します。例えば、周囲よりも浮き上がって見えるものは「これはボタンで、押せるかもしれない」と知覚します。同様に、Webで下線が引かれた色違いのテキストがあれば「これはリンクで、押せるかもしれない」と認知します。

しかし、押せると認知することと実際にクリックすることは別の話です。もしマーケティング的により強くクリックを期待するのであれば、キャッチコピーを工夫したり、押すことで何が起きるのかをきちんと説明したりといった工夫が必要です。

潜在的な知覚的アフォーダンス

通常は隠れているものを操作することで、行動ができることを潜在的に感じます。例えば、ドロップダウンメニューはクリックするとメニューが表示されます。下向きの三角形があればその下にメニューが隠れていることがわかり、三本線があればハンバーガーメニューにメニューが隠れていることがわかります。これらのメニューに加え、検索メニューを表す虫眼鏡マークなども多くのWebサイトで利用されています。

しかし、これらのシグニファイアはすべての人が知覚できるとは限りません。特にインターネットに慣れていないユーザーはハンバーガーメニューでメニューを開けることを知らないケースもあります。そのような場合、対象ユーザーにポップアップなどを利用して機能を説明してあげる手法も有効です。

否定的な知覚的アフォーダンス

できることではなく「できないこと(否定)」を知覚させることもあります。例えば、コインロッカーで1つだけ「×」に見えるようにガムテープが貼られていれば、そのコインロッカーは「使えない」と知覚するでしょう。Webサイトでも、禁止のアイコンやグレーアウトしてフォーカスできないフォームを利用することで「利用できない」という知覚につながります

マーケティングの視点では、ユーザーはフォーム入力に一定の労力がかかりますので、思うように完了できないと大きなストレスを感じて離脱につながります。フォームまで来てくれたユーザーの体験を毀損しないように「なぜできないのか」「どうすれば目的を達成できるのか」の補助的な情報が必要です。フォームを最適化することをEFOと呼びます。

虚偽的な知覚的アフォーダンス

虚偽的なアフォーダンスは、正しくないシグニファイアの結果です。例えば、ボタンのように見えるのに押せなかったり、リンクではないのに下線がついていたりといったUIは、ユーザーからすると虚偽の知覚につながり、体験を毀損します。WebサイトのUIをデザインする際は、このような虚偽のアフォーダンスが存在しないかよく注意する必要があります。

Sprocketでは、1,000人調査から明らかになった、ポップアップを利用したコンバージョン改善のヒントを資料にまとめています。よろしければダウンロードしてご活用ください。

1,000人調査からわかったコンバージョン改善ヒント

ユーザーの知覚と行動を手助けしてWebサイトの体験を向上する

アフォーダンス理論は、デザインの文脈では多くがノーマンのシグニファイアのことを指して使われます。そして、アフォーダンスはあくまで行動の可能性を認知するものであり、ユーザーの行動を促進したいなら、別途マーケティングの視点による取り組みが必要です。

Webサイトでは、ホームを表す家のアイコンや検索を表す虫眼鏡のアイコンなど、多くのユーザーが認識できるシグニファイアが存在します。しかしそれに従っていればOKというわけではありません。ハンバーガーメニューなど、一部の人が知覚できないUIは、個別にサポートが必要です。

その際のサポートに有効なのが、ポップアップによるWeb接客ツールです。Sprocketは、ユーザーの行動データをリアルタイムに分析して、最適なタイミングでポップアップによる「声かけ」が可能です。システム上、メニューなどを自由に変えられない場合でも、サイト上の行動データから「迷っているな」「気付いていないな」と推測できる場合は、ポップアップで声かけをすることでユーザーの助けとなることができます。

Sprocketは5万回以上のA/Bテストの実績から、ユーザーの心理に合わせたポップアップシナリオを多数ご提案いたします。WebサイトのUIやデザイン、ユーザーの体験向上をお考えなら、ぜひご相談ください。

サービス資料ダウンロード

Sprocketの機能、コンサルタント、導入事例、実績、
プラン体系などをご紹介します。(無料)

資料ダウンロード

導入検討の相談・見積もり

新規導入、乗り換えのご相談、Web接客ツールの比較など
お気軽にお問い合わせください。(無料)

お問い合わせ

03-6303-4123(受付:平日10:00~19:00)