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

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

7
業界全体の課題解決を⽬指し、さまざまなプロダクトを展開
… etc

View Slide

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

View Slide

9
9
Tsukuri
ANDPAD のデザインシステム

View Slide

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

View Slide

最初の約6ヶ⽉（2021年10⽉〜2022年3⽉）の進捗状況
抽象的
具体的

View Slide

その後の約14ヶ⽉（2022年4⽉〜2023年5⽉）の進捗状況
抽象的
具体的

View Slide

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 Slide

Tsukuri（Webドキュメント）
14

View Slide

Tsukuri - 例：Components / Textarea（Figma）
15

View Slide

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

View Slide

17

View Slide

18

View Slide

19

View Slide

20

View Slide

21

View Slide

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

View Slide

23
エンジニアリングの取り組みについて
第1回：⽅針と全体像の紹介
https://tech.andpad.co.jp/entry/2023/03/02/100000
第2回：UI コンポーネントの開発
第3回：リポジトリの構成‧開発ツール
第4回：現状と今後

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

35
コンポーネント間の相対的なバランスを調整した Before → After

View Slide

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

View Slide

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 Slide

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

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

sizucca

More Decks by sizucca

Other Decks in Design

Featured

Transcript