デザイナーと協業しているNuxtプロジェクトを、ChromaticによるVRTでさらに改善した話
by
Masayuki Takahashi
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
デザイナーと協業しているNuxtプロジェクトを、 ChromaticによるVRTでさらに改善した話 Vue.js v-tokyo Meetup #17 もず(@mozu1206)
Slide 2
Slide 2 text
⾃⼰紹介 職歴 ASP事業会社 - バックエンドエンジニア(2021/04 ~ 2022/03 ) 株式会社HRBrain - デザインエンジニア(2022/04 ~ 現在) 現在の技術スタック Vue.js/Nuxt, React/Next, TypeScript, Storybook, Chromatic 趣味 コーヒー
Slide 3
Slide 3 text
アジェンダ - Nuxtプロジェクトについての現状 - 現状の問題点 - 解決⽅針 - 解決⽅法 - やってみた結果 - まとめ - 今後やりたいこと
Slide 4
Slide 4 text
Nuxtプロジェクトについての現状 役割:サービスサイト(https://www.hrbrain.jp/) デザイン:Figma 使⽤技術:Vue.js/Nuxt, Storybook, Chromatic, Contentful デプロイ:Netlify
Slide 5
Slide 5 text
Nuxtプロジェクトについての現状 Vue.js / Nuxt それぞれを絶賛バージョンアップ中! ついでにコンポーネントも整理しようと思いきや、新旧3つの流派のコンポーネン トが存在していて絶望
Slide 6
Slide 6 text
現状の問題点 プロジェクト内のコンポーネントと、Figmaのコンポーネントで同期しきれてい ない部分がある - 同じような部品が複数存在しており、共通化されていない部分がある
Slide 7
Slide 7 text
現状の問題点 Figmaに登録されていない Figmaに登録されている
Slide 8
Slide 8 text
現状の問題点 ジョインしたてのデザイナー‧エンジニアが困る Figmaに登録されていない Figmaに登録されている
Slide 9
Slide 9 text
現状の問題点 ● ジョインしたてのエンジニアがコンポーネント探しに時間がかかる ● サイト内で微妙なデザインの差異が発⽣しやすい状態のため、統⼀感を維持 するための確認コストが余計にかかる ● 無駄なコミュニケーションコストがかかる - 「ここのボタンを変えると別のここのボタンも変わるけど⼤丈夫?」 - 「そもそもこのボタンってどのボタン?」
Slide 10
Slide 10 text
● ジョインしたてのエンジニアがコンポーネント探しに時間がかかる ● サイト内で微妙なデザインの差異が発⽣しやすい状態のため、統⼀感を維持 するための確認コストが余計にかかる ● 無駄なコミュニケーションコストがかかる - 「ここのボタンを変えると別のここのボタンも変わるけど⼤丈夫?」 - 「そもそもこのボタンってどのボタン?」 現状の問題点 プロジェクトとFigmaを同期するルールを作って解決しよう! (当たり前のことを⼀つずつ)
Slide 11
Slide 11 text
解決⽅針 エンジニア側で定義したルールに従ってコンポーネント作成し、それをデザイ ナーが後追いでFigmaに反映する動きで合意をとった
Slide 12
Slide 12 text
解決⽅針 エンジニア側で定義したルールに従ってコンポーネント作成し、それをデザイ ナーが後追いでFigmaに反映する動きで合意をとった エンジニアが新規で登録した or 変更したコンポーネントを デザイナー側で検知できない新たな問題が発⽣
Slide 13
Slide 13 text
ChromaticのVRT(Visual Regression Test)を コンポーネントをFigmaに反映する必要があるかを判断する フラグのような使い⽅で利⽤できるのでは? 解決⽅針
Slide 14
Slide 14 text
Storybook - コンポーネントを独⽴して開発することを⽀援するツール Chromatic - Storybookの公開‧テスト‧議論活性化を⽀援するツール VRT(Visual Regression Test) - 変更前後のスクリーンショットを⽐較し、意図せぬ変更が⽣じていないか確認するテスト 登場⼈物の補⾜
Slide 15
Slide 15 text
解決⽅法 Chromatic の VRT でコードの差分を検知させ、デザイナーがその差分を確認し、 必要があればFigmaに反映する運⽤にしてみた(反映したらAcceptedにする) 反映done →
Slide 16
Slide 16 text
やってみた結果 ● 現在使われていない古いコンポーネントの存在をお互いに認識できた ● ジョインしたてのエンジニアがコンポーネントを探す⼯数を削減できた ● デザイナーとコンポーネントを中⼼にした会話をしやすくなった
Slide 17
Slide 17 text
やってみた結果 コミュニケーションコスト削減と、 サイト全体の統⼀感を持たせやすくなった ● 現在使われていない古いコンポーネントの存在をお互いに認識できた ● ジョインしたてのエンジニアがコンポーネントを探す⼯数を削減できた ● デザイナーとコンポーネントを中⼼にした会話をしやすくなった
Slide 18
Slide 18 text
やってみた結果
Slide 19
Slide 19 text
まとめ ● エンジニア側のコンポーネントの変更をFigmaに同期させるタスクリストの 様な役割で運⽤しても、フェーズによってはワークしそう。 ● Chromatic の導⼊⾃体は Storybook の公式ドキュメントにも記載があるた め、⽐較的簡単に⾏える。 ● Figmaと同期させることで、様々な無駄なコストの削減に繋がる。
Slide 20
Slide 20 text
今後やりたいこと ● 単純なUIのVRTはできるようになったが、複雑なUIやページ単位でのテスト はまだできていないので、ここのVRTも今後やっていきたい。