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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

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