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

今回のテーマは、アフォーダンスとシグニファイアです。前者は人と物の間で「できること」、後者はそれを知らせる手がかりを指します。「押せそう」と感じさせる見た目は、シグニファイアです。2つを分けると、機能と見た目のどちらを直すべきか考えやすくなります。

本のしおりを見ると、どこまで読んだかだけでなく、残りのページ数も分かります。ふだん気に留めない物も、使う人に情報を伝える手がかりになっています。

Webサイトでも、ボタンの形や入力欄の枠を見て、「ここを押す」「ここに入力する」と判断します。私たちサンアンドムーンがUI/UX設計の出発点を「操作の意味が伝わること」に置くのは、機能があっても、その使い方が伝わらなければ利用しにくいと考えているからです。

認知科学者のドナルド・A・ノーマンは『誰のためのデザイン？ 増補・改訂版：認知科学者のデザイン原論』で、この2語を区別しています。第1回の発見可能性と理解──使い方が見ただけで伝わる設計｜デザインの原則 #1で扱った5つの要素のうち、最初の2つです。

この記事の要点

• アフォーダンスは、人と物の関係として「できること」で、見た目そのものではない
• シグニファイアは、できることや物の状態を知らせる手がかり
• 画面を直すときは、機能がないのか、機能があるのに伝わらないのかを分けて確かめる

アフォーダンスとは──人と物の間でできること

アフォーダンス（affordance）とは、物と、それを使う人との間に成り立つ行為の可能性です。たとえば、椅子が体を支えられるため、人が座れることを指します。人の体や物の状態によって、できることは変わります。

ノーマンはSignifiers, not affordancesで、この言葉を作った知覚心理学者のJ・J・ギブソンが、人と環境との関係として考えていたことを説明しています。見えていることや、本人が知っていることは、アフォーダンスが存在する条件ではありません。

たとえば暗がりで取っ手が見えなくても、握って引ける扉なら、引くことはできます。見つけられないことと、できないことは違います。「アフォーダンス＝押せそうな見た目」と考えると、この違いが分からなくなります。

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

シグニファイア（signifier）とは、意味のある情報を伝える、知覚できる手がかりです。見た目に限らず、人の行動や物に残った跡も含みます。ノーマンは同論文で、設計者が意図して用意した合図と、偶然生まれた合図の両方を挙げています。

しおりは、読んだ場所を知らせるために挟むものです。その位置から残りの分量も分かるのは、紙の本の形が別の情報も伝えているためです。電子書籍で同じ情報を伝えるには、ページ数や進行状況の表示などを用意する必要があります。

駅のホームに人が大勢いれば、電車はまだ来ていないと考えられます。誰もいなければ、発車したあとかもしれません。ただし、多くの電車が同じホームを使う駅では、この推測は頼りになりにくいとノーマンは説明しています。手がかりがあっても、いつでも正しく読めるとは限らないのです。

扉の取っ手は、2つの働きを兼ねることがあります。握って引けることはアフォーダンス、その形から「ここを引く」と分かることはシグニファイアです。同じ物でも、できる行為に注目するのか、それを伝える働きに注目するのかで呼び方が変わります。

画面の影や下線は、操作を知らせている

画面のボタンに影を付けたり、リンクに下線を引いたりすると、操作する場所を見つけやすくなります。ここで変えているのは、主に操作を知らせる手がかりです。

ボタンに影がなくても、機能が実装されていれば押せます。下線を消しても、リンクの移動先は変わりません。影や下線を描くことと、押したときに動く機能を作ることは、別の作業です。

物の世界では、取っ手を握れる形が操作の手がかりになります。一方、画面では触れる面が平らなので、文字や図形から操作を判断する場面が多くなります。入力欄の枠線やボタンの言葉も、その判断を助けます。

立体的なボタンの「押せそうな見た目」は、以前「知覚されたアフォーダンス」と呼ばれていました。ノーマンの2008年の整理では、アフォーダンスの知覚できる部分はシグニファイアです。画面の見た目の変化は、スキューモーフィズムとフラットデザイン。そして、リキッドグラスへでも扱っています。

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

「使えない」という声を聞いたら、機能の問題と、伝え方の問題を分けて確かめます。押せるボタンに気づかれていないのなら、機能を増やす前に、形や文字、置き場所を見直せます。

たとえば、背景と同じ色のボタンや、普通の文章と区別しにくい文字リンクです。実際に動くか確かめたうえで、操作できる場所が見分けられるかを見ます。反対に、ボタンを押しても動かなければ、見た目だけ直しても解決しません。

押せない場所が、押せそうに見える場合もあります。リンクと同じ見た目の見出しや、ボタンに似た飾りなどです。このときは、目的に合わせて見た目を区別します。ボタンを整える観点は、「そのボタン、押したくなる？」──UIボタン設計7つの基本ルールで紹介しています。

注意点

すべての操作を強調すると、どこから始めるか分かりにくくなります。先にしてほしい操作を決め、目立ち方に差を付けることも必要です。

下線がリンクを表すのは、Webでそう使われてきたからです。手がかりの意味は経験や利用する場面によって変わります。「誰でも分かるはず」と考えず、実際に使う人に確かめてもらいましょう。誤った意味に受け取られる例は、見えていても、伝わらない──誤操作を生む錯覚の構造でも扱っています。

よくある疑問

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

両方を考えます。まず、その画面でできる操作を決めます。そのうえで、見た目や言葉を整え、操作の場所や意味を知らせます。画面の見た目を調整する作業では、主にシグニファイアを扱います。

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

ノーマン自身も使ってきた言葉なので、資料を読むときは当時の意味を確かめてください。これから用語を決めるなら、「できること」と「知らせる手がかり」を分けると、話し合う対象が明確になります。

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

見慣れた形なら手がかりになりますが、人によって経験は違います。押せると分かっても、何が起きるかまでは分からない場合もあります。必要に応じて文字を添え、意味が伝わるかを確かめます。

全体の考え方はUIデザインに“センス”は不要？──本質を押さえる7つの原則で、操作後の反応はフィードバックがないと、人は続けられない｜反応の即時性で扱っています。UI／UXコンサルティングでは、画面を操作しながら、できることとその伝え方を一緒に確かめます。

執筆・監修

中谷 浩和

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

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