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
180
Ubie Vitalsの取り組み紹介
2024年4月29日 半熟デザインシステム vol.1
8845musign
April 24, 2024
Tweet
Share
More Decks by 8845musign
See All by 8845musign
業務システムの銀の弾丸? メモ機能を考察する
8845musign
2
200
業務システムに必要なアクセシビリティ
8845musign
1
890
業務システム狂詩曲
8845musign
3
1.9k
READING The Atomic Workflow
8845musign
3
600
いまさら styled components 入門した
8845musign
3
750
いろはとアップデート LIGHTNING DESIGN SYSTEM
8845musign
0
1.5k
チームをかえていくこと そして、泥臭さについて
8845musign
1
1.8k
感性デザインとは?
8845musign
3
1.6k
○DD駆動開発
8845musign
1
130
Other Decks in Design
See All in Design
Portfolio 2023.07.28
helemarudesu
0
590
JBUG東京#22登壇資料_日頃クライアントワークを行っているディレクターが自社コーポレートサイトリニューアルを担当して学んだこと
webnaut
0
210
メドレーという会社と デザインチームのひみつ/About Medley design team
medley
0
420
MiKS inc. Company PR en_202404
zakkerooni
0
210
Backlogのイロハ・ やさしい使い方(基本編)
wattlaa
0
340
プロダクトデザインは子育て/Product design is parenting
medley
0
330
データ活用に強い、伴走型デザインパートナー「DeC」紹介資料
hopin
0
200
非デザイナーのフロントエンドエンジニアがOOUIを考える
yud0uhu
8
3.8k
decksh object reference
ajstarks
2
920
デザインテクノロジストが先導する プロダクト開発の世界
degudegu2510
1
370
雑誌『広告』をサイズ展開する
takuro_nakajima
PRO
0
1.4k
みてね デザイン組織の変遷とデザインマネージャーの振り返り
naoyawatanabe
3
640
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
12
2.4k
Done Done
chrislema
178
15k
Product Roadmaps are Hard
iamctodd
45
9.7k
Raft: Consensus for Rubyists
vanstee
133
6.3k
Adopting Sorbet at Scale
ufuk
69
8.6k
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.6k
Agile that works and the tools we love
rasmusluckow
325
20k
How GitHub (no longer) Works
holman
305
140k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
117
18k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
20
1.6k
Fantastic passwords and where to find them - at NoRuKo
philnash
39
2.5k
Stop Working from a Prison Cell
hatefulcrawdad
267
19k
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の取り組み紹介 エンジニア・ デザイナーに 向き合って 価値提供を 続けていく ある程度作り込み
公開したことで 社内外から リターンはあった