【図解】UIデザイナーが知っておくべき「アフォーダンス」と「シグニファイア」

「アフォーダンス」と「シグニファイア」という言葉を聞いたことがありますか？　これらはUIデザインと密接に関わる単語です。

この2つの概念をしっかり理解することで、よりアクセシビリティに配慮したUIデザインを手がけられます。

今回は、アフォーダンスとシグニファイアについて、画像を使って分かりやすく解説します。

アフォーダンスとは

アフォーダンスは、対象となる要素がどのように振る舞うのかを教えてくれる、知覚的または視覚的な手がかりです。

目の前にある要素でどのようなことができるのか、ユーザーに伝えてくれます。

• 実世界での例：
  椅子の構造や安定性などを認識すると、椅子に座ったり、立ったりできることが分かる
• Webデザインにおける例：
  画面に表示されたボタンを見ると、押して操作することが分かる

▲右側のデザインを見ると、「Sign in」の部分はボタンであることがわかる（出典：UX Collective）

シグニファイアとは

シグニファイアは、アフォーダンスを支える付加的な情報です。

• 実世界での例：
  椅子に風船が結んであると、お祝いのためにその席が予約されていることが分かる
• Webデザインにおける例：
  ボタンが灰色になっていると、選択できない状態であることが分かる

▲右側のボタンがグレーになっているため、選択できない状態であることがわかる（出典：UX Collective）

UIデザインにおいて「シグニファイア」という言葉は、単にコンポーネント（構成要素）のラベルを指すこともあります。

しかし以下のようなものを指すこともあるので、合わせて把握しておきましょう。

• 一般的なデジタルデザインパターンに合わせた場合のコンポーネントの色
• 特定のインターフェイスまたはデザインシステムの色階層および視覚言語におけるコンポーネントの色
• コンポーネント上、またはコンポーネントの近くにあるテキストラベル
• コンポーネント上、またはコンポーネントの近くにあるアイコンラベル
• 太字、斜体、下線などの文字の強調表現
• インターフェイスやデザインシステム内のコンポーネントの一般的な階層

これらは組み合わせて使うことも、単独で使うことも可能です。ただし色だけで意味を伝えることはできません。

アフォーダンスとシグニファイアを組み合わせる

UXデザインやUIデザインにおいては、「要素の役割」を伝えるアフォーダンスに、「該当の要素の状態」を伝えるシグニファイアを重ねることで、ユーザーとコミュニケーションします。

• 例1：
  ボタン（アフォーダンス）がグレーアウトしている（シグニファイア）
  

  ▲ボタンがグレーアウトしている（出典：UX Collective）

• 例2：
  2つのボタンがあり（アフォーダンス）、正しいボタンがどちらか分かる（シグニファイア）
  

  ▲「Sign Up」というボタンのほうが関連度が高いことが分かる（出典：UX Collective）

• 例3：
  インターフェイスの主要なアクションスタイル（色のシグニファイア）を使用し、矢印（方向のシグニファイア）とアクション（言葉のシグニファイア）を含むボタン（アフォーダンス）
  

  ▲色、テキスト、矢印のアイコンなどから、役割を推測できる（出典：UX Collective）

ユーザーが色で機能を判断できない場合でも、テキストやアイコンなどがサポートしてくれます。

「ノーマン・ドア」とユーザビリティ

認知科学者であるドナルド・ノーマン氏は、著書『Design of Everyday Things』で、アフォーダンスを「知覚可能な行動の可能性」としています。

つまり対象となる要素そのものにアフォーダンスがあるのではなく、アフォーダンスやシグニファイアはユーザー側から正しく認識される必要がある、ということです。

▲出典：Huzaifa Ginwala

ノーマン氏は「ノーマン・ドア」という概念を作りました。ノーマン・ドアとは、どうやって開けたらいいのかわからない、ユーザビリティが低いドアのこと。

たとえば取っ手だけついていて、「押す」や「引く」といったプレートがついていないドアは、ノーマン・ドアにあたります。

避けるべきアフォーダンスの例

ノーマン・ドアのようなUIを避けるために必要なのは、ユーザーが理解しやすいようにUIをデザインすることです。

CTAのヒエラルキーや色が整理されておらず、記号の意味が矛盾していると、ユーザーを混乱させてしまいます。

たとえば選択できない状態をあらわす色を、選択できる状態のボタンに使うと、操作可能なボタン（アフォーダンス）を否定することになります。

▲選択できる状態のボタンにグレーを使うのはNG（出典：UX Collective）

不適切な、あるいは相反する意味をもつアフォーダンスには、以下のようにそれぞれ名前があります。

1. フォルスアフォーダンス

▲出典：UX Collective

「操作できそうなのにできない」のが、フォルス（偽の）アフォーダンスです。

上の図では文字の一部に下線がついていますが、これがリンクでないとしたら、フォルスアフォーダンスにあたります。

2. ネガティブアフォーダンス

▲出典：UX Collective

「ボタンのように見えるのに操作できない」といった例はネガティブアフォーダンスにあたります。

上の図の右側のように「一定の条件を満たすとボタンとして操作できる」という場合は、ネガティブアフォーダンスではありません。

3. パターンアフォーダンス

▲出典：UX Collective

「ユーザーが使いかたを知っていることを前提にしている」場合、パターンアフォーダンスにあたります。

たとえば上の図の右上にあるハンバーガーメニューは、ユーザーが使いかたを知らなければ、ただの3本の線としか認識されません。

4. ヒドゥンアフォーダンス

▲出典：UX Collective

「ユーザーが行動を起こすまで認識されない」場合は、ヒドゥン（隠れた）アフォーダンスにあたります。

たとえばホバーしてはじめてボタンだとわかる仕様だと、スマートフォンやタブレットを使っているユーザーには認識されません。

ユーザーフレンドリーなUIをデザインする方法

ボタンに限らず、ヒエラルキーを構成するあらゆるコンポーネントやエレメントは、アフォーダンスとシグニファイアを考慮したうえでデザインしましょう。

ポイント1. アフォーダンスを正しく理解する

• ボタンをデザインする場合：
  ボタンに見えるようにデザインする
• ボタン以外をデザインする場合：
  ボタンに見えないようにデザインする

ポイント2. シグニファイアを意識的かつ論理的に決定する

• 特定の目的・機能・制限がある場合：
  ユーザーの理解をサポートするためにどのようなシグニファイアを重ねられるか考える
• 特定の目的・機能・制限がない場合：
  一般的なデザインにして、機能があると思われないようにする

見た目へのこだわりも大切ですが、UXやアクセシビリティへの影響を考えてデザインするように心がけましょう。

おわりに

「アフォーダンス」と「シグニファイア」は、UIデザインの基礎となる概念を知るうえで重要な単語です。

顧客やチームとのコミュニケーションのためにも、それぞれの意味や違いをしっかり把握しておきましょう。

（執筆：H Locke、翻訳：Nakajima Asuka、編集：北村有、転載元：UX Collective）