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

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

Transcript

2. 従来ワークフローの限界 XDを始めとする新世代デザインツールの台頭 実装 デザイン 設計
3. デザインツールだけでは 埋められない溝もある デザインツールだけでは 埋められない溝もある デザインツールだけでは もある 埋められない溝
4. 作り込んだデザイン なんか違う？ 実装されてみると…… 120%意図を伝えるためにできること
5. 注意 ⚫ Web制作における話です
 ※デザイナーはWebデザイナー、エンジニアはフロントエンドエンジニアなどに読み替えてください。 ⚫ すべての現場に当てはまるものではありません ⚫ 誰かの仕事を非難したり、押し付けたりする狙いはありません
6. おき 沖 よ し や 良矢 @448jp ⚫ 合同会社世路庵 代表 ⚫ 2021年9月から3期目 ⚫ 受託制作一筋18年
7. スターバックスの窓 （2019-2021）
8. KASHIYAMA the Smart Tailor （2017-）
9. Adobe MAX Japan LinkedInラーニング Web Designing DIST Vue.js Japan User Group BAU-YA
10. 相原 典佳、沖 良矢、濱野 将（著） ⚫ 2021.9.22発売 ⚫ 288ページ ⚫ 2,970円 エムディエヌコーポレーション刊 初心者からちゃんとしたプロになる Adobe XD基礎入門
11. 1 カラー、フォント Color, Font
12. Webサイトで使っているカラー、 フォントはデザインファイルで指 定したはずなのに、きちんと反映 されていないのはなぜ？ デザイナー エンジニア デザインファイルの指定をそのまま 実装したんだけどな……。
13. 提案： 原則、Webサイト内で使っているすべてのカラー、テ キストスタイルをドキュメントアセットに登録しよう XDの9月アップデートでグループ化できるようになった！ カラーに名前をつけるとチームで共通認識が高まる 一覧用のアートボードを作ると見やすい どういうところで使うカラーなのかメモを添えると 複数人で作りやすくなる
14. 2 画像書き出し Export Images
15. 画質をきっちりコントロールする ために画像を書き出しておいた のに、画質が悪くなっているのは なぜ？ デザイナー エンジニア コードを考慮した画像じゃないから そのまま使えないし、差し替えのと きも面倒なんだよな……。
16. 提案： 書き出す画像の品質や範囲はコーディングをふまえ て相談しよう 書き出し対象にしておけば、あとからまとめて書き出し可能 　Mac: ⌘ + shift + E 　Windows: Ctrl + Shift + E レイヤー名をつけておけば、その名前で画像ファイルが書き出される
17. アイコンの位置がなんだかガタ ガタしている……デザインファ イルの見た目に合わせて！ デザイナー エンジニア 1つ1つサイズが違うからCSSが面 倒なんだよな……。
18. 提案： アイコンは正方形でコンポーネント化すると吉 アイコンに名前をつけるとチームで共通認識が高まる 塗りなしの長方形を背景に置いてコンポーネント化すると、 アイコンが扱いやすくなる 一覧用のアートボードを作ると見やすい
19. 3 ブレイクポイント Breakpoint
20. PC用とSP用のデザインカンプ を作ったけど、実装を見ると間の 見た目が微妙だな……。 デザイナー エンジニア デザインカンプだけじゃ、わからな いことが多すぎて実装があやふや になってしまうんだよな……。
21. デスクトップ向け デザインカンプ カンプの間 の場合は？ カンプより 小さい場合は？ カンプより 大きい場合は？ モバイル向け デザインカンプ
22. 提案1： デザインカンプ間ではどういうレイアウトになってほ しいかイメージを共有しよう
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
24. 4 状態変化 State
25. 実データが入ったら想定してい なかった見た目になってしまった な……デザインを新しく作らな きゃ。 デザイナー エンジニア あらかじめ状態変化を想定したデ ザインをしてくれると、二度手間が 避けられるんだよな……。
26. 提案： UI Stackを参考に状態変化を想定したデザインを 作ろう データが空の状態 読込中の状態 データが部分的な状態 エラー状態 理想的な状態
27. 5 その他のテクニック More Techniques
28. その他のテクニック ⚫ コンポーネントがmarginを持つと死ぬ ⚫ 線は内側につける ⚫ どこに効果をつける？
29. まとめ
30. 120%意図を伝えるために ⚫ デザインをデザイナーだけで取り組まない ⚫ デザインカンプは中間成果物なのでゴールではない ⚫ デザインカンプに向かないコミュニケーションがある ⚫ チームのゴールは何か？を常に意識しよう
31. XDはデザインツール？
32. XDとは である 体験創造ツール
33. チームの を深めて よい を創り出しましょう！ 相互理解 体験
34. ありがとうございました 合同会社世路庵　沖 良矢 @448jp