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

Adobe XDの『こんな時どうする?』を集めました

isaikaori
January 25, 2020

Adobe XDの『こんな時どうする?』を集めました

Adobe XD ユーザーグループ名古屋 vol.4

isaikaori

January 25, 2020
Tweet

More Decks by isaikaori

Other Decks in Design

Transcript

  1. Adobe XD の
    「こんな時どうする?」を
    集めました
    Adobe XD ユーザーグループ名古屋 vol.4

    View Slide

  2. profile
    井⻫花織@いおり
    有限会社アップルップル デザイナー
    Adobe XD ユーザーグループ名古屋

    View Slide

  3. XDの活⽤事例
    受託制作
    1
    デザイン
    マテリアル作成
    プロトタイプ
    (運⽤ドキュメント)
    フィードバック
    素材提供

    View Slide

  4. XDの活⽤事例
    テンプレート
    2

    View Slide

  5. XDの活⽤事例
    ⾃社CMS
    テーマファイル
    3

    View Slide

  6. XDの活⽤事例
    プロモーション
    ムービー作成
    5
    https://www.a-blogcms.jp/

    View Slide

  7. XDの活⽤事例
    プレゼン
    スライド
    4

    View Slide

  8. XDの活⽤事例
    ちょっとした
    ゲームコンテンツ
    6
    https://xd.adobe.com/view/
    8ce91590-0890-46ff-6e56-
    e3d73180e625-fad8/?fullscreen

    View Slide

  9. XD = とにかく汎⽤性が⾼い

    View Slide

  10. theme
    XDコトはじめ(私の場合)
    『こんな時どうする?』特集

    View Slide

  11. XDコトはじめ
    1

    View Slide

  12. よく聞かれること ①
    XD気になっているのですが、導⼊のハードルが⾼いです。
    どうやって制作現場に取り⼊れましたか?
    当事者ではないですが

    View Slide

  13. 2018 2020/01
    現在

    View Slide

  14. 2018 2020/01
    現在
    最近XDがいい感じ!
    By先輩デザイナー
    当時の Adobe XD
    デザインスペック(ベータ版)
    コメント機能強化中
    Photoshop連携強化中
    Sketch連携強化中
    固定オブジェクト
    数値フィールド内の四則演算

    View Slide

  15. 2018 2020/01
    現在
    最近XDがいい感じ!
    By先輩デザイナー
    当時の Adobe XD
    デザインスペック(ベータ版)
    コメント機能強化中
    Photoshop連携強化中
    Sketch連携強化中
    固定オブジェクト
    数値フィールド内の四則演算

    View Slide

  16. ちょうど同時期ぐらいに開催

    View Slide

  17. 導⼊の決め⼿
    デザイナーにとどまらない共有の便利さ
    1
    他のAdobe製品との連携強化・⾒込み
    2
    無料で⼿軽に試しやすい環境があった
    3

    View Slide

  18. XDとどうやって仲良くなりましたか?
    よく聞かれること ②
    とにかく豊富な情報源を頼りにしてます

    View Slide

  19. Adobe⾃⾝もかなり⼒を⼊れている
    注⽬度の⾼いデザインツール

    View Slide

  20. 2019/12/3(⽕) Adobe MAX Japan

    View Slide

  21. View Slide

  22. View Slide

  23. View Slide

  24. View Slide

  25. View Slide

  26. 読む/触る/遊ぶ/質問するなど
    ⾃分にあった⽅法で無理なく情報を追う
    1
    周りの環境をできる限り整えて
    XDに触れる回数を増やす
    2
    XDと仲良くなるために

    View Slide

  27. 『こんな時どうする?』特集
    2

    View Slide

  28. 機能編

    View Slide

  29. リピートグリッドを崩さないで
    ⼀部を空⽩にしたい
    CASE1

    View Slide

  30. ⾒出しが⼊ります ⾒出しが⼊ります ⾒出しが⼊ります
    ⾒出しが⼊ります ⾒出しが⼊ります

    View Slide

  31. プラグイン:RepeatGrid Fitter
    1
    透過PNG+spaceキー
    2
    おすすめの⽅法は2つ

    View Slide

  32. プラグイン:RepeatGrid Fitter

    View Slide

  33. 透過PNG+spaceキー
    ⾒出しが⼊ります ⾒出しが⼊ります ⾒出しが⼊ります
    ⾒出しが⼊ります ⾒出しが⼊ります

    View Slide

  34. 共有リンクで本番同様の
    シミュレーションがしたい
    CASE2

    View Slide

  35. リンクを共有
    デザインレビュー
    1
    開発
    2
    プレゼンテーション
    3
    ユーザーテスト
    4
    カスタム
    5

    View Slide

  36. リンクを共有
    デザインレビュー
    1
    開発
    2
    プレゼンテーション
    3
    ユーザーテスト
    4
    カスタム
    5
    ⾒た⽬が⼀緒

    View Slide

  37. ホットスポットの
    ヒント
    ユーザー
    テスト
    プレゼン
    テーション
    ナビゲーション
    コントロール

    ×

    ×
    出し分けたいなら「カスタム」を使う

    View Slide

  38. リンクを共有
    デザインレビュー
    1
    https://xd.adobe.com/view/5c3e5b71-249a-4377-5c75-f210fb6a0553-2a0f/
    開発
    2
    https://xd.adobe.com/view/5c3e5b71-249a-4377-5c75-f210fb6a0553-2a0f/
    プレゼンテーション
    3
    https://xd.adobe.com/view/5c3e5b71-249a-4377-5c75-f210fb6a0553-2a0f/?fullscreen
    ユーザーテスト
    4
    https://xd.adobe.com/view/5c3e5b71-249a-4377-5c75-f210fb6a0553-2a0f/?fullscreen&hints=off
    カスタム
    5

    View Slide

  39. リンクを共有
    デザインレビュー
    1
    https://xd.adobe.com/view/5c3e5b71-249a-4377-5c75-f210fb6a0553-2a0f/
    開発
    2
    https://xd.adobe.com/view/5c3e5b71-249a-4377-5c75-f210fb6a0553-2a0f/
    プレゼンテーション
    3
    https://xd.adobe.com/view/5c3e5b71-249a-4377-5c75-f210fb6a0553-2a0f/?fullscreen
    ユーザーテスト
    4
    https://xd.adobe.com/view/5c3e5b71-249a-4377-5c75-f210fb6a0553-2a0f/?fullscreen&hints=off
    カスタム
    5
    リンク先が競合

    View Slide

  40. XDで印刷⽤のデザインを
    作りたい
    CASE3

    View Slide

  41. 【おことわり】
    あまりおすすめはしない

    View Slide

  42. XDはカラーマネジメント⾮対応
    1
    単位はpx・書き出しの解像度は72が前提
    2
    ⽤紙サイズ設定がない
    3
    印刷時はPDFに書き出す必要がある
    4
    事前注意事項

    View Slide

  43. XDはカラーマネジメント⾮対応
    1
    単位はpx・書き出しの解像度は72が前提
    2
    ⽤紙サイズ設定がない
    3
    印刷時はPDFに書き出す必要がある
    4
    事前注意事項

    View Slide

  44. プラグイン:Print Artboard
    解像度調整
    単位変換
    ⽤紙サイズ変更

    View Slide

  45. XDはカラーマネジメント⾮対応
    1
    単位はpx・書き出しの解像度は72が前提
    2
    ⽤紙サイズ設定がない
    3
    印刷時はPDFに書き出す必要がある
    4
    事前注意事項
    ×
    ×
    解決策なし
    解決策なし

    View Slide

  46. 出来上がりイメージ
    スピード

    View Slide

  47. 効率化編

    View Slide

  48. プロトタイプを
    もっと早く繋ぎたい
    CASE4

    View Slide

  49. デザイン
    画⾯
    コンポーネント
    ノーマル
    プロトタイプ
    画⾯

    × ○
    ×
    まとめてコピー&ペースト
    個別にコピー&ペーストなら:右クリック→インタラクションをペースト

    View Slide

  50. あるサイトやファイルの
    UIやスタイルを素早く参照したい
    CASE5

    View Slide

  51. ジャンル別に4つ
    スポイト
    1
    画⾯内全てのカラーを参照
    プラグイン「Mimic」
    2
    公開サイトのアセット類をインポート
    UIキット
    3
    iOS標準などのUIパーツがそのまま使える
    アセットをリンク
    4
    別XDファイルのアセットをリンク

    View Slide

  52. アセットをリンク
    ⾒出し1テキスト
    ⾒出し2テキスト
    本⽂テキスト本⽂テキスト本⽂テキスト本⽂テキスト本⽂テキスト本⽂テキ
    スト本⽂テキスト本⽂テキスト本⽂テキスト本⽂テキスト
    ドキュメント1 ドキュメント2 ドキュメント3 ドキュメント4

    View Slide

  53. ソースドキュメントはクラウドに保存する
    1
    ローカルアセットにする⼿段がない
    2
    リンクしたアセットは削除できない
    3
    アセットをリンク
    ※ただしソースドキュメントで削除した場合は可能

    View Slide

  54. theme
    XDコトはじめ
    『こんな時どうする?』特集

    View Slide

  55. ご静聴ありがとうございました
    twitter: @isaikaori
    facebook: isaikaori
    blog: https://isaikaori.com
    井⻫花織@いおり

    View Slide