ウェブ学のすすめ

Study of Web Design & Programing

Webにおける「アフォーダンス」の例

アフォーダンス(affordance)とは

<生態光学、生態心理学の概念>

環境が動物に対して与える「意味」のこと

引用元:アフォーダンス - Wikipedia

動詞のafford(「〜を与える」)から知覚心理学者ジェームズ・J・ギブソンがつくった造語です。

<デザイン分野の概念>

モノに備わっている使い方の暗示

引用元:iPadに「電話」のアフォーダンスはない? - 松田次博 間違いだらけのネットワーク作り:ITpro

人をある行為に誘導するためのヒントを示す事

引用元:アフォーダンス - Wikipedia

例えば、

staff only / [cipher]

上の画像のようなドアの場合、ドアを開くためにはドアノブを下ろせばいいことが分かります。


P6162982 / beve4

イスなら腰を掛けることができると誰でも分かります。

●Web分野での例

リンクテキストを、青系の色にして、かつ下線を付ける。→ウェブ学のすすめ

マウスのカーソルが画像やリンク上に乗ると画像やリンク色を変化させる(マウスオーバーまたはロールオーバー

ボタンをいかにも押せるように立体感あるデザインにする。

リンク先が分かりやすいアイコンを作成する。

読みたい本

Webインターフェイスで学ぶ インタラクションと情報のデザイン

Webインターフェイスで学ぶ インタラクションと情報のデザイン

WEBデザインメソッド-伝わるコンテンツのための理論と実践

WEBデザインメソッド-伝わるコンテンツのための理論と実践