ペアデザインとモブデザインを行いデザインデータを作る

こんにちは。松久です。

デザインデータを作るとき、デザイナーが一人で作業をすることもありますが、複数のデザイナーや、デザイナー以外の職能の人と一緒に取り組む事も少しづつ増えています。現在、どのようにデザインデータを作っているのかを紹介します。

デザインデータができるまで

食べチョクで、デザインデータができるまでの大まかな行程は下記の通りです。

施策の目的を整理する。資料を集める。
施策の目的にそったデザインの初稿を作る
関係者で見ながら作って確認する（モブデザイン・ペアデザイン）
デザイナー同士で確認・検討をする（デザインレビュー）
関係者で合意する（デザインが確定）

今回は 3〜4 の工程で取り組んでいることを紹介していきます。

UI のためのデザインデータは認識合わせのためのドキュメント

デザイナーが作っている「デザインデータ」の役割は、バナーなどのグラフィックとUIでは異なります。バナーなどではデザインデータは完成品となりますが、UI を作るときのデザインデータは、プロダクトを作るための中間成果物で、意図を伝えるドキュメントです。デザインデータを使い、プロダクトマネージャーと成果物（= プロダクト）について共通の認識を持つために使います。エンジニアとは、HTML や CSS などを作るための設計図のような役割（ 1px を正確に表した図面ではなく意図を伝えるための図）で、認識を合わせるために用意しています。

職能を制限せず複数人でデザインをするモブデザイン

デザインデータを作るとき、エンジニア、プロダクトマネージャなど複数人で Figma を見ながらデザインすることを少しづつ増やしています。

GitHub の issue でデザインデータを依頼者に連絡しても意見交換で数日経ってしまうことがあります。複数人集まって見ながらデザインする方法であれば、何ができるのか伝わり、納得感を関係者で持つことができ、複数視点で確認できるようになります。デメリットは、複数人の時間をいっぺんに使うのでコスト面とスケジュール調整が必要なことです。

進めるコツは、デザイナーは話しながらデザインをして黙って作業をしないことです。話を聞いて受け身で作業だけをするのが目的ではないからです。もう1つのコツは、1時間を目安に終わらせること。話を聞きつつ、Figma を操作して画面を作るのは頭と手を同時に動かすので疲労が大きいです。話している方も目の前でできていくので白熱しやすく疲れてきます。ファシリテーションと Figma の操作は別な人がする方のが良い可能性もありますが、デザイナーの理解としては話しながら Figma で作るのが良いと感じています。

デザイナー同士複数人でデザインする

デザイナーは毎日「Designer Team Discussion」というミーティングをしています。ここで取り組んでいるデザインについて相談したり、一緒に作ることがあります。目的を達成するためのデザインになっているか、他の人へ説明する機会になっていることが、一番大きいメリットです。あと、他の人の Figma の操作方法を見ることができるのもいい点です。

デザインレビューをする

UI については、「Designer Team Discussion」で確認して終わりになることも多いのですが、バナーなどはデザインレビューを必須にしています。 Slack に専用のチャンネルがあり、Workflow から依頼できます。デザイナー全員にメンションされますが、レビューはレビューワーを指定してレビューすることが多いです。