Design system
複数プロダクト・複数チームをつなぐ共通言語としてのデザイン基盤を設計。
Overview
プロダクト開発において、複数チームで運用されるデザインシステムの構築・整備に携わった。カラー・タイポグラフィ・figmaコンポーネントの設計から運用ドキュメントまでを担当。
Role
UI Design / Design System Contributor
Challenge
ブランドカラーだけがある、ほぼゼロからの状態
プロジェクト開始時点で定まっていたのはブランドカラーのみで、プロダクトUIを構築するためのカラースキーム・コンポーネント・ガイドラインは未整備の状態だった。各デザイナーが都度判断してUIを組み立てる属人化した設計が常態化しており、同じような要素でも画面ごとにスタイルや挙動が揃わず、レビューや実装の段階で認識のズレが繰り返し発生していた。複数プロダクトが並行で開発を進める中、判断のばらつきとエンジニアへの仕様伝達コストが日々積み重なっており、土台となるデザインシステムを早期に立ち上げる必要があった。
Strategy
カラーの階層設計
ブランドカラーを起点に、プリミティブトークン・エイリアストークン・セマンティックトークンの3階層で設計。プリミティブに色の生値を、エイリアスに役割（brand / danger など）を、セマンティックにUI上の用途を紐づけることで、ブランド変更やテーマ拡張時にも影響範囲を限定できる構造を目指した。
「使われるコンポーネント」から先に作る
網羅的に作り始めると運用に乗らないリスクがあるため、進行中のプロダクト開発で実際に必要なコンポーネントを先行して設計。まずミニマムなサイズでエンジニアに実装してもらい、動くものを起点に改善するサイクルを取った。並行して他プロダクトの動向も確認し、横断的に高確率で使用されるコンポーネントを約20点、Figma上で整備。各コンポーネントにはデザイナーからのフィードバックを反映し、使用時のガイドラインも併せてドキュメント化した。
学びと次の設計方針
当初はデザイナーの作業効率を優先し、Figma上での使いやすさを軸にライブラリを構成した。一方で運用を進める中で、実装側のコンポーネント構成とFigma側の構造を揃えた方が、デザインと実装の往復コストを下げられることをエンジニアとの対話から学んだ。今後のアップデートでは、実装構造と整合するライブラリ設計へと移行予定。
Result
プロジェクトの成果
ブランドカラーのみの状態から、カラートークン・コンポーネント・ガイドラインを含むデザイン基盤を立ち上げ、複数プロダクトにまたがる共通言語として運用される状態を作った。運用を通じて見えた課題と改善方針まで含めて、継続的に育てていくシステムとして設計している。
Note
本案件は守秘義務により、具体的なUI・数値などは非公開としています。掲載しているビジュアルは設計思想を示すための抽象図です。
