デザインシステムの何がすごいのか

デザインシステムの構築・運用のスキルを習得していくにあたって、まずはデザインシステムがどんないいことがあるのかを知る必要があります。

デザインシステムの何がそんなにすごいのかと問われた時にパッとそれがわかる動画をAmebaさんが公開しています。

フロントエンドエンジニアやUIデザイナーといった画面周りの業務に日々携わる方ならわかると思いますが、デザインシステムを使うことで、生産性が圧倒的に上がるということが容易に理解できることと思います。

あくまで、動画内の画面実装の場合であって、現実的には単純に推しはかれるものではないですが、デザインシステムを活用したものとそうではないものとで、画面の実装にどれほど生産性の違いが出るかを比較した動画で以下のような結果となりました。

• デザインシステムを活用したものが完成まで23分25秒
• 活用していないものが完成まで1時間10分15秒

つまり、この例では単純計算でデザインシステムを活用することによって、画面開発における生産性が3倍近く向上することがわかりました。

おそらく、こうしたメディアでの発信によって、「どうやらデザインシステムを作ると生産性が上がるらしいぞ🤔」という情報を得た組織が、デザインシステムを構築・運用できる人材を求めてだしたことが背景となって需要が高まってきているようです。

デザインシステムの学び方

ということで、デザインエンジニアはもちろんUIデザイナーやフロントエンドエンジニアにとっては、デザインシステムを構築・運用できるということが人材市場においての優位性となりつつあることがわかったと思いますが、「そうは言ってもデザインシステムなんてどうやって学んでいけばいいんだ…」となってしまうと思うので、ここでは日々デザインシステムに携わっているデザインエンジニアとしての経験も踏まえてデザインシステムを習得するための方法について扱っていこうと思います。

実践

「走りながら武器を拾う」ではないですが、デザインシステムも基本的にこの要領で習得していくのがオススメです。

後に書籍も紹介していくつもりですが、いきなり体系立てて学ぼうとするよりも、今すぐに必要なものの方が頭に入ってきやすい傾向にあります。

なので、まずは手を動かしてみながら足りない知識を書籍で補うというステップで進めてみましょう。

では、習得していくにあたって実際にどう手を動かしていくのかという話になるのですが、2種類あります。

どちらの方法を選ぶのも、あるいは両方試してみるのもいいと思います。

1. 組織のデザインシステムを構築・運用してみる
2. 個人開発のプロダクトを開発しながらデザインシステムを構築・運用してみる

それぞれ開発をしていきたいと思います。

1. 組織のデザインシステムを構築・運用してみる

これが1番身につくし実績としても市場に受け入れられやすいとは思うのですが、組織の体制として既に専任の方がいたり、忙しくてデザインシステムを作っている余裕がなかったりということが往々にしてあると思います。

こうした場合に重要なのはまずは小さく始めるということです。

デザインシステムはいきなり完璧に作り込もうとする必要はありません。

デジタル庁などの有名なデザインシステムを見ていると、自分も完璧なデザインシステムを作りたいと思うかもしれません。

私もそう思い込んでいました…

ですが、今はこうして高いレベルで仕上がっているデザインシステムも、おそらくスタート時点では必要だったボタンやフォームから始まったはずなので、完璧に作り込んでみたものの全然使われないというものではなく、未完成でもすぐに使えて役立つデザインシステムを目指しましょう。

専任の方が既にいるなら、自分がデザインや実装の段階で必要になったものを提案してみたり、作らせてもらったりしてみるところからはじめるのが良いでしょう。

また、忙しいから作れないのはデザインシステムがはないから忙しくなってしまっている可能性が高いので、まず必要なところから少しずつ作ってみることを意識して行動してみるのがおすすめです！

2. 個人開発のプロダクトを開発しながらデザインシステムを構築・運用してみる

組織内ではどうしてもデザインシステムまで手を伸ばせない事情や制約があるかもしれませんが、個人開発なら自由です。

既存のデザインシステムを模倣しながら、デザインシステムを作ってみるのもいいし、自分なりに考案したデザインシステムを構築・運用してみるのもいいでしょう。

そして転職市場においても、こだわったポイントや苦労した点などが話しやすくなるでしょう。

さらに、自分で開発・運営しているプロダクトなので何に課題を持って、どういったフィードバックを受けて改善してみたといった経験も評価されやすいでしょう！

書籍

一度自分で手を動かして作ってみたら、もしくは作ってみながら書籍で体系的に学ぶことで知識が身につきやすくなります。

ここでは実際にデザインシステムを学ぶ際に役立った書籍を4冊紹介します。

1. ちいさくはじめるデザインシステム

SmartHRのデザインシステムの立ち上げ前から、現在までの取り組みを実例としてあげながら、デザインシステムの構想・構築・運用について解説されている一冊。

SmartHR社はFigmaでのデザインシステムのファイルを公開しているので、そちらと見比べながら学習することができます。

2. Figma for デザインシステム

Figmaを使ったデザインシステムの構築方法が学べるチュートリアル本で、「デザインシステムとは何か？」というところから始まり、実践を通して「どのように作るのか？」までを学べる一冊。

現代のデザインシステムはFigmaで作られることが多く、募集要項にもFigmaの経験が問われる企業が多いことからもデザインシステムの構築・運用にはFigmaが広く採用されている様子が窺えるので、デザインシステムを学ぶならFigmaの使い方も学べるのは非常に有益。

3. Design Systems

Airbnb、Atlassian、Eurostar、Sipgate、TEDという規模の異なる5社への調査から、効果的な構築&運用の方法がまとめられた一冊。

構成としては基礎と応用に分かれており、入門から実務での活用まで長く学び続けることのできる印象。

4. デザインシステムの育て方

デザインシステムの専門家として世界有数のブランドで導入・運用を成功させてきた著者が、それぞれの組織で「実践としてのデザインシステム」を採用し、成長させ、維持していくための方法が解説された一冊。

2024/8/28に発売されたばかり。

デザインシステム関連の書籍はプログラミングの技術書やデザイン書などと比較すると、まだまだ少ないので、現状出ている4冊程度は全て買っておいて損はないでしょう！

Webサイト

サイトもあります。

本当は冒頭に紹介したAmeba SpindleやSmartHR Design Systemのように優れたデザインシステムをそれぞれ紹介していきたいところなのですが、あげるとキリがないので、今回はそんな優れたデザインシステムをいくつも掲載しているサイトをいくつか紹介していきたいと思います！

Design Systems Database

AmazonやAppleなど海外の有名テック企業のデザインシステムが掲載されているWebサイト。

企業別以外にもアクセシビリティ、カラーシステム、アイコンなど要素別にデザインシステムを見ることができて非常に勉強になります。

The Component Gallery

こちらは企業ベースではなくUIパターンベースでアコーディオンやボタンなど、おおよそデザインシステムには必須のUIが企業ごとに紹介されているWebサイト。

おもしろいのはUIコンポーネントをフロントエンドでどの技術を採用しているのかまで掲載されているのも参考になります。

Design System Hunt

全部で147のデザインシステムが紹介されているWebサイト。

数が多いので、時間がある時やイメージに近いものを探す時にぴったり。

国内からもCookpadが掲載されています！

まとめ

今回はデザインシステムの習得についてでした。

デザインエンジニアはもちろん、フロントエンドエンジニアやUIデザイナーがなぜデザインシステムを学ぶ必要があるのかを理解して、具体的にどのように学んでいくのかをわかっていただけたかと思いますので、ぜひこの機会に学んでデザインシステムの構築・運用のスキルを習得することをおすすめします！

関連記事にはデザインシステムを習得して、デザインエンジニアとしてのキャリアアップに役立つ記事を掲載しておきますので、併せて読んでみてください！