Global Design System and beyond

WIGG 1st Meeting
saku🌸 / @sakupi01

saku

🤗

Web Frontend Engineer
@Cybozu

🍏 / ☕ / 🌏 > ❤

Global Design System and beyond

WTF is Global Design System?

WTF is Global Design System?

Atomic DesignのBrad Frostが2024年初めに提唱したもの

WTF is Global Design System?

  • HTMLと組織/OSSデザインシステムの間に構築されるレイヤー
  • 特定の見た目と技術に依存しない、スタンドアロンなデザインシステム
  • 全てのUI要件の包括的なソリューションにはならない

fyi: 🎄Open UI Advent Calendar: Day 23 / Global Design System Part1 - saku

Why with Open UI?

  • 元々は、Brad Frost個人の主張
  • Open UIはWeb プラットフォームのUIにおけるInteroperabilityを実現するための
    技術の標準化を検討することに取り組むCG

Why with Open UI?

  • その結果として標準化されたビルトインのUIコントロールによって、世の中のデザインシステムに利益をもたらすことが目標の一つ

Today, component frameworks and design systems reinvent common web UI controls to give designers full control over their appearance and behavior. We hope to make it unnecessary to reinvent built-in UI controls, but for those who choose to do so, we expect that these design systems will benefit from Open UI’s specifications and test suites.
Home | Open UI

※当初は、GDSを実現する人物像とOpen UIに属する現メンバーの特徴のミスマッチの可能性が指摘されていたが、結果としてOpen UIでGDSを持つことになった

How Global Design System works with Open UI?

Global Design System with Open UI

is:

  • 世の中に存在する数多くのデザインシステムの共通点を抽出
  • 堅牢かつ柔軟で、アクセシブルで、国際化されていて、セキュアなデザインシステム
  • OpenUIによる、GDSコンポーネントライブラリの実装、提供、推奨
  • 標準化プロセスをスキップすることによる、高速な検討と提供のイテレーション
    • -> Open UIのサブプロジェクトのような位置付けになっている(openui/design-system
  • Open UIでの、将来的なHTML要素、各種属性、APIの標準化作業に貢献

Global Design System with Open UI

isn't:

  • HTMLの代替
  • W3C標準
  • スタイル
  • 全てのデザインシステムにとってのソリューション
  • 営利団体からの影響を受けた成果物

Do we need GDS to be honest ... ?

Do we need GDS to be honest ... ?

React Ariaとか、ヘッドレスUIライブラリとかとどう違うの?どう棲み分けるの?

ReactベースのPJならReact Ariaとかでいいんじゃない?Web Componentsってまだまだ。

WCをちゃんとキャッチアップして、個々が慣れる時間を取れるほど、現場のリソースは潤沢じゃない。

そもそも、「React×Vue×Angularでデザインシステム共通で持ちたい、だからWCが必要」みたいなケースどれだけあるの?

そうじゃないとしても、「ライブラリがEOLになった時のために〜」を考えて、今の段階からWeb標準にBetできるアンテナとリソースって、現場にある?

仮にWCが一定使えるようになったとして、GDSである必要はあるの?

「フレームワークのUIライブラリに乗っかってればいいんじゃない?」言説

「フレームワークのUIライブラリに乗っかってればいいんじゃない?」言説

  • GDSは、フレームワークのヘッドレスUIライブラリと、
    • 「機能」的には相当することをしようとしてる
    • 「歴史」的には相当することをしようとしてない

と思う

「フレームワークのUIライブラリに乗っかってればいいんじゃない?」言説

  • ヘッドレスUIライブラリにBetできる?
    • MicrosoftやGoogleが出しているコンポーネントライブラリでさえ、数年後には廃れる
  • Web標準にBetできる?
    • Webが廃れる時はReactも廃れているが、Reactが廃れる時にWebが廃れているとは到底想像し難い

じゃあ、速攻でWeb Components使える?

「フレームワークのUIライブラリに乗っかってればいいんじゃない?」言説

  • 組織 > Web標準にBetするリソースないです
    • ただ、その時に安定だろうと思われたライブラリを選択し、結果的に何十億時間もの時間と工数を無駄にしている
    • 実現する手段(WC)が成熟しきってないだけで、成熟がみえてきたら、積極的にBetするとよさそうに思う
    • 他社の事例(Edgeとか)やBaselineを参考に、採用のタイミングを見計らう
    • そこにGDSがどれだけ拍車をかけられるかは不明

「Web Componentsに乗っかるなら、GDSじゃなくても他があるんじゃない?」言説

  • webcomponents.org
    • 用意されているWeb Componentsはたくさんあるし、これからも増えていく

「Web Componentsに乗っかるなら、GDSじゃなくても他があるんじゃない?」言説

  • じゃあ、その中から”正しい”選択ができるのか?
    • ライブラリの選択に時間も体力も消耗し、結果的に正しい選択ができているかも定かではない
    • 消耗しつつ、丁寧に選択し実装もしたために、そのライブラリがEOLになった時、乗り換えの方針に素早く舵を切れない
    • 依存先も増えているので尚更
    • そんな歴史を繰り返したくない

「Web Componentsに乗っかるなら、GDSじゃなくても他があるんじゃない?」言説

  • 「コンポーネント適合スタンプ」
  • 利用者としては、最小限の労力で、”正しい”選択ができることは非常に大きい

Foundation for the Global Design System component library · Issue #1066 · openui/open-ui

Wrap up

Wrap up

  • GDSの取り組みが、Web Componentsの抱える大量の提案やWeb Components自体の普及を推し進める原動力となるかも
  • GDSはデザイントークンの提供も視野に入れているため、Design Tokens Community Groupの、Design Tokens Format Moduleの仕様策定にも拍車がかかるかも
  • GDSからテストスイートを提供することも提案されている。任意のコンポーネントライブラリが、GDSの定義に準拠しているかどうかを判断できるようになるかも
  • Web Componentsの普及が進むにつれ、GDSの存在意義は変わるかもしれないが、その過程でWeb Componentsの普及を後押しする役割を担うかもしれない

ご清聴ありがとうございました!

Thank you!

Appendix