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.1k
デザインシステムの課題あれこれ
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.6k
Other Decks in Education
See All in Education
Carving the Way to Ruby Engineering
koic
3
800
Tips for the Presentation - Lecture 2 - Advanced Topics in Big Data (4023256FNR)
signer
PRO
0
190
Adobe Express
matleenalaakso
1
7.7k
Why Did Douglass Change His Mind?
oripsolob
0
280
Nodiレクチャー 「CGと数学」講義資料 2024/11/19
masatatsu
1
300
1030
cbtlibrary
0
340
The Task is not the End: The Role of Task Repetition and Sequencing In Language Teaching
uranoken
0
290
Zero to Hero
takesection
0
150
1113
cbtlibrary
0
290
Flinga
matleenalaakso
2
14k
Bitcoin Lightning Network en pratique
rlifchitz
0
110
Juvenile in Justice
oripsolob
0
140
Featured
See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
Side Projects
sachag
452
42k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.4k
What's in a price? How to price your products and services
michaelherold
244
12k
4 Signs Your Business is Dying
shpigford
182
22k
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?