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

by isaikaori

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

XDコトはじめ 1

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

2018 2020/01 現在

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

2019/12/3(⽕) Adobe MAX Japan

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

機能編

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

プラグイン：RepeatGrid Fitter

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

ホットスポットのヒントユーザーテストプレゼンテーションナビゲーションコントロール ○ × ○ × 出し分けたいなら「カスタム」を使う

Slide 38

Slide 38 text

リンクを共有デザインレビュー 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

Slide 39

Slide 39 text

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

効率化編

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

デザイン画⾯コンポーネントノーマルプロトタイプ画⾯ ○ × ○ × まとめてコピー&ペースト個別にコピー＆ペーストなら：右クリック→インタラクションをペースト

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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