Re:lation

SaaS企業であるINGAGE社のプロダクトデザインシステム構築を担当しました。デザインリード・デザイナー・フロントエンドエンジニアからなるチームで、12週間かけてFigma上のデザインシステム(トークン248件・部品カタログ)と運用ルール、AI活用を前提としたドキュメント基盤を構築しています。

デザイン(Figma)と実装コードで「正」となる情報がバラバラで、指定した色が実装に存在しないといったズレが常態化しており、セマンティックトークンもほとんど未整備という課題がありました。着手にあたっては、SSOTの向きや移行戦略、対象範囲の絞り方、デザイナーとエンジニアの決定権分担をあらかじめ決めたうえで、共有UIコンポーネント66件を実測で全数調査。カタログ登録640個のうち実使用は約41個と判明し、対象を絞り込みました。判断基準となるデザイン原則とDo's/Don'tsの言語化を最優先に進め、タイポグラフィ・色・スペーシング・角丸・elevation・モーションの6軸のトークンを2日間で確定。実装の実名をすべて洗い出したうえで命名規則を定め、アトミックデザインを廃止して役割ベースの8グループへ再編しました。ドキュメントは値を書き写さずトークン定義へのリンクのみを張る設計とし、二重管理と陳腐化を防止。AIが判断ルールを常時参照できる層と、詳細情報を必要な時だけ参照する層を分離するなど、AIに活用されることを前提としたドキュメント設計も行いました。結果として、デザイントークンを整理・確定し、参照が多いのにカタログ未登録だった部品を56件発見。Storybookを参照させることでAI出力の精度が向上することも実務で確認しています。

複数チームからなる開発部門に常駐デザイナーとして参画し、Re:ChatやAIエージェント機能、タスク・プロセス機能、ZoomPhone連携、クラウド電話、ナレッジ機能など、複数の新機能のデザインを担当しました。

新機能開発と既存機能の改修が絶えず並行して走る環境で、複数チームから同時多発的に来る依頼に対し、ユーザーストーリーの作成からFigmaでのデザイン、時にはフロントエンド実装の改修までを一気通貫で担当しました。上流から下流まで自分が入ることで、チーム間の手戻りとコミュニケーションコストを最小化し、開発スピードを落とさずにデザインを供給し続けています。