オレオレデザインシステムを作る

目次

• 開発背景
• デザインシステムとは
• デザイントークン定義

OriCube

折り紙の折り方をわかりやすく伝えるアプリ

開発メンバー

大学時代の同期4人

• （私）：社会人2年目
• ：社会人2年目
• ：大学院2年
• ：大学院2年

起こっていたこと

微妙に異なるコンポーネントが乱立

なぜこんなことが起こった？

各々が好き勝手デザインして開発してた

• （私）：デザインやりたい！
• ：デザインやりたい！
• ：デザインやりたい！
• ：（頼んだ！）

課題感

• 見た目の一貫性がない
• 毎回個別で作るのは無駄

デザインシステムをつくろう！！

ということを1年前くらいに思って開発が止まってました。

デザインシステムのメリット

一貫性のあるUIを効率的に作れる

• 一貫性：誰が作っても同じ見た目になる
• 開発速度：既存パーツを組み合わせるだけ
• 共通言語：「あの青いボタン」→「Primary Button」

デザインシステムの構成要素

どこまでをデザインシステムと呼ぶかは組織によって変わるそう

• デザイン原則：デザインの考え方や思想を記述したもの
• スタイルガイド：色、タイポグラフィなどUIを構成する要素をまとめたもの
• パターンライブラリ：コンポーネントなどの再利用可能な要素をまとめたもの

ライティングガイド、実装コード、ブランドガイドライン、イラストレーション、アニメーション、...。

とりあえず作ってみよう！

デザイントークン

まずは最も基本的な色について整理していく

プライマリーカラー

サイトのトンマナを確定する色

階調

色の濃淡の変化

その他の色も定義

コントラストグリッド

カラートークン定義

blue/30のように名前をつけることでおおよその色を想像できる。

text/primaryのようにすると色の役割も表現できるため、
迷わずデザインを進めることができる。

セマンティックカラー定義

組み合わせた場合のコントラスト比を考慮しつつ定義

読みやすいフォント

文字の読みやすさには、視認性、判読性、可読性の3つの軸がある。

OriCubeでは文章がほとんどなくタイトルなどに文字が使われることから、
視認性、判読性を向上させるフォントを選定する。

視認性・判読性の高いフォント

BIZ UDPGothic を選定した

セマンティックフォント

カラーと同様に、組み合わせと役割を定義した。

その他のトークン

コンポーネント整理

今使われているコンポーネントを洗い出して、あたりをつけていく。

Button定義

汎用的なボタンコンポーネントを作成した。

全ての状態を定義すると上記のようになるが、
一個一個作るのは大変なので...

バリアントの使用

React ComponentでいうProps

Figmaでも汎用性の高いコンポーネントを作ることができる

使用原則の作成

曖昧だったルールを明示的に記述。

デザイントークンの連携

Variablesに登録したデザイントークンはプラグインでcss変換できる

(CIがんばれば自動更新とかもできるっぽい、やってみたい)

コンポーネント実装

Storybook上に必要なパターンを全ておこす

Figma MCPの使用

Figmaのコンポーネントを作り込んでおくと結構な精度で再現できた。

• デザイントークンを使用していること
• バリアブルでコンポーネントの状態が定義されていること
• Auto Layout でレイアウトを組んでいること

AI生成の精度を上げる上での課題

不要なhtmlやcssが生成される
→ コーディング上のルールを整備する必要がありそう

Figmaに定義している以上のものを生成する
（hover時のアニメーション、フォーカスインジゲーターなど）
→ デザイン上の暗黙的なルールを渡す必要がありそう

振り返り

信頼できる情報源ができた

• 無駄な開発が減ってシンプルに嬉しい
• デザインもかなりしやすくなった
• 勝手に作っただけなのでメンバーと一緒に育てていきたい

SSOTをどこに置くか

Storybook集約という選択肢もあり

• サイボウズ社やSmartHR社もStorybook側に寄せているっぽい
• OriCubeはメンバーが全員エンジニアなので、Figmaは最低限でよさそう
• AIとの相性もいい（Claude Designとかも気になる）