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