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. 従来ワークフローの限界
    XDを始めとする新世代デザインツールの台頭
    実装
    デザイン
    設計

    View full-size slide

  2. デザインツールだけでは

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

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

    もある
    埋められない溝

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

  6. スターバックスの窓
    (2019-2021)

    View full-size slide

  7. KASHIYAMA the Smart Tailor
    (2017-)

    View full-size slide

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

    View full-size slide

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

    Adobe XD基礎入門

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    複数人で作りやすくなる

    View full-size slide

  13. 2 画像書き出し
    Export Images

    View full-size slide

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

    View full-size slide

  15. 提案:
    書き出す画像の品質や範囲はコーディングをふまえ
    て相談しよう
    書き出し対象にしておけば、あとからまとめて書き出し可能

     Mac: ⌘ + shift + E

     Windows: Ctrl + Shift + E
    レイヤー名をつけておけば、その名前で画像ファイルが書き出される

    View full-size slide

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

    View full-size slide

  17. 提案:
    アイコンは正方形でコンポーネント化すると吉
    アイコンに名前をつけるとチームで共通認識が高まる
    塗りなしの長方形を背景に置いてコンポーネント化すると、

    アイコンが扱いやすくなる
    一覧用のアートボードを作ると見やすい

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  20. デスクトップ向け

    デザインカンプ
    カンプの間

    の場合は?
    カンプより

    小さい場合は?
    カンプより

    大きい場合は?
    モバイル向け

    デザインカンプ

    View full-size slide

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

    View full-size slide

  22. 提案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 full-size slide

  23. 4 状態変化
    State

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  29. XDはデザインツール?

    View full-size slide

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

    View full-size slide

  31. チームの を深めて

    よい を創り出しましょう!
    相互理解
    体験

    View full-size slide

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

    View full-size slide