Adobe XD ユーザーグループ名古屋 vol.4
Adobe XD の「こんな時どうする?」を集めましたAdobe XD ユーザーグループ名古屋 vol.4
View Slide
profile井⻫花織@いおり有限会社アップルップル デザイナーAdobe XD ユーザーグループ名古屋
XDの活⽤事例受託制作1デザインマテリアル作成プロトタイプ(運⽤ドキュメント)フィードバック素材提供
XDの活⽤事例テンプレート2
XDの活⽤事例⾃社CMSテーマファイル3
XDの活⽤事例プロモーションムービー作成5https://www.a-blogcms.jp/
XDの活⽤事例プレゼンスライド4
XDの活⽤事例ちょっとしたゲームコンテンツ6https://xd.adobe.com/view/8ce91590-0890-46ff-6e56-e3d73180e625-fad8/?fullscreen
XD = とにかく汎⽤性が⾼い
themeXDコトはじめ(私の場合)『こんな時どうする?』特集
XDコトはじめ1
よく聞かれること ①XD気になっているのですが、導⼊のハードルが⾼いです。どうやって制作現場に取り⼊れましたか?当事者ではないですが
2018 2020/01現在
2018 2020/01現在最近XDがいい感じ!By先輩デザイナー当時の Adobe XDデザインスペック(ベータ版)コメント機能強化中Photoshop連携強化中Sketch連携強化中固定オブジェクト数値フィールド内の四則演算
ちょうど同時期ぐらいに開催
導⼊の決め⼿デザイナーにとどまらない共有の便利さ1他のAdobe製品との連携強化・⾒込み2無料で⼿軽に試しやすい環境があった3
XDとどうやって仲良くなりましたか?よく聞かれること ②とにかく豊富な情報源を頼りにしてます
Adobe⾃⾝もかなり⼒を⼊れている注⽬度の⾼いデザインツール
2019/12/3(⽕) Adobe MAX Japan
読む/触る/遊ぶ/質問するなど⾃分にあった⽅法で無理なく情報を追う1周りの環境をできる限り整えてXDに触れる回数を増やす2XDと仲良くなるために
『こんな時どうする?』特集2
機能編
リピートグリッドを崩さないで⼀部を空⽩にしたいCASE1
⾒出しが⼊ります ⾒出しが⼊ります ⾒出しが⼊ります⾒出しが⼊ります ⾒出しが⼊ります
プラグイン:RepeatGrid Fitter1透過PNG+spaceキー2おすすめの⽅法は2つ
プラグイン:RepeatGrid Fitter
透過PNG+spaceキー⾒出しが⼊ります ⾒出しが⼊ります ⾒出しが⼊ります⾒出しが⼊ります ⾒出しが⼊ります
共有リンクで本番同様のシミュレーションがしたいCASE2
リンクを共有デザインレビュー1開発2プレゼンテーション3ユーザーテスト4カスタム5
リンクを共有デザインレビュー1開発2プレゼンテーション3ユーザーテスト4カスタム5⾒た⽬が⼀緒
ホットスポットのヒントユーザーテストプレゼンテーションナビゲーションコントロール○×○×出し分けたいなら「カスタム」を使う
リンクを共有デザインレビュー1https://xd.adobe.com/view/5c3e5b71-249a-4377-5c75-f210fb6a0553-2a0f/開発2https://xd.adobe.com/view/5c3e5b71-249a-4377-5c75-f210fb6a0553-2a0f/プレゼンテーション3https://xd.adobe.com/view/5c3e5b71-249a-4377-5c75-f210fb6a0553-2a0f/?fullscreenユーザーテスト4https://xd.adobe.com/view/5c3e5b71-249a-4377-5c75-f210fb6a0553-2a0f/?fullscreen&hints=offカスタム5
リンクを共有デザインレビュー1https://xd.adobe.com/view/5c3e5b71-249a-4377-5c75-f210fb6a0553-2a0f/開発2https://xd.adobe.com/view/5c3e5b71-249a-4377-5c75-f210fb6a0553-2a0f/プレゼンテーション3https://xd.adobe.com/view/5c3e5b71-249a-4377-5c75-f210fb6a0553-2a0f/?fullscreenユーザーテスト4https://xd.adobe.com/view/5c3e5b71-249a-4377-5c75-f210fb6a0553-2a0f/?fullscreen&hints=offカスタム5リンク先が競合
XDで印刷⽤のデザインを作りたいCASE3
【おことわり】あまりおすすめはしない
XDはカラーマネジメント⾮対応1単位はpx・書き出しの解像度は72が前提2⽤紙サイズ設定がない3印刷時はPDFに書き出す必要がある4事前注意事項
プラグイン:Print Artboard解像度調整単位変換⽤紙サイズ変更
XDはカラーマネジメント⾮対応1単位はpx・書き出しの解像度は72が前提2⽤紙サイズ設定がない3印刷時はPDFに書き出す必要がある4事前注意事項××解決策なし解決策なし
出来上がりイメージスピード
効率化編
プロトタイプをもっと早く繋ぎたいCASE4
デザイン画⾯コンポーネントノーマルプロトタイプ画⾯○× ○×まとめてコピー&ペースト個別にコピー&ペーストなら:右クリック→インタラクションをペースト
あるサイトやファイルのUIやスタイルを素早く参照したいCASE5
ジャンル別に4つスポイト1画⾯内全てのカラーを参照プラグイン「Mimic」2公開サイトのアセット類をインポートUIキット3iOS標準などのUIパーツがそのまま使えるアセットをリンク4別XDファイルのアセットをリンク
アセットをリンク⾒出し1テキスト⾒出し2テキスト本⽂テキスト本⽂テキスト本⽂テキスト本⽂テキスト本⽂テキスト本⽂テキスト本⽂テキスト本⽂テキスト本⽂テキスト本⽂テキストドキュメント1 ドキュメント2 ドキュメント3 ドキュメント4
ソースドキュメントはクラウドに保存する1ローカルアセットにする⼿段がない2リンクしたアセットは削除できない3アセットをリンク※ただしソースドキュメントで削除した場合は可能
themeXDコトはじめ『こんな時どうする?』特集
ご静聴ありがとうございましたtwitter: @isaikaorifacebook: isaikaoriblog: https://isaikaori.com井⻫花織@いおり