Storybook のアドオン構成を再確認しながら、配色とタイポグラフィのトークンを管理できる コンポーネントライブラリを組み立てました。
また、@emotion/css を併用して、既存プロジェクトにも簡単に取り込めるようにしています。

今回はまだ UI キットの全体像が固まっていないので、運用方針を整理しながらテストも順番に揃える予定です。

はじめに

このダミー記事では、Storybook を活用した軽量なデザインシステム構築の流れを紹介します。 まずはブランドカラーとタイポグラフィのスタイルガイドを作成し、それを基に小さなUIコンポーネントから整備しました。

フォルダ構成

src/
 ├─ components/
 │   ├─ atoms/
 │   ├─ molecules/
 │   └─ organisms/
 └─ tokens/

Storybookで検証した内容

1. 色の組み合わせとコントラスト
2. フォントサイズのスケール
3. アクセシビリティアドオンによる検証フロー

次にやること

design-tokens パッケージを切り出して、Nx や Turborepo を使ったモノレポ運用を検討しています。 特にカラーモードの切り替えや、UIのバリエーションをストーリーで管理する仕組みを整えていく予定です。