一人から始めるデザインシステム
あとちょっとで9月も終わり。
もうそろそろ10月。
10月といえばオクトーバーフェス。
オクトーバーフェスといえばビール……
いつか、ビールでも飲みながら、軽いノリでデザインシステムを作ってみたいものです。
と、思い立ったが吉日、、
デザインシステム事始め
今日は、そんな軽いノリからユルく始めてみるデザインシステムの話です。
エンジニアの視点から、具体的にどのように作成を進めていけばいいのか、ということについて書いていきます。
とはいえ、デザインのことについては全くの門外漢でして、「そんなのデザインシステムじゃねぇ！！」と怒られそうな内容になっているかもしれません。
その辺りはご了承ください🙏
デザインシステムがなくて困ること
まず、「なぜデザインシステムを作るか」ということについては、デザイン✖️エンジニアリング領域のパイオニアともいえるSeyaさんが良記事を書いてくださっています。
さらに、自分自身、実務をこなす上でエンジニアとしてデザインシステムが欲しくなる事態が生じてきました。それは次の3つです。
①情報がストックされない
エンジニアがデザインをコードに落とし込んだ実装を、定期的にプロマネやデザインチームに見せて、齟齬がないかチェックしてもらう機会があります。
そこでは、こんな指摘が例えばデザイナーさんから出てきます。
「ダイアログの右上には、必ず✖️のアイコンをつける形で統一しましょう！」
なるほど、大事な指摘です。こうしたUIの統一感はキッチリしておきたいものです。
しかし、デザインのルールを貯めておく場所がなかったので、このような指摘があった事実すらすぐに風化してしまいそうな機運がありました。
②パターンが見えない
同じようなコンポーネントなのに、Aの画面では色が"rgba(0, 0, 0, 0, 0.16)"なっていて、Bの画面では"rgba(0, 0, 0, 0, 0.34)"になっている….。
そんな実装のブレに出会う機会が多くなってきました。
どちらかが正しく、どちらかが間違った実装なのですが、エンジニアからするとパッと見で区別はつきません。
FigmaなりSketchなりを見にいけば良いではないか、と思うかもしれませんが、該当のコンポーネントを見つけるのはなかなか手間です。
こういうときもやはり、「ここを見ればすべて丸わかり！」みたいなデザインのパターンを網羅した一覧表があったら便利だなー、などと思ってしまいます。
③同じスタイルが散り散りに書かれている
なんだか、この頃、既視感のあるCSSと出会うことが多くなってきました。
例えば、ドロップダウンのコンポーネントの色を微妙に変化させる同じようなスタイルですが、Aの画面でもBの画面でも同じCSSが書かれていて、「あーこれ無駄だなー」と。
できれば、一度書いたCSSは二度書きたくありません。
ちゃんとアプリケーションを構成するパーツを定義して、パーツを使い回すことで実装を進められれば、今よりずっとスピーディーかつ楽ちんに開発できる気がします。
そのためには、デザインシステムがあると捗りそうです。
WIPの精神で始めるデザインシステム
そういうわけで、これってひょっとしてデザインシステムがあれば解決するんじゃない…?、などと思いついたのが約半年前です。でも、
「デザインシステムの意義や必要性は身に染みて感じるけど、果たして実際にどう作っていけばいいのか…?」
それがあまりにも難しいそうに思いました。
悲しい哉、難しいことを人は先延ばしにしてしまうものです。
そういうわけで、ずいぶん前に思い立ったのですが、最近までデザインシステムに関する取り組みは何もしてないという状況でした。
そんな中、あるデザインシステムに出会います。
それはSmartHRさんのデザインシステムでした。
WIPの精神で、すばやい提供を最優先します
SmartHR Design Systemには、書きかけのコンテンツや内容が不足している箇所があります。
これは、いっときの整った完成を目指すのではなく、目の前の課題を解決するために、小さくてもすばやい提供と改善を続けているからです。
「社会の非合理をハックする」をミッションとする私たちのサービスは、常に改善を続け、完成することはありません。
SmartHR Design Systemもまた、小さな改善をすばやく繰り返し、更新を続けます。
未完成の状態を恐れずに、課題の解決を優先するために、WIP(Work In Progress：進行中の取り組み)の精神で、運営します。
（https://smarthr.design/concept/operate-policy/）
WIPの精神、素晴らしいですね。
染みる言葉だ……。
デザインシステムと聞くと、ついつい私たちは身構えて、大仰なものだと思ってしまいがちです。
そうして結局、作らなかったりするのです。私のように。
でも、もうちょっとラフに考えてもいいのかもしれません。
適当なものでも、とりあえず作ってみれば、誰かが途中で「もっと良いものにしょう！」と乗っかってきてくれるかもしれません。
「なんか同僚が新しい取り組みを頑張ってるみたいだから、俺もちょっと力を貸してあげよう！」と応えてくれるかもしれません。
でも、こんなことのすべては、「えいや！」と誰かが先陣を切って何かを始めなければ起こり得ない化学反応です。
つまり、どんなにいいかげんなものでも、存在しないよりはきっとマシなのです。
とりあえず始めてみる精神、適当なものでいいから作ってみる精神は、絶えず忘れないでいたいものです。
デザインシステムの敲き台
ドキュメントの準備
そういうわけで、とりあえず敲き台を作ってみることにしました。
調べた限りだと、デザインシステムを作るためのツールとしては「Zeroheight」が定番となりつつあるようです。
既出のSmartHRさんのデザインシステムもZeroheightを使ったものですし、CloudSignさんもZeroheightを使ってデザインシステムを製作中のようです。
それでは、先行の2社を模倣して、Zeroheightを使ってデザインシステムを作っていきます。
といっても、Notionみたいに直感的に使えるツールだったので、これにはほとんど苦労しませんでした。
まず、エンジニアの作っているStorybook（コードで実装されたコンポーネントのカタログのようなもの）をポチポチZeroheightに貼り付けていきます。
Storybookの貼り付けは、＋ボタンを押して「Code」を選択すれば行うことができるようです。
あとは、一番右側のStorybookをクリックです。
そんなこんなして、ボタンのページはこんな感じ↓になりました。
おお！
素人が作ったにしては、意外とそれっぽい…?（いやそうでもない…?)
これにデザインルール的なものも加えていきます。
悪くない感じですね。
（Figmaの操作に慣れていないエンジニアが作ったので、左側と右側でボタンの間隔が違うという点は、目を瞑っていただけると嬉しいです。）
デザイントークン
Zeroheightを使ってお手軽にデザインシステムの準備が進められましたが、デザインシステムはドキュメントを書くことだけではありません。
デザインとコードの実装の間にいかようもなく生じてしまうギャップを、不断の努力で埋めていかければなりません。継続が必要です。
また、デザインシステムを腐らないものにするためには、デザインとエンジニアリングをつなぐ仕組みづくりが必要です。
そこで、デザイントークンが登場します。
ところで、デザイントークンとは、一体なんなのでしょうか？
ここでまたまたSeyaさんの記事を参照します。
どうやらデザイントークンとは、デザインの最小単位の小さなピースのようです。
色や余白、タイポグラフィーやスケールなどのパターンを「トークン」として定義してあげることで、色々なところで使い回すことができます。
では、具体的にどのようにデザイントークンを作っていくか…、
と考えていたところで、こんな記事が目に止まりました。
これはありがたい記事。
というわけで、Figmaで色やタイポグラフィーのパターンをリスト化したものを作成しながら、随時、FimgaTokensにトークンとして追加していきます。
Figmaのコンポーネントの色を変えたりするときに、先ほど登録したトークンを使用できます。
さらに、エンジニアが書いたコードを管理しているツールであるGitHubに、Figmaトークンから、コードの変更依頼を投げることもできます。
エンジニアは、デザイナーさんから届いた新しいデザイントークンを確認して、OKなら変更をそのまま取り込むだけ。
デザイナーさん主導で、プロダクトで実際に動いているコードに見た目の変更が加えられます。
それに、エンジニアだってだいぶラクができます。
なるほど、便利だ…。
俺たちの戦いはこれからだ！！
そんなこんなで、Zeroheight＆Figma Tokenを使ってデザインシステムの構築を進めていきました。
今回作成したものは、こちら↓で公開しています！
https://zeroheight.com/0c15e4312/p/12e9d6-design-system-starter-kit
また、今回の記事に出てきたコンポーネントのカタログ、Storybookも閲覧できる状態にしておきました。こちら↓も併せて、ぜひ。
https://main--6327e299b25d28bf5e435580.chromatic.com/?path=/story/introduction-welcome--page
一人で作ったデザインシステムなので、雑さはかなり否めないですし、こんなのとてもデザインシステムと呼べる代物ではないかもしれません。
でもとりあえずは、デザインシステムの敲き台として活用いただければと幸いです🙇♂️
…とはいえ、
俺たちの戦いはこれからです。
まだ無茶苦茶ざっくりなデザインシステムの敲きができただけであって、具体的には何も決まっていませんし、デザインシステムの運用が軌道に乗ったとかでも到底ありません。
これから、「デザインシステム、作って正解だったね！」となるか、あるいは「やってみたけど、正直うまくいかんかったわ」となるか、はたまた「いやそんなの、やる時間なくて無理〜」となってしまうか。。
それは今後の我々の頑張り次第なのかもしれません。
ということで、
「一人から始めるデザインシステム」
でした！！
目に留まったら、気軽に試していただけると幸いです。
最後までお読みいただきありがとうございました🙏