アフォーダンスとは？シグニファイアとの違いをボタンとリンクで実測

この記事で実際に動かしたもの：この記事のために作った検証用の HTML（見た目を変えたボタン6種・リンク5種・カード2種・大きさ違いのアイコンボタン3種・フォーカス枠の有無・ホバーで出る下線）を、Playwright 1.63 から Chromium 153 で開き、計算後のスタイル・アクセシビリティツリー・Tab キーでの移動順・Enter と Space での反応・マウスで押せる範囲（4px おきの当たり判定）・色覚の見え方の再現・スマホの再現での hover の有無を測りました。

「アフォーダンス」は、UI デザインやユーザビリティの本や会議で頻繁に出てくる言葉です。ところが、元の心理学での意味と、デザインの会話で使われる意味が少しずれていて、「シグニファイア」との違いで迷う人が多い言葉でもあります。最初に、関係する言葉の位置づけを図にします。

flowchart TB
    E[環境・モノ] --- R((関係))
    A[人・動物] --- R
    R --> AF[アフォーダンス<br>できる行為]
    S[シグニファイア<br>知らせる手がかり] --> P[行為ができると分かる]
    AF -.-> P

よく調べられることの答えを先にまとめます。

確認環境：Ubuntu 24.04.5 LTS（2 CPU・メモリ 8GB の共用マシン）で、Python 3.13.18 と Playwright 1.63.0 から Chromium 153.0.8010.12（ヘッドレス）を動かしました。検証用の HTML は作業用フォルダーに置いて file:// で開き、外部のサーバーには接続していません。測ったのは、getComputedStyle による cursor・下線・色、色から計算したコントラスト比（WCAG の相対輝度の式）、Playwright の aria_snapshot によるアクセシビリティツリー、Tab キーを押したときの document.activeElement、Enter と Space を押したときのクリック処理の回数、document.elementFromPoint を 4px おきに呼んだ当たり判定、Chrome DevTools Protocol の Emulation.setEmulatedVisionDeficiency による色覚の再現、スマホの再現（is_mobile・has_touch）での matchMedia です。人が実際にどこを押すかの視線・クリック調査は行っておらず、その部分は Nielsen Norman Group の公開調査を出典として引いています。用語の由来はギブソン（1979）とノーマン（1999・2008・2013）の原典、分類はゲイヴァー（1991）とハートソン（2003）、アクセシビリティは W3C の WCAG 2.2 の解説、開発者ツールの操作は Chrome for Developers の公式ドキュメントで確かめました。図は mermaid-cli 11.16.0 で描画を確かめています（確認日 2026年10月29日）。

アフォーダンスとは（ふだんの意味とデザインでの意味）

この節では、「アフォーダンス」という言葉の成り立ちと、心理学・デザイン・Web 制作で指すものの違いが分かります。

アフォーダンス（affordance）は、英語の動詞 afford（与える・提供する、〜する余裕がある）から作られた名詞です。 平らで固く、膝の高さにある面は、人に「座る」という行為を差し出しています。同じ面でも、幼児にとっては「よじ登る」、猫にとっては「飛び乗って寝る」を差し出します。このように、アフォーダンスはモノだけの性質でも、人の頭の中だけのものでもなく、モノと行為者の組み合わせで決まる関係です。

ただし、デザインの会話では「押せそうに見える見た目」のこともアフォーダンスと呼ぶことがあり、ここで意味がずれます。場面ごとの意味を表にしました。

日本語では「アフォード」と動詞のまま使い、「この椅子は座ることをアフォードする」のように言うことがあります。英語の afford の「余裕がある（お金を払える）」の意味とは別物で、心理学の用語としての使い方です。

アフォーダンスの由来（ギブソンとノーマン）

この節では、言葉がどこから来て、どのようにデザインの分野へ広まったかが、原典の記述とともに分かります。

アフォーダンスは、一般に、アメリカの知覚心理学者ジェームズ・J・ギブソン（James J. Gibson）の用語として紹介されます。 ギブソン自身は、1979年の著書『The Ecological Approach to Visual Perception』（邦訳『生態学的視覚論』）の第8章「The Theory of Affordances」で、次のように書いています。

The affordances of the environment are what it offers the animal, what it provides or furnishes, either for good or ill. The verb to afford is found in the dictionary, but the noun affordance is not. I have made it up.

（環境のアフォーダンスとは、環境が動物に提供するもの、良いものであれ悪いものであれ、用意したり備えたりするものである。動詞 afford は辞書にあるが、名詞 affordance は無い。私が作った。）

同じ章には「アフォーダンスは客観的な性質でも主観的な性質でもない。あるいは、そう言いたければ両方である」という趣旨の一文もあります。ギブソンがこの考えを著書より前の論文や講義で述べていたことも知られていますが、ここでは原文を確かめられた 1979年の著書を出典にします。

デザインの分野へ広めたのは、認知科学者のドナルド・A・ノーマン（Donald A. Norman）です。ノーマンの考えは、何度か言い直されています。原典で確かめた流れを順に並べます。

1. 11979年：ギブソンが著書でアフォーダンスを論じる『The Ecological Approach to Visual Perception』第8章。環境と動物の関係として定義
2. 21988年：ノーマンがデザインに持ち込む『The Psychology of Everyday Things』（後の『The Design of Everyday Things』、邦訳『誰のためのデザイン？』）。ノーマンは2008年の論考で、このとき指していたのは知覚できるアフォーダンスだったと書いている
3. 31999年：「知覚されたアフォーダンス」と言い直すACM Interactions の論考「Affordance, Conventions, and Design」。本当のアフォーダンスとは同じでないと明言
4. 42008年：「シグニファイア」を提案ACM Interactions 15巻6号の論考「Signifiers, not affordances」
5. 52013年：『The Design of Everyday Things』改訂版に反映ノーマンの公式サイトは、内容の科学は同じで「シグニファイアの追加」を除く、と説明

1999年の論考で、ノーマンは次のように書いています。

I was really talking about perceived affordances, which are not at all the same as real ones.

（私が話していたのは、本当は知覚されたアフォーダンスのことで、本当のアフォーダンスとはまったく同じではない。）

そして 2008年の論考の結びは「Forget affordances: what people need, and what design must provide, are signifiers.」（アフォーダンスのことは忘れよう。人に必要で、デザインが用意すべきなのはシグニファイアだ）でした。デザインの会話で「アフォーダンスを付ける」と言うとき、多くはこのシグニファイアのことを指しています。

シグニファイアとは・アフォーダンスとの違い

この節では、シグニファイアの定義と、アフォーダンスとの見分け方が分かります。

シグニファイア（signifier）は、ノーマンの言葉で言えば「物理的・社会的な世界にあって、意味のあるものとして読み取れる何らかの信号」です。 ボタンの立体感、リンクの下線、ドアの「押」の表示、行列ができている入口、芝生にできた踏み跡も、行為を知らせる手がかりなのでシグニファイアです。意図して付けたものだけでなく、偶然できたものも含みます。

Web の画面に当てはめると、違いがはっきりします。

ノーマンは 1999年の論考で、画面の上ではマウスのカーソルをどこへでも動かせて、どこでもクリックできる、と指摘しています。つまり画面の上の「押せる」は、本物のボタンのような物理的な形からは生まれません。だからこそ、画面のデザインで頼りになるのは慣習（convention）とシグニファイアです。ノーマンは慣習を「時間をかけて形づくられた文化的な制約」と説明しています。青い下線の文字がリンクだと分かるのは、この慣習のおかげです。

アフォーダンスの種類（ゲイヴァーとハートソンの分類）

この節では、アフォーダンスと手がかりの組み合わせで起きる4つの状態と、設計の観点で分けた4種類が分かります。

HCI（人とコンピュータの関係を研究する分野）では、ウィリアム・ゲイヴァーの 1991年の論文「Technology Affordances」（CHI '91）の分け方がよく引かれます。 アフォーダンスがあるかどうかと、それを示す知覚の情報があるかどうかの組み合わせで、4つに分けます。

この記事の実測では、2 の「隠れた」と 3 の「偽の」を意図的に作り、Chromium がそれをどう扱うかを確かめています。

もう1つ、レックス・ハートソンの 2003年の論文（Behaviour and Information Technology 22巻5号）は、設計の観点からアフォーダンスを4種類に分けています。

ハートソンの分け方で見ると、デザインの会話でいう「アフォーダンス」は、主に認知的・感覚的なもの（＝シグニファイアに近いもの）を指していることが分かります。

身近なアフォーダンスとシグニファイアの例

この節では、画面の外の例で、2つの言葉の使い分けに慣れることができます。

押すのに引いてしまうドアは、ノーマンの名前を取って「ノーマンドア」と呼ばれることがあります。直し方は2通りで、ドアの造り（アフォーダンス）に合う取っ手に替えるか、手がかり（シグニファイア）を足すかです。文字の「押」「引」を貼るのは後者で、形そのもので伝わる前者のほうが、読まずに使える分だけ迷いが減ります。

Webの画面で確かめる：ボタンらしさの実測

この節では、見た目を変えた6種類のボタンを Chromium に読ませ、「押せそうに見えるか」と「本当に押せるか」がどこでずれるかが分かります。

見た目がボタンでも、HTML の要素によって、キーボードで押せるか・読み上げで「ボタン」と伝わるかが変わります。 次の6つを同じページに置き、マウス・キーボード・アクセシビリティツリーの3つの面から測りました。

6つ目の「リンクのボタン風（a 要素にボタンの見た目）」は、カーソルが pointer、Tab で届き、役割は link でした。Playwright でアクセシビリティツリーを書き出すと、span のボタン風だけが「ボタン」として扱われていないことが分かります。

- button "立体ボタン"
- button "フラットボタン"
- button "枠線だけ"
- button "文字だけ"
- text: spanのボタン風
- link "リンクのボタン風":
  - /url: "#x"

Tab キーを押し続けたときに選ばれた順番は、立体ボタン → フラットボタン → 枠線だけ → 文字だけ → リンクのボタン風 → …で、span のボタン風は飛ばされました。マウスでクリックすると span でも処理は動きます（クリック回数が増えた）が、キーボードだけで操作する人にはこのボタンが存在しません。ゲイヴァーの分け方で言えば、マウスの人には見えるアフォーダンス、キーボードの人には偽のアフォーダンスです。

role と tabindex を足しても Enter では押せない

span に role="button" と tabindex="0" を足すと、アクセシビリティツリーでは button "spanのボタン風" と表示され、Tab でも届くようになりました。ところが、フォーカスを当てて Enter を押しても、クリックの処理は0回のままでした。button 要素では Enter と Space の両方でクリックの処理が動いた（2回）のと対照的です。

button 要素 b1 に Enter + Space → クリック処理 2回
span に role="button" tabindex="0" を足して Enter → クリック処理 0回

見た目（シグニファイア）と役割の名前だけを足しても、行為そのもの（キーボードで押せること）は付いてきません。キーの処理まで自分で書くより、最初から <button> を使うほうが確実です。

押す操作は button 要素で、画面を移る操作は a 要素で書きます。

<button type="button" class="btn">保存する</button>
<a href="/orders" class="btn">注文一覧へ</a>

ブラウザの既定の見た目もシグニファイア

CSS を何も当てない状態で、Chromium 153 が付ける既定の見た目も測りました。

リンクの「青と下線と指のカーソル」、ボタンの「盛り上がった枠と灰色の背景」は、ブラウザが最初から用意しているシグニファイアです。CSS でこれを消すと、代わりの手がかりを自分で足す責任が生まれます。なお、button の既定のカーソルが矢印（default）なのは、デスクトップ OS のボタンの慣習に合わせたものと考えられ、指のカーソルにするかどうかは各サイトの決めごとです。

リンクらしさの実測（下線・色・コントラスト）

この節では、本文中のリンクを5通りに変えて、下線と色がどれだけ「リンクらしさ」を支えているかが数字で分かります。

本文の文字色を #333333、リンクの青を #2563eb にしたとき、リンクと本文のコントラスト比は 2.44:1 でした。 WCAG の達成方法 G183 は、下線などの色以外の手がかりが無いリンクについて、周りの文字と 3:1 以上の差をつける方法を示しています。2.44:1 はこれに届きません。

「本文と同じ色のリンク」は、ゲイヴァーの言う隠れたアフォーダンスです。押せるのに、マウスを重ねてカーソルが変わるまで誰も気づきません。「青＋下線だがリンクでない文字」は偽のアフォーダンスで、強調のつもりで下線を引いた文字を押して何も起きない、という経験の原因になります。

本文が #333 だと、色だけで条件を満たすリンク色は無い

リンクの色を「本文と 3:1 以上」かつ「白い背景と 4.5:1 以上（SC 1.4.3 の文字のコントラスト）」にできるかを、WCAG の相対輝度の式で計算しました。

よく使われる #333 前後の本文色では、どんな色を選んでも「色の差だけでリンクと分かる」状態は作れない、という結果です。本文中のリンクには下線を残すのが、いちばん簡単で確実な手がかりだと分かります。下線の太さや位置を整えたい場合は、関連記事「CSSで下線の位置・太さ・色を調整｜マーカー風コピペ集」で扱っています。

色覚の見え方を再現すると

Chrome DevTools Protocol の色覚の再現を使い、同じ段落をスクリーンショットにして、各リンクのいちばん濃い画素の色を取り出しました。

色の区別がつかない見え方では、青のリンクは「やや明るい灰色」になり、本文との違いは明るさの差だけになります。その差が 2.44:1 です。下線があるリンクは、この状態でも形で見分けられます。

押せる範囲の実測（見た目と当たり判定のずれ）

この節では、ボタンに見える枠と、実際にクリックが届く範囲が一致しているかを、Chromium の当たり判定で測った結果が分かります。

同じ大きさ（240×56px）の水色のカードを2枚作り、1枚は中の文字だけをリンクに、もう1枚はカード全体をリンクにしました。 カードの中を 4px おきに document.elementFromPoint で調べ、その点を押したときにリンクかボタンに届くかを記録しました（# が届く点、. が届かない点）。

文字だけがリンク：231 / 840 点（27.5%）
............................................................
............................................................
............................................................
.............#################################..............
.............#################################..............
.............#################################..............
.............#################################..............
.............#################################..............
.............#################################..............
.............#################################..............
............................................................
............................................................
............................................................
............................................................

カード全体がリンク：838 / 840 点（99.8%）
############################################################
（中略：13行すべて #）
.##########################################################.

見た目はどちらも「押せそうな1枚のカード」なのに、文字だけがリンクのカードは、枠の中の 72.5% を押しても何も起きません。カード全体が押せそうに見える（シグニファイア）のに、押せるのは文字の部分だけ（アフォーダンス）という、ずれの典型です。全体を押せるようにするなら、a 要素をブロックにしてカードそのものにします（カード全体のリンクでも、最下段の両端の2点だけは届きませんでした）。

アイコンボタンの大きさ

同じページに 16px・24px・44px の正方形のアイコンボタンを置いて、大きさを測りました。WCAG 2.2 の達成基準 2.5.8（レベル AA）は、ポインターで押す対象を「少なくとも 24×24 CSS ピクセル」とし、間隔が取れている場合などを例外にしています。

W3C の解説は、重要なリンクやボタンには、より厳しい達成基準 2.5.5（レベル AAA）を目指すことも勧めています。指で押すスマホでは、押せる範囲そのものが「押せる」というアフォーダンスの大きさです。

フラットデザインでアフォーダンスが弱くなる理由と注意点

この節では、影や立体感を減らしたデザインで、何が起きやすいかと、その補い方が分かります。

フラットデザインは、影・グラデーション・立体感を減らして平面で表現するデザインです。 見た目がすっきりする一方で、ボタンらしさを支えていた手がかり（盛り上がり・影）が減ります。Nielsen Norman Group（NN/g）は 2017年9月3日の記事「Flat UI Elements Attract Less Attention and Cause Uncertainty」（Kate Moran）で、71人のアイトラッキング調査の結果を公開しています。

同じ記事は、平らな UI でもうまくいく条件として、情報の量が少ない・配置が慣習どおり・押す対象のコントラストが高く周りに余白がある、といった点を挙げています。フラットデザインそのものが悪いのではなく、消した手がかりの代わりを足しているかどうかが分かれ目です。

ボタンの通常・ホバー・フォーカス・押下中の4つの状態を CSS で作る方法は、関連記事「CSSボタンデザインのコピペ集｜ホバーアニメーションと4つの状態」で扱っています。

スマホではホバーが無い（タッチ画面のシグニファイア）

この節では、マウスを重ねたときだけ出る手がかりが、スマホでは働かないことを実測で確かめます。

「ホバーで初めて下線が出るリンク」を作り、デスクトップとスマホの再現で比べました。 CSS は @media (hover: hover) の中で :hover に下線を付ける書き方です。

スマホでは、ホバーで出す手がかりは「最初から無い」のと同じです。指のカーソルも出ません。タッチ画面では、押す前から見えている手がかり（塗り・枠・矢印・文言）と、押せる範囲の大きさがすべてです。ホバーの効果は「あれば嬉しい追加」にとどめ、押せることを知らせる役目を担わせないようにします。:hover や :focus-visible の書き方は、関連記事「CSS疑似クラス一覧｜hover・nth-child・focus・notの使い方」で扱っています。

/* 押せることは常に見せる（下線を残す） */
a { text-decoration: underline; text-underline-offset: 0.2em; }

/* ホバーは追加の合図だけ。マウスのある環境でだけ効かせる */
@media (hover: hover) {
  a:hover { text-decoration-thickness: 2px; }
}

アフォーダンスとアクセシビリティ（WCAG）

この節では、アフォーダンスとシグニファイアの考え方が、アクセシビリティの基準のどこにつながっているかが分かります。

アクセシビリティの観点では、「押せる」を伝える相手は目で見る人だけではありません。 キーボードで操作する人には Tab で届くこととフォーカスの枠が、画面読み上げを使う人には「ボタン」「リンク」という役割と名前が、シグニファイアの役目を果たします。WCAG 2.2 で関係の深い達成基準を、この記事の実測と対応させました。

Tab キーで1周したとき、ふつうのボタンには Chromium の既定のフォーカス枠（outline-style が auto）が出ましたが、CSS で outline: none を指定したボタンは none のままでした。マウスの人には見えない差なので、デザインの確認で見落とされやすい箇所です。WCAG 2.2 の項目と確かめ方の一覧は、関連記事「WCAG 2.2チェックリスト｜A・AA全55項目と確認方法・axe検査手順」で扱っています。

/* 枠を消すなら、キーボードで選んだときの枠を必ず用意する */
.btn:focus-visible {
  outline: 3px solid #1e40af;
  outline-offset: 2px;
}

自分で確かめる3つの手順

この節では、自分が作っている画面や、よく使うサイトで、アフォーダンスとシグニファイアのずれを数分で見つける方法が分かります。

// 1. 指のカーソルなのに Tab で届かない要素
[...document.querySelectorAll('*')].filter(e => getComputedStyle(e).cursor === 'pointer' && e.tabIndex < 0).map(e => e.tagName + '#' + e.id)

// 2. 下線の無いリンク（色だけで見分けさせていないかを確かめる）
[...document.querySelectorAll('a')].filter(a => getComputedStyle(a).textDecorationLine === 'none').map(a => a.textContent.trim().slice(0, 20))

1行目は、リンクやボタンの中にある子要素（アイコンなど）も「pointer で tabIndex が -1」として拾うことがあります。結果に出た要素の親がリンクやボタンかどうかを見て、本当に問題のあるものだけを選び出します。2行目でボタンの見た目にしたリンクが出るのは問題ありません。本文の中のリンクが出ていないかを見ます。

よくある誤解・つまずき

この節では、アフォーダンスとシグニファイアの話で起きやすい取り違えと、実測で確かめた事実を対応させます。

言葉の取り違えとして多いのは、「アフォーダンス＝デザイナーが付ける飾り」という理解です。ギブソンの定義では、アフォーダンスは人と環境の関係で、良いものも悪いもの（落ちる・ぶつかる）も含みます。デザイナーが付けられるのは主に手がかりのほうで、ノーマンがシグニファイアという言葉を足したのは、この取り違えを解くためでした。

• 1押せるものは button か a で書いているspan や div に onclick を付けただけの「ボタン」は、キーボードと読み上げでは押せない
• 2本文中のリンクに下線がある本文が #333 前後なら、色だけでリンクと分かる配色は作れなかった
• 3押せそうに見える枠と、押せる範囲が一致しているカードやリスト行は、全体を押せるようにするか、押せる部分だけを目立たせる
• 4押せないものに、押せるものの見た目を使っていない青い下線の強調、ボタン色のラベルは偽のアフォーダンスになる
• 5ホバーだけに頼らず、フォーカスの枠が見えるスマホにはホバーが無く、キーボードの人には枠が手がかり

どの手がかりを足すかの判断表

この節では、画面の部品ごとに、何をアフォーダンス（できること）として用意し、何をシグニファイア（知らせる手がかり）として足すかを選べます。

迷ったときは、「HTML の要素は合っているか（できること）」を先に決め、そのあとで「初めての人が押す場所を指させるか（知らせること）」を確かめる順番にすると、見た目の議論だけで終わらずに済みます。リンクの書き方（target 属性やページ内リンク）は、関連記事「HTML aタグのリンクの書き方｜target=_blank・ページ内リンク」で扱っています。

よくある質問

この節では、アフォーダンスとシグニファイアについて検索でよく調べられる疑問に、短く答えます。

Q. アフォーダンスを簡単に言うと何ですか。
A. 環境やモノが、その人に「できる行為」を差し出している関係です。椅子の高さの平らな面は大人に「座る」を差し出し、幼児には「よじ登る」を差し出します。

Q. アフォーダンスとシグニファイアの違いを一言で言うと。
A. アフォーダンスは「その行為ができるか」、シグニファイアは「その行為ができると分かるか」です。ドアが押して開くのはアフォーダンス、押し板や「押」の文字はシグニファイアです。

Q. アフォーダンスは誰が言い出した言葉ですか。
A. 一般に知覚心理学者 J・J・ギブソンの用語として紹介されます。ギブソンは 1979年の著書で、名詞 affordance は辞書に無く自分で作った、と書いています。デザインの分野へはノーマンが 1988年の著書で持ち込みました。

Q. ギブソンとノーマンのアフォーダンスは何が違いますか。
A. ギブソンのアフォーダンスは、知覚されるかどうかに関係なく存在する、環境と動物の関係です。ノーマンが当初デザインで扱ったのは「知覚されたアフォーダンス」で、ノーマン自身が 1999年に両者は同じではないと書き、2008年に手がかりのほうをシグニファイアと呼ぶよう提案しました。

Q. 「アフォーダンスが低いデザイン」という言い方は正しいですか。
A. 会話では通じますが、多くの場合に指しているのは「押せることが分かりにくい」、つまりシグニファイアが弱い状態です。何が足りないか（塗り・枠・下線・文言・大きさ）を具体的に言うと、直し方まで話が進みます。

Q. Web デザインでの代表的な例は何ですか。
A. ボタンの塗りと影、リンクの青い文字と下線、指のカーソル、入力欄の枠、スライダーのつまみです。実測では、ブラウザの既定でもリンクは rgb(0, 0, 238) と下線、ボタンは盛り上がった枠と灰色の背景が付いていました。

Q. フラットデザインは使わないほうがよいですか。
A. 使えます。NN/g の調査では手がかりの弱い版で探す時間が 22% 延びましたが、慣習どおりの配置・高いコントラスト・余白があれば平らな UI でもうまくいく、とされています。主要な操作には塗りのボタンを使うなど、消した手がかりの代わりを足すのが要点です。

Q. cursor: pointer を付ければボタンになりますか。
A. なりません。実測では、cursor: pointer の span は Tab で届かず、アクセシビリティツリーでもただの文字でした。button 要素を使うと、Tab・Enter・Space・読み上げのすべてで「ボタン」として扱われます。

Q. スマホではどんな手がかりが要りますか。
A. ホバーとカーソルが無いので、押す前から見える塗り・枠・矢印・文言と、押しやすい大きさが手がかりのすべてです。スマホの再現では (hover: hover) が false になり、ホバーで出す下線はタップしても出ませんでした。

Q. 偽のアフォーダンスとは何ですか。
A. ゲイヴァーの分け方で、できる行為が無いのに、あるように見える状態です。リンクでないのに青い下線を引いた文字や、押せないのにボタンの色で塗ったラベルが当てはまります。

Q. 日本語に訳すとどうなりますか。
A. 定まった訳語はなく、カタカナの「アフォーダンス」がそのまま使われます。説明では「行為の可能性」「環境が与える意味」などと言い換えられることがあります。シグニファイアも同様にカタカナで使われます。

まとめ

• アフォーダンスは、環境やモノが人や動物に「できる行為」を差し出している関係。一般にギブソンの用語として知られ、ギブソンは 1979年の著書で「名詞は自分で作った」と書いている。
• ノーマンは 1988年にデザインへ持ち込み、1999年に「知覚されたアフォーダンス」と言い直し、2008年に手がかりのほうをシグニファイアと呼ぶよう提案した。違いは「できるか」と「できると分かるか」。
• Chromium の実測では、ボタンの見た目の span は Tab で届かず、role を足しても Enter で動かなかった。押せるものは button か a で書くのが出発点。
• 本文 #333 では、色だけでリンクと分かる配色は作れなかった（青のリンクとの差は 2.44:1）。文字だけがリンクのカードは、枠の 72.5% を押しても反応しなかった。下線と押せる範囲が手がかりの土台。
• フラットデザインとスマホでは手がかりが減る。消した影やホバーの代わりに、塗り・下線・フォーカスの枠・24px 以上の大きさを足し、Tab で1周・開発者ツールで1行・色覚の再現で確かめる。

次に読むとよい記事です。アクセシビリティの項目を一通り確かめるなら関連記事「WCAG 2.2チェックリスト｜A・AA全55項目と確認方法・axe検査手順」で、ボタンの状態ごとの見た目を作るなら関連記事「CSSボタンデザインのコピペ集｜ホバーアニメーションと4つの状態」で扱っています。

参考・出典

確認日はいずれも 2026年10月29日です。

• James J. Gibson「The Theory of Affordances」（The Ecological Approach to Visual Perception, 1979 の第8章）：https://web.eecs.umich.edu/~stellayu/teach/2023action/papers/1979gibsonAffordance.pdf
• Donald A. Norman「Affordance, Conventions, and Design」（ACM Interactions, 1999年5・6月号）：https://cs.uwaterloo.ca/~jianzhao/cs449-649/files/affordance-norman99.pdf
• Don Norman「Signifiers, not affordances」（ACM Interactions 15巻6号, 2008年）：https://jnd.org/signifiers-not-affordances/
• Don Norman「The Design of Everyday Things, Revised and Expanded Edition」（2013年）：https://www.jnd.org/books/the-design-of-everyday-things-revised-and-expanded/
• William W. Gaver「Technology Affordances」（Proceedings of CHI '91, pp.79–84）：https://www.lri.fr/~mbl/Stanford/CS477/papers/Gaver-CHI1991.pdf
• H. Rex Hartson「Cognitive, Physical, Sensory, and Functional Affordances in Interaction Design」（Behaviour and Information Technology 22(5), 2003）の定義は、引用した論文 https://arxiv.org/pdf/1208.3323 で確かめた
• Nielsen Norman Group「Flat UI Elements Attract Less Attention and Cause Uncertainty」（2017年9月3日）：https://www.nngroup.com/articles/flat-ui-less-attention-cause-uncertainty/
• W3C「Understanding SC 1.4.1: Use of Color」：https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html
• W3C「Understanding SC 2.5.8: Target Size (Minimum)」：https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html
• Chrome for Developers「Rendering tab overview」：https://developer.chrome.com/docs/devtools/rendering
• Chrome for Developers「Emulate vision deficiencies」ほか：https://developer.chrome.com/docs/devtools/rendering/apply-effects
• Chrome for Developers「Accessibility features reference」：https://developer.chrome.com/docs/devtools/accessibility/reference

株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。