一人から始めるデザインシステム

t_keshii

2022年9月20日 07:15

あとちょっとで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：進行中の取り組み)の精神で、運営します。

SmartHR Design Systemの運営理念
（https://smarthr.design/concept/operate-policy/）

WIPの精神、素晴らしいですね。
染みる言葉だ……。

デザインシステムと聞くと、ついつい私たちは身構えて、大仰なものだと思ってしまいがちです。
そうして結局、作らなかったりするのです。私のように。

でも、もうちょっとラフに考えてもいいのかもしれません。
適当なものでも、とりあえず作ってみれば、誰かが途中で「もっと良いものにしょう！」と乗っかってきてくれるかもしれません。
「なんか同僚が新しい取り組みを頑張ってるみたいだから、俺もちょっと力を貸してあげよう！」と応えてくれるかもしれません。
でも、こんなことのすべては、「えいや！」と誰かが先陣を切って何かを始めなければ起こり得ない化学反応です。

つまり、どんなにいいかげんなものでも、存在しないよりはきっとマシなのです。
とりあえず始めてみる精神、適当なものでいいから作ってみる精神は、絶えず忘れないでいたいものです。

デザインシステムの敲き台

ドキュメントの準備

そういうわけで、とりあえず敲き台を作ってみることにしました。
調べた限りだと、デザインシステムを作るためのツールとしては「Zeroheight」が定番となりつつあるようです。
既出のSmartHRさんのデザインシステムもZeroheightを使ったものですし、CloudSignさんもZeroheightを使ってデザインシステムを製作中のようです。

それでは、先行の2社を模倣して、Zeroheightを使ってデザインシステムを作っていきます。

といっても、Notionみたいに直感的に使えるツールだったので、これにはほとんど苦労しませんでした。

まず、エンジニアの作っているStorybook（コードで実装されたコンポーネントのカタログのようなもの）をポチポチZeroheightに貼り付けていきます。

Storybookの貼り付けは、＋ボタンを押して「Code」を選択すれば行うことができるようです。