デザインシステムの課題あれこれ

2021/2/5 【READYFOR】実践！フロントエンド分離戦略の資料です。
https://readyfor.connpass.com/event/198730/

Transcript

1. 1 READYFORのデザインシステムの課 題あれこれ 2021.2.5 大房 稜
2. 自己紹介 2 • 大房 稜 • Twitter: @randy_39 • React、HTML、UIデザインが好き。 アクセシビリティお じさん • 初登壇です #readyfor_meetup
3. 1. READYFORデザインシステム運用開始 2. デザインシステムの会発足 3. READYFORデザインシステムの理想像 4. UIコンポーネント運用面での取り組み 5. 今後の計画 アジェンダ 3 #readyfor_meetup
4. 4 運用開始 • 2019年10月にブランドリニューアルが実施 • 他のドメインでの新規開発開始 → READYFOR Elementsをしっかり作成していたので新規 の開発ですぐデリバリーが出来て効率アップ！ デザインシステム運用開始 #readyfor_meetup
5. 5 広く利用されていき課題が見えてくる • 適宜READYDFOR ElementsをFEチームで開発に合わせてアップデート • 適宜デザイナーと認識を合わせて実装していった しかし運用してアップデートをしていく中でデザイナー・ FE間全員で共有する場を設けてはいなかった → 課題整理と中長期の計画を建てるためにデザインシステムを考える会を発足 デザインシステム運用開始 #readyfor_meetup
6. 6 現状の困っていることの共有 デザインシステムの会発足 • FEバックログに溜まっていて相談コストあるものがある • コンポーネントの使われ方のまとまったドキュメンテーションがない • どういうフローで新規コンポーネント作成・改善していくかが無いので話せる と嬉しい FEメンバー #readyfor_meetup
7. 7 そもそもREADYFORとしてのデザインシステムの理 想ってなに？🤔 デザインシステムの会発足 #readyfor_meetup
8. 8 定義を言語化する • デザインシステムである要素を議論し言語化 • 現状のREADYFORに足りていない部分は何なのか を洗い出し • 現状デザイン原則とドキュメンテーションが足りてなく 優先度が高いと判断 デザインシステムの理想像 https://www.amazon.co.jp/dp/4862464122 #readyfor_meetup
9. 9 デザインシステムとは？ ユーザーに一貫したプロダクト体験を届けるためのデザイン指針・見た目・ルールなど共通言語のまとめたもの デザインシステム
 READYFOR プロダクト
 デザイン原則
 スタイルガイド
 
 READYFORらしさをまとめた視覚的 なデザインパターン
 
 色、アイコン、タイポグラフィ、余白、アニメー ションなど
 コンポーネントライブラリ
 
 ユーザーに一貫した使い方や動作をまとめ たパターン
 
 ボタン、ヘッダー、リスト、ナビゲーション、テ キストボックスなど
 その他
 
 • 言葉遣い
 • アクセシビリティ
 • 命名規則
 • レスポンシブ設計
 • etc...
 #readyfor_meetup
10. 10 #readyfor_meetup
11. 11 READYFOR Elements運用面での取り組み • FEチーム内で困りごとをヒアリング・ブレスト ◦ スタイルガイドでの細かい気になる部分の洗い出し ◦ Elements用の課題管理シートに積んでいくようにする ◦ 個人でできるものは適宜FEチームのもくもく会などで解消 • デザイナーからフロントエンドエンジニアへ実装を依頼する前にチェックするリスト コンポーネント運用面での取り組み #readyfor_meetup
12. 12 #readyfor_meetup
13. 13 コンポーネントの仕様の明文化 • デザインとREADYFOR Elementsとの差異がたまに起きていた ◦ PRなどでの指摘で誰に仕様を聞けば良いかわからない ▪ Storybookにまとめたほうが良さそうという方針に決定 ◦ 具体的にどのようにドキュメントを書くかはまだ決めていない ◦ 現状コンポーネントの仕様の議論が起きた際には適宜一つのドキュメントにまとめて後に移植 コンポーネント運用面での取り組み #readyfor_meetup
14. 14 デザインシステム軸 • デザイン原則の策定 ◦ どのようなプロダクトだったら、ビジョン、ミッションを達成できるのかどうか ◦ 「誰もがやりたいことを実現できる世の中」を作れるかどうか ◦ 「想いの乗ったお金の流れを増やす」ことができるかどうか ◦ READYFORらしい、READYFORっぽさとは何か？ ▪ これらを考えデザイン原則を明文化していく 今後の計画 #readyfor_meetup
15. 15 デザインシステムとは？ ユーザーに一貫したプロダクト体験を届けるためのデザイン指針・見た目・ルールなど共通言語のまとめたもの デザインシステム
 READYFOR プロダクト
 デザイン原則
 スタイルガイド
 
 READYFORらしさをまとめた視覚的 なデザインパターン
 
 色、アイコン、タイポグラフィ、余白、アニメー ションなど
 コンポーネントライブラリ
 
 ユーザーに一貫した使い方や動作をまとめ たパターン
 
 ボタン、ヘッダー、リスト、ナビゲーション、テ キストボックスなど
 その他
 
 • 言葉遣い
 • アクセシビリティ
 • 命名規則
 • レスポンシブ設計
 • etc...
 #readyfor_meetup
16. 16 READYFOR Elements軸 • コンポーネントルール(仕様)の明文化 • StorybookのMDXフォーマットとしてコンポーネントとドキュメントをまとめる ◦ https://storybook.js.org/docs/react/api/mdx ◦ 元々addon-docsとしてあったもの ◦ コンポーネントの仕様をまとめて誰でも実装と共に確認できるようになる ▪ @storybook/addon-a11yも入っているのでアクセシビリティのチェックもできる 今後の計画 #readyfor_meetup
17. 17 デザインシステムとは？ ユーザーに一貫したプロダクト体験を届けるためのデザイン指針・見た目・ルールなど共通言語のまとめたもの デザインシステム
 READYFOR プロダクト
 デザイン原則
 スタイルガイド
 
 READYFORらしさをまとめた視覚的 なデザインパターン
 
 色、アイコン、タイポグラフィ、余白、アニメー ションなど
 コンポーネントライブラリ
 
 ユーザーに一貫した使い方や動作をまとめ たパターン
 
 ボタン、ヘッダー、リスト、ナビゲーション、テ キストボックスなど
 その他
 
 • 言葉遣い
 • アクセシビリティ
 • 命名規則
 • レスポンシブ設計
 • etc...
 #readyfor_meetup
18. 18 良かったこと • リニューアル時に汎用的に作成していたおかげで他の開発で効率化は出来た ◦ しっかり汎用的に使えたからこそ色々課題が見えてきた 学び • デザインシステム専任の人がいない場合、ちぐはぐに運用してしまうのでガツッとまず定義や運用のルールの方針を 決めたほうが良い ◦ デザインシステムの定義 ◦ スタイルガイド・UIコンポーネント以外の要素を作っていく • とはいえ進めていくためにはコミュニケーションのコストがそこそこかかってしまう ◦ 多方面を巻き込んでコツコツでも進めていくことが大事 ◦ アクセシビリティのチェックリスト化も進めていきたい まとめ #readyfor_meetup
19. 19 想いをつなぎ、叶える未来を、つくる Ready for building it?