デザインシステム活動の 2024 年振り返りと 2025 年の目標

image_name

こんにちは、エンジニアの egurinko です。デザインシステムでユーザの課題解決に集中したいなどで、デザインシステムの取り組みがなされていることはアナウンスしておりましたが、2024年の活動を振り返りつつ、2025 年の目標について話したいと思います。

2024 年の活動内容

デザインシステムは有志チームにより運営されており、1.5 時間の定例を毎週行うという形で進んでいます。その中でも 2024 年もさまざまな成果を上げることができました。

CSS ライブラリに加えて React コンポーネントライブラリの充実化
デザイン原則の策定（あたたかみ・ひかえめ・かんたん）
デザイン原則に基づいたデザインリニューアル
Figma と npm package を公開
アクセシビリティの取り組み開始

CSS ライブラリに加えて React コンポーネントライブラリの充実化

ギフティのデザインシステムは CSS ライブラリを先に作成していましたが、2024 年はそれを利用した React コンポーネントライブラリの充実化を図りました。

CSS から作り始めたのは、ギフティのフロントエンドが Rails, React, Vue, Svelte など、様々な技術で構築されていることや、CSS ライブラリがあればそれを利用したライブラリを作りやすいことが理由でした。そして 2024 年は React 系のフロントエンドが多く採用されたため、React のコンポーネントライブラリの充実を図りました。

その結果、今年も多くのプロダクトに採用が進み採用プロダクトの半分以上は React 系のフロントエンドとなっております。

デザイン原則の策定（あたたかみ・ひかえめ・かんたん）

2023 年からデザインシステムの活動は始まり CSS ライブラリの提供などをしていましたが、2024 年はそれに加えてデザイン原則の策定を行いました。

原則は先に作られるべきでは？という声もあるかと思いますが、2023 年当初はプロダクトに利用されフィードバックサイクルを作ることを優先していました。これはデザインシステムが利用されることで進化すると考えたからです。結果として、デザインシステムの活動を軌道に乗せられたので、今になってこの判断は間違えてなかったなと思っています。

そして、2024 年はギフティが積み上げてきたブランドをプロダクトにも反映させていくためにデザイン原則の策定を行いました。原則の策定は既存のブランドガイドラインをベースに行いました。ただ、ブランドガイドラインはギフティの人格を主に表しており、それだけではプロダクトレイヤーで大切にしたいこととは乖離がありました。そこで、これまで積み上げてきたプロダクトから大切にしたい要素をブレストし、その結果とブランドガイドラインを合わせて策定に至りました。

image_name

結果として、「あたたかみ」・「ひかえめ」・「かんたん」の 3 つを原則としました。デザイン原則の詳細は 2025 年に公開したいと考えています。

デザイン原則に基づいたデザインリニューアル

デザイン原則はブランドをプロダクトに反映することを目指して作成しました。そこで、策定したデザイン原則に基づきデザインシステムのリニューアルを行いました。また、これを機に package のバージョンを 0 系にしていたところを、1 系として正式リリースとすることにしました。これは 1 年以上のデザインシステム活動によりリリースが安定していたこともあって出来たことです。

image_name

なお、リニューアルに伴うマイグレーションもありましたが、リリースを細切れにしたりプロダクトチームと連携を深くしたりすることで乗り越えました。各プロダクトチームの方々には非常に感謝しています。

Figma と npm package を公開

デザインリニューアルをして正式版として公開できたため、これまでの以下の成果物を公開しました。

Figma
npm package

公開の目的はデザインシステムを見てもらい知見を広く共有すること、社外の知見を取り入れやすくしてさらなる成長を促すこと、社内外へのアピールの 3 つでした。Figma や npm package の公開は社内で初めてだったこともあり、それに際して取り組んだことも多くあるので、いつかブログにしようかと思います。

アクセシビリティの取り組み開始

デザインシステムで様々なことを取り組んでいましたが、十分に取り組めていない課題の 1 つにアクセシビリティがありました。そこで、2024 年の後半からアクセシビリティの事例を調査したり、ギフティとして目指すべきゴールの策定などに取り組みました。

実際のところアクセシビリティへの配慮はまだまだ足りていないため、2025 年の大きな課題の 1 つとして取り組む予定です。

2024 年の採用実績

デザインシステムをこれまでに採用したプロダクト数を 2024 年の年末に集計したところ、以下のようになっていました。

	2023	2024
採用プロダクト数	5	12
採用部署数	1	4

採用プロダクトは 2024 年に 7 増加しましたが、そのうち 5 つは React 系のプロダクトでした。また、2023 年は 1 つの部署でお試しで始まったものが、2024 年は部署を超えた採用になっていることがわかります。

2024 年の活動の良かったところ

プロダクトを通してギフティのブランドがより伝わるようになってよかった！
- 利用ユーザがギフティをより理解でき、好きになってもらえるかもしれない
- 作る側もギフティらしさを再認識できる
成果物を Figma/npm package として外部公開できたのは、大きな区切りであり感慨深かった！
- デザイナー、エンジニアそれぞれが成果物を外部公開でき、本当に win-win な関係
社内採用部署数が広がったのは、デザインシステムの価値が認められた気がする！
- 様々な方が積極的に質問してくれたり、commit してくれたりした
- 少しずつ、デザインシステムがみんなのものになってきている