【怒りのUI】UIデザインに欠かせないシグニファイアという概念

アラサー 怒りのUI

こんにちは、デザイナーのスライです。
今月から毎月、ブログの更新をしていくことになりました。
主にUIに関連する記事を書いていこうと思います。

第一回目は、「UIデザインに欠かせないシグニファイアという概念」です。

Webデザイナーを悩ます問題

多くのWebデザイナーにとって悩みの種といえば、
目的を達成させるためのデザインを実現することだと思います。

サイトには目的があり、目的を達成させるためのデザインを施すことが、
私達Webデザイナーに求められる仕事です。

今回はデザインの概念であるアフォーダンスシグニファイアから、
目的達成へ向けたデザインのヒントを探ろうと思います。

アフォーダンスとシグニファイア

デザインの概念に、アフォーダンスシグニファイアという言葉があります。

例えば、食卓にリンゴとオレンジがあるとします。
お腹が空いていれば、これを食べようとするのが人の自然な行動です。

このように、環境(食卓にあるリンゴとオレンジ)が動物(人)に対して
与える意味(食べる)をアフォーダンス(affordance)といいます。

アフォーダンス
上記では、選択肢はリンゴとオレンジの二つがあります。
では、相手にオレンジを食べさせたい場合、あなたはどうしますか?

リンゴに「毒」と書かれたラベルを貼ったり、かじってみたり、、、
様々な方法が思い付くと思いますが、目的は一緒です。
オレンジに誘導させることです。

シグニファイア
このように、こちらの意図でアフォーダンスを仕向けることを
シグニファイア(signifier)といいます。

以上がデザインの概念、アフォーダンスとシグニファイアです。
それでは、ECサイトを例にこの概念について考えてみます。

ECサイトでの事例:目的の設定

ECサイトにおいて、整理すべき点は下記です。

  • サイトの目的は商品を購入させること
  • ユーザーの目的は買い物がしたい

上記から、ECサイトとユーザーの共通目的である、
商品購入を目的に設定してデザインを施します。

※今回救済するユーザーは、買い物の意識があるユーザーのみとします。

ECサイトでの事例:シグニファイアの例

シグニファイアの例
サンプルで目的達成につながる最終的な要素は、
「カートに入れる」ボタンとなります。

目的を達成させるために、下記のようにデザインを施しています。

  • 文字サイズを大きくする
  • 広い領域を確保し、背景色を付ける
  • 立体感を出す

このように、目的達成のためにユーザーを誘導させるデザインを加えることが、
シグニファイアとなります。

また、それによりユーザーが影響を受けて行動することが、
アフォーダンスとなります。

まとめ

サイトには目的があります。
誰による誰のためのサイトかを整理し、目的を設定しましょう。

目的を設定すると、必要となるシグニファイア=デザインが自ずと見えてきます。
目的に最適なデザインを施し、サイトを目的達成へ導きましょう

サイトのUIを上質なものへとするヒントは、シグニファイアにあります。