Webデザインの心理学 Vol.1 アフォーダンス

こんにちは、たもちです。
エンジニア兼心理学ライターをやっています。

このnoteでは主に心理学的な観点に基づいたITに関する記事を提供しています。本記事は100日間連続投稿企画、第2回の記事となります。

それでは以下、本編です。

Webデザインに隠された心理学

日頃目にするwebサイトやアプリケーションのデザイン、その裏にはユーザーにクリックして欲しい、購入してもらいたい、次のページに進んで欲しいといった様々な意図が込められています。

ユーザーが迷いなく操作を行えるようにするために、また、運営者の意図を汲んでもらえるように、行動を自然に促すための工夫は様々あります。
その中核となる概念が心理学やデザインの世界で「アフォーダンス」と呼ばれるものです。

アフォーダンスとは何か

アフォーダンスという言葉には聞き馴染みがないかもしれません。これは、心理学者ジェームズ・ギブソンが提唱した概念で、「環境が動物に対して提供する行為の可能性」を意味します。簡単に言えば、「見た目から何ができるかが分かる」という特性のことです。
例えば、ドアノブの丸い形状は「回す」という行為を、平らなプレートは「押す」という行為を、縦長の取っ手は「引く」という行為を、それぞれ自然と示唆します。階段の段差は「上る・下りる」という行為を可能にし、椅子の座面の高さや形状は「座る」という行為を促します。

アフォーダンスは通常、特定の行動を促すために利用されますが、逆に行動を抑制することにも役立ちます。
例えば、ビルの窓についている回す前に押し引きしなければならないレバーは不自然な動作を挟むことで、子供のいたずらや誤開閉を妨げています。
また、公共スペースのベンチに肘掛けが多く設置されているのは、横になって寝ることを防ぐための設計としての側面があります。

このように、アフォーダンスを活用することで、利用者の行動の促進や抑制をコントロールできるということが実世界の例から見て取れます。

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

Webサイトのデザインにも、現実の要素を反映したさまざまなアフォーダンスの例があります。

代表的なのはボタンです。影がついて立体的に見えるボタンは、現実世界の「押せるボタン」を思い起こさせます。その形状や質感そのものが、「ここは押せる（クリックできる）」という行為の可能性を自然に示しています。

一方で、デジタルの世界では文化的な学習によって新しいアフォーダンスが生まれることもあります。
ハンバーガーメニューと呼ばれる三本線のアイコン（≡）は、その代表例でしょう。登場当初、このアイコンを見ただけで「ここを押すとメニューが開く」と理解できた人はほとんどいませんでした。形そのものに行為の手がかりが欠けていたからです。

しかし、スマートフォンやWebアプリに広く採用されるにつれて、人々は「三本線＝メニュー」という関連を学習し、いまでは直感的に操作できるようになりました。つまりハンバーガーメニューは、社会的学習を通じて意味が形成されたアフォーダンスなのです。

シグニファイアという概念

ここで、アフォーダンスと深く関わる「シグニファイア」という概念も押さえておきましょう。

デザイナーのドン・ノーマンは、アフォーダンスを知覚可能にする手がかりを「シグニファイア」と呼びました。アフォーダンスが「物の形や性質が持つ行為の可能性」を指すのに対し、シグニファイアは「それを明示的に伝えるための視覚的・動的な手がかり」を意味します。

たとえば、リンクテキストの青色や下線は、テキストそのものの形状とは無関係に「ここはクリックできる」と伝えるシグニファイアです。

入力フォームに点滅するカーソル、ドラッグ可能な要素にマウスを乗せたときに変わるカーソルの形、クリック時に押し込まれたように見えるボタンの動き──これらもすべて、ユーザーに「いま何ができるか」「どういう状態か」を知らせるシグニファイアの例です。
先ほどのハンバーガーメニューも、文化的な学習を経て「タップするとメニューが開く」ことを示すシグニファイアとして機能するようになりました。

優れたWebデザインでは、このようにアフォーダンスとシグニファイアを組み合わせ、見た目と機能を一致させることで、ユーザーが迷わず操作できる体験を実現しているのです。

フラットデザインの課題

ところで、近年のデザイントレンドとして、フラットデザインが流行しました。これは影や立体感、装飾を排除したシンプルなデザイン手法です。美しく洗練された印象を与える一方で、アフォーダンスの観点からは問題も生じました。

影や立体感を排除した結果、何がボタンで何がただのテキストなのか、どこがクリックできてどこができないのかが分かりにくくなってしまったのです。特にiOS7のリリース当初は、多くのユーザーがインターフェースの操作に戸惑ったといいます。

この反省から、完全にフラットにするのではなく、微妙な影や色彩の変化、わずかな立体感を残すことで、美しさと使いやすさの両立を図った「フラットデザイン2.0」とも呼ばれる手法が広まりつつあります。

現在の多くのwebサイトやアプリは、これらのバランスを意識したデザインを採用しています。

驚き最小の原則

これまで見てきたような、アフォーダンスを介してユーザーと設計者の意図を適切に結びつける、そんな優良なデザインを示す方針として、「驚き最小の原則」と呼ばれるものがあります。

驚き最小の原則とは、「ユーザーの期待を裏切らず、予測通りに動作するべき」というデザインの指針です。アフォーダンスを適切に設計し、見た目と機能を一致させることで、ユーザーは迷わず、ストレスなく操作できるでしょう。

例えば、ボタンのように見えるのにクリックできない要素や、リンクのように見えるのに単なるテキストだったという経験は、ユーザーに混乱とストレスを与えます。優れたデザインとは、ユーザーが直感的に理解でき、期待通りに動作するものなのです。

まとめ

普段何気なく目にしているwebサイトにもこうした心理学的な配慮や、様々な工夫が隠されています。今回取り上げたアフォーダンスという視点から見てみると新しい発見があるかもしれません。

次回以降も、様々な技術活用に秘められた心理学的要素を掘り下げていきますので、ぜひお楽しみに。

ここまでお付き合いいただき、ありがとうございます！ たもち連続投稿企画第2回、「Webデザインの心理学 vol.1 アフォーダンス」でした。