Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Ubie Vitalsの取り組み紹介
Search
8845musign
April 24, 2024
Design
0
740
Ubie Vitalsの取り組み紹介
2024年4月29日 半熟デザインシステム vol.1
8845musign
April 24, 2024
Tweet
Share
More Decks by 8845musign
See All by 8845musign
業務システムの銀の弾丸? メモ機能を考察する
8845musign
2
220
業務システムに必要なアクセシビリティ
8845musign
1
990
業務システム狂詩曲
8845musign
4
2k
READING The Atomic Workflow
8845musign
3
670
いまさら styled components 入門した
8845musign
3
850
いろはとアップデート LIGHTNING DESIGN SYSTEM
8845musign
0
1.7k
チームをかえていくこと そして、泥臭さについて
8845musign
1
2k
感性デザインとは?
8845musign
4
1.7k
○DD駆動開発
8845musign
1
140
Other Decks in Design
See All in Design
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜 移動・不動産領域の取り組み
tmtgtkhs
0
190
Goodpatch Tour💙 / We are hiring!
goodpatch
31
780k
横断組織デザイナーの働き方
mixi_design
PRO
0
290
(第1回) アーキテクト・テックリード育成講座
masakaya
0
130
共創するのはモノではなく価値 ── 日本の「はたらく」を変える挑戦 / Designship2024 MainStage
visional_engineering_and_design
1
680
241214_StackNagoya_プレイングマネージャーのプレイングの時間の使い方
kiyoshifuwa
0
190
ZKK_001.pdf
nicholaspegu
0
1.4k
Improve a service workshop
mastervicedesign
1
140
ABEMAの進化 – 複雑化したコンテンツ構造とUI改善への道 – / abema-ui-improve
cyberagentdevelopers
PRO
2
510
一人ひとりのポテンシャルを活かしたナレッジマネジメントとは?
atsushihomma
0
330
Les petites aventures de CSS, saison 2025
goetter
3
3.9k
実利の世界で、表現者である
kiyou77
2
360
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
94
13k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Bash Introduction
62gerente
610
210k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.4k
Making the Leap to Tech Lead
cromwellryan
133
9k
KATA
mclloyd
29
14k
Designing for humans not robots
tammielis
250
25k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
19
2.3k
Docker and Python
trallard
43
3.2k
Being A Developer After 40
akosma
89
590k
YesSQL, Process and Tooling at Scale
rocio
170
14k
The Pragmatic Product Professional
lauravandoore
32
6.4k
Transcript
Ubie Vitalsの取り組み紹介 2024 / 4 / 29 Ubie株式会社 横内 宏樹
半熟デザインシステム vol.1
2 発表者 2 腹筋ローラーの力を信じろ • 業務システムの開発経験が多いフリーランスです • UIデザイン・要件定義・フロントエンドなど • 業務委託でUbieさんにお世話になっています
• Ubie Vitalsの構築が主な仕事です • アクセシビリティ好事例応募に向けた アクセシビリティチェックなんかも担当しました X:@8845musign GitHub:@8845musign
3 アジェンダ Ubie Vitalsの取り組み紹介 1. Ubie Vitalsの出現と失敗 2. 再始動 3.
具体的な施策 4. 評価点 5. 反省・課題点 6. まとめ
4 Ubie Vitalsの出現と失敗
5 • 生産基盤の構築を目的として、コストパフォーマンス優先で個別に改善を行っていた • 結果、ツールやドキュメントが分散し、メンバーのオーバーヘッドが増加 • 解決として、分散したツールやドキュメントをとりまとめるUbie Vitalsが誕生 ◦ Notionベースでドキュメントを作った
◦ 実際に動作するサンプルを確認するため、Storybookも平行管理 Ubie Vitalsの出現 Ubie Vitalsの取り組み紹介
6 • 組織の統廃合にともなうNotion管理の煩雑化 • ドキュメントの多重管理、NotionとStorybookの両 方を見なくてはならない • ところどころルールやコンポーネントが足りておら ずエンジニアに受け入れられなかった 失敗
6
7 失敗 7 そして、志半ばのドキュメントだけが残った……
8 再始動 🔥
9 再び高まる機運 Ubie Vitalsの取り組み紹介 人の増加で効率化がより効果的に、構築手法の統一化ニーズも増えた プロダクト の複雑化 エンジニア の増加 ✕
10 再び高まる機運 Ubie Vitalsの取り組み紹介 人の増加で効率化がより効果的に、構築手法の統一化ニーズも増えた プロダクト の複雑化 エンジニア の増加 ✕
アクセシビリティの 品質担保
11 以前の反省を活かした方針 Ubie Vitalsの取り組み紹介 活動の 継続性 作り込んで からのシェア ✕
12 具体的な施策
13 閲覧性を重視して 独自実装した ドキュメントサイト 13 実は、だいぶ前から公開状態だった トップページ Buttonコンポーネントページ
14 コンポーネント の整理と拡充 コンポーネントの一覽 矩形が羅列されたボックスコンポーネントのサンプル
15 コンポーネント のレイアウト をまとめたコンテンツ フォームのレイアウトをまとめたページ
16 各種リポジトリの OSS化 16 OSS公開された各種リポジトリ
17 評価点
18 継続的な活動できる Ubie Vitalsの取り組み紹介 • 片手間になりやすいデザインシステムの活動だが、 限られた時間でも役割分担が明確なことで継続し てアウトプットをだせている • 正社員メンバーが意思決定やフィードバックのとりまとめ、社内浸透などを行う
• 業務委託メンバーが実際の構築に注力する ◦ 方針が共有されていればある程度独自で動ける
19 シェア直後から使ってもらえた Ubie Vitalsの取り組み紹介 ドキュメントを読んで質問をもらえた 早速Ubie UIを使っているコードを発見
20 シェア直後から使ってもらえた Ubie Vitalsの取り組み紹介 ドキュメントを読んで質問をもらえた 早速Ubie UIを使っているコードを発見 想像以上に、CSSを書きたくなかった?
21 チームを超えたコントリビュート Ubie Vitalsの取り組み紹介 社内外からPRをいただく
22 PRとして効果的であった Ubie Vitalsの取り組み紹介 多くのいいねをいただいたXの公開ポスト
23 PRとして効果的であった Ubie Vitalsの取り組み紹介 多くのいいねをいただいたXの公開ポスト 公開しよう! デザインシステム
24 反省・課題点
25 他メンバーの利用スタートが遅れた Ubie Vitalsの取り組み紹介 • 実際にエンジニア・デザイナーの作業に直接影響しない事柄に時間をさいてしまった ◦ ドキュメントサイトの構築に時間をかけすぎた ▪ コンポーネントの背景や意義など張り切ってコンテンツを書いた
◦ 既存ページへのデザイントークンの統一 ▪ 新規の開発では既存は気にしてない ▪ 対応するにしても、継続して開発している機能を対応すべきだった
26 様々な乖離 Ubie Vitalsの取り組み紹介 • 実プロダクトとデザインシステム ◦ 実際のプロダクトを見ずにデザインシステムを育てる期間が長かった ◦ プロダクト導入を開始したタイミングで不具合や不足したコンポーネントなどが多く見つかった
• Figmaとデザインシステム ◦ Vitals未使用のデザインが存在し、エンジニアを逆に惑わせる箇所がある
27 様々な乖離 Ubie Vitalsの取り組み紹介 • 実プロダクトとデザインシステム ◦ 実際のプロダクトを見ずにデザインシステムを育てる期間が長かった ◦ プロダクト導入を開始したタイミングで不具合や不足したコンポーネントなどが多く見つかった
• Figmaとデザインシステム ◦ Vitals未使用のデザインが存在し、エンジニアを逆に惑わせる箇所がある どうする? • プロダクト・会社でのゴールから逆算してロードマップを引いて対応していく • 浸透&浸透&浸透
28 まとめ
29 まとめ Ubie Vitalsの取り組み紹介 エンジニア・ デザイナーに 向き合って 価値提供を 続けていく ある程度作り込み
公開したことで 社内外から リターンはあった