Zeplinを活用したデザインレビューシステムでレビューの効率化・透明化をした話
はじめまして！都内でUX/UIデザイナーをしているえとぽっぷと言います。
今年導入したZeplinでのデザインレビューシステムで、デザインレビューが効率化・透明化したお話をご共有します。
2018年1月、私の働くプロダクトのチームでZeplinによるデザインレビューシステムを導入しました。運用を始めて、10ヶ月が経ちますが、今でもチームで活用できているシステムで、チームメンバーにも好評なため、この度noteに投稿してみることにしました。
最後にはレビューガイドラインのドキュメントも配布するので、よければ皆さんも使ってみて下さい！
目次
導入の理由
Zeplinでのレビューシステムを作る
-①ZeplinとSlackの連携チャンネルを用意
-②コメントスレッドの運用ルールを決めました
デザインレビューのポイント
デザインレビューガイドライン
導入の理由
今までもZeplinによるデザインレビューは行われていましたが、明確なルールが無く、デザイナーだけの閉じた世界になってしまっていたため、エンジニアにデータを引き渡した後に手戻りが発生する・口頭でのやり取りが多くログが残らないといった問題がありました。
今年1月以降デザイナーやエンジニア・ディレクターが新たにチームに参加することが決まっており、上記の問題を解決しないままではチームのデザインに関するコミュニケーションが円滑に行かなくなるのではと懸念を抱いていました。
そこで、デザインを取り巻く全てのステークホルダーが参加できる、デザインレビューのシステムを探していたところ以下の記事に辿りつきました。
この記事を参考に、デザイナー・エンジニア・ディレクターが全て参加できる、よりシンプルな仕組みのレビューシステムを提案しました。
＝＝＝＝＝＝＝＝＝＝
Zeplinでのデザインレビューシステムを作る
①ZeplinとSlackの連携チャンネルを用意し、デザインの更新やコメントの新規追加に気づけるようにしました。
・注意すること
ここはあくまで更新通知の受け取りチャンネル。
このチャンネルで議論することはありません。ただ確認依頼などのメンションを飛ばすことはOKです。
・遠慮はNG、デザイン過程の透明化を
通知がたくさん飛ぶことを遠慮する必要はありません、こまめにSketchデータをアップロードしましょう！
こまめにデザイン経過をアップデートすることで、周りはデザインの進捗や制作過程を知ることができます。
②コメントスレッドの運用ルールを決めました(Zeplin公式ではコメントスレッドはnoteと呼ばれています。)
緑色：事前共有
デザイナーが事前にメンバーに伝えたいこと(デザイン意図や会議で議論された決定事項)がある場合は、
緑色のコメントを残します。
黄色：issue(質問・修正依頼・レビューコメント)
デザイン意図への質問・修正依頼・デザインへの意見などは、黄色のコメントを残します。
Githubでいうレビューコメントやissueを立てるイメージです。会話はコメントのスレッド内で行われます。
青：解決済み
黄色のコメントでの課題が解決したら、スレッドカラーを水色に変更した上でグッドボタンを押します。
？事前共有に対して質問や意見がある場合
事前共有コメントのスレッドカラーを緑から黄色に変更しましょう。黄色のコメントがついたら、担当者およびそのデザインの決定に関わる人たちはそのスレッド上で議論をします。
口頭で相談した場合は、結論を必ずスレッドに残すようにします。
問題が解決したら次のステップに進みます。
？課題の再オープン
仕様変更や、デザイン調整が行われ、解決済みだった問題について再度修正や議論が必要な場合、
コメント色を水色から黄色に変更し、追加でコメントをします。
＝＝＝＝＝＝＝＝＝＝
実はZeplinには、コメントのResolveとopenを指定できる機能もあります。
しかし過去のログの一覧性や二重議論の防止などは、コメントカラーの運用の方が優れていると思い、この機能は使っていません。
レビューが膨大になってしまう場合などはこちらの機能の活用を視野に入れてもいいかもしれません。
デザインレビューのポイント
誰でも参加しよう
質問に対する返答は原則全てZeplin上で行います。口頭で話した場合も結論はZeplinに残します。
必ずしも担当デザイナーと質問者のみで会話する必要はなく、意見やアドバイスは誰でも可能です。
話し合いは一箇所で
デザイン一箇所に対する議論は一つのスレッド内で行うようにしましょう。
同じ箇所に複数のスレッドを立てると、議論が分散してしまい、二度手間が発生してしまいます。
＝＝＝＝＝＝＝＝＝＝
デザインレビューガイドライン
そしてこれらの内容をA4一枚にサクッとまとめた、デザインレビューガイドラインを作成し、チームのZeplinに載せています。新しくメンバーに加わった方にはこちらを一読してもらうことで、スムーズにデザインレビューに参加していただけるようになりました🙏
もしよければ、皆さんもデザインに関わる全てのチームメンバーでオープンなデザインレビューを実践してみてください！
またより良いレビューシステムがあればコメントなどで教えていただけると嬉しいです✨
ここまで読んでいただきありがとうございましたmm
＝＝＝＝＝＝＝＝＝＝
参考リンク
Zeplin || https://zeplin.io/
ZeplinとSlackの連携方法 || https://support.zeplin.io/faq/adding-a-project-to-slack
いいなと思ったら応援しよう！
