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

created at:

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

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

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

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

Design Tokensとは?

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

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

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

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

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

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

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

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

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

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

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

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

親しみやすいWordを考える

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

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

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

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

アーカイブ一覧へ戻る

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

この記事に関する修正依頼
トップページに戻る