Lock in $30 Savings on PRO—Offer Ends Soon! ⏳
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
BtoB SaaSプロダクトで「機能する」デザインシステムを目指して
Search
sizucca
June 15, 2023
Design
5
5.6k
BtoB SaaSプロダクトで「機能する」デザインシステムを目指して
デザインシステム、今なにやってる?導入と運用のリアルな裏側を公開!-Lunch LT-
2023/06/15
https://findy.connpass.com/event/285080/
sizucca
June 15, 2023
Tweet
Share
More Decks by sizucca
See All by sizucca
「プロダクトとユーザーをつなぐ」BtoB SaaSデザインの面白さ
sizucca
2
2.5k
アンドパッドのデザインシステムの今までとこれから
sizucca
4
3.4k
PowerPointのここがスゴイ!!
sizucca
0
85
スライド資料のデザインシステムをつくっている話
sizucca
0
54
UXデザインを組織に導入する
sizucca
0
82
社内のプロダクト開発でデザインスプリントを実践して分かったこと
sizucca
0
54
効果測定の効率化のために行った3つのこと
sizucca
0
50
脱JavaScript! CSSで作るアニメーション
sizucca
0
50
Other Decks in Design
See All in Design
Personal Story Sequence - Vendetta(WIP)
elrns88
0
310
【pmconf2024】ユーザーになりきる「コスプレUX」で リサーチ解像度を上げる
kamechi7222222
1
5.7k
Design System for training program
mct
0
290
Money Forward UIの紹介 / Introducing Money Forward UI
taigakiyokawa
1
2.5k
20241019-CUD友の会「困った!を解決するデザイン改訂版」交流会
majimasachi
0
280
急成長中のWINTICKETにおける ちいさくはじめるライティング改善 / winticket-writing
cyberagentdevelopers
PRO
1
200
【Designship 2024|10.13】デザイン組織を進化させるための仕組み化の要諦
payatsusan213
1
660
Осязаемый потребительский опыт. Ловим его за хвост с Картой процесса-опыта
ashapiro
2
230
Haruki_Konaka_Portforio.pdf
haruki556
0
760
portfolio
amitnk
1
150
202409_会社概要資料_Englishver.pdf
zakkerooni
0
210
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜
tak073
0
140
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1366
200k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Designing on Purpose - Digital PM Summit 2013
jponch
116
7k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Done Done
chrislema
181
16k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
1
96
Writing Fast Ruby
sferik
627
61k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
26
1.8k
Measuring & Analyzing Core Web Vitals
bluesmoon
4
160
Transcript
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. 「機能する」デザインシステムを⽬指して
Copyright © 2023 ANDPAD Inc. Copyright © 2023 ANDPAD Inc.
アンドパッドについて 4 1
Copyright © 2023 ANDPAD Inc. 5 Copyright © 2023 ANDPAD
Inc. いま建築‧建設業界で “ものづくり” に携わる⽅の⼈⼿不⾜や ⻑時間労働が社会問題となっています。 今後これらの課題に対して、デジタルシフトによる⽣産性向上や、 就労者数の底上げを急ぐ必要があります。 本来、ものづくりに携わる⼈々は、誰かに幸せを届ける⼈たちです。 そんな⽅々がもっとクリエイティブに、もっと豊かに働けるよう、 私たちは熱い想いで⽇々現場に向き合っています。
Copyright © 2023 ANDPAD Inc. Copyright © 2023 ANDPAD Inc.
アンドパッドについて 6 建設業務をDX化し、社内と現場をつなぐ「ANDPAD」の開発‧運⽤ 現場 建設業に特化したさまざまな アプリケーションで情報を⼀元管理 職⼈∕業者 メーカー∕流通 営業∕監督∕設計 事務∕管理職 社内
Copyright © 2023 ANDPAD Inc. Copyright © 2023 ANDPAD Inc.
アンドパッドについて 7 業界全体の課題解決を⽬指し、さまざまなプロダクトを展開 … etc
Copyright © 2023 ANDPAD Inc. Copyright © 2023 ANDPAD Inc.
デザインシステム「Tsukuri」について 8 2
Copyright © 2023 ANDPAD Inc. Copyright © 2023 ANDPAD Inc.
デザインシステム「Tsukuri」について 9 9 Tsukuri ANDPAD のデザインシステム
Copyright © 2023 ANDPAD Inc. Copyright © 2023 ANDPAD Inc.
10 初期フェーズで定めた「Tsukuri」の最⼩必須要件 デザインシステム「Tsukuri」について 明⽂化された理念や原則が存在する ⾊、サイズ、⽂⾔の選択や決定に関する基準がある ⾊、サイズなどの要素がデザイントークンとして定義されている コンポーネントの作成に関するルールが存在する 使⽤頻度の⾼いコンポーネントが揃っている コンポーネントが低コストで利⽤可能である ※デザインデータとシステムの連携、リソースの参照性、継続的なアップデートの可能性など 抽象的 具体的
Copyright © 2023 ANDPAD Inc. Copyright © 2023 ANDPAD Inc.
11 最初の約6ヶ⽉(2021年10⽉〜2022年3⽉)の進捗状況 デザインシステム「Tsukuri」について 明⽂化された理念や原則が存在する ⾊、サイズ、⽂⾔の選択や決定に関する基準がある ⾊、サイズなどの要素がデザイントークンとして定義されている コンポーネントの作成に関するルールが存在する 使⽤頻度の⾼いコンポーネントが揃っている コンポーネントが低コストで利⽤可能である ※デザインデータとシステムの連携、リソースの参照性、継続的なアップデートの可能性など 抽象的 具体的
Copyright © 2023 ANDPAD Inc. Copyright © 2023 ANDPAD Inc.
12 その後の約14ヶ⽉(2022年4⽉〜2023年5⽉)の進捗状況 デザインシステム「Tsukuri」について 明⽂化された理念や原則が存在する ⾊、サイズ、⽂⾔の選択や決定に関する基準がある ⾊、サイズなどの要素がデザイントークンとして定義されている コンポーネントの作成に関するルールが存在する 使⽤頻度の⾼いコンポーネントが揃っている コンポーネントが低コストで利⽤可能である ※デザインデータとシステムの連携、リソースの参照性、継続的なアップデートの可能性など 抽象的 具体的
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
Copyright © 2023 ANDPAD Inc. Copyright © 2023 ANDPAD Inc.
14 Tsukuri(Webドキュメント) 14
Copyright © 2023 ANDPAD Inc. Copyright © 2023 ANDPAD Inc.
15 Tsukuri - 例:Components / Textarea(Figma) 15
Copyright © 2023 ANDPAD Inc. Copyright © 2023 ANDPAD Inc.
16 Tsukuri - 例:Components / Textarea(Webドキュメント ※⼀部抜粋 1/6 ) 16
Copyright © 2023 ANDPAD Inc. Copyright © 2023 ANDPAD Inc.
17 Tsukuri - 例:Components / Textarea(Webドキュメント ※⼀部抜粋 2/6 ) 17
Copyright © 2023 ANDPAD Inc. Copyright © 2023 ANDPAD Inc.
18 Tsukuri - 例:Components / Textarea(Webドキュメント ※⼀部抜粋 3/6 ) 18
Copyright © 2023 ANDPAD Inc. Copyright © 2023 ANDPAD Inc.
19 Tsukuri - 例:Components / Textarea(Webドキュメント ※⼀部抜粋 4/6 ) 19
Copyright © 2023 ANDPAD Inc. Copyright © 2023 ANDPAD Inc.
20 Tsukuri - 例:Components / Textarea(Webドキュメント ※⼀部抜粋 5/6 ) 20
Copyright © 2023 ANDPAD Inc. Copyright © 2023 ANDPAD Inc.
21 Tsukuri - 例:Components / Textarea(Webドキュメント ※⼀部抜粋 6/6 ) 21
Copyright © 2023 ANDPAD Inc. Copyright © 2023 ANDPAD Inc.
22 Tsukuri - 例:Components / Textarea(実装ドキュメント、デモ) 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
Copyright © 2023 ANDPAD Inc. Copyright © 2023 ANDPAD Inc.
デザインシステムを プロダクトに導⼊して気づいたこと 24 3 フォームコンポーネントの実践事例
Copyright © 2023 ANDPAD Inc. Copyright © 2023 ANDPAD Inc.
デザインシステムをプロダクトに導⼊して気づいたこと 25 コンポーネントを個別に作成している時には問題を感じなかった Field Label Textfield Select Checkbox Radio Switch
Copyright © 2023 ANDPAD Inc. Copyright © 2023 ANDPAD Inc.
デザインシステムをプロダクトに導⼊して気づいたこと 26 コンポーネントをプロダクトに導⼊ Checkbox Radio Switch ※実際の画⾯を参考にして作成した、説明⽤のイメージです。 Field Label Textfield Select
Copyright © 2023 ANDPAD Inc. Copyright © 2023 ANDPAD Inc.
デザインシステムをプロダクトに導⼊して気づいたこと 27 コンポーネントをプロダクトに導⼊ → ざまざまな課題が浮き彫りに ※実際の画⾯を参考にして作成した、説明⽤のイメージです。 背景⾊によっては、コンポーネントが 予期しない印象になる。(視認性が落ち る、⾊同⼠のハレーションが発⽣する、など) 組み合わせによっては、コンポーネント 間の相対的なバランスが悪くなる場合が ある。(塗りのパターン、サイズ感など) プロダクトの要件を満たすには 不⾜しているパターンや振る舞 いがある。 Figmaの作りの統⼀感が⽋けているため 使いにくい箇所がある。(コンポーネントプ ロパティ値の指定⽅法、レイヤー構造など)
Copyright © 2023 ANDPAD Inc. Copyright © 2023 ANDPAD Inc.
「機能する」デザインシステムを⽬指して 28 4
Copyright © 2023 ANDPAD Inc. Copyright © 2023 ANDPAD Inc.
「機能する」デザインシステムを⽬指して 29 29 1. 最初はアップデートを繰り返す前提で作成する 2. プロダクトの情報構造から考える 3. デザインシステムの「使いやすさ」も考慮する
Copyright © 2023 ANDPAD Inc. Copyright © 2023 ANDPAD Inc.
「機能する」デザインシステムを⽬指して 30 1. 最初はアップデートを繰り返す前提で作成する 基本設計‧ デザインデータ を作成 動作‧振る舞い を定義 実装‧テスト プロダクトで 利⽤ ドキュメント を作成
Copyright © 2023 ANDPAD Inc. Copyright © 2023 ANDPAD Inc.
デザインシステムを アップデート 「機能する」デザインシステムを⽬指して 31 2. プロダクトの情報構造から考える プロダクトの 情報構造を整理 設計したUIを基に パターンを抽象化
Copyright © 2023 ANDPAD Inc. Copyright © 2023 ANDPAD Inc.
「機能する」デザインシステムを⽬指して 32 3. デザインシステムの「使いやすさ」も考慮する 例)Figmaのコンポーネントプロパティ値の指定⽅法 Selected の指定⽅法がコンポーネントで異なる 類似する振る舞いの指定には⼀貫性を持たせる
Copyright © 2023 ANDPAD Inc. Copyright © 2023 ANDPAD Inc.
「機能する」デザインシステムを⽬指して 33 Before ※実際の画⾯を参考にして作成した、説明⽤のイメージです。 背景⾊によっては、コンポーネントが 予期しない印象になる。(視認性が落ち る、⾊同⼠のハレーションが発⽣する、など) 組み合わせによっては、コンポーネント 間の相対的なバランスが悪くなる場合が ある。(塗りのパターン、サイズ感など) プロダクトの要件を満たすには 不⾜しているパターンや振る舞 いがある。 Figmaの作りに⼀貫性が⽋けているため 使いにくい箇所がある。(コンポーネントプ ロパティ値の指定⽅法、レイヤー構造など)
Copyright © 2023 ANDPAD Inc. Copyright © 2023 ANDPAD Inc.
「機能する」デザインシステムを⽬指して 34 After ※実際の画⾯を参考にして作成した、説明⽤のイメージです。 UIでの利⽤シーンや将来的な拡張性を 意識しながら、柔軟性のあるコンポー ネントを設計する。 頻繁に組み合わせて使⽤されるコンポー ネントは、塗りのパターンやサイズの 相対性も考慮して設計する。 。 プロダクトの情報構造や建設ドメイン特有 の利⽤状況を考慮しながら、コンポーネン トの設計‧拡張を⾏う。 Figmaのコンポーネントプロパティ値 の指定⽅法やレイヤー構造に⼀貫性を 持たせる。
Copyright © 2023 ANDPAD Inc. Copyright © 2023 ANDPAD Inc.
「機能する」デザインシステムを⽬指して 35 コンポーネント間の相対的なバランスを調整した Before → After
Copyright © 2023 ANDPAD Inc. Copyright © 2023 ANDPAD Inc.
最後に 36 ⼀緒に並⾛していただける仲間を募集しています! 36 UI/UXデザイナー、BXデザイナー、 エンジニア、PdM、カスタマーサポート、 セールス、カスタマーサクセス、etc... • デザインシステムに完成はない(とはいえ) • Tsukuri は実⽤が始まってきたが、未だ最⼩必須要件も100%ではない
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単語として扱う思想とする。 カテゴライズしないと管理が煩雑になる画像については、プレフィックスとしてカテゴリー名(⼩⽂字、ハイフン繋ぎ)を 付与する。