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
200
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
900
業務システム狂詩曲
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
Wolf and the seven goatkids
_limex_
PRO
0
470
Amebaデザインシステム Spindleの開発 / The Development of Spindle
spindle
4
650
noteのアクセシビリティ これまでのプロダクト・組織へのアプローチとこれからのこと
tatsuyasawanobori
1
1.1k
Web 組版の課題とその解法
yamatoiizuka
0
110
Ride or Die Animatics
warwatkar
0
140
1人歩きする営業資料作成
yutoshukuya
2
160
The Fight
euralisw
0
120
非デザイナーのフロントエンドエンジニアがOOUIを考える
yud0uhu
8
3.8k
プロダクトデザインは子育て/Product design is parenting
medley
0
330
WHAT ARE ME?
takuro_nakajima
PRO
0
1.5k
モデル・デザイン入門
akitsugu7935
0
480
JBUG東京#22登壇資料_日頃クライアントワークを行っているディレクターが自社コーポレートサイトリニューアルを担当して学んだこと
webnaut
0
210
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
28
4k
Designing for humans not robots
tammielis
247
25k
4 Signs Your Business is Dying
shpigford
176
21k
The Straight Up "How To Draw Better" Workshop
denniskardys
228
130k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
15
1.6k
The Art of Programming - Codeland 2020
erikaheidi
43
12k
Build The Right Thing And Hit Your Dates
maggiecrowley
25
2k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
188
16k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.9k
It's Worth the Effort
3n
180
27k
Designing with Data
zakiwarfel
96
4.8k
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の取り組み紹介 エンジニア・ デザイナーに 向き合って 価値提供を 続けていく ある程度作り込み
公開したことで 社内外から リターンはあった