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

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

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