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

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

16 READYFOR Elements軸 • コンポーネントルール(仕様)の明文化 • StorybookのMDXフォーマットとしてコンポーネントとドキュメントをまとめる ◦ https://storybook.js.org/docs/react/api/mdx ◦
元々addon-docsとしてあったもの ◦ コンポーネントの仕様をまとめて誰でも実装と共に確認できるようになる ▪ @storybook/addon-a11yも入っているのでアクセシビリティのチェックもできる今後の計画 #readyfor_meetup

18 良かったこと • リニューアル時に汎用的に作成していたおかげで他の開発で効率化は出来た ◦ しっかり汎用的に使えたからこそ色々課題が見えてきた学び • デザインシステム専任の人がいない場合、ちぐはぐに運用してしまうのでガツッとまず定義や運用のルールの方針を決めたほうが良い
◦ デザインシステムの定義 ◦ スタイルガイド・UIコンポーネント以外の要素を作っていく • とはいえ進めていくためにはコミュニケーションのコストがそこそこかかってしまう ◦ 多方面を巻き込んでコツコツでも進めていくことが大事 ◦ アクセシビリティのチェックリスト化も進めていきたいまとめ #readyfor_meetup

19 想いをつなぎ、叶える未来を、つくる Ready for building it?

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

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

Ryo Ofusa

More Decks by Ryo Ofusa

Other Decks in Education

Featured

Transcript

1 READYFORのデザインシステムの課題あれこれ 2021.2.5 大房稜

自己紹介 2 • 大房稜 • Twitter: @randy_39 • React、HTML、UIデザインが好き。

1. READYFORデザインシステム運用開始 2. デザインシステムの会発足 3. READYFORデザインシステムの理想像 4. UIコンポーネント運用面での取り組み 5. 今後の計画

4 運用開始 • 2019年10月にブランドリニューアルが実施 • 他のドメインでの新規開発開始 → READYFOR Elementsをしっかり作成していたので新規の開発ですぐデリバリーが出来て効率アップ！

7 そもそもREADYFORとしてのデザインシステムの理想ってなに？🤔 デザインシステムの会発足 #readyfor_meetup

8 定義を言語化する • デザインシステムである要素を議論し言語化 • 現状のREADYFORに足りていない部分は何なのかを洗い出し • 現状デザイン原則とドキュメンテーションが足りてなく優先度が高いと判断

10 #readyfor_meetup

11 READYFOR Elements運用面での取り組み • FEチーム内で困りごとをヒアリング・ブレスト ◦ スタイルガイドでの細かい気になる部分の洗い出し ◦ Elements用の課題管理シートに積んでいくようにする ◦

12 #readyfor_meetup

13 コンポーネントの仕様の明文化 • デザインとREADYFOR Elementsとの差異がたまに起きていた ◦ PRなどでの指摘で誰に仕様を聞けば良いかわからない ▪ Storybookにまとめたほうが良さそうという方針に決定 ◦

16 READYFOR Elements軸 • コンポーネントルール(仕様)の明文化 • StorybookのMDXフォーマットとしてコンポーネントとドキュメントをまとめる ◦ https://storybook.js.org/docs/react/api/mdx ◦

19 想いをつなぎ、叶える未来を、つくる Ready for building it?