Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Adobe XDの『こんな時どうする?』を集めました
Search
isaikaori
January 25, 2020
Design
0
640
Adobe XDの『こんな時どうする?』を集めました
Adobe XD ユーザーグループ名古屋 vol.4
isaikaori
January 25, 2020
Tweet
Share
More Decks by isaikaori
See All by isaikaori
今日から始めるDesignOpsのヒント
isaikaori
1
510
Deep Dive Adobe XD - レイアウト編
isaikaori
0
190
アウトプットむずい
isaikaori
0
300
実践!a-blog cmsユーザーのためのsite2019.xd活用法
isaikaori
0
170
ECサイトで実現したい『体験』のあり方を考える
isaikaori
1
730
実務で活かすXD!制作を支える取り組みと代表機能の活用術
isaikaori
2
1.3k
a-blog cmsの初心者コンテンツを整備してる話
isaikaori
0
710
強・用・美から考えるテーマデザインのヒント_後編
isaikaori
0
580
強・用・美から考えるテーマデザインのヒント_前編
isaikaori
1
1.6k
Other Decks in Design
See All in Design
Fooocus(Stable DiffusionXL)で アニメ画像生成の仕方
otanet
0
1.4k
Tuzukuru解説ブック
atsumaru1377
0
290
管理画面の全体UXは利用時品質モデルで考える
readymadegogo
0
1.5k
Blender 4.1 で レッツ Vket Cloud!
kamera25
0
250
デザイナー採用 3社目で学び中のこと / Learnings of Designer Recruitment | Yasuhiro Yokota
yasuhiroyokota
1
1.7k
デザイナー向け会社紹介資料(採用資料)
dreamarts
0
260
Первая беседа о Карте реализации историй
ashapiro
0
110
Cхематизация процессов и пользовательского опыта с Картой процесса-опыта
ashapiro
0
230
WHAT ARE ME?
takuro_nakajima
PRO
0
1.9k
Cardápio - Caraguá A Gosto 2024 - De 01/08 a 08/09/2024
caraguatatuba
0
5.1k
DMMデザイン組織の生成AI導入プロセス - Adobe Fireflyと振り返る約1年とこれから -
takumasaito
1
190
想像するためのデザイン - LARPの可能性を探求してみた話
okabemy
0
360
Featured
See All Featured
Designing on Purpose - Digital PM Summit 2013
jponch
113
6.8k
Documentation Writing (for coders)
carmenintech
65
4.3k
Pencils Down: Stop Designing & Start Developing
hursman
118
11k
Done Done
chrislema
180
16k
What's in a price? How to price your products and services
michaelherold
241
11k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
103
47k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
27
7.4k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
27
8.9k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
29
2.5k
Optimising Largest Contentful Paint
csswizardry
28
2.7k
What’s in a name? Adding method to the madness
productmarketing
PRO
21
3k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
278
13k
Transcript
Adobe XD の 「こんな時どうする?」を 集めました Adobe XD ユーザーグループ名古屋 vol.4
profile 井⻫花織@いおり 有限会社アップルップル デザイナー Adobe XD ユーザーグループ名古屋
XDの活⽤事例 受託制作 1 デザイン マテリアル作成 プロトタイプ (運⽤ドキュメント) フィードバック 素材提供
XDの活⽤事例 テンプレート 2
XDの活⽤事例 ⾃社CMS テーマファイル 3
XDの活⽤事例 プロモーション ムービー作成 5 https://www.a-blogcms.jp/
XDの活⽤事例 プレゼン スライド 4
XDの活⽤事例 ちょっとした ゲームコンテンツ 6 https://xd.adobe.com/view/ 8ce91590-0890-46ff-6e56- e3d73180e625-fad8/?fullscreen
XD = とにかく汎⽤性が⾼い
theme XDコトはじめ(私の場合) 『こんな時どうする?』特集
XDコトはじめ 1
よく聞かれること ① XD気になっているのですが、導⼊のハードルが⾼いです。 どうやって制作現場に取り⼊れましたか? 当事者ではないですが
2018 2020/01 現在
2018 2020/01 現在 最近XDがいい感じ! By先輩デザイナー 当時の Adobe XD デザインスペック(ベータ版) コメント機能強化中
Photoshop連携強化中 Sketch連携強化中 固定オブジェクト 数値フィールド内の四則演算
2018 2020/01 現在 最近XDがいい感じ! By先輩デザイナー 当時の Adobe XD デザインスペック(ベータ版) コメント機能強化中
Photoshop連携強化中 Sketch連携強化中 固定オブジェクト 数値フィールド内の四則演算
ちょうど同時期ぐらいに開催
導⼊の決め⼿ デザイナーにとどまらない共有の便利さ 1 他のAdobe製品との連携強化・⾒込み 2 無料で⼿軽に試しやすい環境があった 3
XDとどうやって仲良くなりましたか? よく聞かれること ② とにかく豊富な情報源を頼りにしてます
Adobe⾃⾝もかなり⼒を⼊れている 注⽬度の⾼いデザインツール
2019/12/3(⽕) Adobe MAX Japan
None
None
None
None
None
読む/触る/遊ぶ/質問するなど ⾃分にあった⽅法で無理なく情報を追う 1 周りの環境をできる限り整えて XDに触れる回数を増やす 2 XDと仲良くなるために
『こんな時どうする?』特集 2
機能編
リピートグリッドを崩さないで ⼀部を空⽩にしたい CASE1
⾒出しが⼊ります ⾒出しが⼊ります ⾒出しが⼊ります ⾒出しが⼊ります ⾒出しが⼊ります
プラグイン:RepeatGrid Fitter 1 透過PNG+spaceキー 2 おすすめの⽅法は2つ
プラグイン:RepeatGrid Fitter
透過PNG+spaceキー ⾒出しが⼊ります ⾒出しが⼊ります ⾒出しが⼊ります ⾒出しが⼊ります ⾒出しが⼊ります
共有リンクで本番同様の シミュレーションがしたい CASE2
リンクを共有 デザインレビュー 1 開発 2 プレゼンテーション 3 ユーザーテスト 4 カスタム
5
リンクを共有 デザインレビュー 1 開発 2 プレゼンテーション 3 ユーザーテスト 4 カスタム
5 ⾒た⽬が⼀緒
ホットスポットの ヒント ユーザー テスト プレゼン テーション ナビゲーション コントロール ◦ ×
◦ × 出し分けたいなら「カスタム」を使う
リンクを共有 デザインレビュー 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
リンクを共有 デザインレビュー 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 リンク先が競合
XDで印刷⽤のデザインを 作りたい CASE3
【おことわり】 あまりおすすめはしない
XDはカラーマネジメント⾮対応 1 単位はpx・書き出しの解像度は72が前提 2 ⽤紙サイズ設定がない 3 印刷時はPDFに書き出す必要がある 4 事前注意事項
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キット 3 iOS標準などのUIパーツがそのまま使える
アセットをリンク 4 別XDファイルのアセットをリンク
アセットをリンク ⾒出し1テキスト ⾒出し2テキスト 本⽂テキスト本⽂テキスト本⽂テキスト本⽂テキスト本⽂テキスト本⽂テキ スト本⽂テキスト本⽂テキスト本⽂テキスト本⽂テキスト ドキュメント1 ドキュメント2 ドキュメント3 ドキュメント4
ソースドキュメントはクラウドに保存する 1 ローカルアセットにする⼿段がない 2 リンクしたアセットは削除できない 3 アセットをリンク ※ただしソースドキュメントで削除した場合は可能
theme XDコトはじめ 『こんな時どうする?』特集
ご静聴ありがとうございました twitter: @isaikaori facebook: isaikaori blog: https://isaikaori.com 井⻫花織@いおり