RIFF Design System

概要

Yahoo! JAPAN のサービス横断デザインシステムにおいて、デザイン領域の PdM として、主に Figma ライブラリの設計・改善を担当しています。

各サービスへの導入支援、Sketch から Figma への移行、コンポーネント設計、アイコン刷新、問い合わせ・レビュー体制の整備を推進しました。

横断デザインシステムは以前から存在していましたが、各サービスではすでに独自のデザインシステムや UI 資産が作られていました。サービス固有の要件もあるため必須利用にはできず、十分に活用されていないことが課題でした。

また、運営メンバーの多くが他業務との兼務であり、限られた時間で継続的に改善できる仕組みも必要でした。

共通ライブラリの利用を一律に求めるのではなく、各サービスへ個別にヒアリングを実施しました。

既存資産の運用状況や導入時の課題、必要な機能を確認し、ライブラリや導入方法を改善。各サービスが共通ライブラリを利用するメリットを整理しながら、1 サービスずつ導入を進めました。

導入後も定期的に利用状況や課題を確認し、継続的な改善につなげています。

限られた人数でも運用できるよう、SSOT（信頼できる情報源を一つに定める考え方）を重視し、コンポーネントの構造と仕様の参照先を整理しました。

Code Connect を活用して Figma と開発ライブラリの対応関係を明確にし、仕様の重複管理やデザインと実装のずれを抑えています。一方、Figma 上では、デザイナーが迷わず利用できるプロパティやバリアント構成を設計しています。

また、Slack から送られた問い合わせを Jira へ自動起票し、要望と対応状況を一元的に管理できる運用を整えました。

現在、Yahoo! JAPAN アプリ、Web、メール、ニュースなど、主要約 10 サービスで導入・活用されています。

Figma ライブラリのインスタンス数（コンポーネントの利用数）は、3 年間で約 3 倍に増加しました。現在は 40 以上のコンポーネントを管理し、利用サービスから寄せられる要望をもとに改善を続けています。