【Design System】3TYPEs of Design System for 3 PHILOSOPHY

Blue Regret
·
公開:2024/12/10

デザインシステムのフレームワークを構築する際に以下の疑問が生まれる

  • プロダクトが複数ある時、デザインシステムは各プロダクトのどの範囲までcoverするのか?全部coverするのか?それとも一部だけcoverするのか?

この観点でデザインシステムには3つのTYPE(構造設計)があることが分かる

  • TYPE1:全体を覆う(一つに複数)

  • TYPE2:基盤を覆う

  • TYPE3:個別最適(複数で一つ)

他方、世の中を見渡してみると、以下のようなプロダクト思想(Philosophy)が見て取れる

  • SmartHR

    • SmartHR労務管理、SmartHRタレントマネジメント等、複数プロダクトがあり、SmartHR Design Systemが全てに提要されている

    • この思想には、「TYPE1」がFITする

      • 単一デザインシステム(TYPE1)を構築し、デザインの全要素においてデザインシステムが適用され、デザインの一貫性を担保すると同時にデザイナーのデザイン制作コストを大幅に削減する

  • 楽天

    • 楽天市場、楽天トラベル、楽天モバイル等、複数プロダクトを展開しており、それぞれのプロダクトに一貫したデザインルールが適用されている。Tone&Manner、レイアウトのルール、情報構造等

    • この思想には、「TYPE2」がFITする

      • デザインシステム内に基盤を構築し、以降分岐に対応する

        • 各プロダクトが基盤となるDesign Principlesを踏襲しつつ、オリジナルデザインについてもデザインシステム内にデザイン指針がある、それに従うことができる

  • リクルート

    • リクナビやSUUMO、ホットペッパーグルメ等、複数プロダクトがあり何れも独自のデザインスタイルを持っている。プロダクト間に一貫したデザインの統一性はなく、元々各プロダクト毎にデザイン指針が策定されている状態

    • この思想には、「TYPE3」がFITする

      • 個別デザインシステムを連続的に作っていき、独自で拡張・更新していく

      • 汎用性のあるカラースキーム、コンポーネント、レイアウトパターンを事前に用意し、それらを適用しカスタマイズできるようにしておく

【結論】TYPEとPHILOSOPHYは適合している。理想は、PHILOSOPHYにFITしたTYPEを用意し、全てに対応出来るようにする

既に複数プロダクトが乱立し、プロダクト間でデザインルールが統一されていない時、自分たちの思想を明確にし、目指したいブランド、コンセプトを定義する所からスタートする。その際、ワークショップが有効かもしれない

【補足】デザインシステムのフレームワーク(SaaS)があれば、そこにアクセスし、TYPE1-3を即実現出来るようになる。思想にFITしたTYPEを選択し、プロダクトのデザインに即時反映され、デザインの統一性・一貫性を実現出来る世界線。プロダクトのデザインの状態を精査し、コンポーネントを識別し、Figmaにデザインシステムを構築し、コンポーネントを並べ構造化し、システム化する(BPaaS)。結果、デザイン基盤が整備され、コンポーネント・レイアウトパターンも定義され、デザイナーはそれに則ってデザイン制作を進める。結果、デザイン制作コストを大幅に落とすことが出来る

@blackblue
日々の出来事や人と話して知ったことを書こうと思う。