Storybookからはじめるエンジニアとデザイナーの関係が良好なチーム

人としてのマインドセットという部分とは別に、プロセスとプロダクトの開発環境でチームを良好な状態にするプラクティスとしてのStorybookの紹介。
DevOpsやDesignOpsに興味のある方に見てほしいです。

Transcript

1. エンジニアとデザイナーの関係が良好なチーム @naru0504 からはじめる
2. くぼたなるひと UX Designer Studio Opt @naru0504
3. dev.toと阿部寛のホームページを ちゃんと比較した人です。
4. Web制作会社でWebデザイナー 事業会社でUXデザイナー（となぜかオフショア開発チームのEM） スタートアップでUXデザイナー / CS スタートアップでUIデザイナー（副業） 大手広告代理店で何でも屋
5. Saasならばどんなフェーズであろうと 活躍する人って認識でOKです。
6. 関係良好なチームのお話
7. どういう状態なのか？
8. ・ 目的や目標の達成に向かって ・ 各メンバーの能力や多様性が ・ 継続的に引き出されている
9. People Product Process
10. People Product Process 今日は人のお話はし ません。
12. SPA開発の現場でStorybook使っていない人 挙手 ✋
13. npx ‑p @storybook/cli sb init ‑‑type react
14. 導入は非常にかんたん。 そういうアーキテクチャならね⋯⋯。
15. とは
16. Storybook is a user interface development environment and playground for UI components. The tool enables developers to create components independently and showcase components interactively in an isolated development environment. Storybook runs outside of the main app so users can develop UI components in isolation without worrying about app specific dependencies and requirements.
17. StorybookはUIコンポーネントのための開発環境。Storybook使う と独立したUI開発環境で、コンポーネント開発できるよ。 アプリそのものの外で動くのでアプリ特有の依存関係や要求に悩む 必要がなくなるよ。
18. UI開発にフォーカスした環境を提供するよ。 超訳
19. ロジックの実装などを分離することでUIのカイゼンサイクルのみを エンジニアとデザイナーが回せる場ができる 得られるメリット
20. に reg‑suitとzisuiを組み合わせよう！
21. ビジュアルリグレッションテスト環境が生まれる なにができるの？
22. ビジュアルdiffが存在しない場合
23. diff after before
24. 意図せぬ見た目の変更を回避することができる。 デプロイ前にデザイナーが実装されたものをレビューすることができる。 得られるメリット
25. から デザイナーにわたすデータができる
26. このプロダクトの改修をお願いしたいんだけど、 別にバージョン管理していないし、ぶっちゃけ サーバーの接続情報もわかんないんだよね。 だからまるまる再現したコード書いてよ。 It never happen
27. このプロダクトの改修をお願いしたいんだけど、 デザイナー今まで社員でいなかったし、外注で 頼んだときのデータもないんだよね。 だからまるまる作り直してよ。 It frequently happen
28. git clone のように story2sketch
29. なんてする時間ないくらいの量にしているので。 デモ
30. プロダクトのデザインデータのチェックアウト元がStorybookだったら それが一番プロダクションレディに近いものなんだから最高でしょ。 得られるメリット
31. エンジニアがSketchを知らない デザイナーがnpmを知らない デザイナーとエンジニアの関係値がよくない このすべてを満たしたとき 導入で詰む デメリット
32. Q: うちのデザイナーSketchじゃないらしい A: 最近のモダンなデザインツールはすべて.sketchをインポートできるので問題ない。 よくある質問
33. まとめ
34. Storybookを使ってUI開発にフォーカス ビジュアルリグレッションテストでプロダクション環境へのユー ザーインターフェイスへのデザイナーの関心を高める story2sketchは未来を作り出す のでみんな使ってどんどんPR
35. ご清聴ありがとうございました。 つかおう