Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
デザイナーとのコミュニケーションを分解してみる
Search
Shoma Kobayashi
August 05, 2024
0
1.2k
デザイナーとのコミュニケーションを分解してみる
Creators Vision vol.1 エンジニアとデザイナーのこだわり探訪 #1 での登壇資料です
Shoma Kobayashi
August 05, 2024
Tweet
Share
More Decks by Shoma Kobayashi
See All by Shoma Kobayashi
後輩を迎える上で持っておきたいマインド
shoma3571
0
110
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
BBQ
matthewcrist
85
9.3k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
8.2k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
Building Adaptive Systems
keathley
38
2.3k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
93
16k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
329
21k
Building an army of robots
kneath
302
43k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.9k
Fashionably flexible responsive web design (full day workshop)
malarkey
405
65k
Transcript
Creators Vision vol.1 エンジニアとデザイナーのこだわり探訪 デザイナーとの コミュニケーションを 分解してみる Shoma Kobayashi 2024/07/31
01 自己紹介 02 自分のこだわり 03 デザイナーとのコミュニケーション 目次
ÅÃ 自己紹介
01 自己紹介 Shoma Kobayashi 所属・職種 CyberAgent inc. / 23卒フロントエンドエンジニア 業務内容
9名のフロントエンドチームのリーダs 新規プロダクト開発のフロントエンド責任 複数のプロダクトを素早く出すための基盤作り SNS X: @kobapi28
ÈÇ 自分のこだわり
Design is too important to be left to designers デザインはデザイナーだけに任せるには重要すぎる
デザインをプロダクトにして ユーザーに良い体験を届ける
デザイン プロダクト 効率的に実装するための アイデア 実装する中で 気づく違和感 もっと良い実装の アイデア
一定技術力で解決できるものもあるけど、 コミュニケーションが大事
何気なく行なっている デザイナーとのコミュニケーション
案外色々な話をしているかも
デザイナーとのコミュニケーション
01 デザインファイルの修正依頼・確認 02 ルールが明確化されていないものの相談 03 デザインでの考慮漏れに関する相談 04 実装物の確認依頼 05 実装する中でのデザイン変更依頼
デザイナーとの コミュニケーション 直近行なったコミュニケーションに関して抜粋しました
02 デザイナーとのコミュニケーション デザインファイルの修正依頼・確認 具体例 x Variables に定義されている値が使われていない箇所の修 正依E x 意図されていなさそうな各種パラメータの確認
コミュニケーション媒体 x Figma コメント機能 意図 x 自分でもミスに気づける → 修正後の理想状態をセット x Figma をみている時に気づくものなので Figma のコメント機能で伝える
02 デザイナーとのコミュニケーション デザインでの考慮漏れに関する相談 具体例 a フォーカス時の Outline のカラー決B a エラーパターン漏れ
コミュニケーション媒体 a Slack 意図 a 定義できていなかったので、自分が実装するにあたっ てのイメージとセットで伝える
02 デザイナーとのコミュニケーション ルールが明確化されていないものの相談 具体例 G 金額などの数字の表示形式など コミュニケーション媒体 G Slack 意図
G 明言化という文脈では漏れていたが、考えはあるはv G どういった観点で見てほしいかは伝えつつ依頼
02 デザイナーとのコミュニケーション 実装物の確認依頼 具体例 T Tooltip の表示までの秒数など実装してみて感じるもの コミュニケーション媒体 T Slack
( + chromatic, アプリケーション ) 意図 T 動画よりも実際にさわれるものがあると見てもらいやす いので Chromatic を合わせて使 T 動画もパッと見てもらえるという意味では good
02 デザイナーとのコミュニケーション 実装していく中でのデザイン変更依頼 具体例 V 非活性にするか、押してからエラーを表示するか コミュニケーション媒体 V Slack 意図
V なぜそうするかの背景をきちんと伝え V 代案を提示する
これらを大きく2つに分けると
デザイナー/エンジニア間の 内部品質を向上させる コミュニケーションf プロダクトの アウトプットを向上させる コミュニケーションダ
デザイナー/エンジニア間の 内部品質を向上させる コミュニケーションf E デザインファイルの軽微な修@ E ルールが明確化されていないものの相談
プロダクトの アウトプットを向上させる コミュニケーションダ 6 デザインでの考慮漏れに関する相0 6 実装物の確認依) 6 実装していく中でのデザイン変更依頼
これらのコミュニケーション量を 増やしていくことが良いプロダクトに
ご清聴ありがとうございました