pixivのデザインシステム「Charcoal」を用いたVRoid Hubのダイアログリニューアル

Transcript

1. pixivのデザインシステム 「Charcoal」を用いた VRoid Hubのダイアログ リニューアル ピクシブ株式会社　プロダクトデザイナー　小川雅俊
2. 小川雅俊 ピクシブ株式会社　プロダクトデザイナー　2018年新卒入社 自己紹介
3. 自己紹介 2018~2022 pixiv事業本部（pixiv）
4. 自己紹介 2018~2022 pixiv事業本部（pixivコミックインディーズ）
5. 自己紹介 2022~ 3D事業部（VRoid Hub）
6. 今日話すこと 01 プロダクトデザイナーの仕事とは？ 02 Charcoalについて 03 業務事例の紹介 04 やって良かったこと
7. 01 プロダクトデザイナーの 仕事とは？
8. サービスのUI改善  課題策  要件定義・仕様策  UI設計 新機能開発  リサーS  要件定義・仕様策  UI設0  ユーザーテスト デザインシステム運用  コンポーネントの定t  デザインルールの統一g  実装への反映 02 プロダクトデザイナーの仕事とは？
9. サービスのUI改善  課題策  要件定義・仕様策  UI設計 新機能開発  リサーR  要件定義・仕様策  UI設1  ユーザーテスト デザインシステム運用  コンポーネントの定s  デザインルールの統一f  実装への反映 02 プロダクトデザイナーの仕事とは？
10. 02 Charcoalについて
15. 03 業務事例の紹介
16. VRoid Hubのダイアログ リニューアル やったこと 3Q ダイアログの洗い出B DQ コンポーネントの更新・ルールの統一E )Q 実装への反映 03 業務事例の紹介
17. 03 業務事例の紹介
18. 施策の目的 Æ 実装修正コストの軽減 % それまでVRoid Hubでは全てのダイアログを毎回１から
 実装してい5 % 複数のダイアログをまたぐUI修正をする場合、修正箇所全てに 手を加えなければならない † 新旧デザインルールの混在をなくす % デザインルールが新しいものと古いものが混在しており
 開発側でも管理できていなかっ5 % 毎回「これどっちが最新だっけ？」といった議論が
 起こっていた 03 業務事例の紹介
19. É ダイアログの洗い出し 9 VRoid Hubで使われているダイアログを
 全て洗い出してFigmaのページに展% 9 用途やサイズ感でざっくりと3つに分類 03 業務事例の紹介
20.  コンポーネントの更新・ ルールの統一化 X ダイアログの中身に使われている文言や
 カラーを最新のものに置き換えG X ダイアログ間で似たようなデザインなのに 挙動が違っている箇所を洗い出して
 ルールを統一化 03 業務事例の紹介
21. Before After 03 業務事例の紹介 具体例①：キャンセルボタンの統一
22. Before After 03 業務事例の紹介 具体例②：確定ボタンの挙動統一
23. ÇÆ 実装への反映 5 FigmaでデザインのBefore/Afterを並べて
 修正箇所をコメントで記載 03 業務事例の紹介
24. ÇÆ 実装への反映 5 FigmaでデザインのBefore/Afterを並べて
 修正箇所をコメントで記載 03 業務事例の紹介 この工程が一番大変だった
25. 大変だったこと 3 単純に量が多B 3 提案したデザインが実装的に厳しい場合
 調整が必 3 他のタスクと並行して進めていたので
 全然進まない 03 業務事例の紹介
26. 04 やって良かったこと
27.  修正コストの削減、開発の効率化 　∟　1つのダイアログを修正したら、全てのダイアログに反映されるようになった R デザイン速度の向上 　∟　デザインルールを統一したことで、考えることが少なくなった ˆ ユーザー体験が向上した 　∟　デザインの微妙な差異を修正することで、統一した体験を提供できるようになった 今後もサービスのデザイン改善と並行して、デザインシステムの運用に
 取り組んで行きます 04 やって良かったこと
28. WE ARE HIRING! 新卒プロダクトデザイナー募集中！ デザインによってクリエイターの可能性を広げ
 「創作活動を、もっと楽しくする。」という
 ピクシブが目指す未来を共につくるデザイナーを募集しています。 さいごに