Adobe XDでウェブデザインを加速する！[第２回] Photoshopの精度をキープしつつ、XDでレイアウトの速度をアップ！

連載

Adobe XDでウェブデザインを加速する！

PhotoshopとXDを組み合わせてウェブサイトをデザインするワークフローは大きく2種類に分けられます。

ひとつはPSDでウェブのデザインカンプを作成しておき、それをXDで開いて作業を継続する方法です。もうひとつは、部分的なパーツの制作にPhotoshopを使い、レイアウトにXDを使う方法です。

この記事で主に紹介するのは後者です。ウェブ制作では、一度配置した素材を再編集することがよくあります。ところが前者のPSD→XDのフローでは一方通行になってしまい、素材の再編集ができないからです。とはいえ、一方通行のフローにも使い所はあります。まずは、両者の特徴を簡単に確認してから、おすすめのデザインワークフローを詳しく紹介します。

Adobe XDでPhotoshopのデータを扱う2つの方法

① Photoshopで作成したウェブデザインのファイルをXDで開く

Photoshopでつくったデザインデータの編集をXDで継続したい場合は、XDの「ファイル」メニューから「コンピューターから開く」を選択して、PSDファイルを指定します。開いたデータは文字やシェイプなどの情報が保持されており、そのままXDで編集したり、XDファイル（もしくはクラウドドキュメント）として保存できます。

PSDファイルをXDで開いた

ただし、（記事の執筆時点では）マスクや縦書きといった効果は反映されず、再現度は完全ではありません。ですから、開いたデータの見た目を確認しながら作業を進めましょう（参考：Photoshop ファイルを XD で開くときにサポートされる機能）。また、いったんXDの形式で保存したデータは、もう一度Photoshopで開いてPSDデータとして編集し直すことはできません。この点にも注意が必要です。

このワークフローは、過去にPhotoshopで作成済みのデザインデータを更新したり、トップページのデザインから下層ページやスマートフォン版のページレイアウトをつくるといった、ビットマップ素材（たとえば写真など）を触る必要のない作業に役立ちます。Photoshopでのレイアウト作業に慣れているデザイナーであれば、まずはページの量産にXDを使用することから、XDを取り入れてみるとよいかもしれません。

Photoshopでは高解像度のデバイス対応などを理由に2倍の解像度（横幅）でスマートフォン向けのデザインを行うことがありますが、ベクターベースのXDでは等倍のアートボードを基準とするのが一般的です。PhotoshopからXDにデータ引き継ぐ際はこの点にも気をつけましょう。XDは2倍の解像度で作成されたアセットの書き出しに対応しているため必須ではありませんが、場合によっては解像度を1/2に修正してからデザイン作業の続きを始めるのがよいでしょう。

② PhotoshopのデザインデータをCCライブラリ経由で共有する

PhotoshopとXDの連携に「CCライブラリ」を使用すると、データの再現度と再編集の問題を解決できます。CCライブラリに登録したPhotoshopの素材データは、XDに配置した後でも、Photoshopとの間を行き来しながら、柔軟に再編集を行えます。下の動画で一連の流れを確認しましょう。

https://blog.adobe.com/media_8a6c6d9ca8a466b0d0dee7b64c964b7f298f7c33.mp4

このワークフローでは、まずCCライブラリにPhotoshop（やIllustrator）のアセットを登録します。CCライブラリに素材データを登録するには、下記のいずれかの方法を使います。

1. PhotoshopやIllustratorなどアプリのCCライブラリパネルに登録する

PhotoshopのCCライブラリパネルにアセットを登録

PhotoshopあるいはIllustratorのCCライブラリパネルを開き、そこにアセットを登録できます。この方法は、カンバスやアートボードの一部を登録するのに便利です。

2. Creative Cloud デスクトップアプリケーションの「作品」から登録する

Creative Cloud デスクトップアプリケーションの作品タブからアセットを登録

この方法は、書き出したアセット、あるいは作成したPSDやAIファイルをまるごとアセットとして登録するのに便利です。

ここで注意したいのは、アセットの登録に使用したローカルのデータと、CCライブラリに登録した（クラウドにアップロードされた）データは、それぞれ独立した存在であるという点です。クラウドに登録したPSDデータを再編集して保存しても、ローカルのPSDデータには反映されません。そのため、PSDデータを登録するタイミングについては十分な注意が必要です。

XDでは「ファイル」→「CCライブラリを開く」でCCライブラリを開くことができます。また、ウェブブラウザーからも登録されているアセットを確認できます。複数人でCCライブラリを含んだデータを扱う場合は、作成したライブラリを「共有」する必要があります。

おすすめの「CCライブラリ」を活用するデザインワークフロー

それでは、いよいよおすすめのワークフローを紹介します。前述のとおり、CCライブラリを素材の管理場所として使うことで、PhotoshopとXDを自在に行き来します。

  1. XDでワイヤーフレームを作成、何がどこにあるべきかを決める
  2. ワイヤーフレームに従って、Photoshopでビットマップ画像の編集・合成をして保存
  3. CreativeCloudアプリでプロジェクト用のCCライブラリを作成し、素材を登録
  4. CCライブラリに登録した素材をドラッグ＆ドロップでXDに配置
  5. CCライブラリ内の素材データをPhotoshopで開いて再編集

PSDデータを編集するときは、CCライブラリパネルのデータを右クリックして「編集」を選びます。

CCライブラリのアセットを右クリックして編集

XDのアートボード上に配置された素材を選択して「Photoshopで編集…」を選ぶと（Photoshopは開きますが）、レイヤーなどの情報が破棄される点に注意しましょう。

アートボード上のアセットを右クリックして編集

Adobe XDで効率的にデザインする

写真の加工や凝ったビジュアルの制作にはPhotoshopが欠かせませんが、画面デザインをつくり込むにはXDが向いています。ここからは、XDを使った効率的なデザインデータ作成のヒントを紹介します。XDには独特な機能も多くありますが、Photoshopを使いこなせるユーザーであれば、XDそのものの操作は難しくないでしょう。ぜひこれから紹介する便利な機能を試してみてください。

XDには3つのモード（ビュー）がありますが、デザインを行うときは「デザインモード」を使用します。

1. 素早くたくさんのページをつくる

アートボードを増やす動作はPhotoshopのアートボード機能を使えば可能です。ですが、レイヤーの数が増えるほど、Photoshopの動作は重くなります。それに比べてXDは、ひとつのドキュメントに多くのレイヤーがあっても、アプリの動作がとても軽いのです。Photoshop歴の長いユーザーであるほど、XDの「サクサク感」に驚かれると思います。これはぜひ、直接体験してください。

XDではコピー&ペーストによるアートボードの複製が可能です（ショートカットキーは Cmd/Alt + D）。コピー元のアートボードにオブジェクトが配置済みの場合は、それらのオブジェクトも一緒にコピーされます。Cmd/Altキーを押しながらアートボード名をドラッグしてアートボードを複製することもできます。

2. 手間をかけずに レイヤーを整理

Photoshopにおけるレイヤー整理は、文字や画像などの構成要素を実装者に分かりやすく示すため、あるいは画像を書き出す際には欠かせませんが、これは時に骨の折れる作業になります。

レイヤーパネル

XDのレイヤーパネルでは、アートボード単位でレイヤーが管理され、表示されるのは作業中のアートボードのレイヤーだけです。レイヤーパネルからは、レイヤーの表示／非表示やロック／アンロックの切り替えなどの設定ができます。

Photoshopでは、オブジェクトを編集するために膨大なレイヤーの中から該当するレイヤーを探して選択して移動といった操作が必要です。これに対してXDは、オブジェクトの選択や移動のような操作を、レイヤーパネルを使うことなくアートボード上で直感的に行えます。また、レイヤーパネルを使う必要がある場合も、あらかじめ絞り込まれたレイヤーから選択するだけです。

画像の配置とマスク

Photoshopでクリッピングマスクによって画像のマスクをする場合、画像とシェイプの2枚のレイヤーが必要になります。レイヤーを整理する際に気を使うことになるポイントのひとつです。

XDでは、マスクの操作はより直感的です。あらかじめ長方形ツールや楕円形ツールでつくっておいたシェイプに、エクスプローラーやFinderからPNGやJPGなどのビットマップ画像をドラッグすると、そのまま自動的にマスク化されます。マスクはシェイプの属性として扱われ、レイヤーが新規に追加されることはありません。

XDにおいては、デザイナーの操作性向上を目的としてレイヤーの操作や整理を行う必要性は高くありません。とはいえ、デザインが完成したら一度レイヤーパネルを確認して、不要なオブジェクトがないかをチェックしたり、パーツやセクションごと整理して、ある程度命名規則を統一することは、PhotoshopでもXDでもコーディングなどの後の工程をスムーズに進行するためには必要です。

3. 余白を簡単に、均一に設定

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

スマートガイドとスナップ

XDでは、オブジェクトを移動する時にピンク色のガイドが表示されます。ガイドには距離が表示されるため、オブジェクトの位置を揃えたり、距離を確認するのに役立ちます。スマートガイドはPhotoshopにもある機能ですが、XDのスマートガイドはオブジェクト同士の余白をピンク色の長方形で示してくれるなど、より強力なサポートが提供されます。

XDでは余白が分かりやすく表示される

パディング

パディング機能を使うと、背景とオブジェクトの余白（padding）の値をキープした変形ができます。レイアウト変更の手間を大きく減らしてくれる機能です。

4. 素早く効率的にレイアウトを調整

スタック

スタックは、コンテンツの余白を保持しならがコンテンツの並び順を調整できる機能です。レスポンシブサイズ変更がONになっているときに利用できます。

上下や左右に連続するコンテンツの順序を入れ替えると、余白をちょうどよくキープしたまま、自動で入れ替えたコンテンツのレイアウト調整をしてくれます。こういった位置やサイズの変更を伴う調整は、Photoshopでは大変手間のかかる操作です。

リピートグリッド

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

https://blog.adobe.com/media_d72d03d3cf8477a123c2b7f13ebd9f9de944b99e.mp4

リピートグリッドなら修正も容易です。繰り返し並ぶカードのひとつの配置を変えると、他のカードの配置も一括して変更されます。カードへの要素の追加や削除も同様で、何度も同じ作業を繰り返す必要はありません。

レスポンシブサイズ変更

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

https://blog.adobe.com/media_814371f584c6a2f5075d6de1e5e629ca3b74edb5.mp4

次回はさらに便利な「アセットパネル」について紹介します。アセットパネルに素材を登録すると、Photoshopのスマートオブジェクトのように（あるいはそれ以上の）、柔軟な一括編集を叶えられます。