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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

サンプルで目的達成につながる最終的な要素は、
「カートに入れる」ボタンとなります。

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

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

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

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

まとめ

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

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

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