デザイナーとのコミュニケーションを分解してみる

by Shoma Kobayashi

Slide 1

Slide 1 text

Creators Vision vol.1 エンジニアとデザイナーのこだわり探訪デザイナーとの  コミュニケーションを  分解してみる Shoma Kobayashi 2024/07/31

Slide 2

Slide 2 text

01 自己紹介 02 自分のこだわり 03 デザイナーとのコミュニケーション目次

Slide 3

Slide 3 text

ÅÃ 自己紹介

Slide 4

Slide 4 text

01 自己紹介 Shoma Kobayashi 所属・職種 CyberAgent inc. / 23卒フロントエンドエンジニア業務内容 9名のフロントエンドチームのリーダs 新規プロダクト開発のフロントエンド責任複数のプロダクトを素早く出すための基盤作り SNS X: @kobapi28

Slide 5

Slide 5 text

ÈÇ 自分のこだわり

Slide 6

Slide 6 text

Design is too important to be left to designers デザインはデザイナーだけに任せるには重要すぎる

Slide 7

Slide 7 text

デザインをプロダクトにして  ユーザーに良い体験を届ける

Slide 8

Slide 8 text

デザインプロダクト効率的に実装するためのアイデア実装する中で  気づく違和感もっと良い実装の  アイデア

Slide 9

Slide 9 text

一定技術力で解決できるものもあるけど、  コミュニケーションが大事

Slide 10

Slide 10 text

何気なく行なっている  デザイナーとのコミュニケーション

Slide 11

Slide 11 text

案外色々な話をしているかも

Slide 12

Slide 12 text

デザイナーとのコミュニケーション

Slide 13

Slide 13 text

01 デザインファイルの修正依頼・確認 02 ルールが明確化されていないものの相談 03 デザインでの考慮漏れに関する相談 04 実装物の確認依頼 05 実装する中でのデザイン変更依頼デザイナーとのコミュニケーション直近行なったコミュニケーションに関して抜粋しました

Slide 14

Slide 14 text

02 デザイナーとのコミュニケーションデザインファイルの修正依頼・確認具体例 x Variables に定義されている値が使われていない箇所の修正依E x 意図されていなさそうな各種パラメータの確認コミュニケーション媒体 x Figma コメント機能意図 x 自分でもミスに気づける → 修正後の理想状態をセット x Figma をみている時に気づくものなので  Figma のコメント機能で伝える

Slide 15

Slide 15 text

02 デザイナーとのコミュニケーションデザインでの考慮漏れに関する相談具体例 a フォーカス時の Outline のカラー決B a エラーパターン漏れコミュニケーション媒体 a Slack 意図 a 定義できていなかったので、自分が実装するにあたってのイメージとセットで伝える

Slide 16

Slide 16 text

02 デザイナーとのコミュニケーションルールが明確化されていないものの相談具体例 G 金額などの数字の表示形式などコミュニケーション媒体 G Slack 意図 G 明言化という文脈では漏れていたが、考えはあるはv G どういった観点で見てほしいかは伝えつつ依頼

Slide 17

Slide 17 text

02 デザイナーとのコミュニケーション実装物の確認依頼具体例 T Tooltip の表示までの秒数など実装してみて感じるものコミュニケーション媒体 T Slack ( + chromatic, アプリケーション ) 意図 T 動画よりも実際にさわれるものがあると見てもらいやすいので Chromatic を合わせて使 T 動画もパッと見てもらえるという意味では good

Slide 18

Slide 18 text

02 デザイナーとのコミュニケーション実装していく中でのデザイン変更依頼具体例 V 非活性にするか、押してからエラーを表示するかコミュニケーション媒体 V Slack 意図 V なぜそうするかの背景をきちんと伝え V 代案を提示する

Slide 19

Slide 19 text

これらを大きく2つに分けると

Slide 20

Slide 20 text

デザイナー/エンジニア間の  内部品質を向上させる  コミュニケーションf プロダクトのアウトプットを向上させる  コミュニケーションダ

Slide 21

Slide 21 text

デザイナー/エンジニア間の  内部品質を向上させる  コミュニケーションf E デザインファイルの軽微な修@ E ルールが明確化されていないものの相談

Slide 22

Slide 22 text

プロダクトのアウトプットを向上させる  コミュニケーションダ 6 デザインでの考慮漏れに関する相0 6 実装物の確認依) 6 実装していく中でのデザイン変更依頼

Slide 23

Slide 23 text

これらのコミュニケーション量を  増やしていくことが良いプロダクトに

Slide 24

Slide 24 text

ご清聴ありがとうございました