アフォーダンスとは？シグニファイアとの違いとUI設計の実践ステップ
Check!
- アフォーダンスの意味と、ギブソンとノーマンの考え方の違いがわかる
- シグニファイアとの違いと、誤解を招く虚偽のアフォーダンスの例がわかる
- ノーコードツールで自社サイトにアフォーダンスを反映する手順がわかる
アフォーダンスとは、モノや環境が人に対して「どのような行動ができるか」を示す、人と対象との関係を表す言葉です。もともとは知覚心理学者ジェームズ・J・ギブソンが提唱した概念で、のちに認知科学者ドナルド・ノーマンが製品やUIのデザインに応用したことで広く知られるようになりました。Webサイトでいえば「このボタンは押せそう」「ここに文字を入力できそう」と、説明を読まなくても利用者が自然に感じ取れる状態をつくる考え方です。
本記事では、デザイナーではない事業責任者やWeb担当者の方に向けて、アフォーダンスの意味、ギブソンとノーマンの考え方の違い、シグニファイアとの違い、誤解を招く「虚偽のアフォーダンス」の例を整理します。そのうえで、ノーコードツールで自社サイトやLPをつくるときに、アフォーダンスをどう反映すればよいかを実践ステップとして解説します。
あなたに合う読み進め方を診断
Q1. アフォーダンスに興味を持ったきっかけは何ですか？
おすすめ記事
目次
開く
閉じる
開く
閉じる
UI設計でアフォーダンスを活かす具体例、次の一歩はノーコードCMSでの実践
アフォーダンスは抽象的な言葉に聞こえますが、Webサイトの画面ではとても身近なところに現れます。利用者は画面を見た瞬間に「どこを押せばよいか」「どこに何を書けばよいか」を、見た目の手がかりから判断しています。代表的なUI部品ごとに、操作できそうに見せる工夫を整理すると次のとおりです。
| UI部品 | 利用者に伝えたいこと | 見た目の手がかりの例 |
|---|---|---|
| ボタン | ここを押すと次に進める | 背景色で塗った長方形、角の丸み、わずかな影、カーソルを重ねたときの色の変化、「資料を請求する」など動詞で終わるラベル |
| 入力欄 | ここに文字を書き込める | 枠線で囲まれた白い領域、欄の外に置いた項目名、入力例の表示、クリックしたときの枠線の強調 |
| スイッチ（トグル） | 左右に切り替えられる、今はオンかオフか | 現実のスイッチを模した楕円と丸いつまみ、オンのときの色の変化、「通知を受け取る」などの説明ラベル |
| テキストリンク | ここを押すと別のページへ移る | 本文と異なる色、下線、リンク先がわかる具体的な文言 |
| 横にスクロールできる一覧 | 続きがある | 右端で途中まで見えているカード、矢印アイコン、ページ位置を示すドット |
ここで大切なのは、こうした手がかりをすべて自前のコードで用意する必要はないという点です。近年は、プログラミングをせずにWebサイトやLPをつくれるノーコードCMS（ホームページ作成ツール）が普及しており、多くのツールでボタンや入力フォームの部品があらかじめ「押せそう」「入力できそう」に見える形で用意されています。担当者は部品を選び、色やラベルを整えるだけで、アフォーダンスを意識した画面を組み立てられます。
お名前.com ビジネスコンシェルジュで紹介している代表的なノーコードCMSは次の2つです。どちらもテンプレートを選んで画面を組み立てる方式で、アフォーダンスの考え方を実際に試す場として使えます。
| サービス名（提供会社） | 強み | 留意点 |
|---|---|---|
| WIX（Wix.com Ltd.） | 無料版から始められ、全プランいつでもキャンセル可能。独自ドメインの取得にも対応している | 月額費用が低いプランほど、データ容量や動画のアップロード時間に制限がある |
| Jimdo（株式会社KDDIウェブコミュニケーションズ） | 無料プランを選べ、アクセス解析機能を搭載している | カスタマイズの自由度が限られ、日本語テンプレートの数が少ない |
アクセス解析の機能があれば、ボタンの色や文言を変えた前後でクリックの状況を見比べることもできます。目的や操作性、サポート体制、料金の考え方まで含めた選び方は、次の記事で詳しく整理しています。
アフォーダンスとは｜ギブソンの提唱概念とUIへの応用
アフォーダンスとは、環境やモノが人や動物に提供する「行為の可能性」のことです。英語の動詞 afford（与える、提供する、余裕がある）をもとにした造語で、ギブソンが知覚の理論の中心に置いた考え方です。ここでは、もとの意味とデザインへの応用を分けて整理します。
ギブソンのアフォーダンス：環境と人の関係
ギブソンは、人は環境から意味を読み取って行動しているのではなく、環境そのものに行動の可能性が備わっていて、人はそれを直接知覚していると考えました。その考えは1979年の著書『生態学的視覚論』（原題 The Ecological Approach to Visual Perception）にまとめられています。
この考え方で重要なのは、アフォーダンスはモノの性質ではなく、モノと行動する主体との「関係」だという点です。たとえば、膝ほどの高さの平らな台は、大人にとっては「座れる」ものですが、幼い子どもにとっては「よじ登る」ものかもしれません。重くて動かせない長椅子には、大人一人にとって「持ち運べる」というアフォーダンスはありません。同じモノでも、誰が向き合うかで行為の可能性は変わります。また、ギブソンの意味でのアフォーダンスは、本人が気づいているかどうかにかかわらず存在します。
ノーマンによるデザインへの応用
この概念を製品デザインの世界に持ち込んだのが、ドナルド・ノーマンです。ノーマンは1988年の著書（日本語版は『誰のためのデザイン？』）で、ドアや蛇口、スイッチといった日用品が使いにくい理由を分析し、「使い方が見た目から伝わること」の大切さを説きました。デザインの文脈でアフォーダンスという言葉が広まったのは、この本がきっかけです。
ただし、ノーマンの使い方は、ギブソンの本来の意味とは少し違っていました。ギブソンは「気づかなくても存在する行為の可能性」を指したのに対し、デザインの現場では「利用者がどう操作できると感じるか」という知覚の側面が重視されたためです。この混同を整理するため、ノーマンはのちに改訂版（2013年）で、知覚される手がかりの側を「シグニファイア」と呼び分けました。次の章で詳しく扱います。
身近な例で考えるアフォーダンス
- 平らな板が付いたドアは「押す」、縦長の取っ手が付いたドアは「引く」動作を自然に促す
- ゆるやかなスロープは、車いすやベビーカーでも「通れる」ことを伝える
- ベンチの座面に仕切りがあると、「横になる」動作はしにくくなる
- 画面上の立体的に見える長方形は「押せる」、灰色で薄く表示された部品は「今は使えない」と感じさせる
Webサイトや業務システムの画面でも同じことが起きています。利用者は説明書を読まずに、見た目の手がかりから操作を判断しているため、手がかりが適切かどうかで、使いやすさや問い合わせ・申込みの成果まで左右されます。
アフォーダンスとシグニファイアの違い
アフォーダンスとシグニファイアは混同されやすい言葉ですが、役割ははっきり分かれています。アフォーダンスは「何ができるか」という行為の可能性そのもの、シグニファイアは「どこで、どう操作すればよいか」を伝える手がかりです。ノーマンは、どちらも欠かせないと述べています。
| 比較項目 | アフォーダンス | シグニファイア |
|---|---|---|
| 意味 | モノと人との間にある行為の可能性 | 適切な行為を人に伝える、知覚できる手がかり |
| 答える問い | 何ができるか | どこで、どう操作すればよいか |
| 気づかれなくても成り立つか | 成り立つ（気づかれていなくても存在する） | 成り立たない（知覚されて初めて意味を持つ） |
| ドアの例 | 押して開けられる、引いて開けられる | 取っ手の形、押し板、「押」「引」の表示 |
| Webサイトの例 | ボタンを押すとフォームが送信できる | ボタンの色や影、「送信する」というラベル、矢印アイコン |
| 設計で考えること | 利用者に必要な操作が、そもそも用意されているか | その操作が、迷わず見つけられる形で示されているか |
実務では、まず利用者に必要な操作（アフォーダンス）を用意し、それが伝わる手がかり（シグニファイア）を重ねる順番で考えると整理しやすくなります。たとえば「資料請求ができる」機能を用意しても、ページの下の方に本文と同じ色の小さな文字で置いてあれば、気づかれずに終わってしまいます。機能はあるのに伝わっていない状態は、シグニファイアの不足と言えます。
なお、現在のUIデザインの現場では、シグニファイアの意味を含めて「アフォーダンス」と呼ぶことも少なくありません。社内で話すときは厳密な区別にこだわりすぎず、「何ができるか」と「それがどう伝わるか」の2つを分けて確認する意識を持つことが大切です。
あわせて押さえたい「フィードバック」
操作の前の手がかりがシグニファイアなら、操作の後に結果を伝えるのがフィードバックです。ボタンを押したときに色が変わる、送信後に「送信が完了しました」と表示される、入力に誤りがあればその場で知らせる、といった反応がなければ、利用者は操作が受け付けられたのか判断できず、同じボタンを何度も押してしまいます。手がかりと結果の表示をセットで設計することが、使いやすい画面の基本です。
虚偽のアフォーダンスに注意｜誤解を招くUIの例
見た目が示す操作と、実際にできる操作が食い違っている状態を「虚偽のアフォーダンス（フォルスアフォーダンス）」と呼びます。押せそうに見えるのに押せない、押せるのに押せそうに見えないといったズレは、利用者を迷わせ、サイトへの信頼を損ないます。手がかりの見え方によって、次のような種類に分けて考えると点検しやすくなります。
| 種類 | 状態 | Webサイトでの例 |
|---|---|---|
| 明示的な手がかり | 見ただけで操作がわかる | 色付きで「申し込む」と書かれたボタン |
| 慣習的な手がかり | 一般的なWebの慣習を知っていれば理解できる | 青い下線付きの文字、三本線のメニューアイコン |
| 隠れた手がかり | 操作してみるまで気づけない | マウスを重ねて初めて現れるメニュー、気づかれない横スクロール |
| 否定的な手がかり | 今は操作できないことを示す | 必須項目の入力前に灰色で表示された送信ボタン |
| 虚偽の手がかり | 見た目と実際の動作が一致しない | ボタンのように装飾された見出し、下線が付いているのにリンクではない文字 |
ありがちな虚偽のアフォーダンス
- 見出しやラベルを目立たせるために、背景色と角丸を付けてボタンのような見た目にしてしまう
- 強調したい語句に下線を付け、リンクと区別がつかなくなる
- 画像やカード全体が押せるのか、中の小さな文字だけが押せるのかが分からない
- 灰色の文字が「入力例」なのか「入力済みの値」なのか判断できない入力欄
- 押せないはずの状態でも見た目が変わらず、押しても何も起きない送信ボタン
こうしたズレは、デザインの見栄えを優先したときに起こりがちです。装飾を加えるときは「この見た目は、押せるものだと誤解されないか」を一度立ち止まって確認するだけで、多くを防げます。
意図的に利用者を誤認させるUIは避ける
うっかり起きるズレとは別に、解約ボタンを目立たなくする、不要なオプションに最初からチェックを入れておくなど、利用者の誤認を意図的に誘うUIは「ダークパターン」と呼ばれ、問題視されています。表示の仕方によっては景品表示法や特定商取引法などの観点から問題になる可能性もあるため、申込みや契約に関わる画面では特に注意が必要です。具体的な表示が法令上問題ないかの判断が必要な場合は、専門家に相談してください（本記事は法的助言を目的としたものではありません）。
DX・中小企業の担当者がアフォーダンスを学ぶ意味
アフォーダンスはデザイナーのための知識と思われがちですが、実際には、Webサイトや社内の業務システムを発注・運用する立場の人にこそ役立つ考え方です。理由は大きく3つあります。
理由1：画面をつくる人とデザインの専門家が別とは限らない
中小企業では、デザイナーを社内に置かず、総務や営業、広報の担当者がノーコードツールで自社サイトやキャンペーンLPを更新するケースが珍しくありません。テンプレートは整っていても、ボタンの文言を変える、色を自社のブランドカラーに合わせる、項目を足すといった小さな変更の積み重ねで、手がかりが崩れていくことがあります。判断の拠り所となる考え方を一つ持っておくと、こうした「少しずつ使いにくくなる」状態を防げます。
理由2：DXの成否は「現場が使えるか」に左右される
業務のデジタル化を進めても、申請画面や入力フォームが分かりにくければ、問い合わせが増えたり、紙の運用に戻ったりして、期待した効果が出ません。システムを選ぶ段階で「初めての人が説明なしで操作できるか」を確認できれば、導入後の定着の負担を減らせます。アフォーダンスとシグニファイアの区別は、デモ画面を見るときのチェックの観点としてそのまま使えます。
理由3：発注先とのやり取りが具体的になる
制作会社に「もう少し使いやすく」と伝えても、何を直せばよいかは伝わりません。「このボタンは押せるように見えない」「この見出しはリンクと誤解される」と、手がかりの単位で指摘できれば、修正の範囲も費用も見積もりやすくなります。共通の言葉を持つことは、発注者側の大きな武器になります。
公的な取り組みとしては、デジタル庁が行政サービス向けに「デジタル庁デザインシステム」を公開しており、ボタンや入力欄などのUI部品と、使いやすくアクセシブルなデザインのガイドラインをまとめています。行政向けの資料ですが、部品ごとの見せ方の考え方は民間のサイトづくりでも参考になります。
ノーコードツールでアフォーダンスを反映する実践ステップ
ここからは、ノーコードCMSで自社サイトやLPをつくる、または見直すときに、アフォーダンスを反映する手順を5つのステップで紹介します。特別な専門知識がなくても進められる内容に絞っています。
ステップ1：ページで利用者にしてほしい操作を書き出す
最初に、ページごとに「利用者に最もしてほしい操作」を1つ決め、ほかに必要な操作を書き出します。たとえばサービス紹介ページなら、最優先は資料請求、次に料金ページへの移動、といった具合です。これは用意すべきアフォーダンスの整理にあたります。してほしい操作が決まっていないと、どのボタンを目立たせるべきかも決まりません。
ステップ2：押せるものと押せないものの見た目を分ける
ボタンには塗りつぶしの背景色を使い、見出しや装飾には同じ見た目を使わない、というルールをサイト全体で決めます。リンクの色も1色に統一し、強調のための下線は使わないようにします。ノーコードCMSでは、サイト全体のボタンや文字のスタイルをまとめて設定できる機能を備えたツールも多いため、ページごとに個別に色を変えるより、全体設定で統一するのが確実です。
ステップ3：最優先の操作を視覚的に一番強くする
同じ強さのボタンが並ぶと、利用者はどれを押せばよいか迷います。最優先の操作は塗りつぶしの目立つボタン、次の操作は枠線だけのボタンやテキストリンク、というように強弱をつけます。ボタンの文言は「詳しくはこちら」ではなく「無料で資料を請求する」のように、押した結果が分かる動詞で書くと、手がかりとしての役割が強まります。
ステップ4：入力フォームの手がかりを整える
- 項目名は入力欄の中ではなく外側に置く（入力を始めると消えてしまう表示だけに頼らない）
- 必須項目は「必須」と文字で示し、色だけで区別しない
- 入力例は、入力済みの値と見間違えないよう薄い色で控えめに示す
- 入力に誤りがあれば、どの項目をどう直せばよいかを項目の近くに表示する
- 送信後は完了画面や完了メッセージで、受け付けたことを明確に伝える
色だけに頼らない表示や、項目名を明示することは、ウェブアクセシビリティの観点からも推奨されている考え方です。デジタル庁の「ウェブアクセシビリティ導入ガイドブック」でも、初めて取り組む人向けに基本の考え方が解説されています。
ステップ5：初めての人に操作してもらい、数字でも確かめる
公開前に、制作に関わっていない社内の人や家族に「資料を請求してみてください」とだけ伝えて操作してもらい、迷った箇所を記録します。つくった本人は操作を知っているため、手がかりの不足に気づきにくいからです。公開後は、アクセス解析でボタンのクリックやフォームの完了状況を確認し、文言や色を変えた前後で比べると、改善の効果を確かめられます。
この5つのステップは、ボタンやフォームの部品、全体のスタイル設定、アクセス解析といった機能がそろっているほど進めやすくなります。どのノーコードCMSが自社の目的や担当者のスキルに合うかは、機能やデザイン性、操作性、サポート体制、料金といった観点から比較しておくと、導入後の作り直しを防げます。
よくある失敗パターン（アフォーダンス設計のNG例）
アフォーダンスを意識していても、運用の中で起こりやすい失敗があります。代表的なものと、その改善の方向性を整理しました。
| よくある失敗 | 起きる問題 | 改善の方向性 |
|---|---|---|
| おしゃれさを優先して、ボタンを枠線も背景もない文字だけにする | 押せる場所だと気づかれず、申込みや問い合わせが減る | 最優先の操作だけは塗りつぶしのボタンにする |
| ページ内に同じ強さのボタンを多数並べる | どれを押すべきか迷い、結局どれも押されない | ページごとに主役の操作を1つに絞り、強弱をつける |
| ブランドカラーとボタンの色を同じにし、見出しや帯にも多用する | 押せる部分と装飾の区別がつかなくなる | ボタン専用の色を決め、装飾には使わない |
| スマートフォンで小さなリンクを密集させる | 押し間違いが増え、目的のページに進めない | 指で押しやすい大きさと間隔を確保し、実機で確認する |
| 送信ボタンを押した後に何も表示されない | 二重送信や、届いていないという問い合わせが発生する | 完了画面や完了メッセージで結果を伝える |
| PCの画面だけで確認して公開する | マウスを重ねたときの表示に頼った手がかりが、スマートフォンでは伝わらない | 表示や操作の手がかりを、スマートフォンでも確認する |
よくある質問（FAQ）
Q. アフォーダンスとは簡単に言うと何ですか？
A. モノや環境が人に対して示す「どんな行動ができるか」という可能性のことです。UIデザインでは、ボタンが押せそう、入力欄に文字を書けそうと、説明を読まなくても利用者が感じ取れる状態をつくる考え方として使われています。
Q. アフォーダンスを提唱したのは誰ですか？
A. 知覚心理学者のジェームズ・J・ギブソンです。その後、認知科学者のドナルド・ノーマンが著書『誰のためのデザイン？』で製品やUIのデザインに応用したことで、デザインの分野に広まりました。
Q. アフォーダンスとシグニファイアの違いは何ですか？
A. アフォーダンスは「何ができるか」という行為の可能性、シグニファイアは「どこで、どう操作すればよいか」を伝える手がかりです。ドアなら押して開けられることがアフォーダンス、取っ手の形や「押」の表示がシグニファイアにあたります。
Q. 虚偽のアフォーダンスとはどのようなものですか？
A. 見た目が示す操作と実際の動作が一致しない状態のことです。ボタンのように装飾された見出しや、下線が付いているのにリンクではない文字などが典型例で、利用者を迷わせる原因になります。
Q. デザイナーがいなくてもアフォーダンスを意識した画面はつくれますか？
A. つくれます。ノーコードCMSには、押せそうに見えるボタンや入力フォームの部品があらかじめ用意されているものが多く、押せるものと押せないものの見た目を分ける、最優先の操作を目立たせるといった基本ルールを守れば、担当者でも十分に反映できます。
Q. アフォーダンスの改善効果はどう確かめればよいですか？
A. 公開前は、制作に関わっていない人に実際に操作してもらい、迷った箇所を記録します。公開後はアクセス解析でボタンのクリックやフォームの完了状況を確認し、文言や色を変えた前後で比べると効果を確かめられます。
まとめ
- アフォーダンスとは、モノや環境が人に示す行為の可能性で、ギブソンが提唱し、ノーマンがデザインに応用した
- アフォーダンスは「何ができるか」、シグニファイアは「どう操作すればよいか」を伝える手がかりで、両方を設計する
- 見た目と動作が一致しない虚偽のアフォーダンスは、利用者を迷わせるため、装飾を加えるときに必ず確認する
- デザイナーのいない中小企業でも、ノーコードCMSの部品と基本ルールを使えばアフォーダンスを反映できる
- 初めての人に操作してもらう確認と、アクセス解析による数字の確認で、改善を続ける
まずは自社サイトの主要なページを開き、「最もしてほしい操作のボタンは、初めての人にも押せるものだと伝わるか」を確認するところから始めてみてください。
参考文献
- デジタル庁「デジタル庁デザインシステムβ版」https://design.digital.go.jp/
- デジタル庁「ウェブアクセシビリティ導入ガイドブック」https://www.digital.go.jp/resources/introduction-to-web-accessibility-guidebook
- J.J.ギブソン『生態学的視覚論』（原題 The Ecological Approach to Visual Perception、1979年）
- D.A.ノーマン『誰のためのデザイン？ 増補・改訂版』（原題 The Design of Everyday Things: Revised and Expanded Edition、2013年）
