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
590
Ubie Vitalsの取り組み紹介
2024年4月29日 半熟デザインシステム vol.1
8845musign
April 24, 2024
Tweet
Share
More Decks by 8845musign
See All by 8845musign
業務システムの銀の弾丸? メモ機能を考察する
8845musign
2
210
業務システムに必要なアクセシビリティ
8845musign
1
930
業務システム狂詩曲
8845musign
3
1.9k
READING The Atomic Workflow
8845musign
3
620
いまさら styled components 入門した
8845musign
3
790
いろはとアップデート LIGHTNING DESIGN SYSTEM
8845musign
0
1.6k
チームをかえていくこと そして、泥臭さについて
8845musign
1
1.9k
感性デザインとは?
8845musign
3
1.7k
○DD駆動開発
8845musign
1
130
Other Decks in Design
See All in Design
PdMというキャリアがUXデザイナーの頭によぎったとき スポットライトをどう当て、 どうシステムを見つめるか
muture
0
490
スマートバンクのプロダクトデザイン
putchomsmartbank
6
2k
Shinjuku.rb #91 好きなもの紹介LT大会 "便利"や"役に立つ"とは別方面のRubyをつかったプログラミングがたのしい話
bash0c7
0
130
JBUG京都#1登壇資料_「考える」をマネジメントする_ビーワークス高濱
webnaut
0
390
私の困りごとと解決案 / My issues and proposed solutions
kubosho
1
190
What Was UX Design All About?
ykazu
3
600
TrollsTopia: Funtography- Part 1
kenijam
1
260
Sci-Fi: Descenso
elrtovar
0
200
Chatwork プロダクトデザイン部 組織紹介(デザイナー向け)
chatwork_hr
1
520
速攻で価値検証して無駄なものを作らないプロダクトデザイン
cremacrema
3
320
Sunny Day Storyboard
ctagulao98
0
190
良いアプリケーションをデザインするための感覚の持ち方 / Cultivating a Sense for Designing Great Applications
usagimaru
23
9.1k
Featured
See All Featured
A designer walks into a library…
pauljervisheath
201
24k
Building Adaptive Systems
keathley
34
2k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
36
9.1k
What's new in Ruby 2.0
geeforr
338
31k
Clear Off the Table
cherdarchuk
89
320k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
129
32k
Building Flexible Design Systems
yeseniaperezcruz
323
37k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
662
120k
A Tale of Four Properties
chriscoyier
155
22k
A Philosophy of Restraint
colly
200
16k
Facilitating Awesome Meetings
lara
46
5.8k
Thoughts on Productivity
jonyablonski
64
4.1k
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の取り組み紹介 エンジニア・ デザイナーに 向き合って 価値提供を 続けていく ある程度作り込み
公開したことで 社内外から リターンはあった