構築4カ月、運用2年目。グッドパッチとjinjerが共創したデザインシステムがもたらした効果とは？
人事の定型業務からタレントマネジメントまでを一つのプラットフォーム上で対応できる、統合型人事システム「ジンジャー」。企業の課題やフェーズに合わせて最適な機能を提供することで、人事業務の自動化や効率化に寄与しています。
サービス開始からまもなく10年。jinjerが展開する10のプロダクトは長年の運用の末にユーザーへプロダクト間で一貫した体験や、ブランドに沿ったインターフェイスを提供しづらくなっていることが課題だったと言います。
また、それぞれのプロダクトがインターフェースの再構築を繰り返していることから開発側の業務効率が低下している課題も同時に抱えていたそうです。そこでグッドパッチをパートナーに選び、デザインシステムの構築を進めるプロジェクトが始動しました。
デザインの統一だけでなく、デザイナーとエンジニアの「共通言語」として開発速度の向上まで期待されるデザインシステム。どんなプロセスで構築し、どのように既存プロダクトに適用させていったのでしょうか。グッドパッチのUIデザイナー2人とデザイン責任者の近藤クリストファーさんに構築プロジェクトの舞台裏について聞きました。
＜話し手＞
jinjer株式会社 プロダクトマネジメント本部 プロダクトデザイン部 デザイン責任者 近藤さん
Goodpatch UIデザイナー 乗田
Goodpatch UIデザイナー 浅野
目次
マルチプロダクトならではの課題を「デザインシステム」で解決する
──今回のプロジェクトでは、デザインシステムを構築したと伺っていますが、その経緯について教えていただけますか。
jinjer 近藤さん：
統合型人事システム「ジンジャー」は、人事労務・勤怠管理・給与計算といった、人事業務を一つのプラットフォームで完結できるマルチプロダクトです。現在10のプロダクトがあるのですが、サービス開始から10年が経ち機能やプロダクトが増え、プロダクト間で異なるUIが混在するようになり、ユーザビリティやメンテナビリティが確保しにくくなっていました。
そこで、デザインシステムを構築してユーザー体験と開発者体験を向上させようと考えました。
jinjer株式会社 プロダクトマネジメント本部 プロダクトデザイン部 デザイン責任者 近藤さん
──「ジンジャー」のようにプロダクトが複数存在し、それぞれ独自のUIが増えると、ブランド全体でイメージの整合性を取ることは難しくなってきますね。グッドパッチに依頼したのはなぜですか。
jinjer 近藤さん：
将来的にはデザインシステムの運営を内製化したいと考えていたため、単に構築を支援するだけでなく、自走できる体制づくりまで伴走してくれるパートナーを探していました。4社に相談しましたが、最も提案内容が具体的で納得感があったのがグッドパッチでした。
デザイン業界での高い認知度に加え、デザインシステムの豊富な構築実績があり、さらにUXの観点からも支援してもらえる点が、大きな決め手になりました。
商談時の提案では、「ジンジャー人事労務」の登録画面を題材に、課題とその解決策を示していただいたのですが、グッドパッチは「なぜそこが課題なのか」という背景や理由まで丁寧に言語化してくれました。ここまで踏み込んだ提案をしてくれる会社は他になく、非常に印象に残っています。
──乗田さんは提案時から参加していたということですが、jinjerのプロダクトに対してどんな印象を持っていましたか。
Goodpatch 乗田：
顧客のニーズに応える姿勢が強く、迅速かつ柔軟に機能を改修している印象を受けました。ただ、会社やブランドとしてのデザイン方針が明確でなかったため、開発担当者がその都度判断して実装していたんです。そこでグッドパッチは、その柔軟なカルチャーを生かしながら課題を解決できるよう提案を行いました。
今回は、ちょうど「ジンジャー人事労務」をリニューアルするタイミングということもあり、デザインシステム構築と「ジンジャー人事労務」のリデザインの両輪で取り組むことになりました。
Goodpatch UIデザイナー 乗田
「デザインシステムの構築」と「プロダクトのリデザイン」を同時に進める苦労とメリット
──プロジェクトはどのように進められたのでしょうか。
Goodpatch 乗田：
まずはグッドパッチ内で、デザインシステムを構築する「デザインシステムチーム」と、「ジンジャー人事労務」をリデザインする「プロダクトチーム」に分かれました。
デザインシステムチームは、開発が円滑に回るようにロードマップを作成しました。デザインシステムは「ジンジャー人事労務」をはじめ、プロダクト全体に影響するものです。jinjerが培ってきたブランド方針やガイドラインを生かしたものにすることを意識しました。
プロダクトチームでは、開発メンバーにヒアリングして、ユーザー体験の課題を探りました。リデザインが必要な部分を精査して約80画面を洗い出し、そのうちユーザーの利用頻度が高く、情報量も多い複雑な画面はグッドパッチが制作し、それ以外の画面はjinjerの皆さんが制作した画面をグッドパッチがレビューを行いました。
jinjer 近藤さん：
プロジェクトの期間はタイトだったのですが、最初の1〜2カ月ほどはスコープの決定にかなりの時間を割きましたね。デザインシステムチームとは、精査した80画面を網羅するコンポーネントを4カ月間でどれくらい作れるのかを何度もやり取りしました。
──なるほど。デザインシステムが構築されていない状態で、プロダクトのリデザインを同時並行で進めるのは難しい印象があります。
Goodpatch 浅野：
今回は、「ジンジャー人事労務」の課題を解消しながらデザインシステムの構築に当たらなければならなかったので、どちらか片方だけを行う仕事とは異なる難しさがありました。
ただ、実際のプロダクトに適用することを考慮しながらデザインシステムのあり方を検討できたので、結果的には高い実用性を確保できました。デザインシステムには適用可能性や持続可能性がないと、逆に組織の負債になってしまいますから。
Goodpatch UIデザイナー 浅野
──デザインシステムの構築は、具体的にどのように進めていったのでしょう。
jinjer 近藤さん：
最初に、乗田さんによるデザインシステムのレクチャーを目的にしたワークショップが開かれました。実はjinjerの中でもデザインシステムについての知識やイメージが人によって異なるため、社内でも会話が噛み合わないことがありました。
ワークショップでは、なぜデザインシステムが必要なのか、今組織が抱える課題はどんなデザインシステムがあれば解決できるかを、メンバー全員が付せんに書き出していきました。
──乗田さんは、なぜワークショップを開催したのですか？
Goodpatch 乗田：
デザインシステムという概念を理解してもらうことが目的でしたが、ゴールとしては、デザインシステムの役割や機能、運用プロセスに対するメンバー間の認識をそろえることを目指していました。特にデザインシステムをどんな内容にするのか、どんなコンポーネントを作るかという点は、時間をかけて話し合いました。
ワークショップの様子
──デザインシステムは作って満足してしまうケースも多いと聞きます。グッドパッチでは、どんなデザインシステムを構築しようと考えていましたか。
Goodpatch 乗田：
すべてのプロダクトに適用できる汎用性があり、先の拡張に対する柔軟性や耐久性を備えたデザインシステムを構築したいと考えていました。人事労務系のプロダクトは情報量やユースケースが多くなる傾向があります。ユーザビリティの法則やユーザーのメンタルモデルを土台にしながら、目的の操作をスムーズに実行するためのUIを構築できる基盤を構築することを意識しました。
Goodpatch 浅野：
「ジンジャー人事労務」に最適化されていることはもちろん、他のプロダクトへの汎用性もあるデザインシステムを作ることを意識していました。
「ジンジャー」らしさとは？ ワークショップでブランドの立ち位置を再確認
──「ジンジャー人事労務」のリデザインは、どのように進行したのでしょうか。
Goodpatch 乗田：
プロダクトチームでは、「ジンジャー」らしさを視覚表現や言語表現を用いて一貫して表現するための指針となるグランドデザインを構築するワークショップを実施しました。
jinjer 近藤さん：
ワークショップを進める中で、「ジンジャー」らしさが人によって異なることに驚きました。例えば、余白があるレイアウトが「ジンジャー」らしいと感じる人もいれば、「ジンジャー」らしくないと考える人もいる。「頭の中にあるイメージはここまで違うのか」と衝撃を受けました。
──各自がそれぞれ異なる「ジンジャー」像を持つ中で、共通の「らしさ」をどうまとめたのでしょう。
Goodpatch 乗田：
参考画像を用いて構築したムードボードで参加者の認識合わせを行いました。加えて、例えば「柔らかい」と「硬い」という相反する形容詞を用いて5段階の尺度を作り、「ジンジャー」らしさはどのあたりに位置するのかといった問いを投げることで抽象的なイメージをまとめていき、ブランドの立ち位置を決めました。
Goodpatch 浅野：
メンバーそれぞれ「ジンジャー」らしさが違うと分かったので、「ジンジャー」らしさとは具体的に何かを深掘りしていきました。「温かい」「誠実」などキーワードがたくさん出てきたのですが、「温かいってどんな温かさ？具体的に何をされたらユーザーは温かいと思う？」など抽象的な言葉をさらに深掘りすることで、全員の認識合わせがうまくできました。
「ジンジャー」らしさの認識合わせを行う際に用いたムードボード
jinjer 近藤さん：
「ジンジャー人事労務」はレガシーなデザインだったので、どこまでモダンに再設計するかは悩みました。「ジンジャー」というブランドには明るさや柔らかさが必要ですが、人事労務という業務には誠実さが必要なので、軽すぎてもいけない。
ジンジャーらしさが必要なのは、単に見た目を整えるためではありません。複数のプロダクトを提供している私たちにとって、統一感のある体験を届けることがユーザーの信頼につながり、ブランドへの愛着を育むことになるからです。そのため、レイアウトの抜け感や差し色、中でもプライマリーカラーである青のチューニングには特にこだわり、細部までていねいに設計しました。
プロダクトのリデザインは両社が協力する「ペアデザイン」で コミュニケーションがスムーズに
──確かにムードボードやこうした議論が残されていれば、入社歴や職種に左右されることなく「ジンジャー」らしさを視覚表現や言語表現で共有しやすいですね。
Goodpatch 浅野：
グランドデザインの構築後は、「ジンジャー人事労務」の80画面を一つずつリデザインしていきました。jinjerの皆さんに課題をヒアリングしながら既存のインターフェースの課題や懸念点を明確にし、リデザインしたインターフェースでその課題を解決できているか確認する……というフローでていねいに進めていきました。
Goodpatch 乗田：
リデザインにはユーザー体験から再考するパターンと、表現の刷新のみを行うパターンの2つがありました。後者はデザイン対象の画面数が多いので、jinjerのUIデザイナーも交えて「ペアデザイン」で作成していきました。
その準備として、年明けにはグッドパッチのオフィスでデザインシステムを活用してUIをデザインする手法を体験してもらうためのワークショップも実施しました。Figmaを活用して、デザインシステムのコンポーネントをプロダクトにどう実際に適用させていくのかをレクチャーしました。
デザインシステムを用いたUIデザインを体験するワークショップ
Goodpatch 浅野：
ペアデザインということで、リデザインをした画面を互いに見ながらレビューできたので、コミュニケーションがスムーズに進んだと思います。「もっとこんな使い方ができるのでは？」「こっちのコンポーネントを使ったら？」など会話できたので、意思の疎通や認識を合わせやすかったです。
──なるほど。レビューするたびにプロダクトに対する双方の認識が深まり、デザインシステムに対する知見も貯まっていくと。
Goodpatch 浅野：
レビューはFigmaでのコメントを中心に行い、分かりにくいところはオンラインミーティングで解説していました。私たちだけでなくjinjerの皆さんにもかなり手を動かしてもらったので、コンポーネントの使い方を実践で学んでいただけたことも良かったと思います。
jinjer 近藤さん：
グッドパッチの皆さんはリデザイン案をいくつも提示してくれたのでありがたかったです。僕たちは好き勝手に自由なことを言うのですが（笑）、毎回新しい案が上がるのが楽しみでした。jinjer側が設計するデザインに関しても、さまざまな相談に乗っていただけました。
「ジンジャー人事労務」のリデザインを行った結果
「ジンジャー人事労務」のリデザイン後のインターフェイス
「PdMが画面設計」「作業時間が半分に」──デザインシステム構築のメリットを聞く
──デザインシステムが構築されたことで、jinjerにどのようなメリットがありましたか？
jinjer 近藤さん：
「ジンジャー」は情報量が多いプロダクトなので、各情報の優先度をつけるのが難しかったのですが、グッドパッチには細かいところまで擦り合わせてもらいました。ドキュメントも作成してもらったので、エンジニアにも「グッドパッチと決めました」と堂々と言えるようになりました。
もちろんイレギュラーが発生することもありますが、指針ができたことは大きかったです。プロダクト全体の最適化に向けたアクションに割ける時間が増えた感覚があります。
──ドキュメント、ですか？
Goodpatch 乗田：
デザインシステムの目的やコンポーネントの用途などをガイドラインとしてまとめました。デザイナーとエンジニアの円滑なコミュニケーションを支えることを目的にグッドパッチで作成しました。
デザインシステム「jinjer sirup」のガイドライン
jinjer 近藤さん：
ドキュメントもそうですし、コンポーネントができたことで、エンジニアの皆さんとのコミュニケーションが格段に楽になりました。
これまではエンジニアの方とインターフェースに関する会話をする際の共通言語がなかったため、「あのパーツ」「その要素」などの指示語と具体的なUIのイメージを組み合わせてコミュニケーションを取っていました。
それが現在はコンポーネント名だけで会話が成立しています。結果としてデザイナーの依頼から実装が完了するまでの時間がかなり短くなりました。私自身も、これまではパーツを組み合わせて使用していたくらいだったのですが、コンポーネントを活用するようになってできることが非常に増えましたね。
──デザインシステムが構築されたことでルールが明確になり、開発現場もスムーズになったのですね。「ジンジャー人事労務」のリデザインも同じタイミングで完了したのでしょうか？
jinjer 近藤さん：
リデザインも無事に完遂し、80画面のデザインデータを納品していただけました。デザインシステム側はガイドライン、Figmaライブラリ、開発用コンポーネントライブラリを用意していただきました。Figmaライブラリは「ジンジャー勤怠」のリニューアル業務にも生きています。新卒や中途入社したデザイナーも、デザインシステムがあることでスムーズに作業できています。
あとは、ノンデザイナーでも活用できるメリットが大きくて。ワイヤーフレームを作る段階からコンポーネントを利用できるので、価値検証がすぐにできるようになりましたし、ガイドラインがあるので、ボタン配置などに悩む時間も短縮されました。
デザインシステム「jinjer sirup」で提供しているFigmaコンポーネント
jinjer 近藤さん：
デザイナーの手を借りずにPdMの方がUIをデザインするケースも出てきています。私自身も、デザインシステムを活用することで、1画面作る際に約2時間かかっていた作業時間がおよそ半分になりました。
──開発工程が早くなるだけでなく、PdMなどデザイナー以外の方もUIをデザインできるのは画期的ですね。
デザインシステムは「作って終わり」ではなく、社内浸透が大切 自走できる運用体制を実現
jinjer 近藤さん：
デザインシステムを社内に浸透させるために、社内で月1回クイズを出しています。これは「Goodpatch Blog」のUIコンポーネントクイズの記事から着想を得ました。コンポーネントが社内での共通言語になるとコミュニケーションコストが減るため、コンポーネントの名称と役割を一致させるために始めました。
1位の人は景品がもらえて、合格点数に満たない人は次のクイズを考えるルールにしているのですが、社内でも好評です。テスト範囲は事前に公開するのですが、意外とPdMの方が上位に入ります。問題を考えること自体も学びになっています。
社内で実施されているクイズの様子
──それは面白い！本気度合いが伝わってきました。作ったデザインシステムを社内に浸透させるのは難しいのですが、今も工夫して活用されているのですね。プロジェクトが終わってから約2年が経過しましたが、デザインシステムのメンテナンスやアップデートはどのように行っていますか。
jinjer 近藤さん：
プロダクトデザイナーの週次会議で方針や課題をディスカッションしながら運用しています。でもコンポーネントの追加や改修はほとんどなく、今でもプロジェクト当時に作成した要素だけでプロダクト内の約8割のインターフェイスを表現できています。
コンポーネントを追加する際にはガイドラインも同時にアップデートする運用が定着しているため、特定のメンバーに知識が偏ることも防げています。
──改めて、今回デザインシステムを構築したメリットについて教えてください。
jinjer 近藤さん：
今までは「ジンジャー人事労務」ではこの場合、このコンポーネントを使うなど、各プロダクトの独自ルールを設ける必要があり、このルール構築に時間がかかっていました。今はデザインシステムという「ジンジャー」共通のプロダクト指針があるので、ルールの構築をスキップして業務を進められています。
また、コンポーネントだけでなく、色や文字といったスタイルもデザイントークンで共通化されたことで、エンジニアとのコミュニケーションもより円滑になりました。
──今回のプロジェクトを振り返ってみて、グッドパッチに感じた印象などあればお聞かせください。
jinjer 近藤さん：
オーダーの変更や難しい相談が多かったと思いますが、グッドパッチの皆さんにはその都度柔軟に対応いただき、本当に感謝しています。他社のデザインシステムと比較してもコンポーネント数が非常に充実しており、現在も当時構築したデザインシステムを継続して活用しています。
判断に迷った際も、「ドキュメントにすべて書いてある」と立ち返れる場面が多く、設計の拠り所として機能し続けている点は大きな価値だと感じています。また、デザインシステムをゼロから共に作り上げる経験は非常に稀有であり、個人にとっても組織にとっても貴重な財産になりました。
グッドパッチはデザイン分野におけるリーディングカンパニーだと認識していましたが、本プロジェクトを通じて、その理由をあらためて実感することができました。
──ありがとうございます！最後にデザインシステムを含めて、jinjerの今後の展望についてお聞かせください。
jinjer 近藤さん：
プロジェクト中に「デザインシステムは終わりがなく、ずっと成長し続けるもの」と言われたので、今後も「ジンジャー」にとって最適な形を模索しながら運用し続けたいです。
全プロダクトにデザインシステムを展開し、活用してもらうことが次のステージだと考えています。簡単なことではありませんが、やり切りたいです。開発基盤としてデザインシステムを浸透・定着させ、組織全体に根付かせていきたいと思います。
