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
Common STIs in London: Symptoms, Risks & Prevention
medicaldental
0
130
計算情報学研究室 (数理情報学第7研究室)紹介スライド (2025)
tomonatu8
0
540
予習動画
takenawa
0
7k
諸外国の理科カリキュラムにおけるビッグアイデアの構造比較
arumakan
0
330
SkimaTalk Tutorial for Students
skimatalk
0
1.8k
ANS-C01_2回不合格から合格までの道程
amarelo_n24
1
260
America and the World
oripsolob
0
510
SkimaTalk Teacher Guidelines
skimatalk
0
790k
20250625_なんでもCopilot 一年の振り返り
ponponmikankan
0
220
『会社を知ってもらう』から『安心して活躍してもらう』までの プロセスとフロー
sasakendayo
0
230
CHARMS-HP-Banner
weltraumreisende
0
230
教員向け生成AI基礎講座(2025年3月28日 東京大学メタバース工学部 ジュニア講座)
luiyoshida
1
570
Featured
See All Featured
Adopting Sorbet at Scale
ufuk
77
9.5k
Git: the NoSQL Database
bkeepers
PRO
430
65k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Embracing the Ebb and Flow
colly
86
4.7k
Building Adaptive Systems
keathley
43
2.7k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Statistics for Hackers
jakevdp
799
220k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Documentation Writing (for coders)
carmenintech
72
4.9k
The Cost Of JavaScript in 2023
addyosmani
51
8.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?