2018年1月20日デザインの話

UXPinのデザインシステム・パターンライブラリ集「Adele」を見てみた

UXPinがデザインシステムとパターンライブラリを集約するプロジェクト『Adele』をローンチしました。Adele上でさまざまな企業のデザインシステム・パターンライブラリを検索、参照することができます。

Adele - Design Systems and Pattern Libraries Repository

Dozens of design systems and pattern libraries thoroughly analyzed. Learn, enjoy, contribute!

adele.uxpin.com

ちなみにAdeleは「The repository of publicly available design systems and pattern libraries」と書かれているようにGithubのリポジトリで管理されており、興味がある人はプロジェクトに参加できるようです。

marcintreder/adele

adele - Adele - Design Systems Repository

github.com

余談ですがサイト上やGithubでも述べられているように、このプロジェクトはAwesome Design Systemsやstyleguides.ioに影響を受けていることがわかります。

本記事ではAdele上で紹介されているデザインシステム・パターンライブラリについて触れつつ、それらを理解するためにどのような項目が設定されているのかを探ってみます。

Adeleにあるのはデザインシステムだけではない

……とその前に。Adeleの説明にもありますが、サイト上にはデザインシステムの他にパターンライブラリ（スタイルガイド）も含まれています。正直なところ、この2つを同列に扱うのはあまり良い選択とは思えません。もちろんデザインシステムはまだまだ発展途上の概念であり、採用している企業も多くはありません。おそらく定義もまちまちでしょう。パターンライブラリと混同するなら混同するで、Adele上にある事例がどちらなのか分かる仕組みが欲しかったなあと思いました。後述するデザイントークンのあるなしである程度は把握できる感じもしますが。

フィルタリング項目を見てみた

Adele上には現在46個のデザインシステム or パターンライブラリが集まっており、それらをさまざまな項目でフィルタリング・検索できる仕組みとなっています。自分はこのフィルタリング項目に興味を惹かれました。どういうことかと言うと、UXPinが「デザインシステムやパターンライブラリに必要であると考えている要素」がわかるからです。もちろん、その下地にはUXPinのCEO、Marcin Treder氏が書いた Design Systems Sprint 0: The Silver Bullet of Product Development. で紹介している分析があるのでしょう。今思いましたが、この記事で触れているデザインシステムの中にはパターンライブラリもあったんだろうな。。

というわけでさっそく各項目をリストアップしてみました。なお、Company（提供企業）とSystem（システム名）は省いています。書いてみたらけっこう長くなったので興味ない方は飛ばしちゃってもいいかなと。

Repository（リポジトリ）
- Bitbucket
- Github
- no
Code Depth
- CSS
- HTML / CSS
- HTML / CSS / JS
- HTML / CSS / TS
- no
Components（参照できるコンポーネントがあるか）
- yes
- no
JS Library/Framework（使用しているJSのライブラリ / フレームワーク）
- React
- Vanilla
- Polymer
- jQuery
- Jade
- metal.js
- Vue
- no
Typescript
- yes
- no
Web Components（Web上で実際に参照できるコンポーネントを提供しているかどうか？）
- yes
- no
Tests（テスト環境）
- Jest
- Enzyme
- Chai
- Enzyme
- Mocha
- Sinon
- WCT
- Karma
- proprietary
- Qunit
- Jasmine
- no
Linter（構文チェック）
- ESLint
- TSLint
- Stylelint
- Sasslint
- hound scss lint
- prettier
- cssLint
- no
CSS
- CSS
- Sass
- PostCSS
- inuit
- Radium
- styled-components
- stylis
- Less
- CSS Modules
- postStylus
- Stylus
- Bourbon
- Neat
- Fela
- glamor
- Glamorous
- no
CSS In JS
- yes
- no
Design Tokens（提供しているデザイントークンの形式）
- JSON
- Sass
- YAML
- Theo
- yes
- no
Bundle Manager（バンドルマネージャー）
- Rollup
- Webpack
- Gulp
- Grunt
- Browserify
- no
UI Kit（提供しているUIキットの形式）
- Sketch
- Photoshop
- Illustrator
- EPS
- no
Brand Guidelines（ブランドガイドライン）
- yes
- no
Color Palette（カラーパレット）
- yes
- no
Color Naming（利用しているカラーの命名規則）
- abstract (e.g. Primary)
- natural (e.g. light blue)
- specific (e.g. $button-colour)
- branded (e.g. brand blue)
- structured (e.g. accent-1)
- generic (e.g. T500)
- branded and natural (e.g.NIBlueBrush)
- hex only
- hex, rgb, cmyk, pms only
- no
Contrast Analysis（背景色と文字色のコントラスト比を考慮したガイドはあるか）
- yes
- no
Typography（タイポグラフィのガイドはあるか）
- yes
- no
Icons（提供しているアイコンの形式）
- SVG
- PNG
- Icon Font
- PNG Sprite
- SVG Sprite
- no
Space / Grid（スペーシング / グリッド）
- yes
- no
Illustration（イラストレーションのガイドやアセットはあるか）
- yes
- no
Data Visualization（データを可視化できる方法はあるか）
- yes
- no
Animation（動きに関するガイドはあるか）
- yes
- no
Voice & Tone（ボイス&トーン）
- yes
- no
Accessibility Guidelines（アクセシビリティのガイドライン）
- yes
- no
Design Principles（デザイン原則）
- yes
- no
Documentation Website（自前のWebサイトがあるか）
- yes
- no
Code Documentation（コードのドキュメント）
- HTML
- Markdown
- Scss
- yes
- no
Storybook（React Storybookを提供しているか）
- yes
- no
Distribution（パッケージマネージャー）
- Bower
- Lerna
- npm
- Yarn
- no

書き出してみて「ん？」となったのはComponentsとWeb Componentsの違い、それとDocumentation Websiteでした。
Web Componentsをyesにしてみると、フィルタリング結果はたったの3件でした。Web、とわざわざ付いているくらいなので「Web上で実装されたComponentsが確認できるってことなのかな？」と思ったのですが、Componentsがyesのシステムの中にも存在しています。むしろWeb ComponentsがyesのDesign System For LabVIEW NXGはすべてスクリーンショットでコンポーネントが紹介されています。ちょっと謎。
Documentation Websiteは「Web上にあるんだからyesなのは当然なのでは？」と思ったのですが、これはどうやら独自ドメインを持っているかどうかを判断しているようです。noの場合、github上でのみ展開されているシステムがヒットします。

ここで注目したいのは、デザイントークンを提供しているシステムがどれくらいあるか、でしょう。デザイントークンを提供していればデザインシステムに近い概念であると言えそうです（断定でないのはデザイントークン = デザインシステム、ではないと考えているため）。調べてみたところ、現時点ではFirefox、Salceforce、Envato、Duo SecurityとMorning Star、CA Technologiesでした。後者3つはデザイントークンのページが見つからず。
とは言え、世に出ているデザインシステムがすべてをオープンにしていないとも限りません。ひょっとしたら今後は、企業の関係者がAdeleのcontributorとして自分たちのシステムについて詳細を書いてくれるかもしれません。

もう1つ興味深いのが、ほとんどのデザインシステム・パターンライブラリにコードが用意されている点です。このあたり、UXPinがStyle GuidesではなくPattern Libraryと言っている意図が含まれていそうです。

自分だったらこの項目を追加する

Adeleは今後もアップデートされていくと思いますが、自分だったらこういう項目を追加するかな、と考えてみました。

デザインシステム、パターンライブラリ、スタイルガイドをゆるく定義しておく
- 混在している以上は判別できるようにしたい
そのシステムのユーザー（内部なのか外部なのか、など）がわかる
- 例えば内部向けがメインのシステムであれば、おもてに出ている情報が少なくても理解できる

ぱっと思いつくのはこんなところかな……

実は大切なコンテンツが隠れている

Adeleのメインコンテンツはそれだけでお腹いっぱいになりますが、実はサイトをさらにスクロールしていくとこんなブロックが目に入ります。

右側はUXPinが提供しているDesign Systemへの導線なのですが、注目したいのは左側。実はこれ「あなたがデザインシステムを導入したい時に役員を説得する資料を作ったのでダウンロードして使ってね」というページに飛ぶのです！

Design systems template: get buy-in

Get buy-in from executives for your design system. Free PPT and Keynote template.

www.uxpin.com

約40ページほどのスライドに、デザインシステムを導入する理由や得られるメリットなどが記載されています。しかもPowerPointとKeynoteの2種類で提供！優しい！
もちろんこのスライドを見せたからと言って必ずしも導入に進めるわけではありませんが（むしろこのスライドの前段階がいろいろ大変）、もし興味のある企業さんがいたら、UXPinにコンタクトを取って和訳したスライドを提供してみてもよいのではないでしょうか。

そしてもう1つが、Githubのリポジトリのページ最下部にあるThank you!の項。

ここをよく読むと、Design SystemsというSlackのWorkspaceへの申込みリンクがあります。

Join the Design Systems community on Slack!

designsystems.herokuapp.com

自分もつい最近知って入ったのですが、Design Systemsはデザインシステムについての一次情報を得られる質の高いコミュニティです。元SalesforceでいまはAmazonのデザインシステムのleadをしているJina Anne氏などが運営しています。デザインシステムに興味のある方は、ぜひJoinしてみるとよいでしょう。チャンネルもたくさんあります。