masayuki5160's diary

ソフトウェアエンジニアの雑多ブログ

デザインシステム(Design Systems)に関するサーベイ

研究

しばらくデザインシステムに関するサーベイをしていたのでそれをまとめます。

サーベイ結果

デザインシステムのはじまり

  • 2011年頃に現在のデザインシステムと同じようなアイデアは注目を集め出した(Churchill, E. F. (2019). Scaling UX with design systems. Interactions, 26(5), 22-23.)
    • 当時議論されていたことと、デザインシステムが持つ要素はある(ex. コンポーネント、認知パターン)
    • おそらく2011年頃に議論されていた際はデザインシステム(Design Systems)ではなく、デザイン言語(Design Language)という用語が使われていたはず ※ 要確認

デザインシステムの定義

  • デザインシステムの定義は曖昧で、アカデミックの研究者が定義をしようとしているがまだ道半ば(Handal, S., Koo, C., & Adelakun, O. (2022). Design systems implementation for digital transformation: a case study. Information Technology and Systems: Proceedings of ICITS 2022, 42-51.)
    • さまざまな企業がデザインシステムという言葉をいろいろなコンテキストで使っており、ブログ記事などインターネット上の情報に頼る必要がある(GU, Qianfei, et al. Design system as a service. 2021. ※ 修士論文)
  • Atomic Designは度々デザインシステムと比較されるが、Atomic Designはデザインシステムの方向性を示している。すなわち、デザインシステムはAtomic Designを内包する(Handal, S., Koo, C., & Adelakun, O. (2022). Design systems implementation for digital transformation: a case study. Information Technology and Systems: Proceedings of ICITS 2022, 42-51.)
    • 3章 Historic and Theoretical Foundations of Design Systemsは参考になるので再度読む
  • Design Systemsはdesign philosophy(デザイン原則)、interaction patterns(認知パターン？)をコアとして内容するべき(Handal, S., Koo, C., & Adelakun, O. (2022). Design systems implementation for digital transformation: a case study. Information Technology and Systems: Proceedings of ICITS 2022, 42-51.の4章Design Systems Core Components)
    • 定義したUIパーツ(コンポーネント)を再利用することがデザイナーがUXを再構築することを防ぎ、アプリケーションの内容と構造に集中することにつながる(4章に記載あり)

デザインシステムの導入事例

  • OSSのデザインシステムは数多くある(Lamine, Y., & Cheng, J. (2022). Understanding and supporting the design systems practice. Empirical Software Engineering, 27(6), 146.)
    • LamineらはOSSのデザインシステムを調査し、デザインシステムを運用していく上での課題へのアプローチ方法をまとめ、デザインシステムをリードするメンバーがボトムアップのアプローチを重視していることを調査から示した
    • 最もよく使われているOSSのデザインシステムは以下(Hamilton, A.: The State of Design Systems: 2020 - A community survey of design systems, from creation to implementation and beyond. Material Design (2020))
      • Google's Material Design
      • Apple's Human-Interface Guidelines
      • IBM Design System
  •  Case Study
    • Handal, S., Koo, C., & Adelakun, O. (2022). Design systems implementation for digital transformation: a case study. Information Technology and Systems: Proceedings of ICITS 2022, 42-51.
      • 組織概要
        • 年間$40Bの売り上げ
        • 120カ国展開
        • 地理的分散(India, US, and Brazil)した多国籍チーム
        • multiple sites across different countries, different codebases, different platforms
        • ブランドガイドラインを持っていない状態
      • 実践
        • 6ヶ月でデザインシステムを作りきる
      • 結果
        • 開発業務の無駄を30%削減、デザイン業務の無駄を35%削減 ※ 企業からの回答結果で、これ以上のデータも根拠も記載なし
        • webアクセシビリティの改善ができた ※ 具体的な話はない
    • Moore, R. J., Liu, E. Y., Mishra, S., & Ren, G. J. (2020, July). Design systems for conversational UX. In Proceedings of the 2nd Conference on Conversational User Interfaces (pp. 1-4).
      • WIP: SiriやAlexaなどのツールと会話する際のUXをどうDesign Systemsへ取り込むか、に関する論文のよう ※ 時間があればもう少し読む

デザインシステムが注目される背景

  • DXの流れ、SNS利用、webサービス利用増加、これらがあり企業は市場で他社と競うためにコストの最小化と品質の向上を義務付けられていった(Chin, K. S., Chan, A., & Yang, J. B. (2008). Development of a fuzzy FMEA based product design system. The International Journal of Advanced Manufacturing Technology, 36, 633-649.)
    • TODO: Development of a fuzzy FMEA based product design systemはabstractのみ読んだ程度なので、時間があれば読む(引用数282)
  • 上記の流れの中で、ソフトウェア開発者の作業は増えていったが、デザイナ、マーケタと協業することになっていった(DevOpsとかDesignOps、チーム開発の文脈のはず ※ 要確認)。その協業において、デザイナにとってはドキュメントをメンテナンスし続けることがデジタルプロダクトの一貫性を保つ一つの方法であるので、協業を可能とする方法が必要とされ(Huang, Y.:Developing a Design System for an e-Commerce Website. Aalto University, Department of Media)、デザインシステムはこれらを解決する一つの方法である。

Future Research

  • 定量的、定性的、両方のresearchがまだ必要(Handal, S., Koo, C., & Adelakun, O. (2022). Design systems implementation for digital transformation: a case study. Information Technology and Systems: Proceedings of ICITS 2022, 42-51.)
    • デザインシステムはまだ新しいコンセプトである
    • 別のresearch methodを用い、定量的な評価が必要

雑感

  • Handal, S., Koo, C., & Adelakun, O. (2022). Design systems implementation for digital transformation: a case study. Information Technology and Systems: Proceedings of ICITS 2022, 42-51. は非常に参考になった
  •  Handalらのcase studyは参考になるが、デザインシステムを導入するプロセスや効果検証など、その評価結果の根拠が乏しい印象。アンケートでも良いので、もう少し客観的な情報が欲しいところ。これはFuture worksで記載のある内容ではある。
  • Chinらの論文にもあるようにDX、コストと品質(ユーザビリティ観点※ アクセシビリティもあり)関係は引き続き課題感がある
  • OSSのデザインシステム、Atomic Designとそれを内包したデザインシステムとしての定義(もちろんまだ曖昧)、実践事例はあるが、概念自体が複雑であるので、今の研究結果だけでデザインシステムを作ることは再現性の面でまだ課題がある印象。
  • 残タスク
    • Chinらの論文は改めて読み進める
    • Lamineらの論文は結論のみ理解できるよう再度読む