職種を超えて広がる Figmaでの共創ワーク

共創体験がもたらすビジネスインパクト

Webデザインの文脈で語られることの多いFigmaですが、Figmaの価値はそこだけに留まりません。今回ご紹介するSmartHRでは全社的にFigmaを導入し、デザインはもちろん、コミュニケーション、マネジメント、人材育成など多様な業務で活用しています。

どのようにFigmaの活用が広がっていったのか、まずはプロダクトデザインにおける導入の経緯を、プロダクトデザイン統括本部 プロダクトデザイン本部 労務プロダクトデザイン部 部長の植田将基（ハンドルネーム：うえんつ、以下うえんつ）氏に伺いました。

うえんつ氏「SmartHRは、人事・労務関連のシステムやサービスを提供する企業です。『well-working』という言葉をテーマに、労働にまつわる社会問題をなくし、誰もがその人らしく働ける社会をつくることをミッションとしています。当社では2020年頃から徐々に開発体制をアップデートし、私が入社した2021年4月頃からPM、プロダクトエンジニア、QAエンジニア、プロダクトデザイナー、UXライターなどがチームとなって開発を行う、スクラムなどのアジャイル開発体制が主流となっています。しかし当時はまだデスクトップアプリのデザインツールを使用していたので、デザイナー以外にデータを共有するためには複数のツールを使う必要があり、非常に煩雑でした。

そのころはまだ一部のデザイナーがFigmaを使い始めていた程度。私は入社以前からFigmaの利用経験があり、コラボレーションしやすさを感じていたため、この課題をFigmaで解決できないだろうかと考えていました。非公式アンバサダーとしてコツコツと普及活動をしていた感じです（笑）。

そんな折、コンポーネントライブラリ『SmartHR UI』をFigmaコミュニティに公開しようという提案が採用されました。情報を一般公開することで、社会の“車輪の再発明”を減らしていこうという当社の『SmartHR Design System』の理念がそのベースにありつつ、認知拡大も視野に入れたプロジェクトです。以前からライブラリ自体は内部的に存在していましたが、社内外のステークホルダーとの連携を鑑みると、オープンソースとして公開するうえではWebベースのツールの方が適していました。ライブラリをFigmaで整備したところ、社内のプロダクトデザイナー間でもその使いやすさがクチコミ的に広がり、以降メインのデザインツールとしてFigmaを使っていくことになったのです。

Figmaへの移行はおよそ2～3か月と非常に短期間でしたね。やはりコラボレーションの魅力を体感できたことが、スムーズな移行に影響したと感じています。デザイナーが集まってUIデザインをレビューしたり、一緒にモブデザインをつくったりする中で、1つのキャンバスにそれぞれのカーソルが集まって、複数のパターンがあっという間にできあがるという共創体験は、非常にインパクトがあったのではないでしょうか」

Figma導入後にどのような変化があったのか、うえんつ氏に伺いました。

うえんつ氏「まず、実用化までのスピードがより速くなったと感じます。Figmaであればデザイナー同士が並行してデザインデータをつくり、そのデータをすぐにPMやエンジニアに渡すことができます。ローカルデータのやりとりだと、データを送って、開いて、会話して、と多くのステップを踏む必要がありますが、Figmaなら同期的にキャンバスを見て会話するだけで完了します。非同期であっても、ファイル上にコメントを付けてURL1つ送ればOK。タイムラインが異なるメンバーでも、意思決定がしやすいと感じています。

Figma上で『SmartHR UI』を整備したことで、デザイナーとエンジニアそれぞれのコンテクストの擦り合わせが不要になったことも、スピードアップに大きく影響しています。私たちはいわゆるピクセルパーフェクトなデザインモックをつくることが目標ではなく、コードベースでコンポーネントとして実装されている状態を正として考えています。そのコンテクストが一致していれば、見た目が必ずしも一致している必要はありません。どのコンポーネントをどう使っているのかわかれば十分ですから、素早い意思疎通ができるようになります。こういったコラボレーションとコミュニケーションのしやすさは、よりスピーディに良いプロダクトをつくるうえで非常に役立っていると感じます。また、オープンソース化したことで、グループ会社のプロダクトデザイナーとの連携や、その他の一般ユーザーの開発効率向上にも貢献できているのではないでしょうか。

そのほかに感じているメリットとしては、モック作成が容易です。モックの活用の幅は広く、たとえばユーザーアンケートを取ったり、商談の場に持っていって要望をヒアリングしたり、ビジネスサイドへの機能説明会でレビューをもらったりなど、開発のさまざまなフェーズで役立ちます。Figmaのデザインデータからサクッとプロトタイピングを組んで、早ければ1日でなんとなく動くものをつくれます。開発をスピーディに前へ進めていくために、フットワーク軽く動けることは重要です。

またFigmaはデザインの裾野を広げることにも貢献していると感じます。当社はデザイナーとエンジニアの比率が1：9と、圧倒的にエンジニアが多い体制です。デザイナーの判断を待つことで意思決定が遅くなるケースもあり、素早いリリースのためにエンジニアもデザインができるようになりたいというニーズがありました。そのためデザイナー側では『SmartHR UI』を使った画面設計を目標とするチュートリアルシートをつくったり、他職種を巻き込んだモブデザインを実施する機会を設けたりと、デザイナーに限らずFigmaでデザイン業務ができるようになる支援の仕組みを整備しています。Figmaはアカウントさえ発行されれば、誰でもブラウザ上でデザイン制作をスタートできます。非デザイナーがデザインに参入するハードルを下げることで、誰もがデザインに携われる世界を実現できるのではと考えています」

多様な業務や働き方を受け止めるプラットフォーム

SmartHRでは、コミュニケーションデザインセンターでもFigmaを導入しています。いわゆるUIデザインなど、直接的なプロダクトデザインの組織ではないコミュニケーションデザインの分野でどう活用しているのか、ブランディング統括本部 ブランドデベロップメント本部 コミュニケーションOps部 コミュニケーションOpsユニットの関口 裕（ハンドルネーム：sekig、以下sekig）氏にお聞きしました。

sekig氏「私が所属するコミュニケーションデザインセンターは、プロダクトデザインそのものではなく、サービスのデリバリーやブランディング活動を支援する、マーケティングサイドにおけるデザイン職種の横断組織です。オンライン／オフライン、メディアを跨いでさまざまなアウトプットをするので、メンバーによって専門性が全く異なります。そのため、ある人はAdobe系のソフト、ある人は動画制作用のソフトと、業務のメインで使うツールが違い、全員がFigmaをデザインツールとして使い込んでいるわけではありません。どちらかといえば、マスターデータをまとめておくためのツールとしての使い方や、ホワイトボードツールとしての活用が多いかもしれません。たとえばFigJamを使えば、一覧しやすい状態でマスターデータを集めておくことができます。動画制作なら、プロジェクトの概要から絵コンテ、動画の素材、参考動画まで、さまざまなデータを同じキャンバス上にまとめ、最新状況が一目でわかります。レビューが欲しいときや相談したいとき、URL1つでそれを共有し、さまざまな職種のメンバーと一緒に音声チャットやカーソルチャットでコミュニケーションする、といった使い方も多いですね。

導入の経緯としては、デザインシステムの運営が発端でした。ビジネスサイド、マーケティングサイドが営業資料などで使用する挿絵や色使いなど、アセットを配布する際にFigmaは非常に優れたツールだったのです。当社ではSSOT（Single Source Of Truth）を重要視しているため、共通アセットはFigmaにある、という仕組みをつくっていく過程で、Figmaの導入が進んでいったという経緯です。

さきほどお伝えした通り、私たちのチームは個人によって専門性が異なるため、制作プロセスがクローズドになりやすいという課題がありました。またほとんどリモートワークというメンバーもいれば、毎日出社するメンバーもいます。業務内容や勤務形態など、さまざまな働き方をする人たちがゆるやかにつながれる場所として、Figmaはとても役立っています。大規模なWebサイトプロジェクトの制作もできるけれど、同じスキームで『バナーつくりました』『3年前のキャンペーンとの整合性はどこまで取る？』というようなライトな会話もできます。要は、不定形な業務を抱えるメンバーが、ふわっと会話したいときにも、ぎゅっと合意を取りたいときにも、Figmaという同じツール上でつながれるということ。私たちはFigmaというツールを使いこなすことが目的ではないので、動作が軽い、同期／非同期でつながりやすい、応用が効きやすいといった軽いレイヤーの価値が重要です。とにかくFigmaは圧倒的に軽いので、強くプッシュせずとも自然にメンバーが集まっている状態ができているんですよね。結果的にイテレーションスピードを最大化できるという点が、私たちクリエイティブの現場にとってのいちばんの価値なのではないでしょうか。

そのほかには、Webで実現できる範囲を理解してもらいやすい、という利点もあります。やや単純化した伝え方ですが、グラフィック寄りのメンバーに、『Figmaでできないことは、ブラウザで表現できない、もしくは実装が難しいんだよ』と説明しています。さまざまなスキルを持つデザイナーがいる会社として、わかりやすい指針があるのはマネジメントの観点から助かっています」

ハイレベルなセキュリティと低コストを両立

SmartHRでは、エンタープライズプランを導入しています。その背景と導入後のステップについて、情報セキュリティグループ コーポレートITの工藤敏弘（ハンドルネーム：Oimo、以下Oimo）氏にお聞きしました。

Oimo氏「もともと社内で3種類のホワイトボードツールが利用されており、コスト圧縮の観点から統合を検討していました。従業員が1,000人以上になり、セキュリティ面での配慮が必要になったことも、その理由の1つです。シングルサインオン、監査機能、共有の制御などができることは必須条件でしたので、どのツールであってもエンタープライズ化が必要でしたが、その中でコスト面での優位性があったのがFigmaでした。検討開始から約2か月で契約、そこからさらに2か月ほどがオンボーディング期間と、かなりタイトなスケジュールの中での移行でした。利用ルールの見直しや、情報の公開範囲を見越した階層構造の検討、『SmartHR UI』など公開領域にファイルを置くためのワークスペース作成・展開など、やることは多岐にわたりました。また、もともと使用していたホワイトボードツールからの移行にあたり、不安の解消やオンボーディング支援も必要でした。マニュアルの用意、問い合わせが来そうな内容などを先行検証する、ナレッジの資料化、社内チャット上で相談や知見を集めることができるチャンネルの作成などに対応しました。私自身もほぼゼロからFigmaを使い始めたのですが、軽快で直感的に使えるので、自習しやすいと感じましたね。またFigmaの担当者によるビギナー向けセッションは、とても勉強になりました。

コーポレートIT部門内では、ブレストや振り返り、1-on-1のための資料制作などでFigJamを活用しています。AI機能を使った要約や付箋の自動割付は、ほかのツールと比べても精度が高いと思います。スタンプやカーソルチャットなど、フランクなやりとりができる点が気に入っています。それ以外では、インターナル向けのサイト制作にも利用し始めています。ワークフローや遷移図をつくってみたり、画面設計をしてみたりと、活用の幅は広がっていますよ」

多様性にフィットする、これからの活用法

最後に、今後の展望について皆さんに一言ずつ語っていただきました。

Oimo氏「最近は、Dev Modeを使いたいという申請も増えてきています。デザインはしないけれど、見る必要はあるよね、というメンバーから注目されているようです。コスト観点のメリットは大きいので、うまく活用したいと考えています。また、以前はツールが分散し、情報が分散されていたのがFigma導入によって統一されたことで、より使い勝手が良くなってくるのではと感じます。これからもより良い活用方法を見つけていきたいです」

sekig氏「ファジーな使い方ができるのがFigmaの大きな価値だと感じていますが、これからはもっとロジカルなデザインでもFigmaを活用してもらいたいですね。開かれたコラボレーションの場としての良さを継続しつつ、共通リソースやノウハウを共有し、よりデザインの品質や作業の効率化を進めていきたいです」

うえんつ氏「デザインはデザイナーのものだけではない、というFigmaの思想には共感するところが大きいです。AI機能が拡充すれば、コンポーネントライブラリやパターンの自動生成も実現できるのではないでしょうか。単純な作業の時間を減らし、思考する時間を増やすための細やかな機能設計が、より充実していくことを期待しています」