エンジニアに120%意図を伝えるためのAdobe XDデザインテクニック

2021/9/25 Adobe XD ユーザーフェス 2021

Transcript

1. View Slide

2. 従来ワークフローの限界
   XDを始めとする新世代デザインツールの台頭
   実装
   デザイン
   設計
   

   View Slide

3. デザインツールだけでは
   
   埋められない溝もある
   デザインツールだけでは
   
   埋められない溝もある
   デザインツールだけでは
   
   もある
   埋められない溝
   

   View Slide

4. 作り込んだデザイン なんか違う？
   実装されてみると……
   120%意図を伝えるためにできること
   

   View Slide

5. 注意
   ⚫ Web制作における話です

   ※デザイナーはWebデザイナー、エンジニアはフロントエンドエンジニアなどに読み替えてください。
   ⚫ すべての現場に当てはまるものではありません
   ⚫ 誰かの仕事を非難したり、押し付けたりする狙いはありません
   

   View Slide

6. おき
   沖 よ し や
   良矢 @448jp
   ⚫ 合同会社世路庵 代表
   ⚫ 2021年9月から3期目
   ⚫ 受託制作一筋18年
   

   View Slide

7. スターバックスの窓
   （2019-2021）
   

   View Slide

8. KASHIYAMA the Smart Tailor
   （2017-）
   

   View Slide

9. Adobe MAX Japan LinkedInラーニング Web Designing
   DIST Vue.js Japan User Group BAU-YA
   

   View Slide

10. 相原 典佳、沖 良矢、濱野 将（著） ⚫ 2021.9.22発売 ⚫ 288ページ ⚫ 2,970円
    エムディエヌコーポレーション刊
    初心者からちゃんとしたプロになる
    
    Adobe XD基礎入門
    

    View Slide

11. 1 カラー、フォント
    Color, Font
    

    View Slide

12. Webサイトで使っているカラー、
    フォントはデザインファイルで指
    定したはずなのに、きちんと反映
    されていないのはなぜ？
    デザイナー エンジニア
    デザインファイルの指定をそのまま
    実装したんだけどな……。
    

    View Slide

13. 提案：
    原則、Webサイト内で使っているすべてのカラー、テ
    キストスタイルをドキュメントアセットに登録しよう
    XDの9月アップデートでグループ化できるようになった！
    カラーに名前をつけるとチームで共通認識が高まる
    一覧用のアートボードを作ると見やすい
    どういうところで使うカラーなのかメモを添えると
    
    複数人で作りやすくなる
    

    View Slide

14. 2 画像書き出し
    Export Images
    

    View Slide

15. 画質をきっちりコントロールする
    ために画像を書き出しておいた
    のに、画質が悪くなっているのは
    なぜ？
    デザイナー エンジニア
    コードを考慮した画像じゃないから
    そのまま使えないし、差し替えのと
    きも面倒なんだよな……。
    

    View Slide

16. 提案：
    書き出す画像の品質や範囲はコーディングをふまえ
    て相談しよう
    書き出し対象にしておけば、あとからまとめて書き出し可能
    
    　Mac: ⌘ + shift + E
    
    　Windows: Ctrl + Shift + E
    レイヤー名をつけておけば、その名前で画像ファイルが書き出される
    

    View Slide

17. アイコンの位置がなんだかガタ
    ガタしている……デザインファ
    イルの見た目に合わせて！
    デザイナー エンジニア
    1つ1つサイズが違うからCSSが面
    倒なんだよな……。
    

    View Slide

18. 提案：
    アイコンは正方形でコンポーネント化すると吉
    アイコンに名前をつけるとチームで共通認識が高まる
    塗りなしの長方形を背景に置いてコンポーネント化すると、
    
    アイコンが扱いやすくなる
    一覧用のアートボードを作ると見やすい
    

    View Slide

19. 3 ブレイクポイント
    Breakpoint
    

    View Slide

20. PC用とSP用のデザインカンプ
    を作ったけど、実装を見ると間の
    見た目が微妙だな……。
    デザイナー エンジニア
    デザインカンプだけじゃ、わからな
    いことが多すぎて実装があやふや
    になってしまうんだよな……。
    

    View Slide

21. デスクトップ向け
    
    デザインカンプ
    カンプの間
    
    の場合は？
    カンプより
    
    小さい場合は？
    カンプより
    
    大きい場合は？
    モバイル向け
    
    デザインカンプ
    

    View Slide

22. 提案1：
    デザインカンプ間ではどういうレイアウトになってほ
    しいかイメージを共有しよう
    

    View Slide

23. 提案2：
    ブレイクポイントの設計は、個人に依存せずチーム
    全体で取り組もう
    スマートフォン
    iPhone 12 Pro Max
    
    iPhone 12
    
    iPhone 12 mini
    
    iPhone SE（第2世代）
    428 x 926
    
    390 x 844
    
    375 x 812
    
    375 x 667
    タブレット
    iPad Pro 12.9インチ
    
    iPad Pro 11インチ
    
    iPad Air（第4世代）
    
    iPad（第8世代）
    
    iPad mini（第5世代）
    1023 x 1366
    
    834 x 1194
    
    820 x 1180
    
    810 x 1080
    
    768 x 1024
    デスクトップ
    24inch iMac
    
    MacBook Pro 16inch

    （2020）
    
    MacBook Air

    （Late 2020）
    2240 x 1260
    
    1792 x 1120

    
    1440 x 900
    

    View Slide

24. 4 状態変化
    State
    

    View Slide

25. 実データが入ったら想定してい
    なかった見た目になってしまった
    な……デザインを新しく作らな
    きゃ。
    デザイナー エンジニア
    あらかじめ状態変化を想定したデ
    ザインをしてくれると、二度手間が
    避けられるんだよな……。
    

    View Slide

26. 提案：
    UI Stackを参考に状態変化を想定したデザインを
    作ろう
    データが空の状態
    読込中の状態
    データが部分的な状態
    エラー状態
    理想的な状態
    

    View Slide

27. 5 その他のテクニック
    More Techniques
    

    View Slide

28. その他のテクニック
    ⚫ コンポーネントがmarginを持つと死ぬ
    ⚫ 線は内側につける
    ⚫ どこに効果をつける？
    

    View Slide

29. まとめ
    

    View Slide

30. 120%意図を伝えるために
    ⚫ デザインをデザイナーだけで取り組まない
    ⚫ デザインカンプは中間成果物なのでゴールではない
    ⚫ デザインカンプに向かないコミュニケーションがある
    ⚫ チームのゴールは何か？を常に意識しよう
    

    View Slide

31. XDはデザインツール？
    

    View Slide

32. XDとは である
    体験創造ツール
    

    View Slide

33. チームの を深めて
    
    よい を創り出しましょう！
    相互理解
    体験
    

    View Slide

34. ありがとうございました
    合同会社世路庵　沖 良矢 @448jp
    

    View Slide