[レポート]「MTDDC MEETUP HOKKAIDO 2018」に参加してきました〜XD＋Photoshop＋Illustratorで、過去資産を活かした新ワークフローを目指す！〜

2018年6月9日（土）に札幌で「MTDDC MEETUP HOKKAIDO 2018」が開催されました。
デザインやIllustratorのセッションがあるのでどうですか？とお声がけいただき、初めてセッションを聴講しに行ってきました。

MTDDC MEETUP HOKKAIDO 2018

こちらのブログでは、「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で開けるようになると、さらに人気が出るのではないでしょうか。