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

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

KASHIYAMA the Smart Tailor （2017-）

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

2 画像書き出し Export Images

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

3 ブレイクポイント Breakpoint

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

提案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

Slide 24

Slide 24 text

4 状態変化 State

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

まとめ

Slide 30

Slide 30 text

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