リモートワークにも応用可能 Figmaに惚れこむSaaS領域のデザイナーが、その魅力と活用術を解説

　はじめまして。Sansan株式会社プロダクト開発部UI/UXデザイナーの阿部です。

　ウェブ制作会社でキャリアをスタートしたのち、医療系スタートアップではサービスデザイナー兼UIデザイナーとして従事。2019年にSansan株式会社に入社し、UIデザイナーとして働いています。

　今回は、Sansan株式会社のクリエイタープロジェクト、Juiceがお送りしている連載の番外編ということで、リアルタイムで共同編集ができるなど注目を集めているツール「Figma」の活用についてお話したいと思います。リモートワークにシフトしている方など、多くのデザイナーの方の参考になればうれしいです。

UIデザイナーが求められる役割

　Sansan事業部では事業の成長やフェーズに合わせ、さまざまなプロジェクトが発足したり、多様なバックログがどんどん増えていきます。バックログは減ることはなく増え続けるもの。そんなふうに捉えている方も多いのではないでしょうか。では、なぜ減らずに、プロジェクトやバックログは増す一方なのか。そう考えてみると、ビジネスモデルに答えがあるように思えてきます。

　多くのプロダクトやサービスが、売りきりのモデルからサブスクリプション型へとシフトしているなか、ユーザーに継続的に使ってもらえるようなサービスでなければ、利益を生み出すことが難しいといえるかもしれません。ユーザー数が大量に増えたとしても、解約が多ければ元も子もないわけです。弊社が提供しているサービス「Sansan」も同様です。

　ユーザーに価値を感じてもらい、継続して使ってもらえるサービスを作っていくには、ユーザーの課題を捉え、それらに対して質の高いソリューションや体験を提供することが不可欠です。

　そのためには、顧客インサイトを把握することはもちろん大切ですが、いかに多くのソリューションを設計し検証できるかという点もひとつの大きなカギ。もちろん、ひとつのアイディアで成功すれば、それに越したことはありません。ですが、多くの打席に立ちユーザーの行動や生態系を学ぶことで、課題の質が向上し、長期的に見た時にもサービスやプロダクトの質がアップすると考えています。

　その中でUIデザイナーが果たすべき役割は、ビジュアルの力を活用し、最前線で開発を促進すること。だからこそ、プロトタイプを作ることで素早く目に見える形にし、検証を回すスピードを早めることが求められるわけです。

デザイナー三種の神器「Figma」との出会い

　これまで、SansanではUIデザインには、Sketch、プロトタイピングにはInvision、そしてバージョン管理にはAbstractを使用していました。こういった運用をしているデザインチームも多いかもしれません。

日頃デザイン作業をするうえで上記のツール群はとくに不満はなかったのですが、ひとつだけ大きな悩みがありました。それは「待ち時間が多い」ということです。

　メンバーやデザインする領域が増えるほど、デザインデータの数も増加し、デザインファイルはどんどん重くなっていきます。それだけではなく、構築したコンポーネントも比例するように増えた結果、InvisionやAbstractへアップロードする時間が作業時間の多くを占めてしまうことも多々ありました。また、データをアップロードした後に調整箇所を見つけた場合には、再度アップデートする必要がありました。

　これでは、素早い設計サイクルの構築にブレーキをかけることになってしまう――。そんな悩みを抱えているときに見つけたのがFigmaです。

　Figmaは2016年9月に正式リリースされたUIデザインツールです。ウェブブラウザベースのツールのため、macだけでなくWindowsやタブレットでも利用可能です。

　Figmaのリリース当時、私も実験的に触ってみましたが、その頃はSketchをとても重宝していましたのでツール移行は少しも考えていませんでした。ですが、「2019 Design Tools Survey」というデザインツールに関する調査において、さまざまな指標でFigmaがベスト3にランクインしていたり、ネクストユニコーンとして取りあげられていることを知り、Figmaへの移行を検討しはじめました。

　その結果、Figmaへの移行に踏み切るわけですが、その大きな理由は、ひとつのツールで、「UIデザイン」「プロトタイピング」「開発共有」のすべてを行うことができる、という点です。

　Figmaでは、自身で作成したUIをそのままプロトタイプにすることも可能なので、インタラクションを保持したままデザインを調整することが可能です。SketchとInvisionが合体したようなイメージでしょうか。インタラクションの数が多いのも特徴です。

　そのままプロトタイプにすることができるため、試行錯誤するためのハードルは格段に下がり、プロトタイプの数は格段に増えます。多くのデザインパターンを作る場合、とても時間がかかっていましたが、Figmaによってパターンの構築にかかる時間が短くなり、さまざまな検証を行うことが可能になりました。

　そして、大きな課題として挙げていた待ち時間の代表格「アップロードにかかる時間」ですが、Figmaは同一ツールでUIデザインとプロトタイピングができるため、基本的にファイルは連動した設計となっています。そのため、アップロード時間は0分。このアップロードにかかる時間がなくなったことによる影響はとても大きく、私は背中に羽が生えたような気分でした。

　また、Abstractのようなバージョン管理も機能のひとつとして提供しているため、こちらのアップロード時間も削ることができます。（プランによっては難しい場合もありますのでご注意ください）。

　個人的には、紙の「ポストイット」、会議室によくある「ホワイトボード」に加え「Figma」をUIデザイナー三種の神器に認定したいと思うほどです。