訳注：すべての画像はErik Messakiによる。ただし、画像中の日本語部分のみ訳者。
デザインを感情的に表現し、ユーザーの反応を引き起こす方法：いくつかの実用的なアドバイス
最近、エモーショナルデザインが大流行し、話題になっています。しかし、逆説的ではありますが、多くのデザイナーはそれが何であるかについて明確な考えを持っていません。エフェクトで観客を驚かせればいいと思っている人もいれば、写真やイラストで「かわいい」を追求する人もいます。そのため、証券会社のWebサイトを構築し、スマイルマークや子猫を使って「よりエモーショナル」にしようとします。しかし、彼らが引き起こしそうな感情は、顧客の怒りの感情だけです。ほとんどのデザイナーは、仲間の感動を誘うためにデザインを作っています。そして、「すごいね！」と言われます。しかし、不思議なことに、その感動はユーザーには伝わらないのです。
経験豊富なデザイナーほど、ドン・ノーマンの本を読んだ後、新しい知識を実践で使おうとして失敗しています。では、何が問題なのでしょうか？
ここで正直に言いましょう。誰もが実際に本を読み終えているわけではありません。しかし、多くの人がこのピラミッドを見たことで、多くの混乱を招いたのです。
何が問題なのでしょうか？
上記はマズローのピラミッドをデザインに当てはめたものです。しかし、人間にはデザインに対する根本的なニーズはありません。醜くてほとんど機能していないウェブサイトを見て死ぬ人はいないでしょう。
この図を見ると、まず機能性、次に信頼性、ユーザビリティに気を配り、その上でエモーショナルなデザインでケーキの上のアイシングをする必要があると考えたくなります。
しかし、そうではありません。もう手遅れなのです。エモーショナルはケーキの上のアイシングではありません。ケーキの味なのです。ある味を作ろうと思ったら、あらかじめ材料を用意しますよね？それと同じです。途中でカラーパレットを変えることもできますが、感情を揺さぶるアニメーションやゲーミフィケーションが必要なら、最初に考えなければならないことです。
エモーショナルデザインは、市場調査をもとにしたデザインコンセプトの段階で生まれます。
市場分析、プロジェクトのゴールと目的の理解、オーディエンスやユーザープロファイルの把握なくして、エモーショナルデザインを効率的に行うことはできません。デザインで伝えたいエモーションは、最初の段階で決めておかなければならないのです。たとえ、そのアイデアが初期段階であってもです。エモーションの胎動は、作業や議論のプロセスを通じてどんどん大きくなり、デザインを作る頃には簡単に誕生していることでしょう。 これを理解することが、成功の半分なのです
さて、ここからがもう半分のポイントです。
1.ターゲットオーディエンスを知る
相手が誰であるかを知らなければ、感情的な反応を引き起こすことはできません。ユーザーについて、できる限り詳しく知りましょう。まるで自分の友人や家族のように、ユーザーをイメージする必要があります。購入者のペルソナを用いて、ユーザーのニーズや視覚的嗜好をより深く理解しましょう。このターゲット層には何が魅力的なのか？どのようなデザインが効果的なのか？バイヤーペルソナのテンプレートは、デマンドメトリックなどが非常に便利です。
こちらでいくつかのヒントを見つけることができます。
2.感情を見極める
訴求したい感情を明確に把握する必要があります。確かに、どんなデザインにもワクワク感はつきものです。美しさ、機能性、使いやすさなど、あなたのデザインはすでにすべて備わっています。あとは感情を加えるだけです。
そのためには、リストを作成するのがよいでしょう。たとえば、上記の証券会社のウェブサイトの設計では、信頼性、穏やかな、信頼、リラックスした一般的な印象を持つことができますが、重要な細部に焦点を当てます。 しかし、顧客がどのような感情を必要としているのか分からない場合はどうすればいいのでしょうか。慎重に主題を研究し、それに没頭してください。競合他社のウェブサイトをチェックし、感情やユーザーとの接点に着目してデザインを分析してみるのです。ここで、後述するノーマンのメソッドが使えるようになるのです。
3.コンセプトの定義
これは、大まかなデザインコンセプトについてです。私たちはすでに、ユーザーが誰で、私たちの製品に接したときに何を感じるべきかを知っています。ここで、リストを見て、本格的なデザインではなく、心象風景を思い浮かべてみましょう。そのために欠かせないのが、「色」です。
証券会社のウェブサイトを例にとって考えてみましょう。ターゲットは25歳から65歳の男性で、保守的な人が多く、慎重で整理整頓ができ、たまに衝動的な人もいるとします。この人たちに必要なのは、集中力と、シンプルな背景、そして飾り気のないデザインです。アニメーション？それはダメです。ゲーミフィケーション？今回は違います。この場合、ブルーやグリーンの落ち着いた色調と、対照的なフォントを2つほど使うのが効果的です。写真付きの実際のカスタマーレビューや、カレンダーも必要でしょう。
これが、私たちの将来のデザインの「心象風景」です。これで、私たちはどこに向かっているのかがわかりました。
4.カラーソリューションを選ぶ
色は即座に、直感的な感情的反応を引き起こします。だからこそ、正しいものを選ぶことが重要なのです。
プライマリー・カラー
ロバート・プラチックの「感情の輪」を参考に、プライマリー・カラーを選ぶとよいでしょう。中心から遠く、鮮やかでない色ほど、感情が強くないことを意味します。
ただ、Plutchikの図を文字通りに受け取るべきではありません。緑色の背景だけでは信頼できるデザインにはなりませんし、ライラック色の背景が自動的につまらないデザインになるわけでもないことをご理解ください。下のイラストは、コントラストがどのように働くかを示しています。私たちの注意はハイライトに引き寄せられ、退屈なものを刺激的に、悲しいものを楽しくするものなのです。
感情はひとつの値から生まれるものではなく、常に総合的なアプローチなのです。
色の組み合わせ
色の組み合わせの選択には、さまざまな方法があります。最も効率的なのは、補色、三原色、分割補色、類似配色です。
5.「感情の接点」を見つける
感情とは、喜びや感動だけではありません。デザイナーには、ユーザーとの感情的な接点が必要です。ここでドン・ノーマンの騎兵隊の出番です。ユーザーとの接点は、3つの感情レベルで見つかります。
- 生理的レベル ：一目見たときの印象。
- 行動レベル：- ユーザー体験の喜び
- 内省的レベル ：製品に対する意識的な態度、「試着」（自分がオーナーになったつもりで）、製品に対する一般的な印象。
私たちの仕事は、あらゆるレベルのビジュアルとマイクロインタラクションを通じて、感情的な接触を実現することです。ユーザーを知らないウェブデザイナーは、間違った接点を作ってしまうか、全く作らないかのどちらかです。
生理レベル
ビジュアルデザインは、ユーザーの直感に訴えるものです。美しいものは直感的に認識されます。デザイナーは、ターゲットとするユーザーにとって何が魅力的なのか、何を美しいと感じるのかを知る必要があります。直感に訴えることで、「すごい」と思わせることができるのです。
行動レベル
また、使い勝手の良さも直感的なデザインの特徴です。瞬時に理解できるものは、ユーザーにとってありがたいものです。逆に何もわからないと「これを作ったのはバカだな」と思うでしょう。これは非常にネガティブな感情です。
行動デザインは、利便性、機能性、マイクロインタラクション、そしてフィードバックが重要です。これは本来、感情的な体験とそれがもたらす喜びを応用したものです。
また、行動のデザインは、一見してではなく、実際に使ってみて、シンプルで理解できるものでなければなりません。
接点づくりの原則は同じで、どのウェブデザインツールがターゲットにとって最も魅力的かを理解する必要があります。
ウェブサイトの目的がユーザーエンゲージメント、ダイナミックなユーザー体験、学習、コミュニケーション、ロイヤルティであれば、適切なツールと視覚化を選択する必要があります。ユーザーをリラックスさせ、ネガティブな思考から気をそらすことが目的であれば、ゲーミフィケーションやアニメーションが効果的でしょう。証券会社の例では、私たちはこれらを使用しないことにしました。しかし、コアユーザーが保守的ではなく、若くて興奮しやすい人たちであれば、ゲーミフィケーションは必要でしょう。
ユーザーにポジティブな応用体験を与えるツールを探してください。これは、行動や実践から生まれる感情です。
内省的レベル
これは、連想や記憶、特別な感情を誘発することで機能します。これはもう直感的なレベルではなく、個人的な経験、文化、メンタリティに基づく知覚のことです。内省的な感情の相互作用は、製品に対する長期的な印象を決定づけます。ユーザーは、自分が何を好きか、なぜ好きか、どんなメリットがあるか、製品が自分の自尊心や気分にどう影響するかを理解しています。彼らは何としてでもその製品を使いたいと考えています。
内省的感情レベルは、渇望、欲求、製品を所有する意識的な必要性についてです。
これは最も難しいレベルです。そして、デザイナーが最も混乱し、失敗しやすいのもこのレベルです。基本的には、マスタークラスのレベルです。内省的な感情を引き起こすには、デザイナーであるだけでは十分ではありません。十分な教養と共感力を持った人間である必要があります。共感とは、他人の気持ちに共鳴し、思いやりを感じることができることです。
例えば、ある20歳の若者が3年間デザイナーとして働き、仕事に没頭していたとします。彼は、ある老人ホームで、お年寄りに穏やかな気持ちと希望を与える仕事を任されます。彼は何を知っているのだろう？彼に最愛の祖母がいれば最高です。それができる保証はないけれど、彼が彼女の立場に立つのに役立つでしょう。でも、誰もにおばあちゃんがいるわけではありません。また、年齢に関係なく、他人の立場に立って考えられない人もいます。誰もが共感できるわけではないのです。
おばあちゃんのために良いデザインを作るには、おばあちゃんの年齢である必要はありません。ビジネスマンの自尊心を高めるには、ビジネスアカデミーに入学する必要はありません。ターゲットとなる人々の関心が曖昧で、自分の心に響かないとしても、がっかりしないでください。彼らのことを知り尽くすのｄす。彼らの立場に立って考えてみましょう。彼らの世界に没頭すればするほど、彼らはより身近に、より親密に、より好感を持つようになります。
6.エモーショナルなイメージを見つける
ターゲットの悩みがわかれば、適切なビジュアルを選ぶのも楽になります。写真やイラストを探すのも、必要なものがはっきりしていれば、とても簡単です。
重要なのは、製品を使いたい、楽しみたいという気持ちを起こさせるためには、所有者が幸せそうにしているイメージを作ることです。
例えば、「クローバー」の場合です。「幸せな所有者」は、クレジットカードを手にしていることで、クレジットカードの所有権を主張し、具体的・客観的なものにします。ユーザーは、自分が所有者になったつもりで、カードの所有者であることを想像するのです。
エモーショナルなイメージの作り方について詳しくは、こちらをご覧ください。
7.自分自身を見つける
共感能力は誰にでもあり、それを伸ばすこともできますし、伸ばすべきです。良いデザイナーは心が広いです。本を読み（デザインマニュアルだけでなく）、映画を観て、旅をして、人と付き合い、考え、内省し、自分の心と感情を育てていくのです。デザイナーには、想像力と視覚化能力という得意分野があります。それに加えて、ユーザーへの共感力があれば、必ず相手の心を動かすことができるはずです。
「体験とデザイン、スタートアップについて」の更新情報は、ぜひこちらのアカウント（@hrism2）をフォローしてください！
— いしまるはるき (@hrism2) 2022年5月30日
