アフォーダンスとは?デザインで役立つ心理学の例を紹介します

Webデザインやブログの運営をする際に、アフォーダンスについて知っていればユーザーの離脱率を下げて広告のクリック率を高めることに役立てられます。
今回の記事ではアフォーダンスの意味やデザインの例、アフォーダンスとよく似た心理効果のシグニファイアについて紹介します。
分かりやすく簡単にまとめておりますので、興味のある方はぜひチェックしてみてください。

アフォーダンスとは

アフォーダンスとは

アフォーダンスとは、ジェームズ・ジェローム・ギブソンという心理学者が作った造語で、生活環境やモノが人間や動物に対して与える意味や価値もことです。
これだけだと意味が分かりづらいので例を上げて紹介します。

例えば、あなたの目の前にドアノブの着いた扉があるとします。
あなたは、誰に説明されなくてもドアノブをひねって扉をあけることができるでしょう。
引き戸だった場合も、説明なしでも横にスライドして扉を開けられるはずです。

他にも蛇口が目の前にあるとどうでしょう。
この場合も、捻れば水が出ることを容易に想像できますよね。

このように、モノの形や過去の経験によってどのような操作をすればいいのか分かることをアフォーダンスといいます。
「暗黙の了解」といえば分かりやすいかもしれません。
アフォーダンスを意識してWebサイトのデザインをすると、快適なUIを作成できます。
つまり、ユーザーにとってストレスが少なく、使いやすいWebサイトを作成できるようになります。


Webデザインにおけるアフォーダンスの例

アフォーダンスの例

このステップでは、アフォーダンスを意識したデザインの例について紹介します。
今回は、Webサイトでよく使われるデザインの例を紹介します。

リンク

画像のように、青色に下線のついた文字を見ると他のページに移動する「リンク」だと分かります。
最近は、CSSを使ってリンクをボタンやカードにデザインするサイトが多いですが、その際もなるべく他のページに移動することが分かりやすいようにする必要があります。

ハンバーガーメニュー

モバイルサイトなどでよく使われる、メニューを表示させるためのアイコンです。
四角形の中に三本線だけという、非常にシンプルなデザインで多くのWebサイトに使用されています。

検索ボックス

空白のボックスと虫眼鏡を合わせると、検索ボックスになります。
GoogleやYahoo!などの検索エンジンにも使われており、歴史の短いインターネットでもかなり浸透されたアフォーダンスだといえます。


アフォーダンスと似た心理学:シグニファイア

シグニファイア

アフォーダンスと混同されるものとして、シグニファイアがあります。
シグニファイアとは、人や動物に適切な行動を伝える知覚可能なシグナルのことです。
例を挙げると、ドアに書いてある「押す・引く」という文字などのことを指します。
アフォーダンスだけでは分かりづらい事柄などを補足説明する役割があります。
アフォーダンスだけで上手く機能しない場合は、このシグニファイアを使用しましょう。


まとめ:有名なサイトを参考にしてみよう

もしアフォーダンスを応用する時に悩むなら、AmazonやGoogleなど有名なWebサイトを参考にしてみましょう。
多くの人が利用するWebサイトなので、そこにアフォーダンスのヒントがあるかもしれません。

また、当サイトではPhotoshopやAfter EffectsなどAdobeソフト関連の記事を多く投稿しております。
この他にも、デザインや映像制作に関する知識や情報が知りたい方はぜひチェックしてみてください。