string(4) "blog"

CONTENTS

2021.5.30

Adeleのリポジトリデータから見るデザインシステムのトレンド

written by 宮崎 聡史

Adeleとは?

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/b2924277-2341-415b-b52c-472c6e1d2729/_2021-05-27_14.55.11.png

Adele by UXPin

AdeleはUXPinが提供している、現在公開されているデザインシステムとパターンライブラリを集めたオープンソースリポジトリです。
全部で100個のデザインシステムとパターンライブラリの情報を一覧表で見ることができます。

このように広範囲に渡ってデザインシステムの情報が集められ、まとめられているサイトもなかなかありません。
作成されたのは2018年ですので多少古く、更新されていないデザインシステムも含まれていますが、それでもデザインシステムの貴重な情報源であることには違いありません。

Adeleでは公開リポジトリの種類や使用言語、コンポーネント、デザイントークンの有無など30種類の切り口で検索できるようになっています。
この検索を使ってこれから作成するデザインシステムと類似のデザインシステムを検索して参考にすることもできますが、本記事ではAdele上の情報を分析してみることで、デザインシステムのトレンドなどについて考えていきたいと思います。

ガイドライン

ブランドガイドライン

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/3fd2296e-db45-44a9-a5d4-3fbd7b4897b9/_2021-05-27_15.47.36.png

ブランドのガイドラインを定義しているデザインシステムは29%でした。
UIコンポーネントレベルのデザインを超えて、ブランドのガイドラインまで定義しているものは三分の一程度ということですね。

デザイン原則

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/faeb110e-8eb6-4ea6-b4e0-a83f538d8272/_2021-05-27_15.57.50.png

デザイン原則を定義しているデザインシステムは39%でした。
デザイン原則の定義となると、ブランドガイドラインよりは増えて4割程度になります。
Adeleにはパターンライブラリも含まれていることを考えると、デザイン原則を定義しているデザインシステムが多いと考えられます。

アクセシビリティガイドライン

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/febd78aa-4beb-4e36-b759-642d52213d54/_2021-05-27_16.00.23.png

アクセシビリティガイドラインをデザインシステムに定義しているのは35%でした。

ボイス&トーン

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/0af54eac-c928-4bcf-890f-02690495ed2f/_2021-05-27_16.29.49.png

ボイス&トーンをデザインシステムに定義しているのは33%でした。

デザイン

タイポグラフィ

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/ca94b155-27a3-4b55-8f25-533b479d0c48/_2021-05-27_15.49.35.png

タイポグラフィを定義しているデザインシステムは90%で、ほとんどすべてのデザインシステムにタイポグラフィの定義はあるようです。

データビジュアライゼーション

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/95e2b470-7d80-479d-85fc-2af4cc680691/_2021-05-27_16.26.09.png

データビジュアライゼーションをデザインシステムに定義しているのは19%でした。
グラフなどのデータビジュアライゼーションのためのUIの定義をデザインシステムに入れているものはそれほど多くなさそうです。

アニメーション

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/f8c161b5-c0b4-4820-884f-f2cdea3997b1/_2021-05-27_16.27.40.png

アニメーションをデザインシステムに定義しているのは28%で、これは意外と多いのではないかという感覚がします。
デザインシステムとしてUIを定義するならアニメーションまで定義したいという気持ちがありそうな気はします。

デザインツール

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/43dac5d5-69d0-4fcc-a1be-26ac81d1ea4d/_2021-05-27_15.52.21.png

デザインデータとして提供されているデザインツールとしては、Sketchが32%、次にAdobe XDが4%でした。
今後、Adobe XDやFigmaが増えていくかもしれませんが、現状はSketchが大半のようです。
デザインツールのファイルを提供していないデザインシステムも半分近くあります。
公開されているデザインシステムは実装済のコンポーネントを利用してもらうという面もあるので、デザインのソース自体は公開しないということもありそうです。

利用技術

公開リポジトリ

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/d8b3b617-0304-406c-a899-cd937ef180ee/_2021-05-27_15.21.28.png

デザインシステムのソースコードを公開しているリポジトリは78%がGitHubでした。
デザインシステム内だけでコードサンプルを参照できるだけでなく、GitHubなどでも同時に公開するというところがほとんどのようです。
GitHubの内容を見てみると、ソースコード以外にもテストやプロジェクトの設定ファイルが含まれていたり、UIコンポーネントのコード以外のファイルも合わせて公開しているところが多かったです。

パッケージ管理システム

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/d54a4fde-5757-43e4-b285-1c80671ca6bd/_2021-05-27_16.16.47.png

デザインシステムの実装コードのパッケージ管理システムへの公開先としては、npmが最も多く62%、次いでyarnで7%でした。
公開先としてnpmが最も多いというのは納得感がありますが、意外だったのは8割ほどのデザインシステムが何らかのパッケージ管理システムを使って公開しているということでした。
ソースコードをGitHubで公開しているデザインシステムが多いので、そのままnpmにも公開ということが多いのかもしれません。

デザイントークン

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/2a704290-84d8-427c-bf9c-0f153753c2b0/_2021-05-27_16.07.50.png

デザイントークンを定義しているデザインシステムは合わせると35%ほどでした。
定義の方法は様々ですが、Sass、SCSSなどCSSに組み込む形にしているものと、JSON、yamlなどデータとして定義しているものがあるようです。

Code Depth

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/d7fd0dae-2e90-422e-88d8-61d1462737e0/_2021-05-27_15.25.16.png

HTMLとCSSのみが17%、HTMLとCSSとJSで実装されているのが68%でした。
次の項目とも関係しますが、ReactなどのJSフレームワークも多く使われていますので、68%のうち半分以上がJSフレームワークで実装したUIコンポーネントを登録していると思われます。

JSライブラリ・フレームワーク

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/d0292c74-ae79-4741-bfe9-6cc6a92d5713/_2021-05-27_15.34.44.png

「no」と「Vanilla」を合わせるとフレームワークを使っていないものが約30%、Reactが44%、Vue.jsが3%、Angularは5%でした。
Reactが圧倒的に多いという結果で、Vue.jsがかなり少ないのが意外でした。
Vue.jsはもう少し使われている感覚でしたが、デザインシステムという領域ではVue.jsはまだ使われていないということかもしれません。
jQueryもまだ6%程度使われていますね。

Typescript

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/5052a55d-a9aa-4cea-a925-d0eef9121cd8/_2021-05-27_15.40.06.png

Typescriptが導入されているのは17%で、こちらは思ったより使われているなという感じがします。

Storybook

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/c35630d7-44d1-47f6-85aa-7a19089f1464/_2021-05-27_15.43.18.png

UIコンポーネントの表示にStoryBookを導入しているのは22%でした。
UIコンポーネントをデザインシステムの中でどうプレビューさせるかというのは悩ましいところですが、Storybookはスタイルガイドとしては普及しているものなので、デザインシステムでも採用しているところが多いということかと思います。

まとめ

いかがでしたか?

いざデザインシステムを作ってみようと思ったときに、デザインシステムって具体的にはどう作ればいいんだろう? と思うことがあると思います。
今公開されているデザインシステムをこのようにデータとして眺めてみると、ガイドラインとしてどんなコンテンツを用意したらいいの? 公開先は? UIコンポーネントはどんな技術を使って実装するべき? などの方向性がおぼろげながらでも見えてきたのではないでしょうか?
全体の傾向を参考にしつつ、デザインシステムを適用しようとしているプロジェクトにどのようなコンテンツや技術がマッチするのかを検討し、それと類似のデザインシステムをAdeleで検索して参考にすると、デザインシステムの骨子の部分を作る役に立つのではないかと思います。

エンジニアとしても普段のプロジェクトで使っている技術が、デザインシステムの領域ではどの程度普及して利用されているものなのかが見えてきて、なかなか興味深かったです。

この記事の情報がデザインシステム構築の参考になれば幸いです。

また弊社では「デザインシステム作成・運用サービス」と、デザインシステムを効率的に作成し、共有するためのプロダクト「UXHub」を提供しています。

もしご興味があれば、お気軽にご相談ください。

一覧に戻る
お問合わせ