DMMポイントクラブのデザイナーをしているmiteとyudaiです。

今回は、私たちが所属しているDMMポイントクラブで、デザイナーが2人に増えた時に整えたデザイン管理についてまとめてみたいと思います。

結論としては、開発チケット⇆デザインファイル⇆ドキュメント、という3ファイルを行き来することで、スピード感を持って開発を推進できるデザイン管理方法をつくることができました。

ZenHub、Figma、Confluenceの3ファイルを行き来しながら、UIと開発の共通認識をつくるデザイン管理

立ち上げ期は1人体制で運用していたDMMポイントクラブ。

2人目のデザイナーが入ったことで、様々な問題が発生するようになりました。

サービス開始時点ではデザイナーが私1人(mite)しかいませんでした。

Figmaのファイルは、立ち上げ時のものをそのまま運用していました。

当初はマスターデータ(リリース済みの機能)と、開発中の機能の2つにデータを分けていました。しかし、デザインを速く作ることを優先した結果、マスターデータへの反映が滞り、開発中の機能のデータが煩雑になっていました。

1つのページに複数の機能のデザインデータがあるような状態

そのため、開発メンバーがデザインの場所が分からない場合は、自分がハブになって「あのファイルはここにあるよ」と直接伝えることで何とか解決していました。

しかし、2人目のデザイナーとしてyudaiさんが加入後、制作スピードが上がってくると、デザインの管理方法が整っていないために

  • 最新のデザインデータがどこにあるのか分からない
  • デザイン意図や開発ステータスの共通認識が取れない
  • 関連ファイルが探しづらい

などの問題がチーム全体で起こり始めました。

解決のため、デザイナー同士、デザイナーとエンジニアの連携をよりスムーズにしていくための管理方法の見直しを始めました。

見直しをするとはいえ、初期フェーズであることは変わらないため、いかにスピード感を失わずに、かつスムーズに連携できる仕組みをつくれるか?という観点で考えていきました。

1つ目の改善として、ファイル構成の整理を行いました。

ここでの工夫は3つあります。

  • 機能をページ毎に分けて、時系列で並べて運用する
  • チケット番号と連動させる
  • 開発ステータスと関連ファイルが一目で分かるようにする

「最新のデザインデータがどこにあるのか分からない」という問題に対しては、Figma内の1つのファイルに、機能のページを時系列順で作成していく運用で解決しました。

デザインデータが時系列順に並んでいると、誰にとっても理解しやすくなります。

また、1つのファイルで運用することで、いつでも同じURLにアクセスすれば、最新のデザインデータを簡単に見つけられるようにしています。

また、ZenHubというタスク管理ツールのチケット番号を、Figmaのページ名に記載しています。

ZenHubの開発チケットと連動するFigmaファイルのページ

これにより、タスクと同期され、チーム全体でデザインデータの共通認識を作ることができます。

開発ステータスや、関連ファイルを示すためのコンポーネントも用意して、ページ内に情報を集約できるようにしました。

一目で開発ステータスと関連ファイルが分かるコンポーネントを用意

このページにアクセスすれば、ひとつの機能に関する全ての情報が集約されているため、関連ファイルを探す手間の短縮にも繋がります。

デザインに関する仕様や意図は、画面単位での意図や開発仕様を同時に参照できるように、Figmaとは別に開発ドキュメントにまとめるようにしています。

UIデザインの意図や検討した代案などを、開発ドキュメントにまとめる

元々デザインに関する仕様や意図などはFigma上に記載していたのですが、

  • Figmaが文章で溢れ、参照しづらい
  • デザインと開発仕様のドキュメントが分かれており、最新の情報がどこにあるかわからない

などの理由で、Figma上での管理に不便さを感じていました。

そこで、もともと運用していた開発ドキュメントを利用することにしました。

開発ドキュメントには以下のようなものが含まれています。

  • 機能開発の背景・目的
  • 想定しているユーザーの行動
  • 各画面のデザイン仕様
  • API・DBの仕様

ここに、UIデザインの意図や検討案も記載し、Figmaページからアクセスできるようにしました。

その結果、1画面に対するデザインの意図と開発仕様を同時に参照できるようになり、最新情報の一元管理もできるようになりました。

デザイン管理を見直した結果、デザインを作る前段階のディスカッションや認識合わせもページ上でスムーズに行えるようになりました。

デザインをつくる過程で、ユーザーストーリーや、機能として重視する部分をすり合わせられるように

体験や機能の構想とUIデザインを行き来して、メンバー間で共通認識が持てるため、出戻りが少なくなりました。

これらの取り組みを行なったことで、「以前と比べてわかりやすく、参照もしやすくなった」という声が、デザイナー・エンジニアの両方から生まれています。

今回の管理方法に関する、エンジニアやデザイナーからの声

また、DMMポイントクラブはフルリモートなチーム体制ですが、よりスムーズにコミュニケーションを取ることができるようになりました。

今回は、デザイナーが1人から2人になったタイミングで、デザイン管理方法を見直すことになりました。

しかし、これからデザイナーが3人、4人と増えていくと、また新たな問題が発生するでしょう。

今回紹介した管理方法は、今の事業フェーズに最適なものであり、体制や事業フェーズが変わる度にアップデートをしていく必要があると考えています。

DMMポイントクラブチームでは、今後も継続的に運用を見直していきます。

このデザイン組織をもっと知る