Adobe XDでウェブデザインを加速する！[第１回] Photoshopユーザー的、Adobe XDコラボのススメ
Adobe XDでウェブデザインを加速する！
ウェブの黎明期以来、多くのデザイナーがPhotoshopを使ってサイトデザインに取り組んできました。その一方で、近年はAdobe XDでデザイン制作をする人も増えています。では、両者の違いはどこにあるのでしょうか？
この連載では、Photoshopに馴染みのあるウェブデザイナーの皆さんに向けて、より効率的にウェブデザイン制作が行えるように、Photoshopのデザインを活かしたAdobe XDの使い方を解説します。
今回は、XDの位置づけを理解することを目的とし、XDのデザインツールとしての特徴や使用する際の注意点を解説します。
Photoshopを使ったウェブデザイン
人目を引くための派手な見た目のキャンペーンサイトなど、リッチなビジュアルを必要とするウェブサイトにはPhotoshopが欠かせません。サイトのビジュアルができたら、そのままシームレスにページレイアウト制作、そしてアセット（画像）の書き出しができる点は、多くの機能を備えたPhotoshopならではのメリットです。
Photoshopが多くのウェブデザイナーから愛されているのは、こうした、「なんでもできる多機能さ」によるところが大きいでしょう。
しかしながら、Photoshopはスクリーンデザイン専用のアプリではありません。そのため、ウェブページのレイアウトに使っていると「こんなことができたらいいのに」と感じるポイントもあります。
たとえば、
●ひとつのファイルの中でたくさんのページを素早く作りたい
●カーソルがボタンに乗ったときの見た目の変化をわかりやすく見せたい
●スマホサイトは実際に自分のスマートフォンで確認したい
……などです。ほかにもまだまだ、こんな機能があったらいいなと思いませんか？
● ページのリンク機能がほしい
どのボタンとどのページが繋がっているかどうかがわかると、つくるべきページがわかりやすいですね。
● 余白をもっと簡単に、均一に移動・設定したい
ウェブデザインで大切なのはmarginやpaddingといった「余白」です。この「余白」をもっと手軽に設定できれば、その分、ビジュアルの作り込みにも時間を使えます。
● レイヤー整理の手間を省きたい
ウェブデザインでは、同じ形を持った要素の繰り返しがたくさん出てきます。これをデザインするために、Photoshopのレイヤーを複製し続けると、レイヤーがどんどん多くなって管理や編集がとても大変になります。
Adobe XDを使えば、このようなポイントが改善されます。特にPhotoshopのユーザーであれば、XDの速さと軽さには驚くことでしょう。
とはいえ、Photoshopのデザインワークも捨てがたい
しかしながら、XDにも不得手なことがあります。たとえば、XDには高度な画像編集機能がありません。
商品の魅力を訴えるためのランディングページや、ブランド訴求のためのメイン画像の作り込みには、高い画像編集機能（技術）が必要になります。写真素材をそのままAdobe XDでレイアウトしたところで、いわゆる写真を置いただけの「味気のないデザイン」という印象を持たれてしまうかもしれません。すべてのプロジェクトにおいて、XDでPhotoshopを完全に置き換えるという考え方は現実的ではなさそうです。
そもそもAdobe XDは万能選手？
確かにAdobe XDはとても便利なアプリですが、何でもできるアプリはありません。何事も適材適所。よくあるAdobe XDの誤解を解いていきましょう。
Adobe XDがあればPhotoshopはいらない？
Adobe XDは、写真の切り抜きや明るさの調整といった、Photoshopが得意としているビットマップデータの加工はできません。キャンペーンと連動した広告ビジュアルの作成などにダイナミックな合成やレタッチが必要になったら、やはりPhotoshopは欠かせません。
夜空の画像にテントの画像を合成して幻想的な雰囲気を演出する
また、縦組み、カーニングといった文字組や、タイポグラフィにレイヤースタイルを適用するなどのビジュアルの作り込みにも、やはりPhotoshopが活躍します。
縦書きやレイヤースタイルなどを使ってメインビジュアルを作り込む
Adobe XDがあればIllustratorはいらない？
次に、多くのPhotoshopユーザーが使っているIllustratorについても見てみましょう。Adobe XDにもベクター用の「ペンツール」があり、イラストやロゴを制作することは可能です。しかし、より機能が充実しているIllustratorのほうがディティールを詰めていく作業には向いています。
また、大小の文字が入り組んだり精密さが要求されるような文字組み、合成フォントなどにはIllustratorが欠かせません。
複雑なエレメントを持つロゴデザインはIllustratorで
Adobe XDがあればコーディングは不要？
Adobe XDはデザインとプロトタイプを作成し、それを共有することができます。共有されたデザインデータは、ブラウザーやスマートフォンで確認したり実際に操作することができます。さらに開発者向けには、CSSコードを共有することもできます。こういった機能を目の当たりにすると、まるでHTMLやCSSによるコーディングが不要であるかのようにも感じられますが、XD自体にコード生成機能はありません。
Adobe XDでデザインしたサイトを公開するには、開発者による、XDのデザインを確認しながらのコーディング作業が必要です。（開発者がブラウザーを使って参照できる、デザイン仕様書を自動生成する機能は提供されます）
Adobe XDでカラーマネジメントはできる？
XDにはJPGやPNGなどの画像を書き出す機能がありますが、書き出した画像に対してカラープロファイルを埋め込む機能がありません。そのためカラーマネジメントにはPhotoshopが必要です。（この記事の執筆時点）
「カラープロファイル」とは、データの色の特性を表したものです。この特性を各種ブラウザーが解釈することで「画像の色合い」が決まります。もし、JPGやPNGなどの書き出した画像にカラープロファイルが埋め込まれていないと、ブラウザーが色の特性を勝手に解釈して、制作者の意図と異なる、極端に派手な、あるいは地味な色合いに変化してしまうことがあります。
これを避けるため、ウェブサイトで利用する画像にはsRGBのカラープロファイルを埋め込みます。たとえば、Photoshopでつくった画像を、ファイル／書き出し／書き出し形式…から書き出す場合は、色空間情報の欄でカラープロファイルの埋め込みを指定できます。
Photoshopの「書き出し形式」画面でプロファイルの埋め込みを指定できる
このようにカラープロファイルを画像に埋め込むことを「カラーマネジメント」と言います。現時点ではAdobe XDはカラーマネジメント非対応なので、カラーマネジメントが必要な画像については、Photoshopでの書き出しが必要になります。
アプリを組み合わせて「いいとこ取り」
ここまでを読んでお分かりのように、目指すデザイン、あるいはその場で必要な作業によって、最適なアプリは変わります。スクリーンデザインやレイアウトの作業においては、Adobe XDが得意とする「要素の繰り返し」、あるいは「余白」の操作や機能を活用することで、よりスピーディーなデザインワークが可能になります。その反面、つくり込みの必要なグラフィックデザインにはPhotoshopやIllustratorの方が向いています。
つまり、Photoshop、Illustrator、XDそれぞれの特徴を活かしたデザインワークを活用できるようになれば、より効率的に、高いクオリティのデザイン制作を行える可能性があるわけです。従来、PhotoshopとIllustratorを使い分けてウェブデザインを行ってきたように、これからはXDもデザインの道具箱に加えることをオススメします。
PhotoshopのクリエイティブワークをAdobe XDで加速しよう
いままでPhotoshopでウェブサイトを作ってきたデザイナーの皆さんにとって、ゼロから新しいアプリに乗り換えるのは大変なことだと思います。そこでこの連載では、Photoshopで制作したデザインデータを元に、その後の作業をAdobe XDで引き継ぐデザインフローを紹介します。
まずはAdobeXDをインストール
まずはAdobe XDをインストールしましょう。Adobe IDを所有しているメンバーであれば、プランの種類に関わらずAdobe XDを無料で利用できます。Photoshopのユーザーなら誰でもすぐにインストールできるはずです。
PSD&AIファイルはAdobe XDでそのまま開ける！
手元にPhotoshopやIllustratorで作成したデザインデータがある場合には、Adobe XDのファイル／コンピューターから開く…を使い、ファイルを新規XDドキュメントとして開くことができます。
試しに、サンプルのPSDファイルをPhotoshopとAdobe XDで開いて見比べてみましょう。レイヤー構造を含め、Photoshopで作成したデザインがXD内で維持されていることが確認できます。もちろん、そのまま各レイヤーを編集することができます。
psdファイルをxdで開くことができる
ただし、完全にPhotoshopの見た目を再現できないケースもあるので、十分に確認しておきましょう。ヘルプ記事「Photoshop ファイルを XD で開くときにサポートされる機能」が参考になります。
こうしてXDで開いたPhotoshopのデザインをベースに、下層ページの展開や、レスポンシブデザイン用のPC画面のレイアウト作成などを行えば、慣れ親しんだPhotoshopのワークフローをすべて手放す必要はありません。
「CCライブラリ」を使ってアプリ同士で素材を共有する
XDとPhotoshopの作業を明確に分担し、必要なデザイン素材をツール間で共有するには、PhotoshopやIllustratorで作った素材をパーツごとに分けて「CCライブラリ」に登録しておきます。
CCライブラリは、アドビのアプリを横断した素材の共有ができるクラウドサービスです。Photoshopで合成したメインビジュアル、Illustratorで作成したロゴなどをCCライブラリに登録すると、それらがXDのライブラリパネルに表示されて利用可能になります。素材の再編集が必要になった時は、各アプリに戻って作業してから保存すれば、その結果が自動的にXDのライブラリにも反映されます。
次回は、CCライブラリを使用して、Photoshopのサンプルファイルと同じ見た目のデザインを改めてXDでつくり直します。また、その作業を通じて、PhotoshopとXDの手順の比較や、効率化のコツについてご紹介します。