「デザインが伝わらない」のは、デザイナーのせいかもしれない

こんにちは、かんろです。

作ったデザインをチームや関係者に共有する時、「なぜか伝わらない」「説明した意図とズレたフィードバックをもらう」という体験はないでしょうか？今も過去も、デザイナーが一人しかいない組織に所属することが多かったので、デザインの説明をする相手は非デザイナーであることがほとんどです。

思い返すと、デザインの説明が伝わらなかった原因は、デザインの意図を説明できていなかったこと。一番の原因は、デザイナーである自分の言語化不足にあったように思います。

意図ではなく、意匠を伝えている

ウェブサイトのデザインや UI を作った時に、どのように説明していますか？

「ここはユーザーの気持ちを盛り上げるために、赤色のボタンを配置しました」
「安心感を与えるために落ち着いた青ベースのデザインで…」
「高級感を演出するために余白を広めにとり、書体は…」

上の例は、デザインの意図ではなく、意匠の説明をしています。少し大袈裟に書きましたが、でもこれに似た説明をしていることはありませんか？
お恥ずかしい限りですが、私はやっていました。でも当時は、これでデザインの意図を説明しているつもりだったんです。

非デザイナーに向けて説明する場合、意匠について伝えても「そうですか」としか答えようがなかったりします。もしくは「ボクは黄色の方が好み」とか、個人の好き嫌いでしか反応できません。

世界観と設計は分けて伝える

なぜ、その色にしたのか？なぜ、このフォントなのか？
これらは世界観を伝えるためには重要な情報だと思います。

しかし、ボタンが配置されている理由を説明しなければいけない時に、世界観の話をしても欲しいフィードバックを得ることはできません。
配色やフォント、余白の設計、どのような印象を与えたいのかといったデザイン自体の説明は、世界観として伝える。

その上で、どのようなコンテキストで使われる UI なのか、表示する情報の選定理由、これでユーザーゴールは達成されるのかといった設計理由を伝えると「このタスクを行う時、Bというタスクとぶつかる可能性はないだろうか」「情報Aを引っ張ってくることは可能、情報Bもあった方が親切ではないか」など、具体的で分かりやすいフィードバックをもらいやすくなります。

「同じボタンをもう一つ設置したい」

たとえば、「今配置されているボタンをもう一つ増やせないか？」と言われた時、どのように説明しますか？デザイナーとしては、ボタンは増やしたくないと考えています。

「同じボタンは置けません」
「そのボタンと並べられるボタンは作っていません」
「そのボタンが必要だと思えません」

こういった説明だと、なぜ増やせないのか分からないですよね。パッと見、余白はあるので「ボタンは置けるだろう」と思われても仕方ないでしょう。

当然、フィードバックも「置けると思います」「今あるボタンを使うから作らなくてもいい」「私は必要だと思います」といったような感想が返ってきます。

では、なぜデザイナーはボタンを増やせないと考えたのでしょうか？
それは、このUIに使っているボタンはプロダクトの中で一番強力だと設計しているアクションボタンを使っており、このボタン同じレベルで並ぶボタンは存在しません。
だから、「現在のUI設計の思想ではボタンは増やせない」のです。

しかし、そのようなUI設計の思想があったとしてもきちんと説明しないと伝わらないし、説明されている側も知ることができないまま、感想の言い合いで話が平行線になってしまいます。

ドキュメンテーションはデザイナーを救う（きっと）

デザインの説明ができていない時、私は自分の作ったデザインを言語化できていませんでした。今思い返すと、過去の自分は「デザインの説明」をする時に、世界観7：UIの設計理由3くらいの割合で説明していた気がします。

なぜ説明できるようになったのかというと、ドキュメンテーションをするようになったからです。ドキュメンテーションでなにをしているのかというと、「デザインを言語化すること・可視化すること」。

デザインの言語化はそのまま、文字通りです。
施策ごとにデザインドキュメントを作成していて、ユーザーゴールや解決したいこと、それによるメリットデメリットなどを言語化しています。

もし「なんか見たことあるドキュメントだな？」と思った方がいれば、鋭いです。最後にその理由をかいています。

ビジュアルデザインに入る前に、これらを言語化しておくことで作るUIにも一つ一つ意図が生まれますし、説明する時もだいぶんラクになります。また、デザイン変更の履歴にもなるので、後から他の人がチームに入ったとしても経緯を追いやすくなるメリットがあります。

デメリットは、慣れるまで書くのが大変なことくらい。これも慣れてくれば段々早くなるので、絶賛ライティング力を鍛え中です。

もう一つは、可視化。
デザインなどみんなが見れるものがない場合、それぞれの頭の中で想像したことを基に話してしまい言葉の認識に齟齬が発生してしまうことがあります。

それを防ぐために可視化をします。今、どの部分について話しているのか、現在のフローがどうなっているかをMiroなどホワイトボードツールで図解化して、それを見ながら話すことで認識の齟齬は減りました。

このドキュメントはデザイナーだけでなくチームのだれでも編集できるようになっており、デザインドキュメントの作成段階から共有しています。

あと、言語化していると「なんとなく作ったつもりのUI」であっても、自分なりの設計思想が垣間見えてきます。意外と適当に作ってたわけじゃないんだ！ということにも気付けるし、それが自信にも繋がってきます。

「デザインの言語化が大切、意図の説明が大切」と分かってはいても、言語化に慣れていないとそれすらもままならない時があります。
もちろん、デザインが伝わらないのはデザイナーだけのせいではない場合もありますが、自分の場合は己の言語化の拙さが大きな原因となっていました。

デザインドキュメンテーションを作るようになってから、ドキュメンテーションの大切さ・ありがたさに気付いたので、これからも続けていきたいです。

おまけ

デザインドキュメンテーション、なんか見たことあるな？と思った方、多分正解です。私はオミカレという会社でデザイナーをしているのですが、デザイナーが一人ということもあり、デザインのアドバイザーとして長谷川恭久さん @yhassy に相談にのってもらっています。

オミカレにデザイナーが一人だけなので、デザイン相談で長谷川恭久さん @yhassy さんに来てもらった！大きなタスクとかやりたいこととか、すごくフワってしていた部分に道筋作ってもらってめちゃくちゃありがたかった🙏
そしてデザインの相談役を呼んでくれるオミカレもめちゃくちゃありがたい...🙏

— 𝚔𝚊𝚗𝚛𝚘✨𝚊𝚒𝚌𝚘𝚌𝚌𝚘 (@kanrame) January 14, 2020

ドキュメンテーションも慣れない内は一人で行うのは大変で、書き方が分からない時もあるので、フィードバックをもらいながらブラッシュアップを重ねています。

デザイン相談ができる環境とそうじゃない環境を体験して、大きく変わったこともあったので、それもまた機会があればnoteに書きたいなと思っています。

最後までお読みいただき、ありがとうございました！