Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

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- 株式会社アンドパッド かわかみしずか
  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デザイン。 デザインシステムの設計‧作成‧推進。 デザイナー
  3. Copyright © 2023 ANDPAD Inc. アジェンダ 3 1. アンドパッドについて 2.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    22 Tsukuri - 例:Components / Textarea(実装ドキュメント、デモ) 22
  22. 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
  23. Copyright © 2023 ANDPAD Inc. Copyright © 2023 ANDPAD Inc.

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

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

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

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

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

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

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

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

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

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

    「機能する」デザインシステムを⽬指して 34 After ※実際の画⾯を参考にして作成した、説明⽤のイメージです。 UIでの利⽤シーンや将来的な拡張性を 意識しながら、柔軟性のあるコンポー ネントを設計する。 頻繁に組み合わせて使⽤されるコンポー ネントは、塗りのパターンやサイズの 相対性も考慮して設計する。 。 プロダクトの情報構造や建設ドメイン特有 の利⽤状況を考慮しながら、コンポーネン トの設計‧拡張を⾏う。 Figmaのコンポーネントプロパティ値 の指定⽅法やレイヤー構造に⼀貫性を 持たせる。
  34. Copyright © 2023 ANDPAD Inc. Copyright © 2023 ANDPAD Inc.

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

    最後に 36 ⼀緒に並⾛していただける仲間を募集しています! 36 UI/UXデザイナー、BXデザイナー、 エンジニア、PdM、カスタマーサポート、 セールス、カスタマーサクセス、etc... • デザインシステムに完成はない(とはいえ) • Tsukuri は実⽤が始まってきたが、未だ最⼩必須要件も100%ではない
  36. 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単語として扱う思想とする。 カテゴライズしないと管理が煩雑になる画像については、プレフィックスとしてカテゴリー名(⼩⽂字、ハイフン繋ぎ)を 付与する。