あんまり推されてなさそうだけど、個人的に推してみたいデザインシステム
Goodpatchのブログでデザインシステム愛にあふれる記事が公開され、どれも僕もよくチェックするデザインシステムばかりでした。数多ある事例からピックアップされたものかと思いますが、このnoteでは他であんまり触れられてなさそうなデザインシステムを推してみようかとおもいます。
Zendesk Garden
Gardenはカスタマサービスのプラットフォーム、ツールであるZendeskのデザインシステム。Zendeskは元々数年前から知っていて、こんな自然感のあるトンマナ、雰囲気よりはもっとエンタープライズ製品のような冷たい印象だったような気がしますが、今はGardenで表現している印象としてのブランド感やデザインがサイトにも反映されているようです。
僕が好きなところは、他の著名で情報の充実したデザインシステムよりも圧倒されない適度な情報量や設計です。あわせて落ち着いたトンマナが単純に好みなのもあります。あともうひとつ大きなポイントがコンテンツガイドラインです。カスタマサービスに関わるサービスということもあるかと思いますが、言葉・ライティングをとても大事にしている印象です。特にVoice and Toneにあるマッピングは「どういうときに、どのように伝えるか」の可視化イメージとして参考にしたいところです。
Twilio Paste
クラウドコミュニケーション、メッセージングプラットフォームのTwilioのデザインシステム、Pasteの好きなところはその名前です。調べた限り「なぜPasteという名前なのか」は書かれていないものの、Pasteそのまま使えばいい（=コピー&ペーストすればいい）という印象があって、その自信っぷりが気に入っています。例えば About Pasteのページではこう書かれています:
Accessible by default. As a principle, the design systems team does not ship a component, primitive, or composition if it does not meet or surpass our target of WCAG 2.1 AA Compliance.
WCAG 2.1 AAを満たすか上回っていないと出さない、と言えるのはすごい。Inclusive Design Guideというコンテンツもあり、アクセシビリティへの意思が強いのだと感じます。その他トップページのビジュアルデザインも雰囲気がありますし、はじめてアクセスした人にも優しい情報設計になっていると感じます。読んでおくべきページ、よく使われるコンテンツ、ちょっとした埋め込みのデモといったものです。
Okta Odyssey
アクセス管理プラットフォームのOktaのOdysseyはアクセシビリティドリブンで作られたとありますが、各コンポーネント等の項目でアクセシビリティに関しての言及があります。
他のデザインシステムやガイドラインで見ないものとしてElementsという項目があります。ここでは特有のコンポーネントの話ではなく、HTMLのプリミティブな各要素とマークアップについて、Oktaでどう使うかのサンプルとあわせて説明しています。HTML StandardやMDNといった技術系の文書に委ねず、あえて自分たちのところで具体的に例示するというのはHTMLの品質を悪くしないために良いやり方だと思いました。
全体的に「どう使うのか」がわかるようなヒントやガイドが多いのも好感が持てます。個人的にはColorでのそうしたガイドが細かく、色ごとのDoとDon'tが書かれていることに感心しました。また「どう作られているか」というのも各コンポーネントではAnatomyとして説明されています。
他にも色々推しはありますが
今回はとりあえず３つ。個人的に気になるデザインシステムはNotionで収集しています。あまり個別にメモなどを残せていないですが、たまに更新していくので気が向いたら覗いてみてください。
明日の元気の素になります。