デザインシステムの取り組み

これまで複数のプロダクトやチームでデザインシステムに取り組んできました。

経験を通じて、すべてに当てはまるデザインシステムの形はないと学びました。適切な構造やカスタマイズ、ドキュメントの範囲は、プロダクトのフェーズ、ユーザーのニーズ、エンジニアリング体制によって変わります。

取り組んだプロジェクト：

Hyfe

モバイル・WebのUIライブラリ

患者向けモバイルアプリと医療者向けWebポータルのUIライブラリを担当しました。イラストなど共通のビジュアル要素を使いながら、各プロダクトのニーズに合わせて別々のコンポーネントライブラリを整えました。

既存のモバイル向けUIライブラリを拡張し、新しいデジタル治療プロダクトに合わせて再利用可能なコンポーネントやタイポグラフィ、インタラクションの状態を調整しました。

デザインチームが1人から2人に増えた際、デザインの細かな不統一に気づきました。もう1人のデザイナーと共通のルールを整え、レビューの仕組みも導入。デザインの一貫性を高め、エンジニアの迷いを減らしました。

医療者向けポータルのUIライブラリを比較・検討し、Ant Designを提案しました。独自のコンポーネントライブラリを一から構築する工数を抑えながら、複雑な診療ワークフローに対応できました。

Money Forward

プロダクトの進化に合わせて再利用可能なコンポーネントを作る一方、フロントエンドのフレームワーク移行時にStorybookの導入を提案し、コンポーネントのQAに活用しました。エンジニアと見た目やインタラクションをレビューし、デザインと実装の一貫性を保ちました。

その結果、フロントエンドの変更ごとに必要だったUI修正の往復が、約2〜3回から0〜1回に減りました。

チームの拡大やデザイナーの入れ替わりに合わせ、タイポグラフィ、ボタン、ページネーション、ツールチップ、トースト通知など、デザインの基礎やUIコンポーネントを文書化しました。

新しく加わったデザイナーのオンボーディングを助け、プロダクト全体でコンポーネントを一貫して使うための指針になりました。

hab

habで最初で唯一のデザイナーとして、カラーパレットなどのビジュアルの基盤を整え、ブランドの世界観をデジタルプロダクトに広げました。

MUIを使って、ドライバー向けアプリ、保護者向けのレスポンシブWebサイト、デスクトップのダッシュボードに使う再利用可能なUIコンポーネントを構築しました。各プラットフォームの一貫性を保ちながら、それぞれの操作に合わせて調整しました。