Yasuhiro Yokota Today

Design System, Design Tokens

February 3, 2023

Last edited time

Jan 31, 2023 04:20 PM

デザインシステムを考える

目指すすがた

デザインデータとコードデータが完全一致する

Atomic Designを採用

Atomic Designを採用するプロジェクトにいくつか参加してみて、すぐ気づくのは、

アトミックデザインは UI をコンポーネントに分け現車男子といったメタファーに分けることで流動をある程度クラス化しながらコンポーネントを組み立てることができる管理手法である

アトミックデザインは極めて厳格なフレームワークであるかのような印象を受けるが実際に構築する時には様々な運用上の津波がある

Atomic Designは原典によれば、Atoms, Molecules, Organisms, Templates, Pagesといった階層にわけられるもの。

きれいにいえば、

Atoms: 細分化不可能なもの

Molecules: Atomsを組み合わせたもの

Organisms: Moleculesを組み合わせて、なんらかの機能をまとめたUI

Templates:

Pages: 画面全体を構成する入れ物で、やはりまだデータは入っていない

コンポーネントは抜け殻に接するべきである

基基本的な思想としてコンポーネントは特定のコンテンツに依存したものであることを極力避けるべきであるというのも例えばコンポーネントが生まれると状態では特定のドメインや意図によってその存在意義が発生するということはよくある

しかしその時に必要な用途のために最適化されたコンポーネントを一度作成すると、もし将来また再利用性がその用途で使いたくなった時に困る

かといって授業のための開発をしている現場ではポンポネットの再利用性を高めるための開発というものにはリソースが咲きにくいものであるのが常である

汎用とドメイン

。マイベストでは汎用とドメインという概念を導入した。

、これはコンポーネントが生まれた時にそれが汎用的なものつまりあらゆる用途で使うことが想定されるものか。あるいは特定のドメインで活用されることを想定したものかをはっきりするということである。

あらかじめディレクトリを分けて宣言的につまり面性のあるコンポーネントと汎用的なコンポーネントでは根本的に設計のスタンスが異なる。

この違いはコンポーネントにどのような名前やpropsを持たせるかに顕著に現れる

種類	ㅤ
atoms/汎用	ㅤ
molecules/汎用	ㅤ
molecules/ドメイン	ㅤ

Propsを標準化する

マイベストのフロントエンド開発では、Web版ではReact/NextJS、アプリ版ではReact Nativeを採用している。

どちらかの経験があれば、Web版・アプリ版どちらもフロントエンド開発をすることができる状態をめざしている

経験上、最低限のpropsを最初に作ったところで、後々の要請でどんどん増えていくのが常である

宝プロップスについてもある車のウォーターフォール的に全体を見据えた設計を行うことにした。

指定できる値を揃える

まず、propsの指定方法はたいていパターン化することができるし、それぞれに無難な命名方法がある。

例えば大きさに関しては、small , medium, large というのがよくある。あるコンポーネントではこれでいいかもしれないが、後々「更に！」ということでバリエーションが増える。

large, extraLarge, doubleExtraLarge, tripleExtraLarge…つらい。

ということで、2xs, xs, sm, md, lg, xl, 2xl, 3xl といった整序性をあらかじめ定義することにした。

React と React Nativeの違いではまったこと

Author

Yasuhiro Yokota

1991-, Designer

大学卒業後、行政機関で情報政策部門で勤務。株式会社ワークスアプリケーションズを経た後、フリーランスでグラフィック・デジタル双方のデザイン及びディレクションを通し、様々なプロジェクトに携わる。株式会社TERASSに創業期からシリーズBまで参画した後、2022年9月にマイベスト入社。グロービス経営大学院卒業。

Web Twitter