グローバル展開するコネクテッドカーブランドのプロダクトにおいて、デザインシステムが存在しないままスケールが進んでいました。各画面のカラー、タイポグラフィ、コンポーネントサイズは、担当デザイナーごとに個別に選定されていたのです。そこで、100画面以上のプロダクト画面を1つずつ精査（オーディット）し、実際の使用状況に基づいたトークンベースのカラー＆タイポグラフィシステムとしてビジュアルランゲージを再構築しました。本施策は、完成後の引き渡しではなく、フロントエンドエンジニアたちと密に連携しながら進められました。
偶然成り行きで拡大したデザインシステムは、デザインシステムが存在しないのと同じです。プロダクトが存在する限り、すべてのデザイナーが画面ごとに個別にカラー、タイポグラフィ、コンポーネントのサイズを選定していました。1画面ずつ見れば問題ないように見えても、一並びにしてみるとプロダクト全体で一貫したビジュアルランゲージが存在しないことが、実際に計測・視覚化されて初めて1つの大きな課題として浮き彫りになったのです。
オーディット（精査）によって判明した課題
問題は見た目だけではありませんでした。実装の基盤となる共有システムがないため、フロントエンドエンジニアリングはデザインチーム全体のアウトプットを実装するのに苦労していました。一貫したコンポーネント、カラー、書体のセットがなかったので、画面を適切に構築することができなかったのです。これは微調整の問題ではなく、本質的なデリバリーのボトルネックでした。
オーディット： 100画面以上のモックアップを1つずつ精査し、すべてのカラー、タイポグラフィのスタイル、コンポーネントのバリエーションをFigma上に直接リスト化しました。これは一部を抽出したサンプル調査ではなく、全画面を記録したものです。解決策をデザインする前に、課題の全体像と真の形状を正確に把握することを目的としました。
理想のシステムを押し付けるのではなく、プロダクトが実際に包含している要素からスタートする。
最小・最大（min-max）アプローチ：
タイポグラフィにおいては、プロダクト全体で実際に使用されていた最小と最大のフォントサイズを特定し、そのリアルな範囲をカバーするタイプスケール（書体スケール）を構築しました。各ステップ（段階）は、単に単体で見栄えが良いから選んだのではなく、プロダクトがすでに必要性を証明していたサイズに紐づけています。
カラーについても同様のロジックを適用しました。各カラーファミリーにおいて、プロダクトが実際に必要としているシェード（濃淡）の範囲を定義し、蓄積していた無計画なバリエーションをすべて残すのではなく、その範囲内から代表的なシェードを数点選定しました。
現実的な制約の中でのデザイン
どれほど机上で美しいシステムであっても、エンジニアリング側で構築できなければ意味がありません。チームが提供していたAndroid Autoバージョンの技術的制限に対し、フロントエンドエンジニアと直接連携してすべての新しいコンポーネントを検証しました。これにより、実際に実装可能なシステムを構築しました。
システムが機能するのは、
使う側にとって、それが唯一の選択肢であるときだけ。
このデザインオーディットにより、偶然成り行きで拡大したデザインシステムは、実装条件に基づき、新たなデザインシステムへと生まれ変わりました。
単一カラーあたり10種類以上存在していた表記揺れを明確なシェードスケールへと整理し、100種類以上あった自由選定のタイポグラフィスタイルを、根拠に基づいた単一のタイプスケールに集約しました。
フロントエンドエンジニアは、不整合なデザイン出力の実装に追われる状態から脱却し、実際のプラットフォーム制約に合わせて検証されたシステムを基盤として開発できるようになりました。
すべてのデザイナーが今後の新しい制作においてこの新システムを採用し、再び無秩序化しないよう継続的なメンテナンス構造も組み込まれました。
デザインシステム
UIオーディット（UI精査）
デザイントークン
コンポーネントアーキテクチャ
クロスファンクショナル・コラボレーション（職種横断的な連携）
ドキュメンテーション＆ハンドオフ（仕様書作成と引き継ぎ）