$30 off During Our Annual Pro Sale. View Details »
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
これだけは伝えたい Adobe XDの5つの強み
Search
isaikaori
March 30, 2019
Design
2
240
これだけは伝えたい Adobe XDの5つの強み
Adobe XD ユーザーグループ名古屋 vol.2
https://xdstudy-nagoya.connpass.com/event/121614/
isaikaori
March 30, 2019
Tweet
Share
More Decks by isaikaori
See All by isaikaori
今日から始めるDesignOpsのヒント
isaikaori
1
560
Deep Dive Adobe XD - レイアウト編
isaikaori
0
200
Adobe XDの『こんな時どうする?』を集めました
isaikaori
0
660
アウトプットむずい
isaikaori
0
310
実践!a-blog cmsユーザーのためのsite2019.xd活用法
isaikaori
0
180
ECサイトで実現したい『体験』のあり方を考える
isaikaori
1
790
実務で活かすXD!制作を支える取り組みと代表機能の活用術
isaikaori
2
1.3k
a-blog cmsの初心者コンテンツを整備してる話
isaikaori
0
730
強・用・美から考えるテーマデザインのヒント_後編
isaikaori
0
610
Other Decks in Design
See All in Design
志ある事業の種を社会に開花させるための挑戦/ Designship2024_Nishimura
root_recruit
0
200
太田博三(@usagisan2020)
otanet
0
200
知を活かせるチームづくりとは?-MIMIGURIで実践している「全員探究」の仕組みと文化づくり-
chiemitaki
1
740
【pmconf2024】ユーザーになりきる「コスプレUX」で リサーチ解像度を上げる
kamechi7222222
0
4.4k
1年目のクリエイターがつくりあげた!採用冊子CANVAS制作の裏側 / creator-canvas
cyberagentdevelopers
PRO
1
300
拡大するマルチプロダクトSaaSの顧客理解にデザイン組織はどう取り組んでいるか / RAKUSTechCon2024_Design
rakus_dev
0
2.2k
ビジョン実現を加速させるデザインプログラムマネージャーの視座とキャリア/ Designship2024_Sato
root_recruit
0
200
デザインシステム×プロトタイピングで挑む社会的価値の共創 / Designship2024
visional_engineering_and_design
1
290
Yahoo Newsletter Clicker Template
xuechunwu
0
290
生成AIを受け入れ共創できるデザイナーマインドへープロセス改革を想定したデザイナーの準備ー
takumasaito
1
220
ネーミングの極意 - その名は体を現していますか? -
kakukoki
2
320
Осязаемый потребительский опыт. Ловим его за хвост с Картой процесса-опыта
ashapiro
2
230
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Optimizing for Happiness
mojombo
376
70k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.8k
Testing 201, or: Great Expectations
jmmastey
40
7.1k
A better future with KSS
kneath
238
17k
[RailsConf 2023] Rails as a piece of cake
palkan
52
5k
Building Your Own Lightsaber
phodgson
103
6.1k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.4k
Designing for Performance
lara
604
68k
For a Future-Friendly Web
brad_frost
175
9.4k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Transcript
これだけは伝えたい Adobe XDの5つの強み 5 5 5
井斉花織@いおり ・有限会社アップルップル デザイナー ・Adobe XD ユーザーグループ名古屋 管理人
最近のUIデザインツール事情
Sketch XD Figma Studio Photoshop
いろんな事情の「実際なかなか使えない」に対して 少しでも場面で背中を押せるように! Sketch XD Figma Studio Photoshop
Adobe XDの5つの強み 実際に業務で使ってみて感じる
1. 量産と一括管理が得意なプロダクト設計 2. 実際の動き方を伝える2つの機能 3. チームに優しい数々の共有機能 4. Adobeならではのデザインツールの連携 5. 充実したアップデートとプラグイン
1 量産と一括管理が得意な プロダクト設計
量産=リピートグリッド 一括管理=アセット
量産=リピートグリッド 一括管理=アセット
うなぎ職人の匠の技が凝縮して作ら れる「ひつまぶし」 まずは名古屋グルメの代表格とも言える「ひ つまぶし」。名前の由来の通り、細かく切っ たうなぎとご飯を大きなおひつでまぜて(ま 味噌のコクと麺の歯ごたえが美味し い「味噌煮込うどん」 名古屋めしの中でも代表的なグルメ「味噌煮 込うどん」。コクのある味噌つゆと歯ごたえ のある麺がクセになる、名古屋の家庭料理の
ワインに合うあっさり味の「味噌お でん」 名古屋の味噌おでんは甘みのある汁が一般的 ですが、ソムリエが経営する店で「ワインに 合う」というコンセプトで提供されている、 見た目も味もインパクト抜群「きし めん」 「味噌煮込うどん」と並び名古屋の代表的な 麺グルメ「きしめん」。何といっても特徴 は、平打ちにした幅広麺。麺が伸びないよ 地元民もよく食べるB級グルメ「あん かけスパゲティ」 とろみとコクのある味わいが特徴の名古屋発 オリジナルパスタ「あんかけスパゲティ」。 昭和40年頃から広まったとされるB級グルメ 名古屋発祥、台湾人が作った「台湾 ラーメン」 見ただけで汗がぶわっと出てきそうな赤い見 た目が特徴の、台湾ラーメン。唐辛子やニン ニクと一緒に煮込んだ挽肉とニラによる香味 引用元:https://gurutabi.gnavi.co.jp/a/a̲2312/
・ひとかたまりのスタイルを整列した状態で量産する ・画像とテキストを別データから一瞬で流し込む ・スタイルを一括で編集する
量産=リピートグリッド 一括管理=アセット
カラー 文字スタイル シンボル フォームを送信する 見出し大です。 見出し中です。 見出し小です。 次のページへ
・「カラー」「文字スタイル」「シンボル」 ・シンボル:テキストの内容は独自に持つ ・シンボル:シンボル同士で置き換えができる ・シンボル:外部XDファイルからリンクができる
None
2 実際の動きを伝える2つの機能
レスポンシブサイズ変更 プロトタイプアニメーション
レスポンシブサイズ変更 プロトタイプアニメーション
レスポンシブサイズ OFF レスポンシブサイズ ON
幅を固定 高さを固定 左上に固定 右下に固定
実際に想定しているレスポンシブの動きを 伝えることができる
レスポンシブサイズ変更 プロトタイプアニメーション
クリックエリア
クリックエリア
クリックエリア
クリックエリア
ドラッグエリア
ドラッグエリア
クリックエリア
結論:可能性は無限大
実際に想定しているサイト上での動きを 伝えることができる
None
3 チームに優しい数々の共有機能
ブラウザ上でプレビュー用に共有 開発用に共有 クラウドに保存して共有
ブラウザ上でプレビュー用に共有 開発用に共有 クラウドに保存して共有
プレビュー用に共有&開発用に共有 ・サイトの実際の動きのシミュレーション ・CSSで必要な数値やコードなどの情報を一覧で表示 ・コメント機能でのコミュニケーション ・パスワードを有効にするとセキュリティ面でも安心
ブラウザ上でプレビュー用に共有 開発用に共有 クラウドに保存して共有
None
複数のデバイスで共有
複数のメールアドレスで共有
[email protected]
[email protected]
None
4 Adobeならではの デザインツールの連携
Sketch XD Figma Studio Photoshop
Sketch XD Figma Studio Photoshop
Photoshop Illustrator After Effects XD ファイルの互換性を どんどん改善している
Photoshop ・XDでPSD形式のファイルの読み込みが可能 ・XD上でスマートオブジェクトの編集も可能 https://helpx.adobe.com/jp/xd/kb/open‑photoshop‑files‑in‑xd.html Photoshop ファイルを XD で開くときにサポートされる機能
Illustrator https://helpx.adobe.com/jp/xd/kb/open‑illustrator‑files‑in‑xd.html XDで Illustrator ファイルを開く際にサポートされる機能とサポートされない機能 ・XDでAI形式のファイルの読み込みが可能 ・XDのベクターコンテンツもSVG形式で保持
画面設計 コンポーネント Photoshop Illustrator XD
Sketch Sketchファイルも インポートできる
None
5 充実したアップデートとプラグイン
アップデート プラグイン
・頻度は2016年のPreviewリリースからほぼ毎月 ・将来的には同時編集や複雑なパスの作成も可能に
・頻度は2016年のPreviewリリースからほぼ毎月 ・将来的には同時編集や複雑なパスの作成も可能に
Adobe Blog 連載 Adobe XD アップデート 追うための情報1 詳細チェック用記事
公式 Adobe XD CC > 機能 > 最新機能 追うための情報2 歴史・概要チェック用コンテンツ
AdobeXD 新機能紹介動画 追うための情報3 おさらい用動画 Twitter: @pino̲ebiebi
アップデート プラグイン
・2018/10のプラグイン対応よりほぼ毎週追加 ・より使いやすいようXDのカスタマイズが可能に GoogleSheets RepeatGrid Fitter Resize Artboard to Fit Content
Stark Confetti
None
1. 量産と一括管理が得意なプロダクト設計 2. 実際の動きを伝える2つの機能 3. チームに優しい数々の共有機能 4. Adobeならではのデザインツールの連携 5. 充実したアップデートとプラグイン
Adobe XDの5つの強み
THANK YOU ☺ isaikaori isaikaori