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

by Naruhito Kubota

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

くぼたなるひと UX Designer Studio Opt @naru0504

Slide 3

Slide 3 text

dev.toと阿部寛のホームページをちゃんと比較した人です。

Slide 4

Slide 4 text

Web制作会社でWebデザイナー事業会社でUXデザイナー（となぜかオフショア開発チームのEM）スタートアップでUXデザイナー / CS スタートアップでUIデザイナー（副業）大手広告代理店で何でも屋

Slide 5

Slide 5 text

Saasならばどんなフェーズであろうと活躍する人って認識でOKです。

Slide 6

Slide 6 text

関係良好なチームのお話

Slide 7

Slide 7 text

どういう状態なのか？

Slide 8

Slide 8 text

・目的や目標の達成に向かって・各メンバーの能力や多様性が・継続的に引き出されている

Slide 9

Slide 9 text

People Product Process

Slide 10

Slide 10 text

People Product Process 今日は人のお話はしません。

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

SPA開発の現場でStorybook使っていない人挙手 ✋

Slide 13

Slide 13 text

npx ‑p @storybook/cli sb init ‑‑type react

Slide 14

Slide 14 text

導入は非常にかんたん。そういうアーキテクチャならね⋯⋯。

Slide 15

Slide 15 text

とは

Slide 16

Slide 16 text

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 speciﬁc dependencies and requirements.

Slide 17

Slide 17 text

StorybookはUIコンポーネントのための開発環境。Storybook使うと独立したUI開発環境で、コンポーネント開発できるよ。アプリそのものの外で動くのでアプリ特有の依存関係や要求に悩む必要がなくなるよ。

Slide 18

Slide 18 text

UI開発にフォーカスした環境を提供するよ。超訳

Slide 19

Slide 19 text

ロジックの実装などを分離することでUIのカイゼンサイクルのみをエンジニアとデザイナーが回せる場ができる得られるメリット

Slide 20

Slide 20 text

に reg‑suitとzisuiを組み合わせよう！

Slide 21

Slide 21 text

ビジュアルリグレッションテスト環境が生まれるなにができるの？

Slide 22

Slide 22 text

ビジュアルdiﬀが存在しない場合

Slide 23

Slide 23 text

diﬀ after before

Slide 24

Slide 24 text

意図せぬ見た目の変更を回避することができる。デプロイ前にデザイナーが実装されたものをレビューすることができる。得られるメリット

Slide 25

Slide 25 text

からデザイナーにわたすデータができる

Slide 26

Slide 26 text

このプロダクトの改修をお願いしたいんだけど、別にバージョン管理していないし、ぶっちゃけサーバーの接続情報もわかんないんだよね。だからまるまる再現したコード書いてよ。 It never happen

Slide 27

Slide 27 text

このプロダクトの改修をお願いしたいんだけど、デザイナー今まで社員でいなかったし、外注で頼んだときのデータもないんだよね。だからまるまる作り直してよ。 It frequently happen

Slide 28

Slide 28 text

git clone のように story2sketch

Slide 29

Slide 29 text

なんてする時間ないくらいの量にしているので。デモ

Slide 30

Slide 30 text

プロダクトのデザインデータのチェックアウト元がStorybookだったらそれが一番プロダクションレディに近いものなんだから最高でしょ。得られるメリット

Slide 31

Slide 31 text

エンジニアがSketchを知らないデザイナーがnpmを知らないデザイナーとエンジニアの関係値がよくないこのすべてを満たしたとき導入で詰むデメリット

Slide 32

Slide 32 text

Q: うちのデザイナーSketchじゃないらしい A: 最近のモダンなデザインツールはすべて.sketchをインポートできるので問題ない。よくある質問

Slide 33

Slide 33 text

まとめ

Slide 34

Slide 34 text

Storybookを使ってUI開発にフォーカスビジュアルリグレッションテストでプロダクション環境へのユーザーインターフェイスへのデザイナーの関心を高める story2sketchは未来を作り出すのでみんな使ってどんどんPR

Slide 35

Slide 35 text

ご清聴ありがとうございました。つかおう