アフォーダンスとシグニファイア──「押せそう」を伝えているのは、どちらか｜デザインの原則 #2

今回のテーマは、アフォーダンスとシグニファイアです。「押せそうに見える」と感じさせているのは、アフォーダンスではなくシグニファイアです。できることと、それを知らせる手がかり。2つの違いを押さえたうえで、使いにくい画面を直すとき、何から確かめればいいのかまでを見ていきます。

ふだん気にも留めない本のしおりや、駅のホームで電車を待つ人の数にも、UI/UXの考え方は働いています。しおりの位置は読み終わるまでの残りを、ホームの人の多さは電車がまだ来ていないことを教えてくれます。

「ここを押せばいい」「ここに入力できる」——初めて開いた画面で、説明を読む前にそう分かってしまうことはありませんか。指が先に動いて、頭があとから追いつきます。私たちサンアンドムーンがUI/UX設計の出発点を「操作の意味が伝わること」に置くのは、この一瞬で伝わるかどうかが、そのあとの体験の大半を決めてしまうと考えているからです。

この感覚を、私たちは長いあいだ「アフォーダンス」の一語で説明してきました。認知科学者のドナルド・A・ノーマンは『誰のためのデザイン？ 増補・改訂版：認知科学者のデザイン原論』で、この一語をアフォーダンスとシグニファイアの2つに分けています。この連載の第1回発見可能性と理解──使い方が見ただけで伝わる設計｜デザインの原則 #1で挙げた5つの手がかりのうち、最初の2つがこの2語です。

この記事の要点

• アフォーダンスは、人と物のあいだに成り立つ「できること」で、見た目を指す言葉ではない
• 「押せそう」と感じさせているのは、できることを知らせる手がかり、つまりシグニファイア
• 画面の上で設計者が手を入れているのは、ほとんどがシグニファイア。影も下線も、できることは増やさず、すでにできることを見えるようにしている

アフォーダンスとは──人と物のあいだに成り立つ「できること」

アフォーダンス（affordance）とは、物と、それを使う人とのあいだに成り立つ「できること」です。椅子は体を支えられるので、人が座れる。扉は蝶番で回るので、押すか引くかすれば開きます。ノーマンは原著の第1章で、使い方を伝える5つの手がかりの最初に、このアフォーダンスを挙げています。

この言葉を作ったのは、知覚心理学者のJ・J・ギブソンです。ノーマンはSignifiers, not affordances（Interactions 15(6)、2008年）で、ギブソンにとってのアフォーダンスとは、ある人がある環境に対して取れる行為の関係だったと振り返っています。見えている必要も、知られている必要もなく、ただそこにあるもの。ノーマンが1988年にこの語をデザインの世界へ持ち込んだときに指していたのは、人が知覚できるアフォーダンスでした。

アフォーダンスは、物の見た目を指す言葉ではありません。座面が板でも布でも、椅子に座れることは同じです。暗がりで取っ手が見えなくても、扉は引けば開きます。できることは人と物の関係の中にすでにあって、見た目はそれを増やしも減らしもしないのです。

シグニファイアとは──できることを知らせる手がかり

シグニファイア（signifier）とは、何ができるのかを知らせる手がかりのことです。ノーマンは同じ論文で、意味を読み取れる合図であれば、物でも人のふるまいでもシグニファイアになると述べています。設計者がわざと用意したものも、たまたまそこにあるものも含みます。

論文が挙げる例は、どれも身のまわりのものです。本にはさむしおりは、どこまで読んだかを示すためのもの。ところがその位置は、あとどれくらい残っているかまで教えてくれます。

駅のホームに人が大勢いれば、電車はまだ来ていないと分かります。誰もいなければ、たぶん行ってしまったあとです。野原を斜めに横切る踏み跡は、そこを通りたい人が多かったことを教えてくれます。風になびく旗は、風向きを伝えます。どれも「知らせよう」として用意されたとは限らないのに、見る側には立派な手がかりです。

扉の縦長の取っ手は、アフォーダンスとシグニファイアを1つで兼ねています。握れる形をしているから、引ける——これがアフォーダンス。その形が「ここを引く」と伝えている——これがシグニファイア。ノーマンは、アフォーダンスのうち知覚できる部分がシグニファイアで、設計者が意図して用意したものは社会的シグニファイアになる、と整理しています。物は1つでも、どちらの働きに目を向けるかで呼び名が変わるのです。

画面の上で設計しているのは、ほとんどがシグニファイア

ボタンに付けた影、テキストの下線、入力欄の枠線。画面の上で私たちが手を入れているものは、ほとんどがこうした手がかりです。どれも、できることを増やしてはいません。押せる場所は、影が無くても押せます。下線を消しても、リンクはリンクのままです。

物の世界では、取っ手の握れる形がそのまま手がかりになります。ところが画面の上で指が触れているのは、どこまでも平らなガラスです。どこを押しても、押すこと自体はできてしまう。だからこそ画面では「できること」と「できると分かること」がはっきり分かれ、設計者の仕事は、「できると分かる」ようにすることが中心になります。

立体的に見えるボタンを前にすると、人は「押せそう」と感じます。この「押せそう」と感じさせる見た目は、かつて「知覚されたアフォーダンス」と呼ばれていました。いまならシグニファイアと呼べます。押せるという事実ではなく、押せると知らせる手がかりだからです。フラットデザインが広まって、こうした手がかりが減った時期がありました。その経緯はスキューモーフィズムとフラットデザイン。そして、リキッドグラスへで扱っています。

機能を足す前に、伝わっているかを確かめる

手がかりが足りない画面に、機能を足しても解決にはなりません。伝わっていないだけの画面まで「アフォーダンスが足りない」とひとくくりにすると、いらない改修に手を出すことになります。2つの言葉を分けておけば、この取り違えを防げます。

たとえば、押せることに気づかれないボタン。押せば正しく動くのなら、見直すのは色や形です。押しても本当に動かないときとは、手を入れる場所がまるで違います。サンアンドムーンの観察では、機能はあるのに見た目から伝わっていないことが多く、背景と同じ色のボタンや、下線のない文字リンクがその典型です。

逆の場合もあります。押せそうに見えるのに、押せない。飾りの枠線や、リンクと同じ色をした見出しは、できないことをできそうに見せてしまいます。このときも直すのは機能ではなく、見た目の手がかりです。ボタンの見た目を1つずつ決めていく手順は「そのボタン、押したくなる？」──UIボタン設計7つの基本ルールにまとめてあります。

注意点

手がかりは、足せば足すほど伝わるわけではありません。押せる場所をすべて目立たせると、どれから押せばいいのかが分からなくなります。1つの画面で最初に押してほしい場所は、たいてい1つか2つ。強い手がかりをそこに絞ると、画面全体の意図が伝わります。

もう1つは、手がかりが慣習に支えられていることです。下線がリンクを表すのは、Webの中でそう使われてきたからで、線の形そのものに意味があるわけではありません。ノーマンも、ホームの人の多さは電車の少ない町では頼りになり、多くの電車が同じホームを使う都会では当てにしにくいと書いています。手がかりは、それを読み慣れた人のあいだでしか通じない——新しい表現を思いついたときほど、実際に使う人に試してもらうのが確実です。見えているのに違う意味に受け取られる例は見えていても、伝わらない──誤操作を生む錯覚の構造が扱っています。

よくある疑問

アフォーダンスとシグニファイアは、どちらを設計すればよいのですか

画面の仕事では、ほとんどがシグニファイアの設計になります。押せる、入力できるといった「できること」は、機能を作った時点で決まっているからです。とはいえ、何ができるのかが決まっていない画面には、知らせる中身がありません。まずその画面で何ができるのかを言葉にし、それから手がかりを整えます。

「知覚されたアフォーダンス」という言葉は、使わないほうがよいですか

社内で通じているなら、無理に言い換える必要はありません。ノーマン自身も使ってきた言葉で、意味も通ります。ですが、2008年の論文で本人が「知覚できる部分はシグニファイア」と言い直しています。社内の言葉をこれから決めるなら、シグニファイアが無難です。原著とも他の資料とも合います。

アイコンだけで、押せることは伝わりますか

虫眼鏡や歯車のように見慣れた形なら、アイコンだけでも手がかりになります。ですが、見慣れているかどうかは使う人によって違います。初めて見る形だと、押せることは分かっても、押すと何が起きるかまでは分かりません。そこを補うのが文字です。迷ったら文字を添えて、実際に使う人に試してもらうのがいちばん早い方法です。

UIの原則を全体から見直したい方はUIデザインに“センス”は不要？──本質を押さえる7つの原則を、押した後に返す反応についてはフィードバックがないと、人は続けられない｜反応の即時性をご覧ください。私たちはUI／UXコンサルティングで、お客さまと実際の画面を開き、押せる場所と押せない場所を1つずつ指さしながら一緒に確かめています。

執筆・監修

中谷 浩和

株式会社サンアンドムーン｜代表取締役

1976年創業のデザイン事務所を前身に、Webコンサルティング・UI／UXデザインを専門とする。国際標準のUX設計プロセスを学ぶ Google UX Design Professional Certificate を取得し、上級ウェブ解析士 としてデータ主導のサイト改善にも精通。デザイン思考を軸に、ユーザー認知・行動・文脈からWebサイトの課題を捉え直し、成果につながる設計へ落とし込むことを使命としている。システム設計、フロントエンド技術、SEO・パフォーマンス改善まで技術知識を横断し、サイト全体を見通したディレクションを得意とする。自動車メーカー、銀行・クレジットカード、保険などの大手から中小企業まで、数値で検証しながら改善を積み重ねる実践的なコンサルティングを提供している。