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

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

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デザイン。デザインシステムの設計‧作成‧推進。デザイナー

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

アンドパッドについて 4 1

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

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

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

デザインシステム「Tsukuri」について 8 2

デザインシステム「Tsukuri」について 9 9 Tsukuri ANDPAD のデザインシステム

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

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

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

デザインシステム「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

14 Tsukuri（Webドキュメント） 14

15 Tsukuri - 例：Components / Textarea（Figma） 15

16 Tsukuri - 例：Components / Textarea（Webドキュメント ※⼀部抜粋 1/6 ） 16

22 Tsukuri - 例：Components / Textarea（実装ドキュメント、デモ） 22

デザインシステム「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

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

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

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

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

「機能する」デザインシステムを⽬指して 28 4

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

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

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

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

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

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

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

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

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単語として扱う思想とする。カテゴライズしないと管理が煩雑になる画像については、プレフィックスとしてカテゴリー名（⼩⽂字、ハイフン繋ぎ）を付与する。

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

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

More Decks by sizucca

Other Decks in Design

Featured

Transcript