Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Shoma Kobayashi
August 05, 2024
1.2k

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

Creators Vision vol.1 エンジニアとデザイナーのこだわり探訪 #1 での登壇資料です

Shoma Kobayashi

August 05, 2024
Tweet

Transcript

  1. 01 自己紹介 Shoma Kobayashi 所属・職種 CyberAgent inc. / 23卒フロントエンドエンジニア 業務内容

    ‘ 9名のフロントエンドチームのリーダs ‘ 新規プロダクト開発のフロントエンド責任 ‘ 複数のプロダクトを素早く出すための基盤作り SNS X: @kobapi28
  2. 02 デザイナーとのコミュニケーション デザインファイルの修正依頼・確認 具体例 x Variables に定義されている値が使われていない箇所の修 正依E x 意図されていなさそうな各種パラメータの確認

    コミュニケーション媒体 x Figma コメント機能 意図 x 自分でもミスに気づける → 修正後の理想状態をセット• x Figma をみている時に気づくものなので
 Figma のコメント機能で伝える
  3. 02 デザイナーとのコミュニケーション デザインでの考慮漏れに関する相談 具体例 a フォーカス時の Outline のカラー決B a エラーパターン漏れ

    コミュニケーション媒体 a Slack 意図 a 定義できていなかったので、自分が実装するにあたっ てのイメージとセットで伝える
  4. 02 デザイナーとのコミュニケーション ルールが明確化されていないものの相談 具体例 G 金額などの数字の表示形式など コミュニケーション媒体 G Slack 意図

    G 明言化という文脈では漏れていたが、考えはあるはv G どういった観点で見てほしいかは伝えつつ依頼
  5. 02 デザイナーとのコミュニケーション 実装物の確認依頼 具体例 T Tooltip の表示までの秒数など実装してみて感じるもの コミュニケーション媒体 T Slack

    ( + chromatic, アプリケーション ) 意図 T 動画よりも実際にさわれるものがあると見てもらいやす いので Chromatic を合わせて使˜ T 動画もパッと見てもらえるという意味では good