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

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

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

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

448jp | OKI Yoshiya

September 25, 2021
Tweet

More Decks by 448jp | OKI Yoshiya

Other Decks in Design

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