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
デザイナーと協業しているNuxtプロジェクトを、ChromaticによるVRTでさら...
Search
Masayuki Takahashi
May 23, 2023
Programming
0
840
デザイナーと協業しているNuxtプロジェクトを、ChromaticによるVRTでさらに改善した話
【Vue.js v-tokyo Meetup #17】
https://vuejs-meetup.connpass.com/event/279254/
Masayuki Takahashi
May 23, 2023
Tweet
Share
Other Decks in Programming
See All in Programming
Road to RubyKaigi: Making Tinny Chiptunes with Ruby
makicamel
4
540
Boost Your Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
740
プロフェッショナルとしての成長「問題の深掘り」が導く真のスキルアップ / issue-analysis-and-skill-up
minodriven
8
1.9k
Making TCPSocket.new "Happy"!
coe401_
1
3k
カウシェで Four Keys の改善を試みた理由
ike002jp
1
120
Amazon CloudWatchの地味だけど強力な機能紹介!
itotsum
0
230
State of Namespace
tagomoris
5
2.4k
ComposeでのPicture in Picture
takathemax
0
130
eBPF超入門「o11yに使える」とは (20250424_eBPF_o11y)
thousanda
1
110
Improve my own Ruby
sisshiki1969
0
100
The Evolution of the CRuby Build System
kateinoigakukun
1
760
generative-ai-use-cases(GenU)の推しポイント ~2025年4月版~
hideg
1
370
Featured
See All Featured
RailsConf 2023
tenderlove
30
1.1k
Designing Experiences People Love
moore
142
24k
Optimising Largest Contentful Paint
csswizardry
37
3.2k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
12k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Agile that works and the tools we love
rasmusluckow
329
21k
Making Projects Easy
brettharned
116
6.2k
Bash Introduction
62gerente
611
210k
Building Applications with DynamoDB
mza
94
6.4k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Embracing the Ebb and Flow
colly
85
4.7k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Transcript
デザイナーと協業しているNuxtプロジェクトを、 ChromaticによるVRTでさらに改善した話 Vue.js v-tokyo Meetup #17 もず(@mozu1206)
⾃⼰紹介 職歴 ASP事業会社 - バックエンドエンジニア(2021/04 ~ 2022/03 ) 株式会社HRBrain -
デザインエンジニア(2022/04 ~ 現在) 現在の技術スタック Vue.js/Nuxt, React/Next, TypeScript, Storybook, Chromatic 趣味 コーヒー
アジェンダ - Nuxtプロジェクトについての現状 - 現状の問題点 - 解決⽅針 - 解決⽅法 -
やってみた結果 - まとめ - 今後やりたいこと
Nuxtプロジェクトについての現状 役割:サービスサイト(https://www.hrbrain.jp/) デザイン:Figma 使⽤技術:Vue.js/Nuxt, Storybook, Chromatic, Contentful デプロイ:Netlify
Nuxtプロジェクトについての現状 Vue.js / Nuxt それぞれを絶賛バージョンアップ中! ついでにコンポーネントも整理しようと思いきや、新旧3つの流派のコンポーネン トが存在していて絶望
現状の問題点 プロジェクト内のコンポーネントと、Figmaのコンポーネントで同期しきれてい ない部分がある - 同じような部品が複数存在しており、共通化されていない部分がある
現状の問題点 Figmaに登録されていない Figmaに登録されている
現状の問題点 ジョインしたてのデザイナー‧エンジニアが困る Figmaに登録されていない Figmaに登録されている
現状の問題点 • ジョインしたてのエンジニアがコンポーネント探しに時間がかかる • サイト内で微妙なデザインの差異が発⽣しやすい状態のため、統⼀感を維持 するための確認コストが余計にかかる • 無駄なコミュニケーションコストがかかる - 「ここのボタンを変えると別のここのボタンも変わるけど⼤丈夫?」
- 「そもそもこのボタンってどのボタン?」
• ジョインしたてのエンジニアがコンポーネント探しに時間がかかる • サイト内で微妙なデザインの差異が発⽣しやすい状態のため、統⼀感を維持 するための確認コストが余計にかかる • 無駄なコミュニケーションコストがかかる - 「ここのボタンを変えると別のここのボタンも変わるけど⼤丈夫?」 -
「そもそもこのボタンってどのボタン?」 現状の問題点 プロジェクトとFigmaを同期するルールを作って解決しよう! (当たり前のことを⼀つずつ)
解決⽅針 エンジニア側で定義したルールに従ってコンポーネント作成し、それをデザイ ナーが後追いでFigmaに反映する動きで合意をとった
解決⽅針 エンジニア側で定義したルールに従ってコンポーネント作成し、それをデザイ ナーが後追いでFigmaに反映する動きで合意をとった エンジニアが新規で登録した or 変更したコンポーネントを デザイナー側で検知できない新たな問題が発⽣
ChromaticのVRT(Visual Regression Test)を コンポーネントをFigmaに反映する必要があるかを判断する フラグのような使い⽅で利⽤できるのでは? 解決⽅針
Storybook - コンポーネントを独⽴して開発することを⽀援するツール Chromatic - Storybookの公開‧テスト‧議論活性化を⽀援するツール VRT(Visual Regression Test) -
変更前後のスクリーンショットを⽐較し、意図せぬ変更が⽣じていないか確認するテスト 登場⼈物の補⾜
解決⽅法 Chromatic の VRT でコードの差分を検知させ、デザイナーがその差分を確認し、 必要があればFigmaに反映する運⽤にしてみた(反映したらAcceptedにする) 反映done →
やってみた結果 • 現在使われていない古いコンポーネントの存在をお互いに認識できた • ジョインしたてのエンジニアがコンポーネントを探す⼯数を削減できた • デザイナーとコンポーネントを中⼼にした会話をしやすくなった
やってみた結果 コミュニケーションコスト削減と、 サイト全体の統⼀感を持たせやすくなった • 現在使われていない古いコンポーネントの存在をお互いに認識できた • ジョインしたてのエンジニアがコンポーネントを探す⼯数を削減できた • デザイナーとコンポーネントを中⼼にした会話をしやすくなった
やってみた結果
まとめ • エンジニア側のコンポーネントの変更をFigmaに同期させるタスクリストの 様な役割で運⽤しても、フェーズによってはワークしそう。 • Chromatic の導⼊⾃体は Storybook の公式ドキュメントにも記載があるた め、⽐較的簡単に⾏える。
• Figmaと同期させることで、様々な無駄なコストの削減に繋がる。
今後やりたいこと • 単純なUIのVRTはできるようになったが、複雑なUIやページ単位でのテスト はまだできていないので、ここのVRTも今後やっていきたい。