はじめに
こんにちは！株式会社ispecのデザイナー、すずきです。
この記事では、ispec独自のデザインシステム「Regulus」を作るにあたって意識したポイントをいくつか紹介します。
Regulus（レグルス）とは
Regulusは、管理システムを高品質かつ短期間で構築するために作られたデザインシステムです。
特に、ispecが主に取り組む医療系システムへの活用を念頭に設計されています。
レゴのようにコンポーネントを組み立てる
Regulusでは、ボタンや入力フィールドなど、それ単体では機能が完結しない小規模なパーツをPrimitive、それらを組み合わせてひとつの明確な機能をもつ要素をComponentとして分類しています。
つまり、レゴのように小さなブロックを組み合わせ、様々な機能を持つコンポーネントを生み出すことができます。
例: Pagerコンポーネント
たとえばPagerは、Buttonのバリエーションを組み替えてラップしているだけの簡素な作りになっています。
[current] appearance:outline, palette:primary
[default] appearance:ghost、palette/secondary
[prev, next] appearance:ghost、palette:secondary
近しい外観を持つパーツを組み合わせれば実装コストも低減できますし、「見た目は類似しているが挙動が異なる」という体験上の不整合を避けられます。
例: DatePickerコンポーネント
日付入力によく使われるDatePickerも、日付部分はButtonを並べただけのものです。
強調、hover、disabledといった表現はButtonのバリエーションを活用することで、DatePicker専用のパーツを最小限に抑えています。
カラートークンの設計
| token | description |
|---|---|
| 1. ColorPalette | Tailwindのリテラルなカラーパレット |
| 2. PrimitiveColorToken | ベースカラー/頻出カラー |
| 3. SemanticColorToken | 意味付けされたカラー |
カラートークンはTailwindのパレットをベースに、3階層構造を採用しました。
SemanticColorTokenはPrimitiveColorTokenまたはColorPaletteを参照し、PrimitiveColorTokenはColorPaletteを参照するという階層になっています。
// ColorPalette
blue: {
500: '#3b82f6'
}
/* PrimitiveColorToken */
:root {
--primary: var(--blue-500);
}
/* SemanticColorToken */
:root {
--elements-button-primary: var(--primary);
}
SemanticColorTokenは命名規則がやや冗長になりますが、致し方ないでしょう…🤔
初期はColorPaletteとSemanticColorTokenの2階層でしたが、たとえばprimaryをblue-500としたい場合、primary-button:blue-500、primary-link:blue-500などと直接指定すると、一括でカラーを差し替えることが難しくなります。かといって、SemanticColorTokenの中で primary:blue-500と定義して参照するのは違和感がある…などの理由から、間を埋める中間層としてPrimitiveColorTokenを設けました。
運用面
Regulusで実装した各コンポーネントは、Storybook上で確認できるようになっています。
ドキュメントもStorybookに集約しているため、基本的にはFigmaとStorybookを参照すれば、各コンポーネントの設計や挙動を把握できます。
StorybookのButtonページ
Regulusの今後
デザインシステムは運用を通じて改善を重ねていくものであり、運用に耐えうるものになったとしても、完成というわけではありません。常に使い続け、改善していく営みです。
今後も、実際のプロジェクトで派生させたコンポーネントを取り込んだり、設計を見直したりしながら、より使いやすく洗練されたシステムを目指していきます。
Regulusはまだまだ進化の途上ですが、今後、StorybookやFigmaを公開できればと思っております！🙌
Discussion