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
デザインシステムの課題あれこれ
Search
Ryo Ofusa
February 05, 2021
Education
2
2.2k
デザインシステムの課題あれこれ
2021/2/5 【READYFOR】実践!フロントエンド分離戦略の資料です。
https://readyfor.connpass.com/event/198730/
Ryo Ofusa
February 05, 2021
Tweet
Share
More Decks by Ryo Ofusa
See All by Ryo Ofusa
アクセシビリティを意識したReact開発
3randy9
0
1.7k
Other Decks in Education
See All in Education
AIC 103 - Applications of Property Valuation: Essential Slides
rmccaic
0
230
Dashboards - Lecture 11 - Information Visualisation (4019538FNR)
signer
PRO
1
2.1k
Sponsor the Conference | VizChitra 2025
vizchitra
0
550
Case Studies and Course Review - Lecture 12 - Information Visualisation (4019538FNR)
signer
PRO
1
2k
技術文章を書くための執筆技術と実践法(パラグラフライティング)
hisashiishihara
18
6.5k
生成AIとの上手な付き合い方【公開版】/ How to Get Along Well with Generative AI (Public Version)
handlename
0
490
CHARMS-HP-Banner
weltraumreisende
0
230
JPCERTから始まる草の根活動~セキュリティ文化醸成のためのアクション~
masakiokuda
0
190
登壇未経験者のための登壇戦略~LTは設計が9割!!!~
masakiokuda
3
550
アウトプット0のエンジニアが半年でアウトプットしまくった話 With JAWS-UG
masakiokuda
2
320
自己紹介 / who-am-i
yasulab
PRO
3
5.2k
ARアプリを活用した防災まち歩きデータ作成ハンズオン
nro2daisuke
0
100
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
820
Navigating Team Friction
lara
187
15k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
950
Into the Great Unknown - MozCon
thekraken
40
1.9k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Transcript
1 READYFORのデザインシステムの課 題あれこれ 2021.2.5 大房 稜
自己紹介 2 • 大房 稜 • Twitter: @randy_39 • React、HTML、UIデザインが好き。
アクセシビリティお じさん • 初登壇です #readyfor_meetup
1. READYFORデザインシステム運用開始 2. デザインシステムの会発足 3. READYFORデザインシステムの理想像 4. UIコンポーネント運用面での取り組み 5. 今後の計画
アジェンダ 3 #readyfor_meetup
4 運用開始 • 2019年10月にブランドリニューアルが実施 • 他のドメインでの新規開発開始 → READYFOR Elementsをしっかり作成していたので新規 の開発ですぐデリバリーが出来て効率アップ!
デザインシステム運用開始 #readyfor_meetup
5 広く利用されていき課題が見えてくる • 適宜READYDFOR ElementsをFEチームで開発に合わせてアップデート • 適宜デザイナーと認識を合わせて実装していった しかし運用してアップデートをしていく中でデザイナー・ FE間全員で共有する場を設けてはいなかった →
課題整理と中長期の計画を建てるためにデザインシステムを考える会を発足 デザインシステム運用開始 #readyfor_meetup
6 現状の困っていることの共有 デザインシステムの会発足 • FEバックログに溜まっていて相談コストあるものがある • コンポーネントの使われ方のまとまったドキュメンテーションがない • どういうフローで新規コンポーネント作成・改善していくかが無いので話せる と嬉しい
FEメンバー #readyfor_meetup
7 そもそもREADYFORとしてのデザインシステムの理 想ってなに?🤔 デザインシステムの会発足 #readyfor_meetup
8 定義を言語化する • デザインシステムである要素を議論し言語化 • 現状のREADYFORに足りていない部分は何なのか を洗い出し • 現状デザイン原則とドキュメンテーションが足りてなく 優先度が高いと判断
デザインシステムの理想像 https://www.amazon.co.jp/dp/4862464122 #readyfor_meetup
9 デザインシステムとは? ユーザーに一貫したプロダクト体験を届けるためのデザイン指針・見た目・ルールなど共通言語のまとめたもの デザインシステム READYFOR プロダクト デザイン原則 スタイルガイド READYFORらしさをまとめた視覚的
なデザインパターン 色、アイコン、タイポグラフィ、余白、アニメー ションなど コンポーネントライブラリ ユーザーに一貫した使い方や動作をまとめ たパターン ボタン、ヘッダー、リスト、ナビゲーション、テ キストボックスなど その他 • 言葉遣い • アクセシビリティ • 命名規則 • レスポンシブ設計 • etc... #readyfor_meetup
10 #readyfor_meetup
11 READYFOR Elements運用面での取り組み • FEチーム内で困りごとをヒアリング・ブレスト ◦ スタイルガイドでの細かい気になる部分の洗い出し ◦ Elements用の課題管理シートに積んでいくようにする ◦
個人でできるものは適宜FEチームのもくもく会などで解消 • デザイナーからフロントエンドエンジニアへ実装を依頼する前にチェックするリスト コンポーネント運用面での取り組み #readyfor_meetup
12 #readyfor_meetup
13 コンポーネントの仕様の明文化 • デザインとREADYFOR Elementsとの差異がたまに起きていた ◦ PRなどでの指摘で誰に仕様を聞けば良いかわからない ▪ Storybookにまとめたほうが良さそうという方針に決定 ◦
具体的にどのようにドキュメントを書くかはまだ決めていない ◦ 現状コンポーネントの仕様の議論が起きた際には適宜一つのドキュメントにまとめて後に移植 コンポーネント運用面での取り組み #readyfor_meetup
14 デザインシステム軸 • デザイン原則の策定 ◦ どのようなプロダクトだったら、ビジョン、ミッションを達成できるのかどうか ◦ 「誰もがやりたいことを実現できる世の中」を作れるかどうか ◦ 「想いの乗ったお金の流れを増やす」ことができるかどうか
◦ READYFORらしい、READYFORっぽさとは何か? ▪ これらを考えデザイン原則を明文化していく 今後の計画 #readyfor_meetup
15 デザインシステムとは? ユーザーに一貫したプロダクト体験を届けるためのデザイン指針・見た目・ルールなど共通言語のまとめたもの デザインシステム READYFOR プロダクト デザイン原則 スタイルガイド READYFORらしさをまとめた視覚的
なデザインパターン 色、アイコン、タイポグラフィ、余白、アニメー ションなど コンポーネントライブラリ ユーザーに一貫した使い方や動作をまとめ たパターン ボタン、ヘッダー、リスト、ナビゲーション、テ キストボックスなど その他 • 言葉遣い • アクセシビリティ • 命名規則 • レスポンシブ設計 • etc... #readyfor_meetup
16 READYFOR Elements軸 • コンポーネントルール(仕様)の明文化 • StorybookのMDXフォーマットとしてコンポーネントとドキュメントをまとめる ◦ https://storybook.js.org/docs/react/api/mdx ◦
元々addon-docsとしてあったもの ◦ コンポーネントの仕様をまとめて誰でも実装と共に確認できるようになる ▪ @storybook/addon-a11yも入っているのでアクセシビリティのチェックもできる 今後の計画 #readyfor_meetup
17 デザインシステムとは? ユーザーに一貫したプロダクト体験を届けるためのデザイン指針・見た目・ルールなど共通言語のまとめたもの デザインシステム READYFOR プロダクト デザイン原則 スタイルガイド READYFORらしさをまとめた視覚的
なデザインパターン 色、アイコン、タイポグラフィ、余白、アニメー ションなど コンポーネントライブラリ ユーザーに一貫した使い方や動作をまとめ たパターン ボタン、ヘッダー、リスト、ナビゲーション、テ キストボックスなど その他 • 言葉遣い • アクセシビリティ • 命名規則 • レスポンシブ設計 • etc... #readyfor_meetup
18 良かったこと • リニューアル時に汎用的に作成していたおかげで他の開発で効率化は出来た ◦ しっかり汎用的に使えたからこそ色々課題が見えてきた 学び • デザインシステム専任の人がいない場合、ちぐはぐに運用してしまうのでガツッとまず定義や運用のルールの方針を 決めたほうが良い
◦ デザインシステムの定義 ◦ スタイルガイド・UIコンポーネント以外の要素を作っていく • とはいえ進めていくためにはコミュニケーションのコストがそこそこかかってしまう ◦ 多方面を巻き込んでコツコツでも進めていくことが大事 ◦ アクセシビリティのチェックリスト化も進めていきたい まとめ #readyfor_meetup
19 想いをつなぎ、叶える未来を、つくる Ready for building it?