Adobe XDをはじめて使うPhotoshopユーザーが知っておくべきすべてのこと #AdobeXD #Photoshop

もしあなたがPhotoshopユーザーでまだAdobe XDに触れたことがなかったとしたら、XDを使い始めるのにちょうどいいタイミングはまさに今でしょう。Adobe XDはPhotoshopデザインを取り込んでアプリやウェブページのインタラクティブなプロトタイプに変身させるだけでなく、直感的なインターフェイスを通じて2つのアプリケーションでのワークフローをシンプルで効果的なものとするように設計されているのです。そのワークフローには、デザインを共有してフィードバックを受け取るというパワフルな機能も含まれています。このブログではPhotoshopファイルをAdobe XDに取り込むためのシンプルな手順をCreative Cloudシニアエバンジェリストのポール トラニの言葉を借りながら解説します。また、複数のアプリを併用してデザインを次のレベルにまで引き上げる秘訣についても取り上げます。

はじめの一歩：PSDファイルをAdobe XDにインポートする

  1. まだAdobe XDをインストールしていない場合は、こちらからダウンロードしてください。。
  2. デザインを始めましょう。まず［ファイル］>［開く］で手持ちの.PSDファイルを開きます。
  3. Adobe XDはファイル内のすべてのレイヤー、効果、グループ、マスクを保持したままPhotoshopファイルをインポートするため、Adobe XD内で背景やアイコンなどに用いることができます。PhotoshopファイルをXDに取り込む際の対応機能一覧はこちらのヘルプをご覧ください。
  4. Adobe XDの編集ツールを使い、アプリまたはウェブサイトのデザインを始めます（解説動画 – 英語）。プロトタイプモードに切り替えて、複数の画面を遷移するインタラクティブなプロトタイプを作成しましょう（解説動画 – 英語）。
  5. あなたがPhotoshopで作成した静止画が、目の前でインタラクティブなアプリやウェブサイトの動くプロトタイプとして仕上がっていくのをご確認ください。

ポール トラニは、「PSDファイルをそのままXDで開くだけですぐに作業にとりかかれます。PhotoshopのアセットをXDに取り込んだら、いくつかの画面を接続してプロトタイプを作りましょう。そうすればPhotoshopのすべてのレイヤーが独立して保持されるので作業は非常にスムーズに進められます。」と語っています。

PhotoshopからAdobe XDへのコピー＆ペースト

Photoshopで作ったデザインをAdobe XDに持ち込む最も手軽な方法はコピー＆ペーストです。Photoshopで作成したイメージの各レイヤーを個別に、またはデザインすべてをひとつのレイヤーに統合させて持ち込むこともできます。PhotoshopからAdobe XDへのコピー＆ペーストの手順は以下のとおりです：

  1. XDにコピー＆ペーストしたいコンテンツを、Photoshopの選択ツールで選択します。
  2. Photoshopの［編集］>［コピー］メニューコマンドで現行レイヤーだけをコピーするか、［編集］>［結合部分をコピー］メニューコマンドで選択範囲のすべてのレイヤーをコピーします。
  3. Adobe XDを開き、［編集］>［ペースト］メニューコマンドでコピーされたレイヤーをXDにビットマップとしてペーストします。

https://blog.adobe.com/media_d95c60f45ea2e677ec47216c6ecd4883c63f3ae6.gif

PhotoshopのアセットをCreative Cloudライブラリ経由でAdobe XDにインポートする

トラニによれば、ベストなやり方はPhotoshopデザインをCreative Cloudライブラリにインポートし、Adobe XDから同じライブラリにアクセスしてアセットとして使う方法です。このようにすれば、XDで作成中のアプリやウェブサイトのプロトタイプでPhotoshopのアセットを容易に扱えるだけでなく、アセットの再編集をPhotoshopで行えばそれが自動的にAdobe XDにも反映されるようになるからです。PhotoshopアセットをCreative CloudライブラリにインポートしてAdobe XDから利用する手順を以下に示します：

  1. Photoshopでインポートしたいコンテンツを選択します。画面の右側の［ライブラリ］パネルにある［＋］ボタンをクリックし、グラフィックが選択されていることを確認したうえで［追加］をクリックします。
  2. Adobe XDの［ファイル］>［CCライブラリを開く…］メニューコマンドを実行します。PhotoshopアセットをAdobe XDプロジェクトにドラッグ＆ドロップします。
  3. このアセットは以降リンクされたアセットとして扱われます。Photoshopで再編集した結果は自動的にAdobe XDに反映されるようになります。

https://blog.adobe.com/media_1d6b7ea71e9ca30ebfa763cf4e76c194fe64de13.gif
「私がCreative Cloudライブラリを使う理由はこのリンクです。リンクがあればこそ、ライブラリを開いて、右クリックで［Photoshopで編集］を選び、編集を終えたら再びXDに戻って作業を続けられるのです。変更はリアルタイムで同期されるので、たとえ15個のアートボードにアセットが散らばっていても怖いものなしです。」とトラニは語っています。

参考
Adobe XD での Creative Cloud ライブラリについて

Photoshopで作成したアセットをリピートグリッドを使ってマルチスクリーン体験に仕上げる

いつもPhotoshopをお使いの皆さんは、複数の視覚エレメントの配置を細かく調整するために多くの時間を割いているのではないでしょうか。そのようなアセットもいったんAdobe XDに取り込めばリピートグリッドを使って一挙に配置できるため、時間を大幅に節約できます。リピートグリッド機能は、Photoshopで作成したものを含む複数オブジェクトのグループを作成して整列配置する機能です。また、ひとつのアートボードに加えられた修正は、自動的に他のものにも適用されます。

これについてトラニは次のように語ります。「小さなアイコンやボタンがいくつもあるデザインを新規に作成するときにリピートグリッドはとても役立ちます。たとえば5つのアイテムが並ぶスクリーンがあり、すべてのアートボードに同じ種類の情報が表示される場合、Photoshopで作業を完結させようとすると膨大な回数のコピー＆ペーストが必要になります。XDを使えば、Photoshopのアセットをそのまま使いながら複数のアートボードすべてで一貫した表示を実に簡単に作成できます。」

Adobe XDのリピートグリッドの使い方については、まずブログ記事「Adobe XDのリピートグリッドを使いこなすヒント」をご覧いただいたうえで実際に試してみることをお勧めします。

Photoshopで作成したデザインへのフィードバックを、プロトタイプ共有することで簡単に集めましょう

Adobe XDでインタラクティブプロトタイプを制作する大きな利点のひとつは、制作物をオンラインで共有することでフィードバックが簡単に得られることです。これは、Photoshopで制作したデザインのフィードバック収集にも効果的です。

アートボードをリンクさせたインタラクティブプロトタイプを共有するには、Adobe XDの画面右上にある［プロトタイプを公開］をクリックしたのち［公開リンクを作成］をクリックすれば、共有相手にそのまま送れるURLが生成されます。共有相手はブラウザでリンクを開くだけで、デザインの特定の場所にコメントしたりハイライトすることができます。

「共有URLでアクセスしたPhotoshopデザインにフィードバックしたいとき、Adobe XDのプロトタイプ内で使われているもともとPhotoshopで作成された要素の特定の場所にコメントをピン留めすることができます。たとえばクライアントが『ここは緑の方がいい』と思ったら、緑にしたい部分の左上にそのコメントをピン留めできるのです。そういったすべてのアクションはトラッキングされているので、デザイナーはそのひとつひとつに対応し解決していくことができます。さらに、リンクされたアセットにフィードバックが返されたときデザイナーはすぐにPhotoshopでそのアセットを開いて修正をすれば結果が自動的に反映されるのです。」とトラニは言います。

また、プロトタイプ内のすべてのエレメントのピクセルサイズ情報にアクセスできるため、開発者とのチームワークにも適しています。

Adobe XDを使って成功するために必要なリソースのすべて

PhotoshopとAdobe XDを使用するメリットはそれぞれにありますが、魅力的なアプリやウェブのデザインを作り素晴らしいインタラクティブプロトタイプに仕上げる作業を効率的に進めるには、2つのツールを併用するのがいちばんです。Adobe XDを使い始める際に役立つ情報をを以下にお知らせします。

トラニはこう続けます。「Photoshopユーザーなら誰でも始められるほどXDは使いやすく、操作も直感的です。Photoshopを知っていればすでにXDを知っていると言えるほどですよ。」

また、UXに関するインサイトを電子メールで直接おけ届するAdobe XDのニュースレター（英語）にぜひ登録ください。

この記事は、2018/３/13にポストされたEverything A Photoshop User Needs to Get Started in Adobe XDを翻訳したものです。