エモーショナルUIデザイン #2

はじめに

この記事は、個人的に大切にしている「エモーショナルUIデザイン」という考え方をまとめた記事の第2回です。第1回は以下よりご覧ください。

エモーショナルUIデザインのポイント

前回、「トーンと使い勝手を融合させて、ユーザーの感情に作用するようにUIをデザインすること」をエモーショナルUIデザインと定義しました。

記事を読んでくださった方から、「トーンの作り込みにリソースを割く余裕がない」「アニメーションなどやりすぎると使い勝手が悪くなりそう」といった声が寄せられました。エモーショナルUIデザインの重要なポイントだと思っているのは、単に楽しげなあしらいを増やしていい感じのものをつくりましょうということではなく、「トーンと使い勝手をいかに融合させ、一体感のあるものとしてデザインできるか」ということです。ここの方針さえ初期から押さえていれば、あとはフェーズに合わせてブラッシュアップしていくことも可能です。（もちろん初期の作り込みもとても大事なのですが、そこは事業の性質によりROIが変わってくる部分ではあります）

今回の記事では、トーンと使い勝手を融合するために最近トライしている方法を2つ紹介したいと思います。

1. デザインキーワードでつなぐ

ひとつめは、トーンと使い勝手を共通のデザインキーワードでつなぐ、という方法です。（なんとなくNotionのようなプロダクトを想像しつつ）ユーザーに至ってほしい感情を分解してキーワードを設定してみます。上記の例は非常にシンプルなものですが、「楽しい」とはどんなテンションの楽しさなのか？「気持ちよい」と感じるためにはどんな要素が必要なのか？など、ひとつひとつの解像度を高めるように考えることでオリジナリティのあるキーワードが設定できるとより良いと思います。

設定したキーワードそれぞれに対して、どんなトーンでどんな使い勝手なのか書き出してみることで、トーンと使い勝手がバラバラにならずに一体のものとしてデザインすることができるようになります。

2. パーソナリティ（人格）でまとめる

ふたつめは、パーソナリティ（人格）でまとめる、という方法です。プロダクトやサービスを人に例えるとどんな人なのか？想像することで「らしさ」が掴みやすくなるのではないでしょうか。その人の価値観や、しそうなこと・しなさそうなこと、どんなコミュニケーションのスタイルで、どんな服を着ているのか、どんな声色なのか・・など、すべてを内包したひとつの人格として捉えることで、トーンと使い勝手を一体化させる手がかりにすることができます。

唯一無二の「らしさ」を生み出すために

もともとは、自分がデジタルプロダクトのデザインをする際に機能や骨格、表層などのレイヤーを分けすぎず、「ユーザーの気持ち」を中心にそれぞれを行ったり来たりしながらつくる癖があることに気づいたことから、このような考えに至りました。

様々なアプローチがあると思いますので、オリジナリティのあるプロダクトをつくるためにこうやっているよ！という方法があればぜひ #エモーショナルUIデザイン へお寄せいただけると嬉しいです🕊