こんにちは

【SE小規模社長簡単】の

山本です。

 

今回のお話は、「アフォーダンス効果を狙った

さりげないデザイン」について

私、【SE小規模社長簡単】の山本が

お届けいたします。

 

アフォーダンス効果を狙ったさりげないデザイン

アフォーダンスの概要

1950年代後半に、

アメリカの知覚心理学者である

ジェームズ・J・ギブソンによって、

 

アフォード(afford)

「与える、供給する、産する」

などの意味の動詞から

作られた造語で、

 

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

 

 

アホなダンスなんていう意味では決してありませんよ。

 

 

また、1988年には

ドナルド・ノーマンによって、

デザインの認知心理学的研究の中で、

 

デザインにおけるアフォーダンス

の意味を用いています。

 

モノ自体に備わった、

人が感知できる「行動の潜在能力」

という意味で用いました。

 

しかし、この二つの使い方は、異なっており、

 

ギブソンの意味では、

例えばタンスについて語るとすると、

「”人”はそのタンスについて

開けるという行動が潜在能力である」、

この潜在能力が存在するということを

「このタンスと人には引いて開ける

というアフォーダンスが存在する」、

 

或いは、

「このタンスが引いて開ける

という行動をアフォードする」

と表現するのであると言っています。

 

 

 

一方ノーマンは

「人とモノとの関係

(本来の意味でのアフォーダンス)を

ユーザーに伝えること」

 

砕けた言い方をすれば、

「人をある行動に導くための

手がかりを示してあげること」

 

という様な意味合いで

使用されることを言っていて、

 

現在では、

後者のノーマンの使い方で

広く使われていることが多いということです。

 

後年、ノーマン自身が、

間違った使い方を認め、

 

「本来のアフォーダンス

(Real afforedance)ではなく、

 

知覚されたアフォーダンス

(Perceived affordance)と読むべきである」

とのコメントを自著書でコメントしています。

 

現在では、

これらの二つの意味が混在して

使用されてしまっています。

どちらかと言えばノーマンの

誤用した方の意味で

使用されていることが多い傾向にあります。

 

使用する場合は、

この点について十分に理解し

注意する必要があります。

 

ここでのアフォーダンスは、

知覚されたアフォーダンス

(Perceived affordance)

 

の意味で、使っていますので

勘違いされませんように、

お願いします。

 

アフォーダンスを用いたWebサイトのデザイン

明示的なアフォーダンスの例

 

左の画像はGoogleアカウントを

登録するときに表示される

入力フォームです。

 

この中で、「名前」の項目中に

”姓”、”名”と記述されていますね。

 

最初の欄には「姓」を入力し

後の欄には「名」を入力することが

理解できます。

 

また、「ユーザー名を選択」の

項目の中には、”@gmail.com”と

記述されています。

 

これで、メールアドレスの”@”より

前のところを入力するのだと

理解できます。

 

他の項目にもありますが、

この様に入力内容を誘導することを

明示的なアフォーダンスと言います。

 

パターン化したアフォーダンス

検索窓の例として当サイトでも表示していますが、

 

 

 

これなどがいい例です。

つい検索キーを入力すると

という意識になりませんか。

 

入力欄と虫眼鏡がセットになっていることで、

検索することができると判断できます。

 

この画像は人に検索キーを入力するという

行為をアフォードしていると言います。

 

今までの経験から、共通した意識となり、

パターン化されていることで、

迅速なコミュニケーションがとれます。

 

他にも、当サイトで使用している、

アンカーテキスト(リンクテキスト)や

リンク画像の上にマウスカーソルを置くと

 

少し斜めに動くようにしています。

 

この動きで、クリックすると動作することが

判断できるようになっています。

 

このことをパターン化した

アフォーダンスと言います。

 

隠されたアフォーダンス

ページを開いた直後には

表示されていませんが、

スクロールしたときに

右下に表示されるアイコンがあります。

これはページトップに移動するアイコンです。

 

普段は使わないような機能を

ある行動をしたときに誘導するときなどに

効果的になりますね。

 

他の例を挙げると、

ページの最下部までスクロールしたときに

ソーシャルメディア(SNS)ボタンを

表示する仕組みがそうです。

 

 

比喩的なアフォーダンス

画像は動画編集ソフトCamutasia

で有名なアメリカのソフトウエアの会社で

Techsmithのホームページの左上にある

アイコンです。

左から1番目のアイコンは、

受話器のマークですが、

「問合せ」を意味します。

 

左から2番目のアイコンは

地球のマークで表示する

言語を選択します。

 

3番目はショッピングカートですね。

 

そして、一番右のアイコンは

ユーザーアイコンです。

 

なんとなくわかる気がしますが、

クリックしてガイダンスを表示しないと、

正確にはわからないというのが、

正直なところではないでしょうか。

 

ですから、比ゆ的なアフォーダンスは

誤解を招かないように注意して

使うことが重要です。

 

ネガティブなアフォーダンス

ネガティブなアフォーダンスは、

機能しないことを意味します。

 

最もポピュラーなものに、

グレイアウト表示が適当な例となります。

 

画像は、無料でイラストを

ダウンロードさせてくれる

ILLUST BOXのサイトです。

ダウンロードしようとしたときに、

コメントを15文字以上入力しないと、

ボタンがグレーアウトしています。

15文字入力した時点で、

ダウンロードボタンが

押せるようになります。

 

グレイアウトのアフォーダンスは、

何かを要求するときに効果的です。

 

 

以上が、アフォーダンスの例ですが、

アフォーダンスの優れた点を活用して、

サイトデザインに役立てるようにしてください。

 

 

如何でしたか

 

 

今回は、「アフォーダンス効果を狙った

さりげないデザイン」について

【SE小規模社長給料年収簡単】の

山本がお届けいたしました。

 

次回も、役立つ情報をお届けいたします。

 

最後までご覧いただきありがとうございました。

 

貴方の成功を心より願っています。