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

Transcript

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

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

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

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

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

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

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

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

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

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

11. XDコトはじめ 1

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

13. 2018 2020/01 現在

14. 2018 2020/01 現在 最近XDがいい感じ！ By先輩デザイナー 当時の Adobe XD デザインスペック(ベータ版) コメント機能強化中

    Photoshop連携強化中 Sketch連携強化中 固定オブジェクト 数値フィールド内の四則演算

15. 2018 2020/01 現在 最近XDがいい感じ！ By先輩デザイナー 当時の Adobe XD デザインスペック(ベータ版) コメント機能強化中

    Photoshop連携強化中 Sketch連携強化中 固定オブジェクト 数値フィールド内の四則演算

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

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

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

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

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

21. None
22. None
23. None
24. None
25. None

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

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

28. 機能編

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

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

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

32. プラグイン：RepeatGrid Fitter

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

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

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

    5

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

    5 ⾒た⽬が⼀緒

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

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

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

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 リンク先が競合

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

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

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

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

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

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

    × 解決策なし 解決策なし

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

47. 効率化編

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

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

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

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

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

    アセットをリンク 4 別XDファイルのアセットをリンク

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

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

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

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