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

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

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

faucet.jpeg
画像引用元：stock.io

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

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

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

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

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

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

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

top-header-image1.jpg
画像引用元：Demec Media

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

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

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

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