こんにちは、ギフティの toB 向けのプロダクト開発をしている giftee for business dev unit (通称：g4b dev unit) に所属しているエンジニアの egurinko です。社内でデザインシステムを作り始めたので、その背景や目的、現状などを紹介したいと思います。

概要

• g4b dev unit で新たにデザインシステム Abukuma を始めました
• 目的は「デザインの一貫性保持と工数削減を通してユーザの課題解決に集中すること」です
• 現在、このシステムの成果物としては、Figma、CSSフレームワーク、そしてドキュメントがあります。これらにより工数削減に対する大きな実感を得ています

導入する背景

g4b dev unit では多くのプロダクトを展開していますが、その中で以下の 2 つの課題がありました。

1. デザインが統一されにくい

2. 同様のデザインを作成するたびに多くの工数が必要

   • デザイナーは似たような Figma を毎回 0 から作り直す
   • エンジニアも似たような View を毎回 0 から作り直す
   • 仕様検討時にも、毎回同じような議論が繰り返す

これらの課題解決のために、デザインシステムを導入することを決定しました。

導入の目的

デザインシステム導入の主な目的は次の通りです。

1. ユーザビリティを向上させるためのデザインの一貫性
2. 課題解決に専念するための工数削減

これは、デジタル庁のデザインシステムガイドラインも参考にさせていただきました。

なぜこのタイミングでデザインシステムを導入するのか？

これまでにデザインシステムの導入を検討した際には、その維持コストが工数を超えてしまうと考えていました。しかし、最近ではデザイン組織の立ち上がりによるデザインの統一、それに伴うViewのレベルアップ、そして組織拡大により「デザインシステムの導入・維持のコスト < 課題解決に必要な工数」となると考え、導入を決定しました。

適用範囲

理想的にはギフティブランドの全プロダクトに適用することです。現状は、toB 向けのチームにのみ導入を進めていますが、仕様を擦り合わせることで toC のチームや他のチームにも使ってもらえるようなデザインシステムを目論んでいます。

現在の成果物

現在の成果物は Figma の共通 Component、CSS Framework、ドキュメントになっています。

• Figma：共通コンポーネントを各プロダクトの Figma に利用しています

• CSS framework：各プロダクトの View に利用しています
• ドキュメント：整理したコンポーネント群の実装例などを載せています

現在の利用状況

作り始めて 3 ヶ月くらいですが、g4b dev unit の 2 つのプロダクトにすでに導入を始めており、1 つはすでにリリース直近です。その中で、以下のように良い feedback をもらえております。

また、それだけでなくバグレポートなど上がっており、良い feedback loop が回り始めています。

チーム構成

専任のチームが存在するのではなく、課題に向き合っているデザイナー 3 人とエンジニアの私 1 人で対応しています。ここからデザインシステムの輪が広がっていければ、少しずつチームの拡大なども狙っているフェーズです。

今後の予定

今後は、g4b dev unit のデザインシステムとして一定数のコンポーネントを整理したり、toC 向けなどの異なるコンテキストへの対応を考慮/実装したり、React/Vue 向けのコンポーネントライブラリの作成なども目論んでいます。

終わりに

今回はデザインシステム誕生の背景や目的、その現状などを紹介しました。まだまだ歩き始めたばかりのひよっこですが、少しずつ良い feedback loop も回り始めており、引き続き全社的な最適化に邁進したいと思っています。

ギフティではデザインシステムを一緒に考えていけるようなエンジニアも絶賛募集中です。気になる方は、是非一度カジュアル面談でもなんでも良いので一度お話ししましょう！

ギフティ採用ページを見てみる