Upgrade to Pro — share decks privately, control downloads, hide ads and more …

BtoB SaaSプロダクトで「機能する」デザインシステムを目指して

sizucca
June 15, 2023

BtoB SaaSプロダクトで「機能する」デザインシステムを目指して

デザインシステム、今なにやってる?導入と運用のリアルな裏側を公開!-Lunch LT-
2023/06/15
https://findy.connpass.com/event/285080/

sizucca

June 15, 2023
Tweet

More Decks by sizucca

Other Decks in Design

Transcript

  1. Copyright © 2023 ANDPAD Inc.
    Copyright © 2023 ANDPAD Inc.
    BtoB SaaSプロダクトで「機能する」
    デザインシステムを⽬指して
    〜ANDPADデザインシステム「Tsukuri」の実践事例と⼯夫ポイント〜
    2023/06/15:デザインシステム、今なにやってる?導⼊と運⽤のリアルな裏側を公開!-Lunch LT-
    株式会社アンドパッド かわかみしずか

    View full-size slide

  2. Copyright © 2023 ANDPAD Inc.
    ⾃⼰紹介
    2
    かわかみしずか
    @sizucca_
    〜 2008/04 製版会社 / 出版社
    主に受託のWebデザイン、プログラミング、営業企画など。
    2008/05 〜 株式会社カカクコム
    グルメサイト「⾷べログ」のUIデザイン、フロントエンド。
    コーディングルールの整備、スタイルガイドの作成など。(Ruby, Sass, FLOCSS,
    MindBEMding)
    2016/05 〜 GMOペパボ株式会社
    ネットショップ作成サービス「カラーミーショップ」のUI/UXデザイン。
    デザイナーの成⻑⽀援、横断的な知⾒の共有やアセット化、社内外へ向けた
    デザイナーの広報活動、イベントの実施、toC向けマーケティング戦略など。
    2021/07 〜 株式会社アンドパッド
    営業進捗‧売上‧原価管理サービス「ANDPAD 引合粗利管理」のUI/UXデザイン。
    デザインシステムの設計‧作成‧推進。
    デザイナー

    View full-size slide

  3. Copyright © 2023 ANDPAD Inc.
    アジェンダ
    3
    1. アンドパッドについて
    2. デザインシステム「Tsukuri」について
    3. デザインシステムをプロダクトに導⼊して気づいたこと
    4. 「機能する」デザインシステムを⽬指して

    View full-size slide

  4. Copyright © 2023 ANDPAD Inc.
    Copyright © 2023 ANDPAD Inc.
    アンドパッドについて
    4
    1

    View full-size slide

  5. Copyright © 2023 ANDPAD Inc. 5
    Copyright © 2023 ANDPAD Inc.
    いま建築‧建設業界で “ものづくり” に携わる⽅の⼈⼿不⾜や
    ⻑時間労働が社会問題となっています。
    今後これらの課題に対して、デジタルシフトによる⽣産性向上や、
    就労者数の底上げを急ぐ必要があります。
    本来、ものづくりに携わる⼈々は、誰かに幸せを届ける⼈たちです。
    そんな⽅々がもっとクリエイティブに、もっと豊かに働けるよう、
    私たちは熱い想いで⽇々現場に向き合っています。

    View full-size slide

  6. Copyright © 2023 ANDPAD Inc.
    Copyright © 2023 ANDPAD Inc.
    アンドパッドについて
    6
    建設業務をDX化し、社内と現場をつなぐ「ANDPAD」の開発‧運⽤
    現場
    建設業に特化したさまざまな
    アプリケーションで情報を⼀元管理
    職⼈∕業者
    メーカー∕流通
    営業∕監督∕設計
    事務∕管理職
    社内

    View full-size slide

  7. Copyright © 2023 ANDPAD Inc.
    Copyright © 2023 ANDPAD Inc.
    アンドパッドについて
    7
    業界全体の課題解決を⽬指し、さまざまなプロダクトを展開
    … etc

    View full-size slide

  8. Copyright © 2023 ANDPAD Inc.
    Copyright © 2023 ANDPAD Inc.
    デザインシステム「Tsukuri」について
    8
    2

    View full-size slide

  9. Copyright © 2023 ANDPAD Inc.
    Copyright © 2023 ANDPAD Inc.
    デザインシステム「Tsukuri」について
    9
    9
    Tsukuri
    ANDPAD のデザインシステム

    View full-size slide

  10. Copyright © 2023 ANDPAD Inc.
    Copyright © 2023 ANDPAD Inc. 10
    初期フェーズで定めた「Tsukuri」の最⼩必須要件
    デザインシステム「Tsukuri」について
    明⽂化された理念や原則が存在する
    ⾊、サイズ、⽂⾔の選択や決定に関する基準がある
    ⾊、サイズなどの要素がデザイントークンとして定義されている
    コンポーネントの作成に関するルールが存在する
    使⽤頻度の⾼いコンポーネントが揃っている
    コンポーネントが低コストで利⽤可能である
    ※デザインデータとシステムの連携、リソースの参照性、継続的なアップデートの可能性など
    抽象的
    具体的

    View full-size slide

  11. Copyright © 2023 ANDPAD Inc.
    Copyright © 2023 ANDPAD Inc. 11
    最初の約6ヶ⽉(2021年10⽉〜2022年3⽉)の進捗状況
    デザインシステム「Tsukuri」について
    明⽂化された理念や原則が存在する
    ⾊、サイズ、⽂⾔の選択や決定に関する基準がある
    ⾊、サイズなどの要素がデザイントークンとして定義されている
    コンポーネントの作成に関するルールが存在する
    使⽤頻度の⾼いコンポーネントが揃っている
    コンポーネントが低コストで利⽤可能である
    ※デザインデータとシステムの連携、リソースの参照性、継続的なアップデートの可能性など
    抽象的
    具体的

    View full-size slide

  12. Copyright © 2023 ANDPAD Inc.
    Copyright © 2023 ANDPAD Inc. 12
    その後の約14ヶ⽉(2022年4⽉〜2023年5⽉)の進捗状況
    デザインシステム「Tsukuri」について
    明⽂化された理念や原則が存在する
    ⾊、サイズ、⽂⾔の選択や決定に関する基準がある
    ⾊、サイズなどの要素がデザイントークンとして定義されている
    コンポーネントの作成に関するルールが存在する
    使⽤頻度の⾼いコンポーネントが揃っている
    コンポーネントが低コストで利⽤可能である
    ※デザインデータとシステムの連携、リソースの参照性、継続的なアップデートの可能性など
    抽象的
    具体的

    View full-size slide

  13. Copyright © 2023 ANDPAD Inc.
    Copyright © 2023 ANDPAD Inc.
    デザインシステム「Tsukuri」について
    13
    初期フェーズの取り組みについて
    アーカイブまとめ(note)
    https://note.com/sizucca/n/n773160c71d31
    イベントページ
    https://andpad.connpass.com/event/238368/
    アーカイブ動画
    https://youtu.be/xtIPKcLa-a0
    ログミーさんによる内容の書き起こし
    https://logmi.jp/tech/articles/326308

    View full-size slide

  14. Copyright © 2023 ANDPAD Inc.
    Copyright © 2023 ANDPAD Inc. 14
    Tsukuri(Webドキュメント)
    14

    View full-size slide

  15. Copyright © 2023 ANDPAD Inc.
    Copyright © 2023 ANDPAD Inc. 15
    Tsukuri - 例:Components / Textarea(Figma)
    15

    View full-size slide

  16. Copyright © 2023 ANDPAD Inc.
    Copyright © 2023 ANDPAD Inc. 16
    Tsukuri - 例:Components / Textarea(Webドキュメント ※⼀部抜粋 1/6 )
    16

    View full-size slide

  17. Copyright © 2023 ANDPAD Inc.
    Copyright © 2023 ANDPAD Inc. 17
    Tsukuri - 例:Components / Textarea(Webドキュメント ※⼀部抜粋 2/6 )
    17

    View full-size slide

  18. Copyright © 2023 ANDPAD Inc.
    Copyright © 2023 ANDPAD Inc. 18
    Tsukuri - 例:Components / Textarea(Webドキュメント ※⼀部抜粋 3/6 )
    18

    View full-size slide

  19. Copyright © 2023 ANDPAD Inc.
    Copyright © 2023 ANDPAD Inc. 19
    Tsukuri - 例:Components / Textarea(Webドキュメント ※⼀部抜粋 4/6 )
    19

    View full-size slide

  20. Copyright © 2023 ANDPAD Inc.
    Copyright © 2023 ANDPAD Inc. 20
    Tsukuri - 例:Components / Textarea(Webドキュメント ※⼀部抜粋 5/6 )
    20

    View full-size slide

  21. Copyright © 2023 ANDPAD Inc.
    Copyright © 2023 ANDPAD Inc. 21
    Tsukuri - 例:Components / Textarea(Webドキュメント ※⼀部抜粋 6/6 )
    21

    View full-size slide

  22. Copyright © 2023 ANDPAD Inc.
    Copyright © 2023 ANDPAD Inc. 22
    Tsukuri - 例:Components / Textarea(実装ドキュメント、デモ)
    22

    View full-size slide

  23. Copyright © 2023 ANDPAD Inc.
    Copyright © 2023 ANDPAD Inc.
    デザインシステム「Tsukuri」について
    23
    エンジニアリングの取り組みについて
    第1回:⽅針と全体像の紹介
    https://tech.andpad.co.jp/entry/2023/03/02/100000
    第2回:UI コンポーネントの開発
    https://tech.andpad.co.jp/entry/2023/03/14/100000
    第3回:リポジトリの構成‧開発ツール
    https://tech.andpad.co.jp/entry/2023/04/13/100000
    第4回:現状と今後
    https://tech.andpad.co.jp/entry/2023/04/27/100000

    View full-size slide

  24. Copyright © 2023 ANDPAD Inc.
    Copyright © 2023 ANDPAD Inc.
    デザインシステムを
    プロダクトに導⼊して気づいたこと
    24
    3
    フォームコンポーネントの実践事例

    View full-size slide

  25. Copyright © 2023 ANDPAD Inc.
    Copyright © 2023 ANDPAD Inc.
    デザインシステムをプロダクトに導⼊して気づいたこと
    25
    コンポーネントを個別に作成している時には問題を感じなかった
    Field Label Textfield Select
    Checkbox Radio Switch

    View full-size slide

  26. Copyright © 2023 ANDPAD Inc.
    Copyright © 2023 ANDPAD Inc.
    デザインシステムをプロダクトに導⼊して気づいたこと
    26
    コンポーネントをプロダクトに導⼊
    Checkbox
    Radio
    Switch
    ※実際の画⾯を参考にして作成した、説明⽤のイメージです。
    Field Label
    Textfield
    Select

    View full-size slide

  27. Copyright © 2023 ANDPAD Inc.
    Copyright © 2023 ANDPAD Inc.
    デザインシステムをプロダクトに導⼊して気づいたこと
    27
    コンポーネントをプロダクトに導⼊ → ざまざまな課題が浮き彫りに
    ※実際の画⾯を参考にして作成した、説明⽤のイメージです。
    背景⾊によっては、コンポーネントが
    予期しない印象になる。(視認性が落ち
    る、⾊同⼠のハレーションが発⽣する、など)
    組み合わせによっては、コンポーネント
    間の相対的なバランスが悪くなる場合が
    ある。(塗りのパターン、サイズ感など)
    プロダクトの要件を満たすには
    不⾜しているパターンや振る舞
    いがある。
    Figmaの作りの統⼀感が⽋けているため
    使いにくい箇所がある。(コンポーネントプ
    ロパティ値の指定⽅法、レイヤー構造など)

    View full-size slide

  28. Copyright © 2023 ANDPAD Inc.
    Copyright © 2023 ANDPAD Inc.
    「機能する」デザインシステムを⽬指して
    28
    4

    View full-size slide

  29. Copyright © 2023 ANDPAD Inc.
    Copyright © 2023 ANDPAD Inc.
    「機能する」デザインシステムを⽬指して
    29
    29
    1. 最初はアップデートを繰り返す前提で作成する
    2. プロダクトの情報構造から考える
    3. デザインシステムの「使いやすさ」も考慮する

    View full-size slide

  30. Copyright © 2023 ANDPAD Inc.
    Copyright © 2023 ANDPAD Inc.
    「機能する」デザインシステムを⽬指して
    30
    1. 最初はアップデートを繰り返す前提で作成する
    基本設計‧
    デザインデータ
    を作成
    動作‧振る舞い
    を定義
    実装‧テスト
    プロダクトで
    利⽤
    ドキュメント
    を作成

    View full-size slide

  31. Copyright © 2023 ANDPAD Inc.
    Copyright © 2023 ANDPAD Inc.
    デザインシステムを
    アップデート
    「機能する」デザインシステムを⽬指して
    31
    2. プロダクトの情報構造から考える
    プロダクトの
    情報構造を整理
    設計したUIを基に
    パターンを抽象化

    View full-size slide

  32. Copyright © 2023 ANDPAD Inc.
    Copyright © 2023 ANDPAD Inc.
    「機能する」デザインシステムを⽬指して
    32
    3. デザインシステムの「使いやすさ」も考慮する
    例)Figmaのコンポーネントプロパティ値の指定⽅法
    Selected の指定⽅法がコンポーネントで異なる 類似する振る舞いの指定には⼀貫性を持たせる

    View full-size slide

  33. Copyright © 2023 ANDPAD Inc.
    Copyright © 2023 ANDPAD Inc.
    「機能する」デザインシステムを⽬指して
    33
    Before
    ※実際の画⾯を参考にして作成した、説明⽤のイメージです。
    背景⾊によっては、コンポーネントが
    予期しない印象になる。(視認性が落ち
    る、⾊同⼠のハレーションが発⽣する、など)
    組み合わせによっては、コンポーネント
    間の相対的なバランスが悪くなる場合が
    ある。(塗りのパターン、サイズ感など)
    プロダクトの要件を満たすには
    不⾜しているパターンや振る舞
    いがある。
    Figmaの作りに⼀貫性が⽋けているため
    使いにくい箇所がある。(コンポーネントプ
    ロパティ値の指定⽅法、レイヤー構造など)

    View full-size slide

  34. Copyright © 2023 ANDPAD Inc.
    Copyright © 2023 ANDPAD Inc.
    「機能する」デザインシステムを⽬指して
    34
    After
    ※実際の画⾯を参考にして作成した、説明⽤のイメージです。
    UIでの利⽤シーンや将来的な拡張性を
    意識しながら、柔軟性のあるコンポー
    ネントを設計する。
    頻繁に組み合わせて使⽤されるコンポー
    ネントは、塗りのパターンやサイズの
    相対性も考慮して設計する。

    プロダクトの情報構造や建設ドメイン特有
    の利⽤状況を考慮しながら、コンポーネン
    トの設計‧拡張を⾏う。
    Figmaのコンポーネントプロパティ値
    の指定⽅法やレイヤー構造に⼀貫性を
    持たせる。

    View full-size slide

  35. Copyright © 2023 ANDPAD Inc.
    Copyright © 2023 ANDPAD Inc.
    「機能する」デザインシステムを⽬指して
    35
    コンポーネント間の相対的なバランスを調整した Before → After

    View full-size slide

  36. Copyright © 2023 ANDPAD Inc.
    Copyright © 2023 ANDPAD Inc.
    最後に
    36
    ⼀緒に並⾛していただける仲間を募集しています!
    36
    UI/UXデザイナー、BXデザイナー、
    エンジニア、PdM、カスタマーサポート、
    セールス、カスタマーサクセス、etc...
    • デザインシステムに完成はない(とはいえ)
    • Tsukuri は実⽤が始まってきたが、未だ最⼩必須要件も100%ではない

    View full-size slide

  37. Copyright © 2023 ANDPAD Inc.
    Copyright © 2023 ANDPAD Inc.
    Appendix:命名規則について ※デザインシステム関連のFigmaが対象
    37
    37
    種類 単語 単語の繋ぎ 例 説明
    Figmaのファイル名 すべての単語の
    先頭を⼤⽂字
    半⾓空⽩
    Figma Filename
    Figma Filename_Pattern
    ファイル名は固有名詞の扱い。
    派⽣系のファイルであることを明⽰したい場合は、アンダースコア繋ぎで派⽣名をつける。
    Figmaのページ名
    ※コンポーネント定義ページの場合
    すべての単語の
    先頭を⼤⽂字
    半⾓空⽩ Component Name
    コンポーネント定義のページであれば、ファイル名と同じルール。
    それ以外のページは⾃由(できれば、ベージの内容が推測できる⽇本語が望ましい)。
    Figmaのレイヤー名 ⼩⽂字 ハイフン layer-name
    通称:チェインケース、ケバブケース。
    CSSのclass名を想定。
    コンポーネント名 ⼩⽂字 ハイフン
    component-name
    _component-name
    .Assets/asset-name
    .component-name
    レイヤー名と同じルール。
    制作中のコンポーネントにはプレフィックスとしてアンダースコアを付け、Publish時に外す。
    単独コンポーネントとして使⽤しないコンポーネントには「.Assets/」を付ける(親コンポーネントのみをPublishする)。
    Publish対象外のコンポーネント(ドキュメント⽤など)にはプレフィックスとしてドットを付ける。
    プロパティ(名前) ⽂頭を⼤⽂字 半⾓空⽩
    Property
    Property name
    基本的に1単語を想定。
    値と組み合わせた際、視認しやすくする意図もある。
    プロパティ(値) ⼩⽂字 ハイフン
    property
    property-value
    通称:チェインケース、ケバブケース。
    トークン名 ⼩⽂字 ハイフン
    token
    token-name
    通称:チェインケース、ケバブケース。
    ドキュメント内の⾒出し
    ※英語が適切な場合
    ⽂頭を⼤⽂字 半⾓空⽩ Heading text
    英語圏の⼀般的な⾒出しルールに則る。
    ※固有名詞の場合はすべての単語の先頭を⼤⽂字に、それ以外は⽂頭のみ⼤⽂字。
    画像名 ⼩⽂字 アンダースコア
    arrow_left.svg
    category-name_arrow_left.svg
    画像は名前にカテゴライズ的な意味を持たせず、1単語として扱う思想とする。
    カテゴライズしないと管理が煩雑になる画像については、プレフィックスとしてカテゴリー名(⼩⽂字、ハイフン繋ぎ)を
    付与する。

    View full-size slide