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

by ganchan

Slide 1

Slide 1 text

pixivのデザインシステム「Charcoal」を用いた VRoid Hubのダイアログリニューアルピクシブ株式会社　プロダクトデザイナー　小川雅俊

Slide 2

Slide 2 text

小川雅俊ピクシブ株式会社　プロダクトデザイナー　2018年新卒入社自己紹介

Slide 3

Slide 3 text

自己紹介 2018~2022 pixiv事業本部（pixiv）

Slide 4

Slide 4 text

自己紹介 2018~2022 pixiv事業本部（pixivコミックインディーズ）

Slide 5

Slide 5 text

自己紹介 2022~ 3D事業部（VRoid Hub）

Slide 6

Slide 6 text

今日話すこと 01 プロダクトデザイナーの仕事とは？ 02 Charcoalについて 03 業務事例の紹介 04 やって良かったこと

Slide 7

Slide 7 text

01 プロダクトデザイナーの仕事とは？

Slide 8

Slide 8 text

サービスのUI改善課題策要件定義・仕様策 UI設計新機能開発リサーS 要件定義・仕様策 UI設0 ユーザーテストデザインシステム運用コンポーネントの定t デザインルールの統一g 実装への反映 02 プロダクトデザイナーの仕事とは？

Slide 9

Slide 9 text

サービスのUI改善課題策要件定義・仕様策 UI設計新機能開発リサーR 要件定義・仕様策 UI設1 ユーザーテストデザインシステム運用コンポーネントの定s デザインルールの統一f 実装への反映 02 プロダクトデザイナーの仕事とは？

Slide 10

Slide 10 text

02 Charcoalについて

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

03 業務事例の紹介

Slide 16

Slide 16 text

VRoid Hubのダイアログリニューアルやったこと 3Q ダイアログの洗い出B DQ コンポーネントの更新・ルールの統一E )Q 実装への反映 03 業務事例の紹介

Slide 17

Slide 17 text

03 業務事例の紹介

Slide 18

Slide 18 text

施策の目的 Æ 実装修正コストの軽減 % それまでVRoid Hubでは全てのダイアログを毎回１から  実装してい5 % 複数のダイアログをまたぐUI修正をする場合、修正箇所全てに手を加えなければならない新旧デザインルールの混在をなくす % デザインルールが新しいものと古いものが混在しており  開発側でも管理できていなかっ5 % 毎回「これどっちが最新だっけ？」といった議論が  起こっていた 03 業務事例の紹介

Slide 19

Slide 19 text

É ダイアログの洗い出し 9 VRoid Hubで使われているダイアログを  全て洗い出してFigmaのページに展% 9 用途やサイズ感でざっくりと3つに分類 03 業務事例の紹介

Slide 20

Slide 20 text

コンポーネントの更新・ルールの統一化 X ダイアログの中身に使われている文言や  カラーを最新のものに置き換えG X ダイアログ間で似たようなデザインなのに挙動が違っている箇所を洗い出して  ルールを統一化 03 業務事例の紹介

Slide 21

Slide 21 text

Before After 03 業務事例の紹介具体例①：キャンセルボタンの統一

Slide 22

Slide 22 text

Before After 03 業務事例の紹介具体例②：確定ボタンの挙動統一

Slide 23

Slide 23 text

ÇÆ 実装への反映 5 FigmaでデザインのBefore/Afterを並べて  修正箇所をコメントで記載 03 業務事例の紹介

Slide 24

Slide 24 text

ÇÆ 実装への反映 5 FigmaでデザインのBefore/Afterを並べて  修正箇所をコメントで記載 03 業務事例の紹介この工程が一番大変だった

Slide 25

Slide 25 text

大変だったこと 3 単純に量が多B 3 提案したデザインが実装的に厳しい場合  調整が必 3 他のタスクと並行して進めていたので  全然進まない 03 業務事例の紹介

Slide 26

Slide 26 text

04 やって良かったこと

Slide 27

Slide 27 text

修正コストの削減、開発の効率化　∟　1つのダイアログを修正したら、全てのダイアログに反映されるようになった R デザイン速度の向上　∟　デザインルールを統一したことで、考えることが少なくなったユーザー体験が向上した　∟　デザインの微妙な差異を修正することで、統一した体験を提供できるようになった今後もサービスのデザイン改善と並行して、デザインシステムの運用に  取り組んで行きます 04 やって良かったこと

Slide 28

Slide 28 text

WE ARE HIRING! 新卒プロダクトデザイナー募集中！デザインによってクリエイターの可能性を広げ  「創作活動を、もっと楽しくする。」という  ピクシブが目指す未来を共につくるデザイナーを募集しています。さいごに