この記事を読むための時間：5分

WEBデザインを勉強している人なら、アフォーダンスという言葉を聞いたことがある人も多いかもしれません。

アフォーダンスの理論を活用することで、WEBサイトの離脱率や直帰率を改善したり、クリック率を上げたりすることもできるのです。

この記事で詳しく解説していきますので、ぜひ参考にしてみてください。

アフォーダンスとは

アフォーダンス（affordance）は、アメリカの知覚心理学者であるジェームズ・J・ギブソンによって提唱されました。この言葉は「与える・提供する」という意味がある「afford」をもとにした造語です。

アフォーダンスの意味

アフォーダンスの土台となる理論では、情報は光に満ちていて、人や動物は光から情報を受け取ることで知覚していると考えられていました。

しかし人や動物は、視覚だけでなく聴覚や触覚からも情報を知覚することができます。そこでギブソンは、環境全体から情報をピックアップ（受け取る）することが知覚であると考えました。

アフォーダンスの例

ヘアアイロンの例で考えてみましょう。

ヘアアイロンは、人に使い方をアフォード（提供）しています。例えば「手に持つことができる」「ものを挟むことができる」「熱くなる」といった情報によって、髪をまっすぐに伸ばすことができるというアフォードを出しています。

それに対し、人はヘアアイロンを見て「掴むことができる」「食べ物を焼けるかもしれない」「服のシワを伸ばせるかもしれない」「髪をまっすくにできるかもしれない」という使い方をピックアップします。

このように、物が人に使い方をアフォードし、そのアフォードを人がピックアップすることをアフォーダンスといいます。

ノーマンの理論

1988年にアメリカの認知科学者のドナルド・ノーマンが著書『誰のためのデザイン？』にてアフォーダンスという言葉を使用しました。これにより、アフォーダンスという言葉が広がったといわれています。

ノーマンのアフォーダンスの意味

ギブソンの提唱したアフォーダンスですが、ノーマンはそれに加え、「物がどのように使われるか、どのような性質を持つかが、ユーザーに直感的にわかりやすくデザインされているか」という意味で使用しました。

ノーマンのアフォーダンスの例

扉の例で考えてみましょう。

初めて見る扉（扉に見えるもの）でも、もしドアノブがついていれば押したり引いたりすることで開け閉めができることがわかっています。もしドアノブがついていないガラスの扉であれば、過去の経験則から自動ドアだと認識することができます。

つまり、初めて見た物であっても、過去の経験をもとにその物がどんなものか・どんな使い方をするものなのかを無意識に判断できるという意味で、ノーマンはアフォーダンスという言葉を用いました。

シグニファイアとは

ノーマンによって、ギブソンの提唱した本来の意味とは異なるアフォーダンスという言葉が広まりました。

そこでノーマンは、著書『複雑さと共に暮らす』の中で、ノーマンのいうアフォーダンスは「知覚されたアフォーダンス」と言うべきであるとコメントを出し、代わりに「シグニファイア」という言葉に置き換えたほうがいいと訂正しています。

シグニファイアの意味

人が物を知覚したとき、どのように使うものなのか・どんな性質を持っているのかが分かる手掛かりを示すものです。

わざわざ使い方の説明をしなくても、形や特徴から直感的に物の使い方を理解できるようなシグナルとして働きます。

シグニファイアの例

先ほども出てきた扉の例で考えてみましょう。

扉についているドアノブは、押したり引いたりして扉を開閉するためのものだというシグニファイアを発しています。ドアノブからの発信を受け取った私たちは、それが扉であることを認識し、ドアノブを引いて扉を開閉する動作をとります。

さらに、その扉に「push」や「pull」といった文字が書いているというシグニファイアがあれば、さらに理解しやすくなります。

アフォーダンスの活用法

こういったアフォーダンスやシグニファイアの考え方は、WEBデザインでも応用することが可能です。

この理論を活用することで、WEBサイトの離脱率や直帰率を改善したり、クリック率を上げたりすることにつながります。以下で解説していきます。

青文字のテキストリンク

他のWEBページへ移動させるためのテキストリンクは、以下のように通常は青文字で下線が引いてあります。

これはリンクです

こうすることでリンクであると分かりやすくなっています。

しかし反対に、以下のようにリンクになっているのに他の文字と色などが同じだと、それがリンクであるとユーザーが気付きにくくなります。

これはリンクです

このリンクのアフォードは、日本で最初に登場した検索エンジンであるYahoo!で採用されたのが始まりです。その影響を受け、現在ではリンクを貼る際のルールのようになり、他のサイトでも採用されるようになりました。

クリックできるボタン

WEBサイトで「次のページへ」や「購入」というアイコンはボタンで表示されることがあります。

ボタン

このボタンが立体的な四角形だったり、立体感のある矢印マークだった場合、ユーザーは「クリックできる場所である」と判別しやすくなります。

こういった配慮も、ユーザーに対して「クリックできる場所である」とアフォードしていることになります。

検索ボックスの虫眼鏡

例えばGoogleの検索ボックスには、横長の検索ボックスの端に虫眼鏡のマークがついています。このマークがあることによって、ユーザーはその場所が検索ボックスであると瞬時に判断することができます。

再生マーク

WEBサイトの中で、右向きの三角形のマークを見かけると、ユーザーは動画を再生するマークだと瞬時に判別できます。

スマートフォンのメニューマーク

スマートフォンでは、画面の上部に、四角形の中に三本線が入ったアイコンを見かけることがあります。

ユーザーは、そのアイコンをタップすることで、そのサイトのメニュー画面を開くことができると判断できます。

信用を下げるアフォーダンス

ユーザーが使いやすいWEBサイトを作成するには分かりやすいことが重要です。

デザインの凝ったWEBサイトを作ろうと思ってルールを逸脱したデザインのサイトにしてしまうと、ユーザーにとって使い勝手に悪いサイトになってしまいます。

さらに、アフォーダンスのルールを逸脱することで、ユーザーの信頼を下げてしまう危険性があります。

騙しリンク

通常、リンクを貼った場所は青文字にして下線を引くルールです。

しかし、例えば自分のサイトのコンテンツを見てもらうために、実際の内容とは違う文章にリンクを貼ったり、リンクに見えないよう文字を青文字にしなかったりすることは、ユーザーの信用を大きく下げてしまう行為です。

広告の誤クリック

例えばWEB広告のクリック率を上げるために、立体的なボタンマークを使用しなかったりコンテンツに見せかけて広告をクリックさせたりなど、ユーザーを騙す意味で使用するアフォードも、ユーザーの信用を裏切る行為となります。

仮に一時的にクリック率が上がったとしても、サイトの信用は下がるためすぐに効果は薄まります。

長期的な目で見れば、ユーザービリティの高いサイトがユーザーに信用され、クリック率の向上にもつながります。

まとめ

ギブソンの提唱したアフォーダンスという言葉ですが、現在はノーマンの使用した意味で使われることが多く、ユーザーがすぐに使い方を理解できるような特徴やデザインにすることが重要だという考え方が一般的です。

この理論はWEBデザインにも応用できます。アフォーダンスのルールを逸脱したサイトは使い勝手が悪くユーザーが定着しません。

そのため、ユーザーが一瞬で使い方を理解できるような、分かりやすいサイトデザインにすることが重要です。