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
280
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
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
AIが介在するサービスのUX設計で 考えるべきポイントとは
pkshadeck
0
120
WHAT ARE ME?
takuro_nakajima
PRO
0
1.5k
Métricas de UX - Reflexões sobre o uso de dados numéricos no contexto de UX
videlvequio
0
230
Wishing Star Comic
torije
2
1.2k
PRDがデザインプロセスを高速化した話
tooomo
1
400
IPの世界観に寄り添う、マルチブランドなカラーシステム設計
jirosh1998
0
6.6k
ゲームクリエイター、事業会社のデザイナーになる
satomium1
0
200
Information Architects: The Missing Link in Design Systems
soysaucechin
0
130
noteのアクセシビリティ これまでのプロダクト・組織へのアプローチとこれからのこと
tatsuyasawanobori
1
1.1k
3D空間を扱うUI表現とユーザビリティ
akinen
0
480
プロジェクトを成功に導く、デザイナーの仕事
akaneyoshikawa
0
140
社内管理画面のデザインもプロダクトデザイン
takanorip
4
760
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
13
2.4k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
Infographics Made Easy
chrislema
238
18k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
8
3.5k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
228
16k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
Reflections from 52 weeks, 52 projects
jeffersonlam
345
19k
Documentation Writing (for coders)
carmenintech
60
4k
Thoughts on Productivity
jonyablonski
60
3.9k
Mobile First: as difficult as doing things right
swwweet
217
8.6k
Clear Off the Table
cherdarchuk
85
310k
Being A Developer After 40
akosma
67
580k
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の取り組み紹介 エンジニア・ デザイナーに 向き合って 価値提供を 続けていく ある程度作り込み
公開したことで 社内外から リターンはあった