デザインシステムについてメモ
デザインシステムって何？
デザインシステムとは、一貫性のあるプロダクトを作るために必要なツールやリソースをまとめたもの。
なぜデザインシステムを使うのか？
Figmaにとても丁寧に書かれている。
デザインシステムの影響力は、ワークフローを合理化し、製品全体の一貫性を確保し、部門横断的なチーム間のコラボレーションを促進する点にあります。小規模から始める場合でも、複数のプラットフォームに拡張する場合でも、デザインシステムを使用すると、機能のデザインだけでなく、実物を構築する場合でも、チームはより少ないリソースでより多くのことを行うことができます。
デザインシステムは、デザインの冗長性を減らし、開発プロセスを加速する唯一の確かな情報源です。デザインシステムを使用すれば、デザイナーはコンポーネントの作り直しに費やす時間を短縮し、代わりにブランドが承認した開発用オプションのライブラリから引き出して、デザインを迅速に構築できます。コンポーネントがコード、トークン、アニメーションプリセットを使用してデザインされている場合、開発者はそれらを機能的でアクセス可能なコードにわずかな時間で変換できます。デザインシステムを活用する企業は、製品開発ライフサイクルの変革を実際に経験し、市場投入までの時間を短縮し、まとまりのあるユーザーエクスペリエンスを実現しています。
新人デザイナーにとって、デザインシステムはオンボーディングツールとして機能します。デザインシステムから製品と原則について学び、より早く貢献できるようになります。システムが成熟するにつれて、デザインシステムはチームに共通のビジョンと言語を提供し、理解を深め、より一貫性のある製品を作ることを可能にします。これにより、製品を使用する人びととの信頼関係が深まり、時間の経過とともにより熱心で忠実な顧客ベースを築くことができます。
デザインシステムに含められるもの
スタイルガイド
コンポーネントライブラリ
参考になるデザインシステム
Spindle
デジタル庁 デザインシステム
PayPay for Developers
SmartHR Design System
IKYU Design Guideline
freee brand site
また、freeeはvibesというコンポーネントベースのデザインシステムも公開している。
Design System Guidelines - Francfranc Brand Identity
Ubie Vitals
GMO ペパボ - Inhouse
ラクスル - kamii
Adobe - Spectrum
Salesforce - Lightning Design System
GitHub - Primer
参考
「参考になるデザインシステム」のところに並べているデザインシステムの大半は、この記事から拝借している
