Design Tokensを考える前に俺たちは変数名について考え直すことがあるのではないか

created at: 2019-10-02 GitHub Edit Page

この記事は公開から1年以上が経過しています。内容が一部古い箇所があります。

今回の話すこと・話さないこと

Design Tokensを通して変数名はどうあるべきか改めて考える
- CSSというよりかは言葉についての考える回
正解についてを話す感じではない
チームや会社に持ち帰って議論したり考え直すきっかけになれれば

前提：デザインシステムについて

アプリケーションやウェブサイト上での一貫性が保たれ、ユーザーが期待する機能性やユーザビリティを提供できるもの
デバイスを超えるもので Web 以外でもモバイルアプリにも提供できる
スタイルガイドラインとの違い
- そのブランドが何なのかをコード単位で表現されたもの
- コンポーネント単位で「あ！　これってアレじゃん！」ってなれるもの
有名どころ
- Google - Material Design
- Salesforce - Lightning Design System
- Microsoft - Office UI Fabric
- Atlassian - Atlassian Design
- GitHub - Primer
- USWDS: The United States Web Design System
  - アメリカ合衆国の Web デザインシステム
- そのほか → https://designsystemsrepo.com/design-systems/
参考：nwc_design#5c3abf5bc2cd3f0000566b24

世はまさに大デザインシステム時代

デザインシステムツールの流行
- Figma
- Invision
- Storybook
- zeroheight
- Zeplin
designsystems_tokyo
- 事業会社がデザインシステムについてガチンコで考えるコミュニティ
  - 参加企業
    - メルなんとか
    - サイバーなんとか
    - ビズなんとか
    - リクルートテクなんとか
    - fr なんとか
    - 弁護士なんとか.com
- 参加メモ書き → ds.t #Clarity2019 Redux in Tokyo
Clarity Conference
- https://www.clarityconf.com/
- デザインシステムのカンファレンス
  - 2019 年で 4 回目
- Design Systems Coalition
  - 前身のイベント
  - https://design.systems/coalition/
- デザインシステムのツールが増えたのはこうした機会で議論されて開発された背景があるそうです

Design Tokensとは？

デザインシステムにおける、いわゆるスタイル変数集
Single Source of Truth（単一の情報源）と呼ばれるもの
- 利用することのメリット
  - その Token 値こそが真である（信頼できるデータ）
  - デザインデータから逐一カラーコード・空き・余白などを取得しなくてもいい
  - 一括置き換えしやすくなる
    - 大元を一気に変える
    - スタイルを使ってる箇所を変更する
Tokens の例
- カラー
  - テキスト
  - 背景色
  - ボーダー
- フォント
- シャドウ
- メディアクエリ
  - スマートフォン
  - タブ
  - デスクトップ
- アニメーション
Tokens 形式
- CSS variables
- SASS、SCSS変数
- jsonファイル
- yamlファイル
Design Tokens Generator

デザインシステムというものを構築する面で考える必要がある１つの部分

本題：Design Tokens を設定する上で気をつけなければいけないと思ってること

（もとい変数名についてを考え直したいこと）

例：スタイル名と実際のカラーが不一致

起こりうる悲劇
使い方として多様なシーンで利用されていたのではないか
クラス名だけが形骸化してしまった
色が目視でわかる人ならいいが、わからない人はこの違いに気付けるのか？

変数名を色名でつけるのは悪手なような気がしてる

その色名はほんとうにその色なのか？
- $greenだけど青緑
  - 「いやまぁ green じゃん」「まぁそうですが…」
  - 色盲の人はその色がちゃんと見えるか？
    - 「これは green だから」「（そうは見えないのですが…）はい！」
- わかる
曖昧な色名はどうつける？
- - どう変数名をつける？
- - 赤い方がpurple、青いほうがviolet
    - と、分かっていたとしてもコードベースだけで瞬時に切り替えられるだろうか？
教養あるなしになってこないか？
- ある程度教養は必要な気はするが…
- 皆が同様に使うために必要なハードル・バリアは減らしていきたい

色についてのアプローチ例

Atlassianのデザインシステム
- カラー名が「色の名前」に準拠しきってない
- - Pacific bridge
  - Squid ink
  - Doctor
- 「赤」についても Red〜みたいなのばかりではなくバリエーションがある
  - 覚える内容は増えるが、独立性は保てている

例：その単語はイメージしやすいものか

プログラミングは英語
皆さんの英語力はいかほどか？
- 聴きも読みも杜撰なレベルです
primary, secondary
- button-color-primary、button-color-secondary
- みたいな感じで、よく見る Word ですね
- ではその次はなんでしょうか？
- - 教養問題
  - そもそも「プライマリ」ってなんだよ
番号名でやることが正解だろうか？
- 見出しレベルのようなイメージ
- $button-color-01, $button-color-02, $button-color-03, $button-color-04…
- うーん
モーション・アニメーションがあったりしたら…
- - Easing Functions Cheat Sheet
- 指定された変数名で動きは統一されるけど
- 果たしてその言葉で想起しやすいだろうか？

親しみやすい Word を考える

freee 株式会社のデザインシステム名はvibes（バイブス）
- デザインシステムの設計とアクセシビリティの実現 - Speaker Deck
- バージョンが上がるのをバイブスが上がるとか言ってたらしい
変数名は所詮変数でしかないが
普段使っているものを使いやすくする仕組みはあってもいいと思った

yamanoku.net の実装から見る反省・改善点

ポートフォリオサイトでもカスタムプロパティを通して Design Tokens を利用している
- https://yamanoku.net/about/#about:color-contrast_heading
- このほかバーティカルリズムの指定もある
  - --rhythm: 24px
  - margin とか padding はここに準拠する
    - 2 倍や 1/2 の場合はcalcで制御してる
      - line-height: calc(var(--rhythm) * 2);
問題点
- カラーの変数は色名指定してしまってる
  - 一部ハードコーディング箇所あり
- ダークモードでの指定
  - ライト
  - ダーク
  - リンクカラーはライトがlinkBlueだけどダークはblueを使用している
    - 後付でやってしまったがための功罪
    - そもそもblueとは何のためのものなのか？
    - それ専用の指定もあっていいのかなと感じるところ
- 今はページ・コンポーネント数が少ないので破綻しているところはないが大規模だとどうなる？
- Issue 建てた
  - カラー CSS 変数名を色による名前にしておかない · Issue #124 · yamanoku/yamanoku.github.io

そんな感じの話で伝えたいこと

デザインシステムとは今後関わらんから…とこういう話題に参加しなくてもいいわけではない
「人間が使うもの」を想定してどう設計するのがいいかを今一度考えてみてほしい
- 新卒・中途の人が参入してきたときに使いやすくなってるか？
- 外部に依頼出ししたときにも使いやすくなっているか？
- 再び参画したときに開発しやすいままになっているか？
見た目だけではない文字情報における留意もしていかないといけない
- それが万人に使いやすいものを目指すならなおのこと

俺たちは変数名について考え直しておかないといけない気がする

アーカイブ記事のため、内容に関する更新依頼は受け付けておりませんが、誤字や脱字などありましたらご連絡ください。