ファストドクター株式会社 デザインシステム構築（2024）
2024/4〜2024/11
担当：デザインシステムの全体推進・具体化を担当 工数：週1〜3人日
私が入社した時点の様々なプロダクトは、開発スピードを優先した影響で、情報設計・ユーザビリティ・アクセシビリティ・開発効率のいずれの観点でも多くの課題を抱えていました。エンジニア側も効率的に改修や新規開発を行うことが難しい状況だったため、長期的な視点でデザインシステムの構築とエンジニアとの連携は必須となっていました。 そこで大規模サイト構築の経験を生かし、私がリードして構築することになりました。
開発メンバーは私の入社前からデザインシステムの必要性を認識していました。そこで、スモールスタートの手法を採用し、まずアプリのデザインシステムを構築し、その後他のプロダクトへ展開することを目指しました。アプリの新規開発を進めながら成果を出し、同時に全体で必要なUIパーツと画面遷移の把握に努めました。
現状把握していくと現状のデザインは、同じ機能のUIパーツが複数存在していたり、配色のばらつき、アクセシビリティ・ユーザビリティの課題、一貫していない画面遷移、ばらついたエラーハンドリングなどの課題が確認できました。
医療アプリの性質を考えると、デジタル庁のミッションのように「誰一人取り残されない」ためのデザインにすべきだと考えました。そのため、アクセシビリティとユーザービリティを改善していくことを意識してデザインシステムを構築しました。また、デザインシステムの拡張性も検証しながら進めていきました。
これにより、デザインの構築スピードが向上。画面構成を作った時点でほとんどのUIが完成されている状態にすることができ、他のデザイナーも短期間で一定の品質水準に達することが可能になりました。
ベースのルール構築は、figmaのローカルバリアブル機能を用いてデザイントークンを定義していきました。配色やタイポグラフィ、余白、サイズなど必要なトークンを、プリミティブ、セマンティック、コンポーネントトークンまで設定。汎用性と展開性を担保したおかげで、個別対応せずに一貫して適用することができています。
ローカルバリアブルで構築されたトークン
アクセシビリティの観点からWCAGで示されたコントラスト比を満たすよう定義。配色ルールは様々なパターンに無理なく適用できるよう構築しました。さらに、ダークモードへの対応など、将来的な拡張性も考慮して設計しています。
プリミティブトークンとセマンティックトークン
セマンティックトークンの組み合わせに対し、コントラスト比を検証しながら定義
個別のUI要素で構築されたデザインシステムは多くありますが、結局組み合わせ次第でぶれてしまいます。ブレが最小限になるようにUIパーツを組み合わせた形でコンポーネント化。展開性はプロパティの活用で担保しました。
Componentの一例
UI ElementsとPage Componentの2つの切り口で運用
Notionにガイドラインを構築。開発メンバーから出た意見やアップデートの文脈を残していくことで、断ち切らない動きになることを目指しました。
デザインシステムガイドラインから抜粋
