アフォーダンスとは？意味・具体例とシグニファイアとの違い、UI設計での活かし方

アフォーダンスとは、環境やモノが人や動物に対して提供する「行為の可能性」のことで、知覚心理学者のジェームズ・J・ギブソンが提唱した概念です。のちに認知科学者のドナルド・ノーマンがデザインに応用し、「押せそう」「引けそう」と利用者が感じ取れる見た目の手がかりという意味でも使われるようになりました。本記事では、意味と提唱者、身近なモノ・建築・保育・Webでの具体例、シグニファイアとの違い、虚偽のアフォーダンスと失敗例を整理します。そのうえで、デザイナーのいない中小企業の担当者が、ノーコードツールで自社サイトや社内の画面に反映する手順までを解説します。

目次

開く

閉じる

1. アフォーダンスとは｜意味・提唱者・Webでの使われ方
2. アフォーダンスの具体例｜身近なモノ・建築・保育・Web画面
3. アフォーダンスとシグニファイアの違い｜よくある誤解も整理
4. Webサイトで見る手がかりの4タイプと虚偽のアフォーダンス
5. DX・中小企業の担当者がアフォーダンスを学ぶ意味
6. ノーコードツールでアフォーダンスを反映する実践ステップ
7. よくある失敗パターン（アフォーダンス設計のNG例）
8. よくある質問(FAQ)
9. まとめ
10. 参考文献

アフォーダンスとは｜意味・提唱者・Webでの使われ方

アフォーダンスとは、環境が人や動物に与える行為の可能性を指す言葉で、モノそのものの性質ではなく、モノと行動する主体との関係を表します。

ギブソンが提唱した本来の意味

アフォーダンスは、英語の動詞 afford（与える、提供する）をもとにギブソンがつくった造語です。ギブソンは、人は環境から意味を読み取って行動しているのではなく、環境そのものに行動の可能性が備わっていて、人はそれを直接知覚していると考えました。たとえば、膝ほどの高さの平らな台は、大人にとっては「座れる」ものですが、幼い子どもにとっては「よじ登る」ものかもしれません。同じモノでも、向き合う主体が変われば行為の可能性は変わります。

デザインの現場での使われ方

この概念を製品デザインに持ち込んだのが、ノーマンです。ノーマンは1988年の著書で、ドアや蛇口、スイッチなどの使いにくさを分析し、使い方が見た目から伝わることの大切さを説きました。そのため、デザインの分野では「押せそう」「入力できそう」と利用者が感じ取れる手がかりを、アフォーダンスと呼ぶ使い方が広まっています。ギブソンの本来の意味とは少し違う用法で、この違いは後の章で整理します。

手がかりだけで伝えきれない場面を補うサービスの一例

画面の手がかりを整えても、初めて使う人や、ふだんその画面に触れない担当者には、操作の流れまでは伝わらない場面が残ります。画面そのものを直す前後に、画面の外から操作を説明したり、訪問者の動きに合わせて案内したりする手段もあります。お名前.com ビジネスコンシェルジュで紹介している2つのサービスを、役割の違いで比べると次のとおりです（商品ページで確認した内容、2026年10月19日時点）。

このうち、画面の外から操作を説明する手段の一例がVideo Craft（株式会社Stand Technologies）です。AI音声とアバターで撮影なしに動画をつくれるサービスで、PowerPointと同じ操作感でスライドを組み、ナレーションの文章を入力して書き出します。ナレーション原稿を変えるだけで動画を修正でき、画面の仕様が変わったときも作り直さずに済む点が特徴です。注意点として、PowerPointの編集データを変換する場合は一部変換に対応しない要素があり、利用できる人数もプランによって異なります。料金はプランによって異なるため、資料や公式サイトで確認してください。

研修動画の作成にあたり、これまでPowerPointに音声を吹き込んでいましたが、録り直しが多く作業負荷が掛かっていました。

みずほ信託銀行株式会社の導入事例（株式会社Stand Technologies配信）：https://prtimes.jp/main/html/rd/p/000000110.000056192.html

アフォーダンスの具体例｜身近なモノ・建築・保育・Web画面

アフォーダンスの具体例は、ドアの取っ手が「引く」動作を促す、ゆるやかなスロープが「通れる」ことを伝える、画面上のボタンが「押せる」と感じさせるなど、分野を問わず身の回りにあります。

身近なモノの例

• 平らな板が付いたドアは「押す」、縦長の取っ手が付いたドアは「引く」動作を自然に促す
• ゆるやかなスロープは、車いすやベビーカーでも「通れる」ことを伝える
• ベンチの座面に仕切りがあると、「横になる」動作はしにくくなる
• 重くて動かせない長椅子には、大人一人にとって「持ち運べる」というアフォーダンスはない

建築・まちづくりの例

建築では、人が自然と近づきたくなる、使いたくなる空間をどうつくるかという視点でアフォーダンスが使われます。千葉大学の「身体活動を促すまちづくりデザインガイド」は、歩きたくなる場所や使いたくなる設えをつくるために、手に取りやすい素材、角の少ないデザイン、ちょうど使いやすい高さや寸法、内部に入りやすく奥が見通せるファサードなどの工夫を挙げています。案内の看板で「歩いてください」と伝えるのではなく、環境そのものが行動を引き出す考え方です。

保育の例

保育では、子どもの周りの環境が遊びや行動を引き出すという見方と重なる考え方があります。厚生労働省の「保育所保育指針解説」は、保育所保育を環境を通して行うことを基本とし、乳幼児期は興味や欲求に基づいて自ら周囲の環境に関わる体験を通して心身が育つ時期だと説明しています。そのため、子どもの発達過程を踏まえて、計画的に保育の環境を整え構成することが重要とされています。なお、同解説にアフォーダンスという語は出てきません。ここでは、手の届く高さに置かれた遊具が「自分で取り出す」行動を引き出す、といった環境の働きを考える視点として、アフォーダンスの考え方が参考になる、という筆者の整理です。

Webサイト・業務画面の例

Webサイトや業務システムの画面でも同じことが起きています。利用者は説明書を読まずに、見た目の手がかりから操作を判断しているため、手がかりが適切かどうかで、使いやすさや問い合わせ・申込みの成果まで左右されます。代表的なUI部品ごとに、操作できそうに見せる工夫を整理すると次のとおりです。

UI部品	利用者に伝えたいこと	見た目の手がかりの例
ボタン	ここを押すと次に進める	背景色で塗った長方形、角の丸み、わずかな影、カーソルを重ねたときの色の変化、「資料を請求する」など動詞で終わるラベル
入力欄	ここに文字を書き込める	枠線で囲まれた白い領域、欄の外に置いた項目名、入力例の表示、クリックしたときの枠線の強調
スイッチ（トグル）	左右に切り替えられる、今はオンかオフか	現実のスイッチを模した楕円と丸いつまみ、オンのときの色の変化、「通知を受け取る」などの説明ラベル
テキストリンク	ここを押すと別のページへ移る	本文と異なる色、下線、リンク先がわかる具体的な文言
横にスクロールできる一覧	続きがある	右端で途中まで見えているカード、矢印アイコン、ページ位置を示すドット

アフォーダンスとシグニファイアの違い｜よくある誤解も整理

アフォーダンスは「何ができるか」という行為の可能性そのもの、シグニファイアは「どこで、どう操作すればよいか」を伝える手がかりです。ノーマンは、どちらも欠かせないと述べています。

比較項目	アフォーダンス	シグニファイア
意味	モノと人との間にある行為の可能性	適切な行為を人に伝える、知覚できる手がかり
答える問い	何ができるか	どこで、どう操作すればよいか
気づかれなくても成り立つか	成り立つ（気づかれていなくても存在する）	成り立たない（知覚されて初めて意味を持つ）
ドアの例	押して開けられる、引いて開けられる	取っ手の形、押し板、「押」「引」の表示
Webサイトの例	ボタンを押すとフォームが送信できる	ボタンの色や影、「送信する」というラベル、矢印アイコン
設計で考えること	利用者に必要な操作が、そもそも用意されているか	その操作が、迷わず見つけられる形で示されているか

実務では、まず利用者に必要な操作（アフォーダンス）を用意し、それが伝わる手がかり（シグニファイア）を重ねる順番で考えると整理しやすくなります。たとえば「資料請求ができる」機能を用意しても、ページの下の方に本文と同じ色の小さな文字で置いてあれば、気づかれずに終わってしまいます。機能はあるのに伝わっていない状態は、シグニファイアの不足と言えます。

アフォーダンスのよくある3つの誤解

1. 反応を引き起こす「刺激」だと思われがち。実際には、特定の行為と対にして提示されなくても存在する「情報」にあたる
2. 見る人の主観や印象で決まると思われがち。実際には、疲れているかどうかにかかわらず、椅子は座ることを可能にしている
3. 「押せそうな見た目」のことだと思われがち。これはデザインの現場での用法で、ギブソンの本来の意味とは異なる。ノーマン自身が、この用法を自らの用語の失敗だったと述べ、「シグニファイア」という語で整理した

現在のUIデザインの現場では、シグニファイアの意味を含めて「アフォーダンス」と呼ぶことも少なくありません。社内で話すときは厳密な区別にこだわりすぎず、「何ができるか」と「それがどう伝わるか」の2つを分けて確認する意識を持つことが大切です。

あわせて押さえたい「フィードバック」

操作の前の手がかりがシグニファイアなら、操作の後に結果を伝えるのがフィードバックです。ボタンを押したときに色が変わる、送信後に「送信が完了しました」と表示される、入力に誤りがあればその場で知らせる、といった反応がなければ、利用者は操作が受け付けられたのか判断できず、同じボタンを何度も押してしまいます。手がかりと結果の表示をセットで設計することが、使いやすい画面の基本です。

Webサイトで見る手がかりの4タイプと虚偽のアフォーダンス

虚偽のアフォーダンスとは、見た目が示す操作と実際にできる操作が食い違っている状態のことです。押せそうに見えるのに押せない、押せるのに押せそうに見えないといったズレは、利用者を迷わせ、サイトへの信頼を損ないます。

Webの画面では、手がかりの見え方を次の4タイプに分けて点検すると整理しやすくなります。

タイプ	状態	Webサイトでの例
明示的	見ただけで操作がわかる	色付きで「申し込む」と書かれたボタン、下線付きの色違いの文字
潜在的	操作してみるまで中身が見えず、記号の慣習で察する	三本線のメニューアイコン、下向きの三角形、虫眼鏡の検索アイコン
否定的	今は操作できないことを示す	必須項目の入力前に灰色で表示された送信ボタン
虚偽的	見た目と実際の動作が一致しない	ボタンのように装飾された見出し、下線が付いているのにリンクではない文字

潜在的な手がかりは、インターネットに慣れていない人には伝わらないことがあります。三本線のメニューを知らない人は、メニューがあること自体に気づけません。こうした場合は、画面の見た目だけに頼らず、ポップアップなどで機能を説明する方法も有効です。

ありがちな虚偽のアフォーダンスの失敗例

• 見出しやラベルを目立たせるために、背景色と角丸を付けてボタンのような見た目にしてしまう
• 強調したい語句に下線を付け、リンクと区別がつかなくなる
• 画像やカード全体が押せるのか、中の小さな文字だけが押せるのかが分からない
• 灰色の文字が「入力例」なのか「入力済みの値」なのか判断できない入力欄
• 押せないはずの状態でも見た目が変わらず、押しても何も起きない送信ボタン

こうしたズレは、デザインの見栄えを優先したときに起こりがちです。ノーマンは、押すのか引くのか分からないドアを使いにくさの代表例として著書で取り上げています。装飾を加えるときは「この見た目は、押せるものだと誤解されないか」を一度立ち止まって確認するだけで、多くを防げます。

意図的に利用者を誤認させるUIは避ける

うっかり起きるズレとは別に、解約ボタンを目立たなくする、不要なオプションに最初からチェックを入れておくなど、利用者の誤認を意図的に誘うUIは「ダークパターン」と呼ばれ、問題視されています。表示の仕方によっては景品表示法や特定商取引法などの観点から問題になる可能性もあるため、申込みや契約に関わる画面では特に注意が必要です。具体的な表示が法令上問題ないかの判断が必要な場合は、専門家に相談してください（本記事は法的助言を目的としたものではありません）。

DX・中小企業の担当者がアフォーダンスを学ぶ意味

アフォーダンスはデザイナーのための知識と思われがちですが、Webサイトや社内の業務システムを発注・運用する立場の人にこそ役立つ考え方です。理由は大きく3つあります。

理由1：画面をつくる人とデザインの専門家が別とは限らない

中小企業では、デザイナーを社内に置かず、総務や営業、広報の担当者がノーコードツールで自社サイトやキャンペーンLPを更新するケースが珍しくありません。テンプレートは整っていても、ボタンの文言を変える、色を自社のブランドカラーに合わせる、項目を足すといった小さな変更の積み重ねで、手がかりが崩れていくことがあります。判断の拠り所となる考え方を一つ持っておくと、こうした「少しずつ使いにくくなる」状態を防げます。

理由2：DXの成否は「現場が使えるか」に左右される

業務のデジタル化を進めても、申請画面や入力フォームが分かりにくければ、問い合わせが増えたり、紙の運用に戻ったりして、期待した効果が出ません。システムを選ぶ段階で「初めての人が説明なしで操作できるか」を確認できれば、導入後の定着の負担を減らせます。アフォーダンスとシグニファイアの区別は、デモ画面を見るときのチェックの観点としてそのまま使えます。

理由3：発注先とのやり取りが具体的になる

制作会社に「もう少し使いやすく」と伝えても、何を直せばよいかは伝わりません。「このボタンは押せるように見えない」「この見出しはリンクと誤解される」と、手がかりの単位で指摘できれば、修正の範囲も費用も見積もりやすくなります。共通の言葉を持つことは、発注者側の大きな武器になります。

公的な取り組みとしては、デジタル庁が行政サービス向けに「デジタル庁デザインシステム」を公開しており、ボタンなどのUI部品の仕様と、ユーザビリティやアクセシビリティを踏まえた設計ガイドラインをまとめています。行政向けの資料ですが、部品ごとの見せ方の考え方は民間のサイトづくりでも参考になります。

ただし、社内の業務システムは、手がかりを自社で直せないことも多くあります。画面そのものを変えられない場合は、操作の流れを動画で残して配る方法が現実的です。動画マニュアルの作り方の基本は、マニュアル テンプレート｜選び方・作成7ステップと無料サイト活用法で整理しています。操作説明を撮影なしでつくりたい場合は、先ほど紹介したVideo Craftの資料も確認しておくと、内製の見通しが立てやすくなります。

ノーコードツールでアフォーダンスを反映する実践ステップ

ノーコードツールでアフォーダンスを反映する手順は、利用者にしてほしい操作を決め、押せるものの見た目を分け、最優先の操作を強調し、フォームを整え、数字でも確かめる5つのステップです。ノーコードでの画面づくり全般の選択肢は、アプリの作り方｜ノーコード・プログラミング・外注の選び方と手順でも整理しています。

ステップ1：ページで利用者にしてほしい操作を書き出す

最初に、ページごとに「利用者に最もしてほしい操作」を1つ決め、ほかに必要な操作を書き出します。たとえばサービス紹介ページなら、最優先は資料請求、次に料金ページへの移動、といった具合です。これは用意すべきアフォーダンスの整理にあたります。してほしい操作が決まっていないと、どのボタンを目立たせるべきかも決まりません。

ステップ2：押せるものと押せないものの見た目を分ける

ボタンには塗りつぶしの背景色を使い、見出しや装飾には同じ見た目を使わない、というルールをサイト全体で決めます。リンクの色も1色に統一し、強調のための下線は使わないようにします。ノーコードCMSでは、サイト全体のボタンや文字のスタイルをまとめて設定できる機能を備えたツールも多いため、ページごとに個別に色を変えるより、全体設定で統一するのが確実です。

ステップ3：最優先の操作を視覚的に一番強くする

同じ強さのボタンが並ぶと、利用者はどれを押せばよいか迷います。最優先の操作は塗りつぶしの目立つボタン、次の操作は枠線だけのボタンやテキストリンク、というように強弱をつけます。ボタンの文言は「詳しくはこちら」ではなく「無料で資料を請求する」のように、押した結果が分かる動詞で書くと、手がかりとしての役割が強まります。

ステップ4：入力フォームの手がかりを整える

• 項目名は入力欄の中ではなく外側に置く（入力を始めると消えてしまう表示だけに頼らない）
• 必須項目は「必須」と文字で示し、色だけで区別しない
• 入力例は、入力済みの値と見間違えないよう薄い色で控えめに示す
• 入力に誤りがあれば、どの項目をどう直せばよいかを項目の近くに表示する
• 送信後は完了画面や完了メッセージで、受け付けたことを明確に伝える

誰にとっても使いやすい画面にする基本の考え方は、デジタル庁の「ウェブアクセシビリティ導入ガイドブック」が、初めて取り組む人向けに解説しています。

ステップ5：初めての人に操作してもらい、数字でも確かめる

公開前に、制作に関わっていない社内の人や家族に「資料を請求してみてください」とだけ伝えて操作してもらい、迷った箇所を記録します。つくった本人は操作を知っているため、手がかりの不足に気づきにくいからです。公開後は、アクセス解析でボタンのクリックやフォームの完了状況を確認し、文言や色を変えた前後で比べると、改善の効果を確かめられます。成果の指標の見方は、コンバージョン率とは？意味・計算方法と改善の基本を解説で整理しています。

この効果検証と、訪問者の迷いへの声かけを支える一例が、TETORI（グルービーモバイル株式会社）です。訪問者の属性や行動履歴に応じてポップアップなどで案内するWeb接客ツールで、ノーコードで作成でき、100種類以上の業種シナリオテンプレートが用意されています。ABテストや効果検証レポートも備えているため、手がかりを直したあとの変化を確かめる用途にも使えます。注意点として、料金体系やプランの詳細を確認するには問い合わせが必要で、一部の機能はオプションとして別途費用がかかります。料金はプランによって異なるため、資料や公式サイトで確認してください。

目標は、ページからの離脱率を減らし、魅力あるコンテンツを見てもらうことですが、それはTETORIで実現しつつあります。

公益社団法人 三重県観光連盟の導入事例（TETORI公式サイト）：https://tetori.link/cases/kankomie

よくある失敗パターン（アフォーダンス設計のNG例）

アフォーダンスを意識していても、運用の中で起こりやすい失敗があります。代表的なものと、その改善の方向性を整理しました。

よくある失敗	起きる問題	改善の方向性
おしゃれさを優先して、ボタンを枠線も背景もない文字だけにする	押せる場所だと気づかれず、申込みや問い合わせが減る	最優先の操作だけは塗りつぶしのボタンにする
ページ内に同じ強さのボタンを多数並べる	どれを押すべきか迷い、結局どれも押されない	ページごとに主役の操作を1つに絞り、強弱をつける
ブランドカラーとボタンの色を同じにし、見出しや帯にも多用する	押せる部分と装飾の区別がつかなくなる	ボタン専用の色を決め、装飾には使わない
スマートフォンで小さなリンクを密集させる	押し間違いが増え、目的のページに進めない	指で押しやすい大きさと間隔を確保し、実機で確認する
送信ボタンを押した後に何も表示されない	二重送信や、届いていないという問い合わせが発生する	完了画面や完了メッセージで結果を伝える
PCの画面だけで確認して公開する	マウスを重ねたときの表示に頼った手がかりが、スマートフォンでは伝わらない	表示や操作の手がかりを、スマートフォンでも確認する

表の中でも、「スマートフォンで伝わらない」「どこで迷ったのか分からない」といった失敗は、画面を眺めるだけでは見つけにくいものです。訪問者の動きに合わせて案内を出し、反応を数字で確かめる手段を持っておくと、手がかりの見直しを繰り返しやすくなります。その選択肢として、TETORIの商品ページで機能の詳細を確認しておくのも一つの方法です。

よくある質問(FAQ)

Q1. アフォーダンスとは簡単に言うとどういう意味ですか？

A. 環境やモノが人に与える「どんな行動ができるか」という可能性のことです。ギブソンが提唱した言葉で、デザインの分野では「押せそう」「引けそう」と感じ取れる手がかりの意味でも使われています。

Q2. 建築におけるアフォーダンスとは何ですか？

A. 空間や設備が、人の行動を自然に引き出す関係のことです。手に取りやすい素材、使いやすい高さや寸法、内部に入りやすく奥が見通せる入口などの工夫が、自然と使われる場づくりに活かされています。

Q3. 保育におけるアフォーダンスとは何ですか？

A. 子どもの周りの環境が、遊びや行動を引き出す働きのことです。保育所保育指針の解説は環境を通して行う保育を基本としており、子どもの発達に応じて環境を計画的に整えることが重要とされています。

Q4. アフォーダンスとシグニファイアの違いは何ですか？

A. アフォーダンスは「何ができるか」という行為の可能性、シグニファイアは「どこで、どう操作すればよいか」を伝える手がかりです。ドアなら押して開けられることがアフォーダンス、取っ手の形や「押」の表示がシグニファイアにあたります。

Q5. アフォーダンスの失敗例にはどのようなものがありますか？

A. 見た目と実際の動作が一致しない虚偽のアフォーダンスが代表的です。ボタンのように装飾された見出し、下線が付いているのにリンクではない文字、押しても何も起きない送信ボタンなどがあります。

Q6. デザイナーがいなくてもアフォーダンスを意識した画面はつくれますか？

A. つくれます。押せるものと押せないものの見た目を分ける、最優先の操作を目立たせるといった基本ルールを守り、公開前に初めての人に操作してもらって確かめれば、担当者でも十分に反映できます。

まとめ

1. アフォーダンスとは、モノや環境が人に示す行為の可能性で、ギブソンが提唱し、ノーマンがデザインに応用した
2. アフォーダンスは「何ができるか」、シグニファイアは「どう操作すればよいか」を伝える手がかりで、両方を設計する
3. 見た目と動作が一致しない虚偽のアフォーダンスは、利用者を迷わせるため、装飾を加えるときに必ず確認する
4. デザイナーのいない中小企業でも、ノーコードCMSの部品と基本ルールを使えばアフォーダンスを反映できる
5. 操作の説明や効果の確認を手作業で続けるのが負担なら、動画マニュアルやWeb接客ツールの資料を取り寄せて比べる

まずは自社サイトの主要なページを開き、「最もしてほしい操作のボタンは、初めての人にも押せるものだと伝わるか」を確認するところから始めてみてください。

参考文献

• 千葉大学予防医学センター「06 アフォーダンス｜身体活動を促すまちづくりデザインガイド」https://hpd.cpms.chiba-u.jp/activeguide/keyword/135
• 厚生労働省「保育所保育指針解説」（平成30年2月、こども家庭庁掲載ページ）https://www.cfa.go.jp/policies/hoiku/shishin-h30-bunkatsu
• 早川克美「アフォーダンスの誤解」アネモメトリ（京都芸術大学）https://magazine.air-u.kyoto-art.ac.jp/essay/245/
• Sprocket「アフォーダンス理論とは？シグニファイアとの違いや具体例、Webデザインとの関係を解説」https://www.sprocket.bz/blog/20220825-affordance.html
• デジタル庁「デジタル庁デザインシステムβ版」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年）