SlideShare a Scribd company logo
 + + の長所を活かした
デザイン手法を学ぼう 
crema design 黒野明子 
@Adobe MAX Japan 2018
組み合わせ利用でいいとこ取り!
Adobe XD Illustrator Photoshop
自己紹介
黒野明子@cremaくろ        の  あき         こ
フリーランスデザイナー 
Adobe Community Evangelist 
とある企業に週3常駐 
デザインシステム策定中
書籍を書いたり、LINEスタンプを作ったり
ではここで、プレゼントタイム   
誕生日の方に 
プレゼント
ということで、
ここから本編 
スタート ✨
既にデザイナーとして活動している 
普段は や をメインに作業 
 も気になって触り始めている
このセッションのターゲット聴講者
IllustratorPhotoshop
Adobe XD
そんなあなたに贈る……
最近の がらみの 
お困りごと あるある
Adobe XD
がらみの、お困りごと あるある
既に      で 
作成したデータが 
沢山ありまして
❶ 既に     で❷   って  
凝ったデザインは 
作れませんよね?
❸
 って  
一枚絵で画面 
遷移図できます?
❹ ディレクターから 
の支給データが 
  や のみ
❺ 社内では 
  の利用が 
指定されてます
❻
(以下同文)
そんなお困りごとを
❻つのレシピ!
で解決する
がらみの、お困りごと
❶その
がらみの、お困りごと  その❶
既に      で 
作成したデータが 
沢山ありまして
❶     メインの方に贈る、お困りごと解決レシピ
元は.psdなのに、 
プロトタイピングも 
自動アニメーションも 
できちゃうんです
.psdを    で開いて 
プロトタイピング
お困りごと解決レシピ
❶
DEMO
がらみの、お困りごと
❷その
がらみの、お困りごと  その❷
既に      で 
作成したデータが 
沢山ありまして
10月から、.aiを「開く」 
で使えるようになった  
場合により「コピペ」 
してもOK
❷     メインの方に贈る、お困りごと解決レシピ
.aiを    で開いて 
作業続行
お困りごと解決レシピ
❷
DEMO
がらみの、お困りごと
❸その
がらみの、お困りごと  その❸
  って  
凝ったデザインは 
作れませんよね?
❸     メインの方の、不安感解消レシピ
それぞれのアプリの 
得意分野を組み合わせ、 
CCライブラリで連携 
すると良い感じ✨
お困りごと解決レシピ
❸ でレイアウトを進め、 
ビットマップ編集は  、 
細かいベクター編集は 
 に任せるDEMO
がらみの、お困りごと
❹その
 って  
一枚絵で画面 
遷移図できます?
がらみの、お困りごと  その❹
いまのところ、一枚絵のドキュメントには、できません。
10月から利用可能に 
なった「プラグイン」で、 
   だけではできない 
ことが、できるように
❹     と  を組み合わせ、もっと便利になるレシピ
今日ご紹介するプラグインは、
お困りごと解決レシピ
❹
 でレイアウトして、 
 で画面遷移図を作る。
DEMO
がらみの、お困りごと
❺その
がらみの、お困りごと  その❺
ディレクター作成 
の支給データが 
  や のみ
たとえば 
こんな感じの。
❺ディレクターが   と    使いな場合の、お困りごと解決レシピ
  や   から 
.txtをうまく抽出して 
解決しましょう
❺ディレクターが   と    使いな場合の、お困りごと解決レシピ
ひとつずつコピペ .txtで一気に取り込み
❺ディレクターが   と    使いな場合の、お困りごと解決レシピ
ひとつずつコピペ .txtで一気に取り込み
お困りごと解決レシピ
❺
 や で作ったデータから 
テキストを上手く抜き出して 
取り込む。
DEMO
いいプラグインあり〼
おまけ
ます
がらみの、お困りごと
❻その
がらみの、お困りごと  その❻
社内では 
  の利用が 
指定されてます
❻     メインの方に贈る、こんなこともできるよレシピ
 では、.skecthを 
開くことも可能って 
ご存じでした?
.sketchを    で 
開いてもいいんです。
お困りごと解決レシピ
❻
お疲れ様でした!
本日のまとめ  
本日のまとめ
      で作成した 
.psdも、  で 
プロトタイプ
❶       で作成した 
.aiも、  で 
作業続行可能
❷   メインなら、 
 と から 
素材連携
❸
  だけで 
できないことは、 
プラグインが
❹    や  のデータ 
も、素早く.xdに 
取り込む策あり
❺    のデータも 
   で開いて、独自 
機能を試せます
❻
XDの使い方はひとつじゃない
アプリの連携/使い分けで 
快適なデザインライフを。
このセッションは
cremaが 
お送りしました

More Related Content

What's hot

Webサービスを生む実践スタートアップ講座
Webサービスを生む実践スタートアップ講座Webサービスを生む実践スタートアップ講座
Webサービスを生む実践スタートアップ講座
本間 和城
 
現役Web ディレクターに聞く Webディレクターという仕事
現役Web ディレクターに聞く Webディレクターという仕事現役Web ディレクターに聞く Webディレクターという仕事
現役Web ディレクターに聞く Webディレクターという仕事masaki sukeda
 
【7月21日ヒカラボ】webディレクターが知るべきwebプロモーション設計
【7月21日ヒカラボ】webディレクターが知るべきwebプロモーション設計【7月21日ヒカラボ】webディレクターが知るべきwebプロモーション設計
【7月21日ヒカラボ】webディレクターが知るべきwebプロモーション設計
本間 和城
 
アクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザインアクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザイン
力也 伊原
 
0からのウェブディレクション講座:制作・開発編 ver 3.00
0からのウェブディレクション講座:制作・開発編 ver 3.000からのウェブディレクション講座:制作・開発編 ver 3.00
0からのウェブディレクション講座:制作・開発編 ver 3.00
Yusuke Kojima
 
20121117 01 dir-mtgスライド01
20121117 01 dir-mtgスライド0120121117 01 dir-mtgスライド01
20121117 01 dir-mtgスライド01Kenta Nakamura
 
Illustratorのカンプとうまく付き合う方法
Illustratorのカンプとうまく付き合う方法Illustratorのカンプとうまく付き合う方法
Illustratorのカンプとうまく付き合う方法
Takuya Nishitani
 
Webデザインのトーン&マナーを導き出す手法
Webデザインのトーン&マナーを導き出す手法Webデザインのトーン&マナーを導き出す手法
Webデザインのトーン&マナーを導き出す手法
Katsumi Tazuke
 
コーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドラインコーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドライン
Hiroyuki Makishita
 
ディレクターが知るべきプロモーション設計
ディレクターが知るべきプロモーション設計ディレクターが知るべきプロモーション設計
ディレクターが知るべきプロモーション設計
本間 和城
 
【ゼロからのディレクション講座】サイト設計編
【ゼロからのディレクション講座】サイト設計編【ゼロからのディレクション講座】サイト設計編
【ゼロからのディレクション講座】サイト設計編
本間 和城
 
ゼロからのディレクション講座 制作・開発編20150221
ゼロからのディレクション講座 制作・開発編20150221ゼロからのディレクション講座 制作・開発編20150221
ゼロからのディレクション講座 制作・開発編20150221
Yusuke Kojima
 
【0からのディレクション講座:運用編】Vol3 中村健太のスライド
【0からのディレクション講座:運用編】Vol3 中村健太のスライド【0からのディレクション講座:運用編】Vol3 中村健太のスライド
【0からのディレクション講座:運用編】Vol3 中村健太のスライド
Kenta Nakamura
 
【設計編Ver2】0からのディレクション講座
【設計編Ver2】0からのディレクション講座【設計編Ver2】0からのディレクション講座
【設計編Ver2】0からのディレクション講座
本間 和城
 
コンバージョン心理学によるウェブ・デザイン
コンバージョン心理学によるウェブ・デザインコンバージョン心理学によるウェブ・デザイン
コンバージョン心理学によるウェブ・デザイン
Toshihiko Yamakami
 
Web Design Process for The Future
Web Design Process for The FutureWeb Design Process for The Future
Web Design Process for The Future
masaaki komori
 
ON HTML5 FIELD で書き尽くせなかったこと
ON HTML5 FIELD で書き尽くせなかったことON HTML5 FIELD で書き尽くせなかったこと
ON HTML5 FIELD で書き尽くせなかったことMasakazu Muraoka
 
20130113 01 dir-mtgスライド
20130113 01 dir-mtgスライド20130113 01 dir-mtgスライド
20130113 01 dir-mtgスライド
Kenta Nakamura
 
ディレクターが知っておくべき3つのデザインディレクションのルール
ディレクターが知っておくべき3つのデザインディレクションのルールディレクターが知っておくべき3つのデザインディレクションのルール
ディレクターが知っておくべき3つのデザインディレクションのルールINFOBAHN.inc(株式会社インフォバーン)
 

What's hot (20)

Webサービスを生む実践スタートアップ講座
Webサービスを生む実践スタートアップ講座Webサービスを生む実践スタートアップ講座
Webサービスを生む実践スタートアップ講座
 
現役Web ディレクターに聞く Webディレクターという仕事
現役Web ディレクターに聞く Webディレクターという仕事現役Web ディレクターに聞く Webディレクターという仕事
現役Web ディレクターに聞く Webディレクターという仕事
 
20130216 講演資料
20130216 講演資料20130216 講演資料
20130216 講演資料
 
【7月21日ヒカラボ】webディレクターが知るべきwebプロモーション設計
【7月21日ヒカラボ】webディレクターが知るべきwebプロモーション設計【7月21日ヒカラボ】webディレクターが知るべきwebプロモーション設計
【7月21日ヒカラボ】webディレクターが知るべきwebプロモーション設計
 
アクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザインアクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザイン
 
0からのウェブディレクション講座:制作・開発編 ver 3.00
0からのウェブディレクション講座:制作・開発編 ver 3.000からのウェブディレクション講座:制作・開発編 ver 3.00
0からのウェブディレクション講座:制作・開発編 ver 3.00
 
20121117 01 dir-mtgスライド01
20121117 01 dir-mtgスライド0120121117 01 dir-mtgスライド01
20121117 01 dir-mtgスライド01
 
Illustratorのカンプとうまく付き合う方法
Illustratorのカンプとうまく付き合う方法Illustratorのカンプとうまく付き合う方法
Illustratorのカンプとうまく付き合う方法
 
Webデザインのトーン&マナーを導き出す手法
Webデザインのトーン&マナーを導き出す手法Webデザインのトーン&マナーを導き出す手法
Webデザインのトーン&マナーを導き出す手法
 
コーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドラインコーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドライン
 
ディレクターが知るべきプロモーション設計
ディレクターが知るべきプロモーション設計ディレクターが知るべきプロモーション設計
ディレクターが知るべきプロモーション設計
 
【ゼロからのディレクション講座】サイト設計編
【ゼロからのディレクション講座】サイト設計編【ゼロからのディレクション講座】サイト設計編
【ゼロからのディレクション講座】サイト設計編
 
ゼロからのディレクション講座 制作・開発編20150221
ゼロからのディレクション講座 制作・開発編20150221ゼロからのディレクション講座 制作・開発編20150221
ゼロからのディレクション講座 制作・開発編20150221
 
【0からのディレクション講座:運用編】Vol3 中村健太のスライド
【0からのディレクション講座:運用編】Vol3 中村健太のスライド【0からのディレクション講座:運用編】Vol3 中村健太のスライド
【0からのディレクション講座:運用編】Vol3 中村健太のスライド
 
【設計編Ver2】0からのディレクション講座
【設計編Ver2】0からのディレクション講座【設計編Ver2】0からのディレクション講座
【設計編Ver2】0からのディレクション講座
 
コンバージョン心理学によるウェブ・デザイン
コンバージョン心理学によるウェブ・デザインコンバージョン心理学によるウェブ・デザイン
コンバージョン心理学によるウェブ・デザイン
 
Web Design Process for The Future
Web Design Process for The FutureWeb Design Process for The Future
Web Design Process for The Future
 
ON HTML5 FIELD で書き尽くせなかったこと
ON HTML5 FIELD で書き尽くせなかったことON HTML5 FIELD で書き尽くせなかったこと
ON HTML5 FIELD で書き尽くせなかったこと
 
20130113 01 dir-mtgスライド
20130113 01 dir-mtgスライド20130113 01 dir-mtgスライド
20130113 01 dir-mtgスライド
 
ディレクターが知っておくべき3つのデザインディレクションのルール
ディレクターが知っておくべき3つのデザインディレクションのルールディレクターが知っておくべき3つのデザインディレクションのルール
ディレクターが知っておくべき3つのデザインディレクションのルール
 

Similar to 組み合わせ利用でいいとこ取り! Adobe XD+Photoshop+Illustratorの長所を活かしたデザイン手法を学ぼう

Make the 3D Wapuu model and printing by the 3D printer.
Make the 3D Wapuu model and printing by the 3D printer.Make the 3D Wapuu model and printing by the 3D printer.
Make the 3D Wapuu model and printing by the 3D printer.
Takeshi Kashihara
 
デザインツール戦争とMaterial Theme Editor
デザインツール戦争とMaterial Theme Editorデザインツール戦争とMaterial Theme Editor
デザインツール戦争とMaterial Theme Editor
Asami Yamamoto
 
Trunkerから学ぶsketchの使い方
Trunkerから学ぶsketchの使い方Trunkerから学ぶsketchの使い方
Trunkerから学ぶsketchの使い方
Masaki Haruta
 
Re:Cre Vol.14 | Web design process for the future
Re:Cre Vol.14 | Web design process for the futureRe:Cre Vol.14 | Web design process for the future
Re:Cre Vol.14 | Web design process for the future
masaaki komori
 
デザイナー×エンジニア ~ハッカソンからのつながり~(まにフェス)
デザイナー×エンジニア ~ハッカソンからのつながり~(まにフェス)デザイナー×エンジニア ~ハッカソンからのつながり~(まにフェス)
デザイナー×エンジニア ~ハッカソンからのつながり~(まにフェス)Chihiro Tomita
 
新卒2ヶ月でAIを社会実装させた3つのデザイン
新卒2ヶ月でAIを社会実装させた3つのデザイン新卒2ヶ月でAIを社会実装させた3つのデザイン
新卒2ヶ月でAIを社会実装させた3つのデザイン
NodokaFujimoto
 
新卒2ヶ月でAIを社会実装させた3つのデザイン(修正前)
新卒2ヶ月でAIを社会実装させた3つのデザイン(修正前)新卒2ヶ月でAIを社会実装させた3つのデザイン(修正前)
新卒2ヶ月でAIを社会実装させた3つのデザイン(修正前)
NodokaFujimoto
 
プログラマがデザインをがんばってみた
プログラマがデザインをがんばってみたプログラマがデザインをがんばってみた
プログラマがデザインをがんばってみただいすけ ふるかわ
 
Adobe experience designのプロトタイプをbehanceへ
Adobe experience designのプロトタイプをbehanceへAdobe experience designのプロトタイプをbehanceへ
Adobe experience designのプロトタイプをbehanceへ
Kazuma Sekiguchi
 
Weekend Androidのススメ
Weekend AndroidのススメWeekend Androidのススメ
Weekend Androidのススメ
Suzuki Junko
 
デザイン系の学校に通っていない学生のためのポートフォリオことはじめ
デザイン系の学校に通っていない学生のためのポートフォリオことはじめデザイン系の学校に通っていない学生のためのポートフォリオことはじめ
デザイン系の学校に通っていない学生のためのポートフォリオことはじめ
Aimi Shinohara
 
presen_nakayama_20220530.pptx
presen_nakayama_20220530.pptxpresen_nakayama_20220530.pptx
presen_nakayama_20220530.pptx
ssuserb3c646
 
デ部会 女子部 20170329
デ部会 女子部 20170329デ部会 女子部 20170329
デ部会 女子部 20170329
Masami Kanemoto
 
うちの開発におけるXD利用法
うちの開発におけるXD利用法うちの開発におけるXD利用法
うちの開発におけるXD利用法
Kazuma Sekiguchi
 
e-Learning Design for Teacher
e-Learning Design for Teachere-Learning Design for Teacher
e-Learning Design for Teacher
Sunami Hokuto
 
Wiz_branding
Wiz_brandingWiz_branding
Wiz_branding
WizDesign
 
サポート職が教える問題解決の方法
サポート職が教える問題解決の方法サポート職が教える問題解決の方法
サポート職が教える問題解決の方法
Toshihide Miyata
 
ワイヤーフレームとは?
ワイヤーフレームとは?ワイヤーフレームとは?
ワイヤーフレームとは?
Kazuma Sekiguchi
 
デザインと高専生
デザインと高専生デザインと高専生
デザインと高専生
Yuuki Yoshiiwa
 
プロトタイピングツール投入のケーススタディ
プロトタイピングツール投入のケーススタディプロトタイピングツール投入のケーススタディ
プロトタイピングツール投入のケーススタディ
力也 伊原
 

Similar to 組み合わせ利用でいいとこ取り! Adobe XD+Photoshop+Illustratorの長所を活かしたデザイン手法を学ぼう (20)

Make the 3D Wapuu model and printing by the 3D printer.
Make the 3D Wapuu model and printing by the 3D printer.Make the 3D Wapuu model and printing by the 3D printer.
Make the 3D Wapuu model and printing by the 3D printer.
 
デザインツール戦争とMaterial Theme Editor
デザインツール戦争とMaterial Theme Editorデザインツール戦争とMaterial Theme Editor
デザインツール戦争とMaterial Theme Editor
 
Trunkerから学ぶsketchの使い方
Trunkerから学ぶsketchの使い方Trunkerから学ぶsketchの使い方
Trunkerから学ぶsketchの使い方
 
Re:Cre Vol.14 | Web design process for the future
Re:Cre Vol.14 | Web design process for the futureRe:Cre Vol.14 | Web design process for the future
Re:Cre Vol.14 | Web design process for the future
 
デザイナー×エンジニア ~ハッカソンからのつながり~(まにフェス)
デザイナー×エンジニア ~ハッカソンからのつながり~(まにフェス)デザイナー×エンジニア ~ハッカソンからのつながり~(まにフェス)
デザイナー×エンジニア ~ハッカソンからのつながり~(まにフェス)
 
新卒2ヶ月でAIを社会実装させた3つのデザイン
新卒2ヶ月でAIを社会実装させた3つのデザイン新卒2ヶ月でAIを社会実装させた3つのデザイン
新卒2ヶ月でAIを社会実装させた3つのデザイン
 
新卒2ヶ月でAIを社会実装させた3つのデザイン(修正前)
新卒2ヶ月でAIを社会実装させた3つのデザイン(修正前)新卒2ヶ月でAIを社会実装させた3つのデザイン(修正前)
新卒2ヶ月でAIを社会実装させた3つのデザイン(修正前)
 
プログラマがデザインをがんばってみた
プログラマがデザインをがんばってみたプログラマがデザインをがんばってみた
プログラマがデザインをがんばってみた
 
Adobe experience designのプロトタイプをbehanceへ
Adobe experience designのプロトタイプをbehanceへAdobe experience designのプロトタイプをbehanceへ
Adobe experience designのプロトタイプをbehanceへ
 
Weekend Androidのススメ
Weekend AndroidのススメWeekend Androidのススメ
Weekend Androidのススメ
 
デザイン系の学校に通っていない学生のためのポートフォリオことはじめ
デザイン系の学校に通っていない学生のためのポートフォリオことはじめデザイン系の学校に通っていない学生のためのポートフォリオことはじめ
デザイン系の学校に通っていない学生のためのポートフォリオことはじめ
 
presen_nakayama_20220530.pptx
presen_nakayama_20220530.pptxpresen_nakayama_20220530.pptx
presen_nakayama_20220530.pptx
 
デ部会 女子部 20170329
デ部会 女子部 20170329デ部会 女子部 20170329
デ部会 女子部 20170329
 
うちの開発におけるXD利用法
うちの開発におけるXD利用法うちの開発におけるXD利用法
うちの開発におけるXD利用法
 
e-Learning Design for Teacher
e-Learning Design for Teachere-Learning Design for Teacher
e-Learning Design for Teacher
 
Wiz_branding
Wiz_brandingWiz_branding
Wiz_branding
 
サポート職が教える問題解決の方法
サポート職が教える問題解決の方法サポート職が教える問題解決の方法
サポート職が教える問題解決の方法
 
ワイヤーフレームとは?
ワイヤーフレームとは?ワイヤーフレームとは?
ワイヤーフレームとは?
 
デザインと高専生
デザインと高専生デザインと高専生
デザインと高専生
 
プロトタイピングツール投入のケーススタディ
プロトタイピングツール投入のケーススタディプロトタイピングツール投入のケーススタディ
プロトタイピングツール投入のケーススタディ
 

組み合わせ利用でいいとこ取り! Adobe XD+Photoshop+Illustratorの長所を活かしたデザイン手法を学ぼう