この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
2018年6月9日（土）に札幌で「MTDDC MEETUP HOKKAIDO 2018」が開催されました。
デザインやIllustratorのセッションがあるのでどうですか？とお声がけいただき、初めてセッションを聴講しに行ってきました。
こちらのブログでは、「XD＋Photoshop＋Illustratorで、過去資産を活かした新ワークフローを目指す！」についてレポートします。
セッション概要
WebサイトやアプリのUI設計ではPhotoshop、IllustratorやSketchを利用しているものの、軽くて早い操作感が魅力のXDもちょっと試してみたい…。とはいえ、過去のデザインデータ資産を活かせないと、色々つらい…。と、お考えの皆さまへ。
AdobeコミュニティエバンジェリストのWebデザイナー・黒野明子と一緒に、XDへのデータ移行方法や他アプリとの連携方法を学んでみませんか？
過去データをXDに取り込む時の注意点や、XDならではのプロトタイプ作成機能についても、短時間で要点を押さえてご紹介していきます。
セッションレポート
登壇者プロフィール
フリーランスWebデザイナー 黒野明子 氏
小売店や小企業のWebサイト構築と運用、小・中規模のWebサイトのUI設計やグラフィック制作などをおこなっている。また、Illustrator・Photoshop・XD関連の講師としてもワークショップを開いている。
アプリごとに得意分野が違う
XD
- 速い、軽い
- 覚えやすい
- プロトタイプ
Photoshop
- 写真編集
- 画像書き出しが便利
- 過去一番人気
Illustrator
- 繊細なベクター制作
- SVGが得意
- Web向け機能が改善された
Adobe製品の魅力のひとつは、アプリ間のデータ連携ができることで、
既にあるデザインデータを利用してクオリティ＆効率がUPすること
psdをXdで開いて操作する
psd⇒Xdでできること
アートボード
- 複数アートボードに対応
- アートボード名を引き継ぐ
- グループの階層構造を引き継ぐ
- グループ名を引き継ぐ
シェイプレイヤー
- 再編集可能な角丸を引き継ぐ
スマートオブジェクト
- すべてラスタライズされる
テキスト
- フォントを引き継ぐ
- ポイントテキスト／エリア内テキストを引き継ぐ
グラデーション（塗り）
- 基本的にサポートの模様（多色使いに難あり？）
線
- 線の位置を引き継ぐ
- 単色の指定は引き継ぐ（パターンとグラデはNG）
レイヤー効果（写真）
- 効果ごとにラスタライズされる
- シェイプレイヤー×べペル／光彩に難あり
Ps⇒Xdで気をつけること
データ形式が変わる
- .psdのままではなく.xdにして複製される
最初の読込時間
- かなり改善されたけど、まだちょっと時間がかかる
AiをXdで開きたい
現時点ではできません…
しかし、AiのデータをXdにコピペすることはできます。
Ai⇒Xdのコピペで崩れる代表的パターン
テキスト
- フォントが変わる
- エリア内テキストが分割される
線
- 線の位置が内側／外側だと崩れる
ライブコーナー
- ただのパスになる
Ai⇒Xdへの素材移行アイディア（2018年6月時点）
アイコンやイラスト
- Creative Cloud Libraries経由
色や文字スタイル
- Creative Cloud Libraries経由
テキスト内容
- .aiからテキストを書き出し、.xdに読み込む
角丸や線
- XDで描き直すのが早そう
モバイルアプリからXDに素材を持ち込む
Adobe Comp CCでできること
モバイル端末でカンプ
- タブレットやスマホでジェスチャーする
.psdでデータ書き出し
- 描いたカンプは.psdで書き出し可能
Adobe Capture CCでできること
写真からベクター作成
- 写真から即座にベクターデータに変換し、CCライブラリからXDに取り込み
感想
今回のイベントで、私が聴いていて一番おもしろかったセッションでした。セッションの中ではデモも多く、実際にXDを開いて操作方法を見ることができ大変勉強になりました。またモバイルアプリ連携についても知ることができ、使ってみたいと感じました。今後AiをXdで開けるようになると、さらに人気が出るのではないでしょうか。
18
