arrow一覧に戻る

2021.05.30

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

Adeleとは?

 

Adele by UXPin

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

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

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

ガイドライン

ブランドガイドライン

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

デザイン原則

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

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

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

ボイス&トーン

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

デザイン

タイポグラフィ

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

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

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

アニメーション

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

デザインツール

デザインデータとして提供されているデザインツールとしては、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コンポーネントのコード以外のファイルも合わせて公開しているところが多かったです。

パッケージ管理システム

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

デザイントークン

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

Code Depth

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

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

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

Typescript

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

Storybook

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

まとめ

いかがでしたか?

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

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

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

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

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

この記事を書いた人

宮崎 聡史 フルスタックエンジニア

工業大学機械工学科卒。FA通信機器のサービスエンジニアを経験後、Web業界へ。Webサイトの作成から始まり、デザインとUXにこだわったアプリケーション開発も多数行う。 ハードウェアの背景を持ちながら、デザインからフロントエンド、バックエンドまでの幅広い領域をカバーする。 Fixelでは、デザインされたUI/UXのアプリへの実装、およびUXHubの実装を担当。

Contact

どのようなお悩みでも
まずはお気軽に
ご相談ください

arrow

Careers

柔軟で先進的な思考を持った
デザイナーやエンジニア、
コンサルタントを募集しています

arrow

Copyright© Fixel Inc. All rights reserved.