タムサイト テックブログ

2025年9月13日

デザイナーさんに聞いてみたデザインシステムを見てみる

デジタル庁

  • デザイナーさんからのコメント

    • 構造がシンプルなのでわかりやすい(参考にしやすい)

  • リンク

  • 内容所感

    • Figma UIキット

      • ボタン
        • Buttonに表示するiconはShow Lead-iconまたはShow Tail-iconのbooleanのバリアブルで表示切り替え
      • バリアブル
        • コレクション単位でカラーやタイポグラフィーが分かれてる
        • valiableの指定をしたコンポーネントは縦軸に指定したvaliableを明示しておくと見やすい
        • 同じファイル内に実データを表示するExamplesが1つでもあると閲覧者はイメージしやすいかも
          • 例えばセレクトボックスは水平に複数並べる場合があることをExamplesにあるとわかりやすい
        • カラー
          • ナチュラル、プリミティブ、セマンティックで分かれてる。セマンティックはプリミティブを参照して特定の状態(SuccessやErrorなど)の色を表してる
      • スタイル
        • テキストスタイルの命名
          • Display,Standard,Dense,Outlineなど
          • 例: Std-45B-140のように「<3文字>-<文字サイズ><フォントの重み1文字>-<高さ>」の命名になってる
        • エフェクトスタイル
          • 1~8まであり、実際の指定してる内容も段階的になっていそう(ここの命名はデザイナーさんに決めてもらうのが良さそう)
        • レイアウトガイドスタイル
          • これもデザイナーさんに聞かないと感覚がわかんない
          • レイアウトのコンポーネントで使われている
          • スクリーン幅に応じて間隔が広くなったりしてる

    • サイト

      • デザイナーやフロントエンド、組織内の関係者向けに使い方を記載

        • https://design.digital.go.jp/guidance/how-to-use/
        • 利用上の注意で書かれているデザインシステムの目的やプロダクトの目指す姿や提供したい価値を記載していて導入に見てもらうのが良さそう
        • デザインシステムを利用する際のガイドラインや注意事項を別ページを作ってでも書いておくと良さそう

      • デザインシステムの目的を参考にしたい

      • デザインシステムの分類は先に調べたくなった

        • 具体性のある企業型デザインシステム
          • 該当企業ないし、企業グループが掲げるブランドやコミュニケーション方針に基づいたデザイン原則を決めて、その世界観におけるトーンアンドマナーのデザインアセットを作成する
        • 抽象度の高いプラットフォーム型デザインシステム
          • 固有の組織に依存したブランド概念やコミュニケーション方針を備えていない

      • react版のデザインシステムのコード(storybookあり)

SmartHR

  • デザイナーさんからのコメント

    • デザイントークンだけでなくアクセシビリティのページもわかりやすい

  • リンク

  • 内容所感

    • Figma UIキット

      • コンポーネントにリンクを貼って実際のコードベースで確認ができるのは便利かも
      • FieldsetのInputのパターンが1つのコンポーネントに集約されていた
        • 別でInputが存在する
        • showPrefixをtrueにするとiconの選択するバリアブルが出てくるのが便利
          • iconをどのiconにするか文字列選択ではない形式なので便利
            • Componentsは以下のIconを選択できていそう(インスタンスの選択?)
      • FormControlはReact Hook Formを意識させられるUIコンポーネント
      • iconはFont Awesomeを使っていると明示的に記載してる
        • 文字サイズはここで指定してないから、コンポーネント作成するというよりサイズをスタイルのテキストスタイルにL~XXSを当てはめている
      • SegmentControlとTabBarの違いは意識する必要ある
      • ステップバーはステップを1つ繋げて、見出しを表示するまたは表示しないをバリアブルで入力して明示的にすることで開発時のコードも同じことを実践できる
        • タブバーも同じ
      • テーブルのコンポーネント作成するにはこのデザインシステムみるといいかも
      • Slotの概念はデザイナーさんと共有したほうが良いかも
      • バリアブル
        • Annotationの命名がANNOTATION_100と_10でパーセント指定で区別してる
        • sizeは16px基準がカラム名になっててわかりやすそう
          • 14px基準もあるのはなぜ？

    • サイト

      • StorybookやGithubへのリンクが埋め込まれているのが手間が省ける
      • 注意点で非推奨が書かれているから誤って利用することがなくなる

グッドパッチ

  • デザイナーさんからのコメント

    • コンポーネントパターンが見やすい
    • レイアウトルール決まっているのでシステム系の画面なら参考にしやすそう

  • リンク

  • 内容所感

海外のデザインシステムサイト

ソース: Design Systems Gallery

後で調べる

  • Figmaのテキストスタイルやエフェクトスタイル、レイアウトガイドスタイルの意図は？
    • バリアブルとの違いを調べる
      • そうすることで、エンジニアもdev modeで見るべき場所が変わる
  • グループとコンポーネントの違いを調べる