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
690
Adobe XDの『こんな時どうする?』を集めました
Adobe XD ユーザーグループ名古屋 vol.4
isaikaori
January 25, 2020
Tweet
Share
More Decks by isaikaori
See All by isaikaori
熱狂が伝播するチームの作り方
isaikaori
0
40
今日から始めるDesignOpsのヒント
isaikaori
1
630
Deep Dive Adobe XD - レイアウト編
isaikaori
0
200
アウトプットむずい
isaikaori
0
320
実践!a-blog cmsユーザーのためのsite2019.xd活用法
isaikaori
0
180
ECサイトで実現したい『体験』のあり方を考える
isaikaori
1
830
実務で活かすXD!制作を支える取り組みと代表機能の活用術
isaikaori
2
1.4k
a-blog cmsの初心者コンテンツを整備してる話
isaikaori
0
740
強・用・美から考えるテーマデザインのヒント_後編
isaikaori
0
650
Other Decks in Design
See All in Design
【pmconf2024】ユーザーになりきる「コスプレUX」で リサーチ解像度を上げる
kamechi7222222
1
8.8k
成長する組織のナレッジベースのつくりかた_知識基盤のデザインとメタデザイン
gaussbeam
0
970
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜 移動・不動産領域の取り組み
tmtgtkhs
0
220
Dive Deep into Communication
yomtsu
0
230
ネーミングの極意 - その名は体を現していますか? -
kakukoki
2
520
商業デザインのアクセシビリティにおける倫理フレームワークの考察
securecat
1
500
同人音声のための、 最高の視聴体験を求めて【サブカル×デザインMeetUP!】
vivion
0
390
もうひとつのアーキテクチャ #kichijojipm
kondoyuko
0
210
株式会社デイトラ様│コーポレートサイト│コンセプトシート
haruka_capeo
0
940
利用者が離れないUX/UIデザイン 長く使われる業務アプリデザインのポイント
ncdc
5
560
Building foundations 堅牢なデザイントークンの設計
hilokifigma
1
2.6k
Les petites aventures de CSS, saison 2025
goetter
3
4k
Featured
See All Featured
A Tale of Four Properties
chriscoyier
158
23k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.5k
KATA
mclloyd
29
14k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
31
4.7k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
8
700
Typedesign – Prime Four
hannesfritz
41
2.6k
For a Future-Friendly Web
brad_frost
176
9.6k
Adopting Sorbet at Scale
ufuk
75
9.3k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
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 井⻫花織@いおり