OpenUI Design System

Web Components

目次
  1. OpenUI Design System とは
  2. 現在出ているRFC
    1. Badge コンポーネント
    2. Switch コンポーネント
    3. Progress コンポーネント
  3. 今後の展望

今日はOpenUI Design Systemを紹介します。

OpenUI Design System とは #

OpenUI Design Systemは去年末にリポジトリが誕生した、OpenUIが管理するGlobal Design Systemです。現在準備中のプロジェクトであり、後述するRFCが立っているのみでコンポーネントなどはまだ実際には作られていません。

GitHub - openui/design-system
Contribute to openui/design-system development by creating an account on GitHub.
github.com

Global Design Systemとは、Brad Frostの記事やPodcastで登場した概念です。 組織が管理していたりOSSとして提供されている既存のデザインシステムは、どうしても自分たちのサービスやプロダクト、個人の好みに合わせたものになっていて、同じような実装がデザインシステムごとに繰り返されてしまっています。そこで、その重複を全てGlobal Design Systemとして吸収するものがGlobal Design Systemとして提案されています。

（TODO: 精査）

この説明によく使われるものとして以下の図があります。

（TODO: 図を入れる）

組織やOSSとしてのデザインシステムと、HTMLの隙間を埋めるものがGlobal Design Systemです。これはアクセシビリティや国際化、セキュリティ、その他様々なものを考慮して作られます。今回のアドベントカレンダーの前半のテーマであるWeb Componentsで作られることが想定されているので、組織やOSSとして提供するデザインシステムを実装する上で、Webの標準を用いて、Webフレームワークに依らず、低レベルなものとして利用可能になります。

詳しくはBrad Frostの以下の記事をご覧ください。

日本語で解説されているものもあります。

現在出ているRFC #

既にコンポーネントのRFCのPRが3つ提出されています。 書かれていることを見ていきましょう。

Badge コンポーネント #

RFC: 0001 - Badge by cellar-door · Pull Request #9 · openui/design-system
Here is an initial draft of an RFC for the badge component. It can serve as an example for the RFC process, how it can be discussed, adopted, and then since it's relatively simple in design be ...
github.com

1つ目のRFCとして提出されているものです。 OpenUIで他のUIライブラリを調査している結果を見ながら作成されたようです。

使用例やモチベーションや説明されたあと、詳細なAPIが書かれています。 Web Componentsで作られることが想定されているので、プロパティとイベントに加えてスロットに入れることのできる内容も記載があります。 ::part()で用いられるIDや、::state()で用いられる状態も、存在する場合はドキュメント化される必要がありますが、今回はまだ書かれていない（もしくは書く必要がない）ようです。

また、スタイリングはデザイントークンを用いて行われます。コンポーネント内部でデザイントークンを用いてつけられたデフォルトのスタイルを、RFCに書かれているようなCSSカスタムプロパティを設定することで上書きできるようになっています。 コメントで指摘がありますが、現在プロパティの項目に書かれているものの一部はスタイルを制御するものであるため、CSSカスタムプロパティに置き換えられる可能性がありそうです。

その下には、コンポーネントの動作やアクセシビリティ上の考慮事項、ユースケースなどが書かれています。

ここまではデザインシステムやUIライブラリのドキュメントでも見るようなものです。 さらにその下に進むと、欠点や代替案、未解決の問題など、そもそもこのコンポーネントを追加するべきかどうかというRFCっぽい情報、ドキュメントの構成などが書かれています。Badgeのような今では当たり前にUIライブラリに存在しているようなコンポーネントでも、細かい考慮事項などが考えられていて面白いので、読んでみるのをおすすめします。 例えば僕が特に気になったのは、色のみのステータスインジケーター（例えばオンラインを緑、オフラインを灰色で示すようなもの）としてBadgeを扱ってしまうと色に依存したUIになってしまい、WCAG 2.2のSuccess Criterion 1.4.1 Use of Colorに違反してしまいます。これはDrawbacksの2つ目のAccessibility concernsという項目で挙げられています。

Switch コンポーネント #

RFC: 0002 - Switch by gfellerph · Pull Request #11 · openui/design-system
The switch component is not a likely component to make the initial list of components to implement. Nevertheless, motivated by @lukewarlow, it seemed like a good opportunity to re-use the switch op...
github.com

2つ目のRFCであるSwitchコンポーネントです。 スタイリングする際などにコンポーネントのパーツの名称が複雑なので、Anatomyによって分かりやすくなっています。

Progress コンポーネント #

Progress component RFC by lukewarlow · Pull Request #10 · openui/design-system
I have an initial implementation to go along with this RFC. More thought is needed in terms of Custom Properties for colours etc. const styles = ` @property --width { syntax: "<length&g...
github.com

後述のMVPリストに載っていないので状況が不明ですが、PRが出ています。 上の2つと違い、コメント欄にCodePenのサンプルへのリンクがあるので実際の動作を見てみたい人は確認をしてみてください。

今後の展望 #

いくつか今後動きそうなissueが立っています。