日本三大デザインシステムについて雑に感想をまとめる
t_keshi日本で公開されているデザインシステムの中でもとりわけクオリティの高い(と勝手に私が思っている)ものについて、感想を雑にまとめる。
対象のデザインシステムは以下の三つ。
- Spindle
- Charcoal
- SmartHR Design System
| デザインシステム名 | UIコンポーネントライブラリ名 | 会社名 or サービス名 |
|---|---|---|
| Spindle | Spindle UI | Ameba(サイバーエージェント) |
| Charcoal | Charcoal UI | Pixiv |
| SmartHR Design System | SmartHR UI | SmartHR |
t_keshiSpindle
URL:
GitHub:
Storybook
デザインに関する視点
さすがAmeba。
操作性が気持ちいいというか、触っていて中毒性のあるUIだ。
特にカルーセルの完成度がやばい。
ずっと触っていたくなる。
文字色のHEXコードは#08121aで、ほんの少し青みを帯びた黒色になっている。
これは#000000(完全な黒色)を使ってしまうと、プライマリカラーの緑色とのコントラストで、赤っぽい黒に見えてしまうかららしい。
黒色が本当に黒色であるためにほんの少し青くするという、非常に考え抜かれたデザインである。
実装に関する視点
Reactと非常にプレーンなCSSによって実装されている。
いわゆるBEM記法と呼ばれるものだが、ここまで綺麗に書かれていると、プレーンなCSSもそんなに悪くないと思えてくる。
昨今はCSS-in-JSのパフォーマンスにおけるデメリットが問題視されており、特にAbemaのようなC向けのプロダクトとなると表示速度の重要性は上がる。
「今どき素のCSSって...」と思う人もいるかもしれないが、これは解決すべき課題に対して妥当な技術選定なのではないだろうか。
その他には、lernaというビルドシステムを採用している点も面白いと思った。
アクセシビリティに関する視点
アクセシビリティはシングルAに一部準拠だという話を聞いた。
最新の情報かどうかはわからない。
t_keshiCharcoal
URL:
GitHub:
Storybook
デザインに関する視点
CharcoalもUIが気持ちいい。
特にボタンは、なんだかとても押したくなる押したくなるコンポーネントだ。
独自のアイコンもポップでかわいい。
実装に関する視点
個人的に実装が一番面白いと思ったのがCharcoal。
style agnosticというか、CSS-in-JSでもtaiwindでもOK、なんでもござれという懐の深い実装になっている。
この点について、ガイドラインにも、
「charcoal（木炭）」とはデッサンの道具であり、線を引く、表現の基礎となる素材の一つです。また創作物を主役とするサービスの基盤として、それ自体は色を持たないモノクロの素材である、というニュアンスも含みます。
と書かれている。
同じ会社でもプロダクトごとにテーマカラーが違うとかはよくある話なので、この発想が素晴らしいと思った。
テーマカラーは違うけど、それ以外のトンマナは揃えたい、みたいなとき役に立ちそう。
アクセシビリティに関する視点
適合レベルは不明だが、アクセシビリティに関してはかなり配慮されているように感じた。
react-ariaを使っているらしい。
キーボードなどでの操作も十分可能である。
t_keshiSmartHR
URL:
GitHub:
Storybook:
Figma:
デザインに関する視点
B向けに洗練されたデザインだと思う。
いわゆる「イカしたデザイン」ではないかもしれないが、別に「イカしたデザイン」を作ることが目的ではない。
B向けにやるなら、とにかくわかりやすくしなければならないと私も日々感じている。
文字も表示も全体的にハッキリしていて、誤解を与えないように配慮されている。
例えば、必須項目のレベル。
「パスワード*」となっていた場合は、「*がついているから必須項目だ」というのは、我々がITについて一定の知識があるからこそ共有できている、いわば”暗黙の了解”である。
たぶんSmartHRのターゲット層にも入ってくるであろう非IT業界の団塊世代のユーザーだったすると、この前提が案外、共有できていない場合もある。
敢えて明示的に「パスワード(必須項目)」と書かないと伝わらない。
このようなわかりやすさへの配慮という点で、SmartHR UIは非常に優れていると感じる。
実装に関する視点
Reactとstyled-componentsによって書かれている。
コンポーネントの汎用性が、えげつないくらい高い。
見ればわかる、練り上げらている...
SmartHR UIは、「SmartHRのプロダクトすべてで使われている、のみならず、Nstockでも採用されている」という話を聞いたことがある。
(Nstockというのは、SmartHR創業者・宮田昇始氏が新しく立ち上げたスタートアップ)
このように、"ちゃんと使われているデザインシステム"にすることに成功した背景には様々な要因がありそうだが、その一因はコンポーネントの汎用性の高さにもありそうだ。
また、SmartHR UI を利用した UI パターン集などもあり、UIを使う実装者が迷わないように工夫されている。
どの辺が汎用性が高いかというと、ボタンのアイコンは文字の前にも後ろにも配置できたり、Fieldsetもフォームのあらゆる要件に対応できそうだ。
こんなコンポーネントを使って実装ができたら、仕事は早く終わりそうな気がしてならない。
アクセシビリティに関する視点
a11yについては、Lintの設定がかなり細かく入っている。
ただ、Dropdownはキーボードの上下キーで操作すると画面が動いてしまうなど、完璧ではない部分は多少はあるかもしれない。
また、aria-labelについてもいくつか気になる点があった。
しかし、現在、力を入れて取り組みされていて、シングルAに全準拠を目指しているという話も聞いた。(すでに達している...?)
勝手ながらとても応援している。
t_keshiまとめ
(コードを)見ればわかる、お前の強さ。
練り上げられている、至高の領域に近い...。
とにかく三社とも読んで勉強になるコードなのは間違いない。
エンジニアのレベルが非常に高いことが伝わってきた。
読みながら内心(おぉ...すげぇな...)と、なんだかワクワクしてしまった。
もし自分で作るなら...?
「もし自分でデザインシステムを作るなら...?」という視点で考えた場合、三社のうちどのアプローチを取るかという視点で考えると、個人的には”Charcoal”かもしれない。
理由としては、単純に、SmartHR UIのようにフルスクラッチで開発できる時間的余力がない。
また、自分なら、ヘッドレス系のUIライブラリを用いるなどをすることで、実装コストを下げてみたいと思う。
やはりフルスクラッチでa11yまで完璧に対応しきるのは不可能かもしれない...と、三社のコードを読んで感じたからだ。
ただ、ライブラリを用いると、その分自由度は下がるかもしれない。
このテーマについては、またいつか、追って検討したい。
Further Reading
以下の対談も面白かった。
LINE✖️SmartHR✖️メルカリ