くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

トップ > デザインシステム > いろんなデザインシステムをみてみて、必要な項目とかを調べてみた

いろんなデザインシステムをみてみて、必要な項目とかを調べてみた

デザインシステム UI

デザイントークンについて調べてみたけど、必要なのはデザインシステムでは？
と思い、いろいろ調べてみたときの備忘録。というか、走り書きレベルのメモ書き(*´ω｀*)

ざっと眺めた実例はこのあたり。

多くのアプリやWebサービスを作っているけど、毎回試行錯誤している気がする。。

個人開発だとしても自分なりの指針/方針などを整理しておくと、
楽に作れそうな気がするので、決めておくポイントなどを理解できるといい(*´ω｀*)

デザインシステムとは

デザインシステムとは、企業のビジョンやブランドアイデンティティなどから
「良いデザイン」を定義するデザイン原則などのドキュメント、それらを具体的にデザイン・実装するためのUIパターンやコンポーネント などを備えた一連のリソースのことを指します。
引用元: デザインシステムとは？内容や作り方、運用方法を解説します | in-Pocket インポケット

いろんな実例を見ているけど、決まったフォーマットみたいなものはなく、
それぞれ必要なものを用意している感じ。

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

原則やスタイルは似ている部分が多いけど、
コンポーネント以降は、各サイトで粒度に個性がある。

ターゲットユーザや作るもの、ポリシーなどによって、
良いデザインや目指す方向性が異なるので、それぞれ違いがあっておもしろい。

スタイル

プリミティブな要素。token化して利用すると便利。

  • 色/カラーパレット
  • タイポグラフィ
  • アイコン/ロゴ/イラスト
  • レイアウト/サイズ/余白
  • アニメーション/Motion
  • Shape(形)/Corner Radius(角丸)
  • Evevation(高さ)/Shadow(影)

スタイルは2つに分類できる気がする。
していないところも多い。

  • primitive style ... 利用できる要素
  • semantic style ... 意図を付与したprimitive styleのalias

イメージとしては、以下のイメージ

  • primitive: color pallet ... 利用できる色のすべて(color-red-100とか)
  • semantic: primary/brand color ... 意味/用途を含む色名(color-primaryとか)

なので、primitiveのバリエーションは、
以下のように用途を含めず命名する感じ

  • color ... 100/200/.../800/900/950
  • fontWeight ... 100/200/.../800/900/950
  • size ... 1/2/4/8/16/24.../64
  • shadow ... small/medium/large

一方、semanticのバリエーションは、
以下のように用途も含めて命名する感じ

  • color ... primary/secondary/success/danger/...
  • text ... title/body/label/display

色

利用できる色を定義している感じ。

主には、

  • primitive: 利用する色とそのバリエーション
    • red-50/100/200/300/.../900/950 etc.
  • semantic
    • primary/brand color
    • status/inform color (success/danger etc.)
    • text color
    • background color
    • overlay color
    • etc...

どこまでスタイルのColorで決めて、
どこからレイアウトやタイポグラフィなどの別スタイルや、
コンポーネントなどで決めるかは各サイト異なるっぽい。

タイポグラフィ

フォントの種類(フォントファミリー)やフォントサイズなどの文字関連。

主には、以下をスタイルごとに決めている感じ。

  • フォントの種類(font-family)
  • フォントの大きさ(font-size)
  • フォントの太さ(font-weight)
  • 行の高さ(line-height)
  • 文字間隔(letter-spacing)
  • 文字の色(text-color)

スタイルは以下のような種類で、
それぞれバリエーション(1/2/3, S/M/L)がある感じ。

  • Headline/Heading
  • Title
  • Body
  • Label
  • Display
  • Help Message

これもどこまでここで決めるかは、サイトそれぞれ。
font-familyだけとかもある。

また、primaryはフォントサイズのみで、
semanticはどこで使うかを含めてスタイルとして定義。
というパターンもある。

アイコン/ロゴ/イラスト

利用できるアイコンやロゴ、イラストなどの、
画像リソースをまとめた部分。

新しいリソースを作る際の指針などが書かれている場合もある。

レイアウト/サイズ/余白

レイアウト関連をまとめた部分。
余白やサイズ関連とも統合されている場合もある。

スクリーンサイズやBreakpointのサイズなども書かれている場合も。

サイズとしては、4の倍数を利用した4 Porint Grid Systemがよいっぽい。

アニメーション/Motion

AnimationやMotion関連をまとめた部分。

主には、以下それぞれを定義していたり、
タイポグラフィのようにまとめて名前付けしていたりする。

  • easing (easing/ease-out/ease-in/ etc.)
  • duration (quick/normal/slow/ etc.)

Shape(形)/Corner Radius(角丸)

角の丸み(corner-radius)など図形についてまとめた部分。

丸みだけでなく、多角形(cut)なども含んでいる場合も。
あるいは、画像のアスペクト比などもまとめている場合もある。

Evevation(高さ)/Shadow(影)

影(box-shadow)や影で表現する高さのバリエーションについてまとめた部分。

Evelationの段階や各段階で使う影のパターンが定義されている。

コンポーネント

ボタンとかフォームのテキストフィールドとか、
UIコンポーネントカタログ的な感じ。

ボタンなどの状態があるものについては、
各状態について表現されている。

  • normal
  • active
  • disable
  • hover
  • focus
  • loading
  • etc.

また、どういったときにどのボタンを使うかなども記載されている。

  • スタイル: normal/outlined/text/etc.
  • variant: primary/success/danger/etc.
  • サイズ: normal/small/large/wide/etc.

パターン

検索ボックスとかコンポーネントの組み合わせを
パターンとして整理した感じ。

コンポーネントの配置や余白などもまとめているサイトもある。

テンプレート

画面やダイアログなど、パターンがさらに広くなった感じ。
ログイン画面/一覧画面/詳細画面とかをテンプレートとして整理。

おまけ

Font Weightのバリエーション

num design token/OpenType css
100 thin, hairline
200 extra-light, ultra-light
300 light
400 normal, regular, book normal
500 medium
600 semi-bold, demi-bold
700 bold bold
800 extra-bold, ultra-bold
900 black, heavy
950 extra-black, ultra-black

以上!!

実装する際のカタログや知見の集約場所として重宝しそうな感じ。(*´ω｀*)

Themeのように、メインカラーなどの特定の部分はアプリごとに決めるけど、
大枠などは整理しておいて、発見した良いデザインをまとめておくとよいかもしれない(*´ω｀*)

参考にしたサイトさま