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

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

アフォーダンスとは

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

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

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

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


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

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

リンク

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

ハンバーガーメニュー

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

検索ボックス

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


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

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


ただ副業してもダメ!?
デザインだけに専念して収入も増やせる方法とは?

今回の記事を読んだ方は、デザイナーもしくはデザイナー見習いという人が多いのではありませんか。
今の会社や収入に不満があり、デザインの副業をして収入を増やそうと考える人もいるでしょう。
しかし、実際に副業をしても

「クラウドソーシングで探しても倍率が高くコンペも落とされる…」
「案件を取るために自分で営業しても上手くいかない…」
「単発の案件ばかりで継続的に稼げない…」
「営業や事務作業などの無駄な時間が多い…」

という悩みを持ったことはありませんか。

副業やフリーランスの場合、営業や事務対応など全ての作業を自分で行なわないといけないため大変ですよね。
そんな時に、「案件を紹介してくれたり、仕事中のサポートをしてくれる人」がいたら副業も上手くいくと思いませんか。

今回紹介する「レバテッククリエイター」を使用すれば、未経験者でもデザインだけに専念して収入UPが可能です。
レバテッククリエイター」はクリエイター向けの案件紹介サイトです。

特長的なのは自分に適した案件を紹介してくれるためデザインに専念できる点と、キャリアプランや仕事の進め方、果ては次回プロジェクトについての相談が可能な点です。

それら全てのサービスを無料で使用できます。
そのため、デザインに専念して収入を増やしたい人自分で営業したくない人は、ぜひ一度試してみてほしいサービスとなっております。

おすすめポイント
  • 営業の手間を省いてデザイン作業だけで収入UPできる!
  • 無料のキャリア相談でより良い働き方を実現できる!
  • フリーランスでも継続して案件がもらえるので安心!

レバテッククリエイターは60秒で簡単に無料登録が可能です。
登録すれば、すぐに担当者がついてキャリアプランや案件について相談可能なので、ぜひお早めに登録してみてください。

60秒でレバテッククリエイターに無料登録

スマホの方はこちらからチェック!

レバテッククリエイターについてもっと詳しく知りたい方はこちら!

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

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

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

モバイルバージョンを終了