デザイナーと協業しているNuxtプロジェクトを、ChromaticによるVRTでさらに改善した話

Transcript

1. デザイナーと協業しているNuxtプロジェクトを、
   ChromaticによるVRTでさらに改善した話
   Vue.js v-tokyo Meetup #17
   もず（@mozu1206）
   

   View Slide

2. ⾃⼰紹介
   職歴
   ASP事業会社 - バックエンドエンジニア（2021/04 ~ 2022/03 ）
   株式会社HRBrain - デザインエンジニア（2022/04 ~ 現在）
   現在の技術スタック
   Vue.js/Nuxt, React/Next, TypeScript, Storybook, Chromatic
   趣味
   コーヒー
   

   View Slide

3. アジェンダ
   - Nuxtプロジェクトについての現状
   - 現状の問題点
   - 解決⽅針
   - 解決⽅法
   - やってみた結果
   - まとめ
   - 今後やりたいこと
   

   View Slide

4. Nuxtプロジェクトについての現状
     役割：サービスサイト(https://www.hrbrain.jp/)
   デザイン：Figma
   使⽤技術：Vue.js/Nuxt, Storybook, Chromatic, Contentful
   デプロイ：Netlify
   

   View Slide

5. Nuxtプロジェクトについての現状
   Vue.js / Nuxt それぞれを絶賛バージョンアップ中！
   ついでにコンポーネントも整理しようと思いきや、新旧3つの流派のコンポーネン
   トが存在していて絶望
   

   View Slide

6. 現状の問題点
   プロジェクト内のコンポーネントと、Figmaのコンポーネントで同期しきれてい
   ない部分がある
    - 同じような部品が複数存在しており、共通化されていない部分がある
   

   View Slide

7. 現状の問題点
   Figmaに登録されていない
   Figmaに登録されている
   

   View Slide

8. 現状の問題点
   ジョインしたてのデザイナー‧エンジニアが困る
   Figmaに登録されていない
   Figmaに登録されている
   

   View Slide

9. 現状の問題点
   ● ジョインしたてのエンジニアがコンポーネント探しに時間がかかる
   ● サイト内で微妙なデザインの差異が発⽣しやすい状態のため、統⼀感を維持
   するための確認コストが余計にかかる
   ● 無駄なコミュニケーションコストがかかる
   - 「ここのボタンを変えると別のここのボタンも変わるけど⼤丈夫？」
   - 「そもそもこのボタンってどのボタン？」
   

   View Slide

10. ● ジョインしたてのエンジニアがコンポーネント探しに時間がかかる
    ● サイト内で微妙なデザインの差異が発⽣しやすい状態のため、統⼀感を維持
    するための確認コストが余計にかかる
    ● 無駄なコミュニケーションコストがかかる
    - 「ここのボタンを変えると別のここのボタンも変わるけど⼤丈夫？」
    - 「そもそもこのボタンってどのボタン？」
    現状の問題点
    プロジェクトとFigmaを同期するルールを作って解決しよう！
    （当たり前のことを⼀つずつ）
    

    View Slide

11. 解決⽅針
    エンジニア側で定義したルールに従ってコンポーネント作成し、それをデザイ
    ナーが後追いでFigmaに反映する動きで合意をとった
    

    View Slide

12. 解決⽅針
    エンジニア側で定義したルールに従ってコンポーネント作成し、それをデザイ
    ナーが後追いでFigmaに反映する動きで合意をとった
    エンジニアが新規で登録した or 変更したコンポーネントを
    デザイナー側で検知できない新たな問題が発⽣
    

    View Slide

13. ChromaticのVRT(Visual Regression Test)を
    コンポーネントをFigmaに反映する必要があるかを判断する
    フラグのような使い⽅で利⽤できるのでは？
    解決⽅針
    

    View Slide

14. Storybook
    - コンポーネントを独⽴して開発することを⽀援するツール
    Chromatic
    - Storybookの公開‧テスト‧議論活性化を⽀援するツール
    VRT(Visual Regression Test)
    - 変更前後のスクリーンショットを⽐較し、意図せぬ変更が⽣じていないか確認するテスト
    登場⼈物の補⾜
    

    View Slide

15. 解決⽅法
    Chromatic の VRT でコードの差分を検知させ、デザイナーがその差分を確認し、
    必要があればFigmaに反映する運⽤にしてみた（反映したらAcceptedにする）
    反映done
    →
    

    View Slide

16. やってみた結果
    ● 現在使われていない古いコンポーネントの存在をお互いに認識できた
    ● ジョインしたてのエンジニアがコンポーネントを探す⼯数を削減できた
    ● デザイナーとコンポーネントを中⼼にした会話をしやすくなった
    

    View Slide

17. やってみた結果
    コミュニケーションコスト削減と、
    サイト全体の統⼀感を持たせやすくなった
    ● 現在使われていない古いコンポーネントの存在をお互いに認識できた
    ● ジョインしたてのエンジニアがコンポーネントを探す⼯数を削減できた
    ● デザイナーとコンポーネントを中⼼にした会話をしやすくなった
    

    View Slide

18. やってみた結果
    

    View Slide

19. まとめ
    ● エンジニア側のコンポーネントの変更をFigmaに同期させるタスクリストの
    様な役割で運⽤しても、フェーズによってはワークしそう。
    ● Chromatic の導⼊⾃体は Storybook の公式ドキュメントにも記載があるた
    め、⽐較的簡単に⾏える。
    ● Figmaと同期させることで、様々な無駄なコストの削減に繋がる。
    

    View Slide

20. 今後やりたいこと
    ● 単純なUIのVRTはできるようになったが、複雑なUIやページ単位でのテスト
    はまだできていないので、ここのVRTも今後やっていきたい。
    

    View Slide