BizOn Ad

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

Affordances and Signifiers

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

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

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

アフォーダンスとは

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

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

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

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

シグニファイアとは

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

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

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

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

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

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

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

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

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

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

    Affordances and Signifiers

    ▲ボタンがグレーアウトしている(出典:UX Collective)

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

    Affordances and Signifiers

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

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

    Affordances and Signifiers

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

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

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

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

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

Affordances and Signifiers

▲出典:Huzaifa Ginwala

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

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

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

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

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

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

Affordances and Signifiers

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

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

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

Affordances and Signifiers

▲出典:UX Collective

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

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

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

Affordances and Signifiers

▲出典:UX Collective

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

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

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

Affordances and Signifiers

▲出典:UX Collective

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

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

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

Affordances and Signifiers

▲出典:UX Collective

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

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

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

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

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

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

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

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

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

おわりに

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

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

(執筆:H Locke、翻訳:Nakajima Asuka、編集:北村有、転載元:UX Collective

40,000人以上が使う!日本最大級のフリーランス・副業向けマッチングサービス『Workship』

「フリーランスとして、もっと大きな仕事にかかわりたいな……」
「企業で働いてるけど、副業でキャリアを広げていきたいな……」
「報酬が低くて疲弊している。もっと稼げるお仕事ないかな……」

フリーランス・副業向けマッチングサービス『Workship(ワークシップ)』が、そんな悩みを解決します!

  • 累計40,000人以上のフリーランス・副業ワーカーが登録
  • 東証プライム上場企業からスタートアップまで多数参加
  • 土日、週1、フルタイムなどさまざまな働き方あり
  • 公開中の募集のうち66%がリモートOKのお仕事
  • 時給1,500円〜10,000円の高単価案件のみ掲載
  • お仕事成約でお祝い金10,000円プレゼント!

利用料は一切かかりません。一度詳細をのぞいてみませんか?

※Workship MAGAZINEでは日々情報の更新に努めておりますが、掲載内容は最新のものと異なる可能性があります。当該情報について、その有用性、適合性、完全性、正確性、安全性、合法性、最新性等について、いかなる保証もするものではありません。修正の必要に気づかれた場合は、サイト下の問い合わせ窓口よりお知らせください。また、本メディア内に掲載されているリンクには、アフィリエイトURLが含まれる可能性があります。

SHARE

  • 広告主募集
  • ライター・編集者募集
  • WorkshipSPACE
週1〜3 リモートワーク 土日のみでも案件が見つかる!