ノンデザイナーこそ知っておきたい「アフォーダンス」入門

さまざまなホームページを運営していると、「このホームページだけなぜか コンバージョン 率や 回遊率 が低い…」と理由も分からず悩んでしまうことはないでしょうか。
そのような時には、デザインの「 アフォーダンス 」を確認してみてはいかがでしょうか。

アフォーダンス は、プロダクトデザインの現場でよく使われている言葉ですが、現在ではWebデザインの現場でもよく耳にする言葉です。
そのため、たとえデザイナーでなくとも、Web担当者やグログ運営者であれば、知っておいて損はありません。

今回は、ホームページのボタンをクリックしてもらい、結果的に コンバージョン 率を上げやすくする「 アフォーダンス 理論」の概要についてご紹介していきます。

「 アフォーダンス 」とは？

アフォーダンス とは、アメリカの認知心理学者ジェームズ・ジェローム・ギブソン(James Jerome Gibson)の提唱した知覚に関する造語です。「与える」「できる」「提供する」という意味の英語「afford」から造られ、以下のように定義されています。

(1) 「生活している環境を探索することで獲得できる意味や価値」
(2) 「動物と物との間に存在する行為についての関係性そのもの」

具体例を使って考えてみましょう。

画像引用元：stock.io

例えば、取っ手のついた扉について、 アフォーダンス を見出すとすれば、以下のように言えます。

(1) 「私は、その扉について「引いて開ける」という行為が可能である」
(2) 「この扉と私には、「引いて開ける」という
                  アフォーダンス
                が存在する」

ここで注目したいのは、 アフォーダンス とは行為の可能性そのものであるため、「私」自身がその扉を引いて開けられると認識しているかどうかは関係ないという点です。
つまり、扉についているのが取っ手に見えないとしても、人間が引くことで開けることが可能なのであれば、その両者の間には アフォーダンス が存在していることになるのです。

1つのものには様々な アフォーダンス がある

画像引用元：stock.io

空のマグカップを赤ちゃんに渡すと、握ってみたり、おもちゃを入れてみたり、叩いてみたりするでしょう。
マグカップには「飲み物を注いで飲む」可能性の他に「楽器として使う」「物を仕舞う可能性」「口に入れる可能性」など、さまざまな可能性(＝ アフォーダンス )が存在していることになります。

言い換えれば、身の回りにあるモノには、あらゆる アフォーダンス が存在していることになります。

そして、人間がマグカップを「飲み物を注いで飲む」という用途で使うのは、マグカップが発信する「飲み物を注いで飲むことができる」という アフォーダンス を受け取っているからです。

一方、マグカップ自体に複数の穴が空いていたり、壁や床にくっついていたり、とんでもなく重くて持ち上げられない場合には、「飲み物を注いで飲む」という可能性は考えられないので、そのような アフォーダンス は存在しないことになります。

デザインと アフォーダンス

「 アフォーダンス 」という言葉がデザイン領域で広まったのは、デザイナーのバイブル的存在である『誰のためのデザイン？』(原題：The Design of Everyday Things)がきっかけだと言われています。
しかし、この本によって、「 アフォーダンス 」は本来の意味とは違った、誤った意味を伝えてしまったと言われています。

1988年に刊行された同書では、 アフォーダンス を「モノをどのように使うかを決定するもっとも基礎的な特徴」と位置付けています。

画像引用元：stock.io

例えば、海外旅行などで出会った「蛇口のように見えるもの」を見れば、過去の経験則から、「おそらくスクリューを右に回せば水が出てくるのではないか」と推測できます。

そうした文脈の中から、現在では「デザイン」という分野における アフォーダンス は、今では「経験から導き出される最も可能性のある特徴」の意味で使われることが圧倒的に多いのです。
その意味で、デザイナーにとっては、「何の説明がなくても使いやすいように、分かりやすく明確な特徴を持たせる」デザインをすることが重要だと言えます。

デザイン分野における アフォーダンス は、ギブソンが提唱した本来の意味での アフォーダンス とは異なっています。
そのことは『誰のためのデザイン？』の著者であるドナルド・ノーマンも認めており、本来の アフォーダンス (real affordance)に対して、デザイン分野での アフォーダンス を「知覚 アフォーダンス 」(perceived affordance)と呼ぶことがあります。

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

ホームページ上に表示された画像やテキストも、 アフォーダンス 理論に従えば、さまざまな用途・可能性が考えられます。

例えば、 テキスト には「読むためのもの」「クリックするためのもの」「マウスでホバーしてみるもの」など様々な アフォーダンス が存在します。
しかし、青文字に下線があると、経験上ハイパーリンクとして認識されやすくなります。
これは、知覚 アフォーダンス (＝経験から導き出されるもっとも可能性のある特徴)と認識できるからです。

一方、画像にリンクを貼った場合には、青い下線をつけたとしても、その画像がクリックできるのかがわかりにくくなることがあります。
その場合には、画像にボタンのような立体感をつけたり、ホバーして影をつけたりして、クリックできるように誘導することが重要になります。
したがって、 バナー を作成する際には、単なる画像ではなく「クリックできる画像である」と認識してもらうことが大切です。

画像引用元：Demec Media

また、知覚 アフォーダンス に頼りすぎると、 ユーザビリティ の低いデザインになってしまいます。
例えば、「ハンバーガーメニュー」は今でこそ「押すことによってメニューが表示される」という認識が広まってきましたが、それでもまず「押せるのかどうか」すら経験していないと知覚しづらいと言えます。

そのため、人によってはハンバーガーメニューとの間に アフォーダンス が欠如してしまっていると考えることができます。

ただし、使い方を「経験させること」でデザインに意味を持たせる方法として、オンボーディングやチュートリアルを活用する方法もあります。
ツール チップのような吹き出しをハンバーガーメニューやアイコンにつけることで、「ここをクリックしてメニューを表示させよう！」といったラベルをつけることができれば、初めてそうしたオブジェクトを見たひとにもその使い方が理解できるようになります。

このようなラベルのことをノーマンは「シグニファイア」(Signifier)と呼び、知覚 アフォーダンス を誘導するために付与することで、その使い方が誰でもわかるようになります。
シグニファイアが分かりやすいものであればあるほど、使いやすいデザインになるということです。

まとめ

デザインにおいて、「きっと分かるだろう」「省略しても大丈夫だろう」という考え方でデザインしてしまうと、かえって分かりにくくなる場合があります。
とりわけ、シンプルなデザインを目指したときに、デザイン上の省略が起こりがちです。
そうした場合に、「どのような可能性が考えられるのか」を列挙して、必要な場合にはラベルや ツール チップのようなシグニファイアを周りに提示していきましょう。

UX デザインにおいては、インターフェイス(ホームページの外観)だけでなく、 ユーザー とインターフェイスとの間で発生する インタラクション も想像してデザインを行うことが大切です。
デザインを見て、「一瞬で何ができるかが分かる」デザインにしていきましょう。