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
730
Adobe XDの『こんな時どうする?』を集めました
Adobe XD ユーザーグループ名古屋 vol.4
isaikaori
January 25, 2020
Tweet
Share
More Decks by isaikaori
See All by isaikaori
熱狂が伝播するチームの作り方
isaikaori
0
1.8k
今日から始めるDesignOpsのヒント
isaikaori
1
720
Deep Dive Adobe XD - レイアウト編
isaikaori
0
230
アウトプットむずい
isaikaori
0
340
実践!a-blog cmsユーザーのためのsite2019.xd活用法
isaikaori
0
200
ECサイトで実現したい『体験』のあり方を考える
isaikaori
1
880
実務で活かすXD!制作を支える取り組みと代表機能の活用術
isaikaori
2
1.4k
a-blog cmsの初心者コンテンツを整備してる話
isaikaori
0
770
強・用・美から考えるテーマデザインのヒント_後編
isaikaori
0
760
Other Decks in Design
See All in Design
[2025.6.30 もがく中堅デザイナー、キャリアの分岐点] なんでもやる系デザイナーのもがきかた
taka_piya
1
4k
decksh object reference
ajstarks
2
1.3k
組織の右腕として共創する ー デザインと経営の二つの視点から見えた、新しい支援のかたち/ Designship2025_Nishimura
root_recruit
PRO
0
150
アクセシビリティに取り組むメリット
magi1125
2
270
Hatena Engineer Seminar #33 チームと開発するためのモック
takuwolog
1
460
Yahoo!フリマ:生成AI利用機能ならではのインターフェース設計について / Yahoo! JAPAN Flea Market: Interface Design Specific to Generative AI Utilization Features
lycorptech_jp
PRO
0
510
mento Design Team Portfolio
mento0fficial
1
910
デザインシステムの「種」を使って、受託開発を加速させる
akane___ui
0
11k
大きな変化の中で、わたしが向き合ったこと #もがく中堅デザイナー
bengo4com
1
1.3k
デザイナー向けフライル説明資料
toshiblues
0
180
Memory Man v3 (WIP)
storybychad
PRO
0
2.7k
「稼ぐ」だけでなく 「還す」ためのデザイン / Designship2025
culumu
1
390
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Optimizing for Happiness
mojombo
379
70k
Become a Pro
speakerdeck
PRO
29
5.6k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
It's Worth the Effort
3n
187
28k
Unsuck your backbone
ammeep
671
58k
The Cult of Friendly URLs
andyhume
79
6.6k
Leading Effective Engineering Teams in the AI Era
addyosmani
7
500
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.7k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
620
Visualization
eitanlees
149
16k
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 井⻫花織@いおり