Figmaによる デザインカルチャーのアップデート

株式会社ユーザベース

株式会社ユーザベースはアジャイル経営の実現をサポートする法人向けのSaaSである SPEEDA、一般消費者向け国内最大規模の経済ニュースメディアである NewsPicksなど複数の事業・サービスを展開しています。

Figma 導入以前の状態

先祖返り問題

SaaS 事業では、Figma 導入以前、プロダクトデザインでは複数のデザインツールを使っていました。しかし、ファイルのコンフリクトやたびたび発生する先祖返り（修正や更新をしたものの、何らかの理由により以前の状態に戻ってしまうこと）に頭を悩ませました。これが最も大きな問題でした。

コラボレーションができない不便さ

また、Figma 検討以前より、リモートワークのデザイナーがいたのでオンラインコラボレーションは必須でした。当時、オンライン会議で画面共有をしながら共同作業をしていたものの、実は同じファイルを見ていなかったなど恐ろしいことも起きていました。デザインを共有しようにも、以前のツールでも出来なくはありませんでしたが非常に不便な状態でした。

プロジェクトのスピードについていけなかった

同時期に NewsPicks のリニューアルが走っており、スピード感を持ってデザインを作成、レビュー、修正する必要がありました。NewsPicks では、デザイナーもエンジニアもPdMも多くのコミュニケーションをしながら開発する文化があり、MVPと理想型を両方つくることも少なくありません。そのためには、MVPと理想型をモブデザインしながら作り上げる必要がありましたが、Figma 以前のツールではデザイン案の共有、レビュー、修正がプロジェクトについてこれずボトルネックになっていました。

Figmaの採用

まずは小さく導入をすることになりました。Figmaを利用してみたところ、非常に使い勝手が良く、一つのツールで必要な機能が大体網羅されていて、特に以下のメリットを感じました。

開発プロセス全体をカバーするコラボレーションの実現

Figma を利用してわかったのが、圧倒的なコラボレーションのしやすさです。ファイルの URL を共有すれば、すぐに同じファイル上で一緒にデザインができる便利さを実感しました。また、ブラウザで利用ができるので、異なる OS でも利用が可能なのも助かりました。ブラウザで利用できるということは、意識して保存することなく常に最新版のファイルを扱うことができるということです。先祖返りも起きませんし、スピード感を持ちプロダクトデザインをすすめることができるようになり、デザインツールがボトルネックではなくなりました。

こうして、一気に、先祖返り問題とスピード感を持ったコラボレーションの課題を解決することができました。

デザインシステムがまとまりデザインとコードの統合管理が可能に

Figma ではコンポーネントをバリアンツや Props で管理することができます。それにより、デザインとコードが統合しプロダクト開発の実現性と効率性が格段に向上しました。良いデザインをしてもコードに落とし込めないと製品に反映することができません。

コラボレーションによるチーム感の醸成

また、Figmaではファイルを見ているメンバーが、カーソルと名前で表示されるので、動いているカーソルを見ていると、一緒に作り上げている感覚を得ることができて、これがチーム感の醸成に役立ちました。家庭の事情で、夕方は早めにあがり、朝早く仕事をするメンバーがいます。その方がファイルで朝早く仕事をしているとき、Figma 上で作業風景をカーソルを通してお互いに見ることができ「ちゃんと見ているよ」ということがマネージャーからメンバーに伝わり安心したようです。そのメンバーは現在デザインをリードするメンバーです。

Figma による徹底的な効率化でプロダクト開発がスピードアップし、さらに無駄な作業が減ることでチームメンバーの残業を減らすこともできました。

「ユーザベース社の求めるスピードで、プロダクト開発をコレボレーションしながらすすめることができるようになったのは、まぎれもなくFigmaがあったからこそ」とユーザベース社平野さん、鳥居さんは語ります。

プロフェッショナルプランからビジネスプラン、

そしてエンタープライズプランへの移行

Figma の「プラン」についてユーザベース社は、Figma をプロフェッショナルプランから、ビジネス、そしてエンタープライズへとアップグレードしていただきました。その背景も簡単にまとめていきたいと思います。

Proプランを利用して感じた課題

Figma を導入してしばらくはプロフェッショナルプランでチーム別に利用していました。しかし、あるメンバーは複数のプロダクトデザインに関わるためチームを跨いで使いたい、デザインの変更をレビューをした上でデザインのアップデートを行いたい、セキュリティーの観点からは SSO を利用したいなど、組織としてFigmaを適切に把握する必要性が増してきました。

ビジネスプランへの移行とメリット

チーム横断でデザインを統合管理

ユーザベースとして一つの組織内ですべてのプロダクトデザインをマネジメントすることで、利便性が増しました。

これまでチームごとに分断されていたデザインを一つの組織内にまとめることができるようになりました。それにより、チームが異なっても、デザインを見に行くことができ、デザインアセットを統一利用できるようになりました。

ブランチを利用したマスターコンポーネント管理

デザインチームのメンバーから、ビジネスプラン「ブランチ」を利用したマスター管理を行いたい、という要望が出てきました。プロフェッショナルプランではカバーしきれない、バージョンやマスターコンポーネントの管理をするためです。

ビジネスプランでは、メインのファイルからブランチを作成し、ブランチされたファイルでデータを変更したのち、レビューを経てメインのファイルへマージするブランチ機能が使えます。

現場メンバーでテストし、実際の運用に耐えうると判断して利用を開始しました。まだ道半ばですが、今後デザインデータの整理をした上で、ブランチを活用していく予定ということです。

エンタープライズプランへの移行とメリット

エンタープライズプランでアカウント管理を細分化

さらに、エンタープライズプランを利用するとアカウント・請求をより細かく管理することができるため、ビジネスプランからエンタープライズプランへと移行を検討していきました。

主な課題としては、ビジネスプランを利用していた際、現場判断で外部ゲストが組織に招待されてしまうことや、気づかない間に、閲覧者が編集者になってしまうケースがあったこと。一定周期ごとに手作業でアカウントを精査していましたが、これはマネジメントとしては省きたいタスクでした。

エンタープライズプランを利用すると、「ワークスペース」が利用できるようになりました。「ワークスペース」に管理者を設定することで、「ワークスペース管理者」が外部ゲストの招待や、編集者へのアップグレードを承認ベースで行えるようになりますので、より現場利用に即した形かつ、アカウント管理も簡潔にすることができ、マネジメント工数の減少を実現しました。

FigJam の大規模導入

ユーザベース社では、Figma デザインに加え、FigJam も利用しコラボレーションが進んでいます。

FigJamの活用方法

まずは、いろいろな利用方法を紹介します。

• PMのロードマップ全体の作成
• Figma と連携したワイヤー制作
• ミーティングの振り返りのための KPT
• 企画書ページの台割
• リサーチの分析
• インタビューの質問リスト
• ワークフローの作成

エンジニア、プロダクトマネージャー、ビジネスサイドなどさまざまなメンバーがあらゆる業務の可視化ツールとして利用しております。

FigJamのメリット

圧倒的な軽さにより思考・議論の相棒となる

これまで使っていた別のツールでは、動作が重いのが非常に大きな課題でした。議論のスピードについてこない、複数人で使うとローディングしてしまうなど、コラボレーションがうまく進められないことも多々有りました。

FigJam を利用してみて思うのが、「とにかく軽い」「圧倒的に軽い」。これは比較できるからこそわかる感想です。議論のスピード、思考のスピードにツールがついてくることは非常に重要です。

情報が分散せずに一箇所に見える形にまとまる

プロジェクトに関係するものをすべてFigJamに全部入れています。たとえば、イメージ画像や、テクスチャ、カラーサンプル、フォント、ロゴ関連のデータや、ラフスケッチなど、すべてファイルに入れています。

FigJam はビジネスサイドにクリエイティブエンジンを搭載

これまでFigmaを小さく導入し、徐々に活用を広げ、現在大きく利用をすることでコラボレーション文化をインストールするまでに至ったユーザベース社。Figma / FigJam を利用し、経営全体へのさらなるインパクトを期待し、利用を広げています。

Figma / FigJam もアジャイル文化にフィットし

業務改革を加速

NewsPicks では、一つのデザインシステムをもとに、コンポーネント、ライブラリの管理も全てのチームにまたがって使えるのはもちろんのこと、デザイナーとデザイナー以外のさまざまなメンバーが一つのファイル上で作業することができるようになりました。

デザインプロセス単体でみても、従来のプロセスに比べて3倍くらい速くなったと感じています。

Figma / FigJam を利用するベネフィットは業務効率化という言葉では表せません。これまで、デザインとはデザイナーのものという概念が覆りました。デザイナー、エンジニア、プロダクトマネージャーが一つのチームとなることで、より素晴らしい製品を作ることができます。それを実現するのが Figma / FigJam です。

Figma 導入前は、ユーザベースにおいてもデザインは一人でデザインする世界でした。しかし、Figma / FigJam を利用することで、みんなでデザインする世界へ変わりました。これはまさに文化のアップデートです。これにより、モノを作るスピードも精度も圧倒的に向上しました。

企業文化とツールの思想がフィットしスムーズに導入が進展

ユーザベース社では、200名以上の方にFigJamをご利用いただいています。新しいツールを浸透させるまでに一般的には、それなりに困難があるのが普通ですが、FigJam の導入は混乱がなく、非常にスムーズに導入が進みました。

それも「動作が軽い」という一点に集約されます。直感的で使いやすく、スタンプやEmotes（感情を動くスタンプ）などで楽しく利用できることも魅力ですが、なにより「動作が軽い」ということがメンバーからのフィードバックでした。

また、企業文化としてアジャイルであることも導入がスムーズな背景でした。なんでも新しいツールを取り入れて、使ってみながら深く利用します。

Figma/FigJam を活用し、

「デザイナー100人」構想実現へ

デザイナーを単純に100人採用するのではなく、既存の非デザイナーがいかにデザイン業務をできるようにしていくことが、今後の道であると確信します。Figma 導入以前は、ある意味デザイナーの仕事はデザイナーのもの。完成したものを提出し、それから修正していくもの、という意識がありました。

しかし、Figma/FigJamを導入することで、デザインは「みんなでやるもの」という意識が芽生え、プロダクトマネージャー、エンジニアなど多くのメンバーがデザインプロセスに大きく関与してくれるようになりました。

優れたデザインシステムとFigma のようなデザインツールがあれば、非デザイナーでもデザインすることが可能です。

Figma / FigJam を使い倒し、非デザイナーをデザインに巻き込み、デザイナー100人構想を実現し、素晴らしいプロダクト体験を作り続けていきたいと思います。