デザインおもろ！！アフォーダンスってなに？身近なデザインの主張
これはフェンリル デザインとテクノロジー Advent Calendar2024 7日目の記事です。
はじめに
フェンリルでWebフロントエンドエンジニアをしている熊野です。今年の2月に中途採用でフェンリルへ入社しました。
前職ではデザイナーがいない職場だったため、Webアプリケーションのデザインを自分でする必要があり、デザインについて独学で一定の学習をしていました。デザインについてアドバイスをくれる人がいない状態で、冷や汗をかき、不安にさいなまれ、頭を沸騰させ、なんとかかんとか取り組んでいました。
今回の記事は、そんなにわかデザイン知識を仕入れた経験のあるエンジニアが、学習する中で感じた『デザインおもろ！！』と感じたことを共有するために書いています。
特にデザインの中でも、個人的に特に分かりやすくて身近で面白いと感じた、アフォーダンスについて紹介します。この記事を通じて、デザインをより身近に感じて、楽しんでいただけると幸いです。
1. アフォーダンスとは
突然ですが、物からの声や訴えを聞いた事がありますか？
すみません、声が聞こえるって事は現実としてないと思いますが、何かしら物を見たり扱ったりする時に、その物をどう使うかを直感的に理解しているって事は日常的にあるのではないでしょうか。
こちらはエレベーターのボタンですが、どうでしょうか？ 視覚的に見ただけで、これはボタンであり、押して利用するって事を認識できるかと思います。
このように直感的に物の形状、色、配置といったデザインの要素から、「どう使えばいいのか」を自然に理解できることがあります。この、物そのものが持つ「行動を引き起こす手掛かり」のような性質を表す概念が、アフォーダンスと呼ばれています。
簡単な定義
アフォーダンスとは、人があるモノを見たり触れたりしたとき、「どう使えるのか」を直感的に感じ取れる特性のことです。たとえば、ドアノブは「回して開ける」ことを自然に想起させ、ボタンは「押す」という操作を誘発します。これは特別な説明がなくても、私たちが使い方をすぐ理解できる状態を生み出します。
経験を重ねるほど、私たちはモノの操作をより自然に習得し、意識しなくても使えるようになります。アフォーダンスを理解し、それを適切に生かされたデザインは、ユーザーが迷わず使いやすいプロダクトになります。
※専門的には、「アフォーダンス（物が本来もつ行為可能性）」と「シグニファイア（その行為可能性を示す手掛かり）」とで区別された概念があります。本記事では正確性よりも楽しく読みやすくを目的とするため、これらをまとめて「アフォーダンス」として紹介しています。
2. 日常のアフォーダンスを探してみよう
実例紹介
身の回りには、アフォーダンスを活かしたデザインがあふれています。
たとえば：
マグカップ: コップに取っ手がつくことで、火傷しないように持ち上げる事を示唆する。
引き戸: 取っ手の形が「引くべきだ」と伝える。
ハンガー: 服の袖に通して、棒にひっかける事ができる。
アフォーダンスを探そう
次に街を歩くとき、あるいは家や職場で「これってアフォーダンスかも！」と思うものを探してみてください。それを見つけるだけで、デザインが少し楽しく感じられるかもしれません。
3. 火事です！アフォーダンスを感じて
ちょっと前ですが、友人が住んでいるマンションで火事がありました。友人の住んでる部屋の下あたりから煙が出ていて、階段を降りて火事現場の部屋に飛び込んだそうです。
火事現場はカーテンが燃え盛っている状況で、住人が消火器を部屋まで持ってきていたものの、パニック状態で使えていない状態だったようです。
ということで、平時のうちに消火器のアフォーダンスを改めて確認しておきましょう。
消火器は真っ赤な色で居場所を主張しているので、落ち着いて探しましょう。また、普段の生活圏で消火器の位置を事前に確認しておきましょう。
赤色とは別の色で黒いレバーの上で目立つ黄色に意識をやり、そして輪っかに指を入れて引き抜きましょう。
ホースで狙いを定めて、大きく口を開いているレバーを握ります。
本題には関係無いので詳細は省きますが、火事現場に飛び込んだ友人は、消火器を使ってカーテンの火を消し止められたようです。
4. アフォーダンスの失敗例
アフォーダンスは上手く機能すれば快適になりますが、アフォーダンスを正しくデザインできていないと、混乱の元になります。具体例を挙げて説明します。
うまくいかなかった例
問題です！次のドアはどのように開きますか？ドアの取っ手に注目してください。
1. 押す
2. 引く
3. スライドさせる
答えは、「1. 押す」でした！
解説
このドアの取手は、縦向きで手を引っ掛けることができる形状になっています。この取っ手で基本的に期待されるアフォーダンスについて、期待度が高い順です。
横にスライドさせる
引く
（ドアだから押すか・・・）
私がこのドアと初めて相対したときは、次のような事になりました。
アフォーダンスが噛み合わなかった人間
まず、ほぼ無意識にスライドさせようとしましたが、ガっ！となり、ドアは微動だにしませんでした。鍵が空いていることを確認し、ならばと取っ手に指を引っ掛けて引きましたが、また、ガっ！となり、ドアは微動だにしませんでした。この時点で私はパニック状態になり、想定外のことに脳みそで処理が追いつかず、しばらくフリーズしました。
そして、脳みそはほぼ停止している中で何とか体を動かして、南無三！と心で念じながら押すと開きました。誰が見ていた訳でもないのですが、トイレの前でオロオロしている状況は恥ずかしかったです。
なぜ失敗するのか
デザインが直感的でない。
人間の自然な動作や期待を無視している。
アフォーダンス一つで行動が変わる事もあるので、適切なアフォーダンスが組み込まれたデザインはとても大事ですね。
5. アプリケーションとアフォーダンス
アプリにおけるアフォーダンスを一部ですが紹介します。
アプリでの典型的なアフォーダンス
ハンバーガーメニューアイコン : 三本線、二本線を見ると「ここをクリックするとメニューが出る」と直感的に理解。
ラジオボタン : 丸いボタンが複数並んでいると、「これらの中から１つだけ選択できる」と思える。
テキストボックス : 四角い枠を見ると「ここに文字を入力できる」と思える。
現代のチャレンジ
現代のアプリケーションデザインでは、シンプルで美しいUIが求められる一方で、アフォーダンスをどう自然に伝えるかも重要です。
見た目をスッキリさせると、使い方がわかりにくくなる。
新しいUIデザインにはユーザーの理解を助ける工夫が必要。
このあたりのデザインに対する考えの一つとして、様々な人が利用できるようにするアクセシビリティを含めた考慮も要りますね。
以前にアクセシビリティについての記事を書いたので、よければこちらのリンクから参照してください。
6. アフォーダンスでデザインを楽しもう！
物やアプリを使うとき、少しだけデザインを観察してみませんか？
その形や色が、どんな「使い方のヒント」を伝えているのか。
実際にその通りに使えたかどうか。
アフォーダンスを意識すると、日常がちょっと楽しくなります。デザインがいかに私たちの行動を導いているのかに気付けるようになるからです。
悪いアフォーダンスを発見した場合も、なぜ悪いのか、どうすればよくなるかって事を考えてみる事もおすすめです。
次に使うドアやアプリで、どんなデザインがあなたを導いてくれるか、ぜひ感じてみてください！