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

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

アフォーダンスは、プロダクトデザインの現場でよく使われている言葉ですが、現在では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デザインにおいては、インターフェイス(ホームページの外観)だけでなく、ユーザーとインターフェイスとの間で発生するインタラクションも想像してデザインを行うことが大切です。
デザインを見て、「一瞬で何ができるかが分かる」デザインにしていきましょう。