こんにちは、ユニファでプロダクトデザイナーをしている砂田です。
この記事では、私が日々の業務の中で心がけている「一人歩きしても伝わるデザインデータの作り方」について紹介します。
プロダクト開発は、PdM・エンジニア・デザイナーだけでなく、ビジネスサイドのCSや営業の方など、様々な部署のメンバーと連携しながら進んでいきます。
その中で、誰が見てもわかりやすいデザインデータにすることを常に意識しています。
なぜ「一人歩き」できるデザインが必要なのか？
リモートワークや非同期でのコミュニケーションが当たり前になった今、Figmaのデザインデータが単なる「見た目の設計図」ではなく、仕様書や議論を行う場としての役割も持つようになりました。
たとえば、
- PdMが仕様を詰めるために見る
- 開発メンバーで集まり懸念点の洗い出しや認識合わせをする
- エンジニアが実装のために確認する
- ビジネスサイドの部署の方が変更点や開発内容を把握するため
と言ったように、見る人の役割やプロジェクトの進行状況によって目的が異なります。だからこそ、誰が見ても「目的を果たせる」状態に整えておくことが大切です。
見る人にあわせて「欲しい情報」を共有
それぞれの役割の方が必要な情報をスムーズに受け取れるよう、以下の点を心がけてデザインデータの作成を行っています。
PdMに向けて：仕様を固めやすく・認識合わせ
- プロジェクト目的、背景にあるニーズ、具体的な解決策をまとめる
- デザインでは補足できない仕様や挙動の補足を行う
- 判断材料となった、定量的なデータや顧客要望をまとめる
エンジニアに向けて：実装しやすく
- 各コンポーネントの状態(ホバー、エラー、データの有無など)を網羅
- 全体像や条件による分岐を把握しやすいように遷移図を作成
- 確定した仕様をピックアップしてまとめる
デザイナーに向けて：背景を振り返られるように
- プロジェクトの背景や検討過程をまとめておく
- デザインレビューを行いやすいように検討中内容の記載をする
他部署に向けて：変更点がひと目で分かるように
- 「どこが変わったか」をピックアップしてまとめる
- 判断材料の定量的なデータや顧客要望を添える
デザインデータに込めた工夫
非同期でのコミュニケーションでもスムーズにデザインや挙動の認識を合わせられるよう、いくつかのパーツを使いながら共有を行なっています。その事例をいくつかご紹介します。
▪️プロジェクト概要：
デザインデータに訪れた際に、誰もが概要を把握できるように、プロジェクトの概要や関連リンク（仕様書・関連する資料）を配置します。
▪️要件整理：
プロジェクト開始時に、デザイナー目線でも要件を再整理し、認識の齟齬がないかを確認するシートを作成。
PdMとの認識合わせを行うことで、判断軸のブレを防ぎます。
▪️仕様メモ：
各画面での詳細な変更点やどんな挙動になるのかなどを、Figma上で記載します。言葉で伝わりにくい箇所は図解をしながら共有することで、認識のズレも減ります。
▪️相談メモ：
コメント機能だけでは見落としがちになってしまうため、視認性のデザインにして目立たせたものを配置しています。特に重要な議論や、相談を行いたい箇所はここに記載します。
▪️遷移図：
ページや状態ごとの全体像を可視化することで、細かな分岐や漏れを防ぎつつ、開発メンバーとの共通認識を行います。
最後に
プロダクトデザイナーの仕事は単にUIを作るだけでなく、抽象度の高いものを具体化することや検討する場を作ることで、スムーズに開発が進むように整えることも、大事な役割と思っています。
「デザインファイルが一人歩きしても伝わること」を意識し、これからも試行錯誤していこうと思います。
ユニファでは一緒に働く仲間を募集しています！気になった方はぜひ採用ページをチェックしてみてください！ jobs.unifa-e.com
