Enviar pesquisa
Carregar
ADOBE XD DAYS
•
Transferir como PPTX, PDF
•
0 gostou
•
838 visualizações
K
Kenji Ikehara
Seguir
Adobe XD Meeting #03の発表資料です。 Adobe XDをデザイナーからエンジニアへのデータ受け渡しツールとして使えるかどうかを検証。
Leia menos
Leia mais
Design
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 11
Baixar agora
Recomendados
Adobe experience designのプロトタイプをbehanceへ
Adobe experience designのプロトタイプをbehanceへ
Kazuma Sekiguchi
レスポンシブサイト制作に効く デザインTipsあれこれ
レスポンシブサイト制作に効く デザインTipsあれこれ
Akiko Kurono
デザインに自信がつく、タイポグラフィの基本
デザインに自信がつく、タイポグラフィの基本
Takuya Nishitani
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
Akiko Kurono
講演資料「クリエイターのためのトーン&マナー設計について」(パソナテック主催セミナー)
講演資料「クリエイターのためのトーン&マナー設計について」(パソナテック主催セミナー)
Concent, Inc.
コラボレーティブデザインを実践するエンジニアは何を考えているのか?
コラボレーティブデザインを実践するエンジニアは何を考えているのか?
Kohei Kakudo
Illustratorのカンプとうまく付き合う方法
Illustratorのカンプとうまく付き合う方法
Takuya Nishitani
Webデザイナー1年生の為のしおり
Webデザイナー1年生の為のしおり
tomoakitomono
Recomendados
Adobe experience designのプロトタイプをbehanceへ
Adobe experience designのプロトタイプをbehanceへ
Kazuma Sekiguchi
レスポンシブサイト制作に効く デザインTipsあれこれ
レスポンシブサイト制作に効く デザインTipsあれこれ
Akiko Kurono
デザインに自信がつく、タイポグラフィの基本
デザインに自信がつく、タイポグラフィの基本
Takuya Nishitani
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
Akiko Kurono
講演資料「クリエイターのためのトーン&マナー設計について」(パソナテック主催セミナー)
講演資料「クリエイターのためのトーン&マナー設計について」(パソナテック主催セミナー)
Concent, Inc.
コラボレーティブデザインを実践するエンジニアは何を考えているのか?
コラボレーティブデザインを実践するエンジニアは何を考えているのか?
Kohei Kakudo
Illustratorのカンプとうまく付き合う方法
Illustratorのカンプとうまく付き合う方法
Takuya Nishitani
Webデザイナー1年生の為のしおり
Webデザイナー1年生の為のしおり
tomoakitomono
デザイン・エンジニアがWeb開発で考えること
デザイン・エンジニアがWeb開発で考えること
Kohei Kakudo
【第二回】デザイン初心者でも出来る!企業ロゴの作り方【案出し~デザイン作成編】
【第二回】デザイン初心者でも出来る!企業ロゴの作り方【案出し~デザイン作成編】
schoowebcampus
Uxデザイン定義書ワークショップ 20120726 公開版
Uxデザイン定義書ワークショップ 20120726 公開版
Mikihiro Fujii
Sketchで変わるワークフロー
Sketchで変わるワークフロー
Asami Yamamoto
マンガボックスのアプリができるまで
マンガボックスのアプリができるまで
tomo tsubota
風呂場で考えるUIデザイナーの未来
風呂場で考えるUIデザイナーの未来
Masayuki Uetani
コーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドライン
Hiroyuki Makishita
いいデザインのために組織の一人ひとりができること
いいデザインのために組織の一人ひとりができること
Masahiko Yoshikawa
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
schoowebcampus
Ssi 20150519
Ssi 20150519
真一 藤川
クックパッドデザイナーが実践するユーザーファースト
クックパッドデザイナーが実践するユーザーファースト
Miwa Kuramitsu
アクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザイン
力也 伊原
エンジニアもデザイナーもみんなで使えば幸せになれるAdobeXD
エンジニアもデザイナーもみんなで使えば幸せになれるAdobeXD
Sakie Muneyasu
フラットデザインに出来ること/出来ないことを学ぶ 先生:橘 雄大
フラットデザインに出来ること/出来ないことを学ぶ 先生:橘 雄大
schoowebcampus
デザインの要件定義
デザインの要件定義
Shin Iiboshi
モバイルにも通用するデザインカンプ制作のイロハ
モバイルにも通用するデザインカンプ制作のイロハ
Hiroyuki Makishita
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
Chihiro Tomita
SketchがAndroidのUIデザインに向いているワケ
SketchがAndroidのUIデザインに向いているワケ
Asami Yamamoto
2013 HTML5カンファレンス レスポンシブWebデザイン
2013 HTML5カンファレンス レスポンシブWebデザイン
Daisuke Yamazaki
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
schoowebcampus
Adobe XDでアプリデザインのワークフローを改善
Adobe XDでアプリデザインのワークフローを改善
Shingo SuzukI
[Adobe XD] リピートグリッドで遊ぼう
[Adobe XD] リピートグリッドで遊ぼう
Risa Yuguchi
Mais conteúdo relacionado
Mais procurados
デザイン・エンジニアがWeb開発で考えること
デザイン・エンジニアがWeb開発で考えること
Kohei Kakudo
【第二回】デザイン初心者でも出来る!企業ロゴの作り方【案出し~デザイン作成編】
【第二回】デザイン初心者でも出来る!企業ロゴの作り方【案出し~デザイン作成編】
schoowebcampus
Uxデザイン定義書ワークショップ 20120726 公開版
Uxデザイン定義書ワークショップ 20120726 公開版
Mikihiro Fujii
Sketchで変わるワークフロー
Sketchで変わるワークフロー
Asami Yamamoto
マンガボックスのアプリができるまで
マンガボックスのアプリができるまで
tomo tsubota
風呂場で考えるUIデザイナーの未来
風呂場で考えるUIデザイナーの未来
Masayuki Uetani
コーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドライン
Hiroyuki Makishita
いいデザインのために組織の一人ひとりができること
いいデザインのために組織の一人ひとりができること
Masahiko Yoshikawa
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
schoowebcampus
Ssi 20150519
Ssi 20150519
真一 藤川
クックパッドデザイナーが実践するユーザーファースト
クックパッドデザイナーが実践するユーザーファースト
Miwa Kuramitsu
アクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザイン
力也 伊原
エンジニアもデザイナーもみんなで使えば幸せになれるAdobeXD
エンジニアもデザイナーもみんなで使えば幸せになれるAdobeXD
Sakie Muneyasu
フラットデザインに出来ること/出来ないことを学ぶ 先生:橘 雄大
フラットデザインに出来ること/出来ないことを学ぶ 先生:橘 雄大
schoowebcampus
デザインの要件定義
デザインの要件定義
Shin Iiboshi
モバイルにも通用するデザインカンプ制作のイロハ
モバイルにも通用するデザインカンプ制作のイロハ
Hiroyuki Makishita
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
Chihiro Tomita
SketchがAndroidのUIデザインに向いているワケ
SketchがAndroidのUIデザインに向いているワケ
Asami Yamamoto
2013 HTML5カンファレンス レスポンシブWebデザイン
2013 HTML5カンファレンス レスポンシブWebデザイン
Daisuke Yamazaki
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
schoowebcampus
Mais procurados
(20)
デザイン・エンジニアがWeb開発で考えること
デザイン・エンジニアがWeb開発で考えること
【第二回】デザイン初心者でも出来る!企業ロゴの作り方【案出し~デザイン作成編】
【第二回】デザイン初心者でも出来る!企業ロゴの作り方【案出し~デザイン作成編】
Uxデザイン定義書ワークショップ 20120726 公開版
Uxデザイン定義書ワークショップ 20120726 公開版
Sketchで変わるワークフロー
Sketchで変わるワークフロー
マンガボックスのアプリができるまで
マンガボックスのアプリができるまで
風呂場で考えるUIデザイナーの未来
風呂場で考えるUIデザイナーの未来
コーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドライン
いいデザインのために組織の一人ひとりができること
いいデザインのために組織の一人ひとりができること
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
Ssi 20150519
Ssi 20150519
クックパッドデザイナーが実践するユーザーファースト
クックパッドデザイナーが実践するユーザーファースト
アクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザイン
エンジニアもデザイナーもみんなで使えば幸せになれるAdobeXD
エンジニアもデザイナーもみんなで使えば幸せになれるAdobeXD
フラットデザインに出来ること/出来ないことを学ぶ 先生:橘 雄大
フラットデザインに出来ること/出来ないことを学ぶ 先生:橘 雄大
デザインの要件定義
デザインの要件定義
モバイルにも通用するデザインカンプ制作のイロハ
モバイルにも通用するデザインカンプ制作のイロハ
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
SketchがAndroidのUIデザインに向いているワケ
SketchがAndroidのUIデザインに向いているワケ
2013 HTML5カンファレンス レスポンシブWebデザイン
2013 HTML5カンファレンス レスポンシブWebデザイン
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
Destaque
Adobe XDでアプリデザインのワークフローを改善
Adobe XDでアプリデザインのワークフローを改善
Shingo SuzukI
[Adobe XD] リピートグリッドで遊ぼう
[Adobe XD] リピートグリッドで遊ぼう
Risa Yuguchi
Adobe xdモバイルアプリとの連携利用
Adobe xdモバイルアプリとの連携利用
Kazuma Sekiguchi
Historia
Historia
Andrés Hernandéz
FireworksでのRetina対応を考えてみた
FireworksでのRetina対応を考えてみた
Akira Maruyama
141203 Proyecto nuevo Club de Internet
141203 Proyecto nuevo Club de Internet
Roberto GARCÍA ARRIBAS
FireworksユーザーのためのAdobe Experience Design
FireworksユーザーのためのAdobe Experience Design
Kazuma Sekiguchi
CSS設計の理想と現実
CSS設計の理想と現実
拓樹 谷
阿肯 - UI & UX 從核心資訊與路徑設計談起 (2015/01/27)
阿肯 - UI & UX 從核心資訊與路徑設計談起 (2015/01/27)
阿肯 KEN studio
Destaque
(9)
Adobe XDでアプリデザインのワークフローを改善
Adobe XDでアプリデザインのワークフローを改善
[Adobe XD] リピートグリッドで遊ぼう
[Adobe XD] リピートグリッドで遊ぼう
Adobe xdモバイルアプリとの連携利用
Adobe xdモバイルアプリとの連携利用
Historia
Historia
FireworksでのRetina対応を考えてみた
FireworksでのRetina対応を考えてみた
141203 Proyecto nuevo Club de Internet
141203 Proyecto nuevo Club de Internet
FireworksユーザーのためのAdobe Experience Design
FireworksユーザーのためのAdobe Experience Design
CSS設計の理想と現実
CSS設計の理想と現実
阿肯 - UI & UX 從核心資訊與路徑設計談起 (2015/01/27)
阿肯 - UI & UX 從核心資訊與路徑設計談起 (2015/01/27)
Semelhante a ADOBE XD DAYS
デザインエンジニア・ボーダーレスな時代を楽しもう!
デザインエンジニア・ボーダーレスな時代を楽しもう!
Hideki Akiba
Atomic Design デザインと実装の狭間
Atomic Design デザインと実装の狭間
takanori sugawara
Android開発者とデザイナーの効率的な連携について
Android開発者とデザイナーの効率的な連携について
lychee .
Schoo講演資料130409
Schoo講演資料130409
schoowebcampus
Kwc uxjam160831
Kwc uxjam160831
Takami Yusuke
Schoo講演資料130409
Schoo講演資料130409
Ryosuke Matsumoto
Schoo講演資料130409
Schoo講演資料130409
schoowebcampus
テクノロジーを用いた表現と仕事
テクノロジーを用いた表現と仕事
Yasuyuki Ogino
モバイルのためのUXデザイン
モバイルのためのUXデザイン
Yoshinori Wakizaka
『こつこつ』ポートフォリオ用資料.pdf
『こつこつ』ポートフォリオ用資料.pdf
ssuser65f8d8
ポートフォリオ用資料 (1).pdf
ポートフォリオ用資料 (1).pdf
ssuser65f8d8
ABC2013 Spring デザインナーとエンジニアの連携プレイのコツ
ABC2013 Spring デザインナーとエンジニアの連携プレイのコツ
Mori Keita
0から始めるUXデザイン(UXデザインを知る)
0から始めるUXデザイン(UXデザインを知る)
Jiji Kim
Adobe XDを使うと、こんなに効率よくゲームUIが作れちゃうの!?
Adobe XDを使うと、こんなに効率よくゲームUIが作れちゃうの!?
kyu buns
企画したUXをプロダクトに反映するディレクション
企画したUXをプロダクトに反映するディレクション
LINE Corporation
開発に知っておいて欲しいUX/UIデザインの考え方
開発に知っておいて欲しいUX/UIデザインの考え方
neokigao
UXMILKallnight_システム開発でデザイナーは何をすればいい?
UXMILKallnight_システム開発でデザイナーは何をすればいい?
Takami Yusuke
Indigo Studio で作るプロトタイプ
Indigo Studio で作るプロトタイプ
インフラジスティックス・ジャパン株式会社
SoftBank MR Intel Simulator(仮)の体験について
SoftBank MR Intel Simulator(仮)の体験について
貴文 湯浅
Think, Mind, Vision etc..
Think, Mind, Vision etc..
c-mitsuba
Semelhante a ADOBE XD DAYS
(20)
デザインエンジニア・ボーダーレスな時代を楽しもう!
デザインエンジニア・ボーダーレスな時代を楽しもう!
Atomic Design デザインと実装の狭間
Atomic Design デザインと実装の狭間
Android開発者とデザイナーの効率的な連携について
Android開発者とデザイナーの効率的な連携について
Schoo講演資料130409
Schoo講演資料130409
Kwc uxjam160831
Kwc uxjam160831
Schoo講演資料130409
Schoo講演資料130409
Schoo講演資料130409
Schoo講演資料130409
テクノロジーを用いた表現と仕事
テクノロジーを用いた表現と仕事
モバイルのためのUXデザイン
モバイルのためのUXデザイン
『こつこつ』ポートフォリオ用資料.pdf
『こつこつ』ポートフォリオ用資料.pdf
ポートフォリオ用資料 (1).pdf
ポートフォリオ用資料 (1).pdf
ABC2013 Spring デザインナーとエンジニアの連携プレイのコツ
ABC2013 Spring デザインナーとエンジニアの連携プレイのコツ
0から始めるUXデザイン(UXデザインを知る)
0から始めるUXデザイン(UXデザインを知る)
Adobe XDを使うと、こんなに効率よくゲームUIが作れちゃうの!?
Adobe XDを使うと、こんなに効率よくゲームUIが作れちゃうの!?
企画したUXをプロダクトに反映するディレクション
企画したUXをプロダクトに反映するディレクション
開発に知っておいて欲しいUX/UIデザインの考え方
開発に知っておいて欲しいUX/UIデザインの考え方
UXMILKallnight_システム開発でデザイナーは何をすればいい?
UXMILKallnight_システム開発でデザイナーは何をすればいい?
Indigo Studio で作るプロトタイプ
Indigo Studio で作るプロトタイプ
SoftBank MR Intel Simulator(仮)の体験について
SoftBank MR Intel Simulator(仮)の体験について
Think, Mind, Vision etc..
Think, Mind, Vision etc..
ADOBE XD DAYS
1.
エンジニアへの受け渡しの果て、 デザイナーの内宇宙に収斂した選択 Sony Interactive Entertainment 池原健治(@kenji_clown5)
2.
そもそもXDで本気デザインはできる? シンプルでコンポーネント化が可能なデザイン。 XDが得意とするデザイン XDが苦手とするデザイン 複雑で有機的/写実的なデザイン → 外部ツールに大きく依存する → XD上でデザインが完結する ?
3.
受け渡しの定義 • コンテンツ(アプリ)全体の構成 • UI・画面・個々のパーツデザイン •
アニメーション、インタラクション デザイナーが伝えたいこと エンジニアが欲しいもの • コンテンツ(アプリ)の仕様書、指示書 • 全パターンの破綻のないデザインデータ(位置計測、画像書き出し) • 言語化もしくは可視化されたアニメーション、インタラクション いい感じの見た目と動き 論理的な情報群
4.
受け渡しツールあれこれ • Photoshop おそらく一番多いパターン。 • Illustrator 高解像度対応で需要高まり中。 •
Animate(Flash)、Fireworks 超限定的。 • XD、Sketch ワイヤーフレームやプロトタイピングに。
5.
比較1: PSDファイルとPhotoshop • 豊富な書き出しオプション、品質コントロール •
Illustrator連携(スマートオブジェクト) • CSS書き出し • レイヤー操作が直感的ではない • 画像編集機能が強力な故の弊害 (描画モードとレイヤー効果に注意) 良いところ 残念なところ
6.
比較2: PSDファイルとExtract • Adobeソフト不要 •
オブジェクト間の距離計測、サイズ確認が直感的にできる • CSS書き出し • 読み込みと展開に時間がかかる • 今後もサービスが継続するか不安 (Dreamweaverにも内包されてるよ) 良いところ 残念なところ
7.
• 動作が軽い • オブジェクト間の距離計測、サイズ確認が直感的にできる •
全体の構成(ユーザーフロー)を俯瞰できる • 画面遷移アニメーションの可視化、数値化 比較3: Adobe XD • 書き出し機能不足(PNG 8bit、JPG、CSS) • Photoshop、Illustratorとの連携が一方通行 良いところ 残念なところ
8.
比較表(異論は認める) Photoshop Extract Adobe
XD レスポンス ○ △ ◎ 距離/サイズ計測 △ ○ ◎ 画像書き出し ◎ ○ △ CSSコピー ○ ◎ × 画面遷移 アニメ ーション × × ◎
9.
ぼくのかんがえたさいきょうのXD • JPG書き出し • リピートグリッド内のオブジェクトに連番を振って一括で書き出す •
スマートオブジェクト(Photoshop、Illustrator連携) • CSS書き出し → UPDATE予定 • スタイルガイド生成 → UPDATE予定 • バージョン管理 → UPDATE予定
10.
本日のまとめ • XDが得意とするデザインなら受け渡しに使えるかも • チーム内でのXDに対する情報共有が必須 •
一部の画像書き出しはデザイナー側のヘルプが必要 • コンポーネント化を想定した分かり易い構成を心掛ける - 適切なシンボル化 - レイヤー名の徹底(命名規則を決めておくと尚良し) ただし!
11.
おしまい
Baixar agora