AdobeMAXセッションアーカイブ

こちらから動画を視聴できます。

PhotoshopとAdobe XDを組み合わせてクリエイティブを加速する！

はじめに

このたびはセッションの視聴ありがとうございました！
CCライブラリ周りがこの秋のアップデートで変更になる（なった）とのことで、収録前に内容を変更しました。そのためセッション紹介文と実際のセッションとの間に一部変更があります。併せて今回セッションの中で紹介しきれなかったTipsについてこちらのページで補足いたします。学習のヒントにお役立ていただければ幸いです！

– PhotoshopのライブラリパネルでStockを検索&購入

CCライブラリパネルを活用すると、Photoshop上でカンプのダミーデータを検索し、仮配置してから本番のデータへ差し替えることも簡単にできます。個人的にはとてもお気に入りの機能です！

スライド資料

補足情報

PhotoshopデータをXDで引き継ぐポイント

1.XDで開いたPSDデータの再現性

今回紹介しているPSDデータをXDで開く方法では、2020年現在縦書きやレイヤーマスクなどが一部再現されません。

これを回避するにはラスタライズをするか、CCライブラリでPSDアセットを登録・利用する方法であれば再現性は保たれます。CCライブラリを利用するワークフローについては、浅野執筆のこちらの記事で詳しく紹介しています。

CCライブラリを使ったPSDデータの配置方法については下のビデオをご覧ください。

2.PSDデータ（XDデータ）の再編集

PSDデータをXDで開いて編集しても、XD側でおこなった編集は元のPSDデータには反映されません。
CCライブラリを利用することでPSDデータの再編集は可能になりますが、アートボード上で右クリックして「Photoshopで編集」を選択すると、レイヤーなどが無い状態のビットマップデータが開くので、「元データの編集」ではないことに注意してください。

配置されたPSDオブジェクトを再編集するにはCCライブラリパネルを表示して、サムネイルを右クリックし「編集」を選択します。

3.画像の書き出しについて

XDではカラープロファイルの埋め込みができないので、他のデバイス、OS、モニタでは色が異なって表示される可能性があります。ビットマップデータを書き出す際にはPhotoshopの「書き出し形式」等から、「カラープロファイルの埋め込み」をおこないましょう。

したがって、CCライブラリを使わないワークフローであれば、PSDファイルを開いて配置するよりも、先にカラープロファイルを埋め込んだPNGデータを書き出しておいてから配置するほうがよい、という考え方もあります。XDはレイアウトに徹するというわけですね。

Photoshopを使った画像書き出しについては浅野が書いたこちらの記事を参考にしてみてください。

Photoshop CCの基本 第4回：Web用画像を書き出す4つの方法をマスター！

4.データの解像度について

動画の中でも解説していますが、PSDの元データのサイズ（解像度）には注意しましょう。Photoshopのデザインカンプはデバイスピクセル比に応じて2倍〜3倍の解像度で作業することがあります。それに対してXDでは等倍での制作が基本なので、あらかじめPhotoshop側で調整するか、XD側で調整します。

PhotoshopやXDの数値入力の欄では「/*+-」などの四則演算記号が使えるので、ある程度簡単に半分（あるいは三分の一）の数値に修正ができます。XDでデータを開いたら「アートボード」を確認しましょう。変倍アートボードの場合はアートボード欄に「/2」「/3」などと入力すると、サイズをまるごと変更できます。大まかに修正できたらフォントサイズなどを再度確認しましょう。

5.サイズの調整と数値の整数化

アイコンや細い罫線など、小さなオブジェクトなどは「ピクセルグリッドに整合」にしておくとピクセルが整数の値に配置され、線がかすれることがありません（ただしフォントサイズは少数点が維持されるので注意が必要です）。

デモパートの機能紹介

①ローカルアセット（アセットパネル）

登録されているアセットを編集すると、カンバス上のすべての同じアセット（カラー、または文字スタイル）を一度に変更できることです。たとえばデザインをある程度つくりきったあとで、色を変えて欲しい！！と言われたとします。こうしたとき、その色が使われているオブジェクトを全部探すのは面倒ですし、見逃す可能性もあります。アセットパネルに、元になる色をあらかじめ登録してあれば、XDが同じ色をすべて別の色へ一括変換してくれます。

②リピートグリッド

ウェブサイトでは同じカードが繰り返し出てくるパターンを良く目にします。このような画面をデザインする際に、何度も同じ要素を配置する作業を簡略化し、かつ自動化してくれるのが「リピートグリッド」です。

③スタック

スタックは、コンテンツの余白を保持しならがコンテンツの並び順を調整できる機能です。レスポンシブサイズ変更がONになっているときに利用できます。上下や左右に連続するコンテンツの順序を入れ替えると、余白をちょうどよくキープしたまま、自動で入れ替えたコンテンツのレイアウト調整をしてくれます。こういった位置やサイズの変更を伴う調整は、Photoshopでは大変手間のかかる操作です。スタックはグループをドラッグする操作がやや難しいので、レイヤーパネルからレイヤーグループを掴んで入れ替える方法も試してみてください。

④レスポンシブサイズ

スマートフォン版、 PC版など、それぞれのデバイスに応じたデザインをつくるときに役立つのが「レスポンシブサイズ変更」です。この機能は、グループの大きさを変更した時に、グループに含まれるモノの大きさとモノ同士の位置の修正を自動的に行います。たとえば、フォーム中のテキスト、ボタン、アイコンなどの位置関係を維持しながら、フォームのサイズ変更を行えます。これにより、Photoshopなどでは難しいレイアウトの調整がスピーディーに行えます。

⑤パディング

ウェブデザインでは、marginやpaddingといった「余白」の設定が大切です。Photoshopはオブジェクトが「ある」部分は編集できても、「ない」部分の設定については弱い面があります。たとえばシェイプから文字までの距離の計測や保持などは苦手です。XDでは「余白」をもっと手軽に設定できるため、その分、ビジュアルのつくり込みに時間を使えます。パディング機能を使うと、背景とオブジェクトの余白（padding）の値をキープした変形ができます。レイアウト変更の手間を大きく減らしてくれる機能です。