皆さんこんにちは。サービスデザイナーのグレイテストヒロキです🕺
今回は、10月初旬からデザイナーとしてジョインした、不動産仲介業者向けCRMサービス「Forest」を運営する株式会社オープンルーム(https://openrm.co.jp/)にて、チーム全員でデザインに関わりプロダクトをブラッシュアップできるようFigmaをベースとしたUIデザインフローを構築したことについてまとめたいと思います。
何をしたのか ・Sketchで点在していたUIデザインデータをFigmaに統合 ・メンバー全員がデザインの議論に関わりやすいようFigmaをベースとしたUIデザインフローづくり
オープンルームはスキルフルな技術チームと、体験設計・要件設計に長けたメンバーで構成され、ものづくりへの熱量が高く、全員がユーザーのことを常に考えながらプロダクトを作っています。
- デザイナーのいない3ヶ月とSketch 一方で、僕がジョインする前の3ヶ月ほどデザイナー不在の期間があり、最新のデザインデータ(Sketch)がどれかや、デザインの制作フロー、デザインの意図などがチーム全体として把握しづらくなってしまっている状況にありました。
- プロダクトドリブンなチームに届けるラストワンマイル 実際にデザインを制作していくにあたって、メンバー全員がデザインに即アクセスして議論できるようにすることが重要だと考えていたこと、また、ユーザーファーストに議論し合う土壌が既にチームにあったことを踏まえ、よりデザインの議論が起こりやすい仕組みとしてデザインのワークフローを作っていくことに決めました。
デザインワークフローを整備するにあたり、まずデザインツールをFigmaに移行することを検討しました。メンバーがデザインにアクセスしやすく、常にデザインのプロセスを可視化できることによって「議論の土台」をつくり続けられるので、僕としてもチームとしてもこのスタイルが合っているのではないかと考えたためです。
Figma運用のメリットについてはこちらの記事が分かりやすいので是非見てみてください。 ・Figmaを使って開発チームの生産性をあげるプロダクトマネジメント(https://blog.tsubotax.com/n/n58b33cceee9e) ・オンライン転職/入社のコミュニケーションを加速させるFigmaのメリット(https://note.com/macheri_me/n/n521d6f67b741)
Figmaへの移行については、プロダクト改善施策のUIデザインと並行して進めていたので、下記のようなリストをFigma上に用意し、状況を可視化しながら順次進めていきました。
デザインファイル構成についてはデザイナー×デザイナーのコラボレーションのしやすさはもちろんのこと、デザイナー×その他職種(PM・エンジニア・Bizdev等)とのコラボレーションのしやすさも重要なポイントです。そのため「誰がいつ見ても分かりやすいか」を意識しながら、ファイル構成を作っていきました。
基本構成 大まかなファイル構成としては下記のような切り分けで、目的に応じてファイルを見分けられるようにしています。 ① FOREST_UI : Forestの最新のUIデータを確認 & デザイン編集を行う ② ARCHIVE_FILES : 古くなったデザインや、デザイン検討時に出した他案などもここにまとめる ③ PROMOTION : バナーや簡単なチラシなど。主にビズサイドのメンバーと一緒に扱う ④ LANDING_PAGE : LPのデザイン編集や過去verの確認
概観や扱い方を伝えるREAD_MEページ UIデザインのファイルに初めて訪れた人でも「これは何のファイルなのか」「どうやって見ればよいのか(構成)」「基本的な扱い方」がすぐさま分かるよう「🚩READ_ME」ページを一番上に用意しています。
デザインのステータスを常に可視化するページ構成 誰がいつ見ても「今走ってる施策のデザイン進捗」「検討されているアイデア」「Fixしたデザイン」などが分かりやすいよう下図のようにPages構成を定義しています。
🚩Readme 初めてファイルに訪れた人に見てもらうページ。概要やファイルの見方などを説明。
✍️WIP_〇〇 施策に紐づくワイヤーフレームやプロトタイプなど製作中のデザインをまとめる場所。検討したアイデアの内FIXした案だけを「💎Fix_〇〇」に移し、その他ラフ案や不必要なデータは別ファイルの「ARCHIVE_FILES」に移すことで、最新のデザインだけファイル上に残るようにする。
💎Fix_〇〇 施策に紐づくFIXしたデザイン案をまとめる場所。このページを基本的にエンジニアチームに見てもらいながら実装してもらう。実装が完了したタイミングで「🦄Master_〇〇」にマージする。
🦄Master_〇〇 現状の最新デザインデータを主要ページごとにまとめていく場所。新しく改善施策を走らせる場合は、このページから該当するデザインのFrameを引っ張ってきて「✍️WIP_〇〇」を作る。デザインがFixしたらMasterにマージすることで、常に最新版が反映されている状態にする。
📘Library カラーやテキストスタイル、各種コンポーネントなどを一覧でまとめておく場所
大まかなファイル構成をもとにしつつ、制作したデザインに対してレビューや議論を行いやすいようデザインのまとめ方自体も工夫します。基本的には対面でプレゼンをしていなくとも、非同期でデザインの意図や検討事項が伝わりリモート化でも議論がはかどったり、プロジェクトに関わっていない人でも状況や背景を理解できるようにすることを意識します。
①仕様へのリンクと概要で即座に「これは何か」を伝える
②ファイル構成とレビュー方法のオンボーディング 特にFigma移行初期やチーム内でのスタイルが固まっていないタイミングでは、何をどう確認しながら意見すればよいのかが分かりやすいよう伝えていく工夫を行いました。デザイナー以外の職種の方にとってはただでさえ慣れないツールを扱うことになるので、可能な限りストレスを感じずデザインに関わってもらえるよう意識します。
③非同期でもデザインの意図を伝えられる整理 Before-Afterでデザインの変化を掲載したり、デザインの意図や特にレビューがほしい点を明記することで非同期でもデザインのレビューや議論が生まれやすくなります。実際のデザイン提案の事例はこちらポートフォリオからも確認できます(https://cocoda-design.com/original-products/35275)
④開発チームに向けたデザインステータスの明示
デザイン制作過程においては、デザインそのものはもちろんですが、デザインを通してチーム内で生まれる議論により価値がある考えています。そのため、デザインのまとめ方だけではなく、Slackでのチャットや普段のコミュニケーションにおいても透明性を意識します。
Figma×Slackで進捗を共有しつつメンバーからレビューをもらう デザインに進捗が生まれたり相談したい点が出てきたら、Slack上で適宜共有していくことで早めにチームの皆の意見を取り入れながらデザインを固めていくことができます。共有する際は何を作ったか・相談点は何か・Figma URL・スクショをまとめて送ると、パット見で何が求められているのかが伝わるのでフレンドリー。
施策の議論を始めからFigmaで オープンルームチームのオープンなカルチャーやFigma移行への協力もあり、最近では非デザイナー職種のメンバーもFigmaを用いて施策の議論を持ちかけてくれます。慣れないツールであった中でも一緒にデザインのワークフローを作り上げてくれているチームにいつも感謝です、、、！
まだまだ発展途上な取り組みではありますが、以前に比べてデザインをベースにした議論が生まれやすくなりさらにワンチームでプロダクトづくりに望める環境に進化しています。これからも、デザイナーとしてさらによりよいプロダクトづくりができるよう今後もチーム一丸となってForestに携わっていきたいと思います。
読んでいただきありがとうございました🙌