Column
コラム

Adobe XDとは

Adobe XDはWEBサイトや、モバイルアプリなどのデザインに適した、オールインワンのUX/UIソリューションです。
デザイン、プロトタイプ、共有、すべてをXDでおこなえます。

スターターキットもあるようで、これを使えば主要機能の使い方も学べるようですね。
https://www.adobe.com/jp/products/xd.html

ちなみにAdobe XDの使用要件は以下の通りです。

● Windows
Windows10（64ビット）バージョン1803（ビルド10.0.17134）以降
13インチ以上のディスプレイ、解像度 1280×800。
RAM 4GB

● macOS
macOS X v10.14 以降
13インチ以上のディスプレイ、解像度 1400×900、Retina推奨。
RAM 4GB

ともに、ライセンス認証、サブスクリプションの検証、およびオンラインサービスの利用にインターネット接続および登録が必要となります。

メリット

とにかく動作もファイルも軽い

起動がPhotoshopに比べて格段に早いです。アートボード数が増えるとそれなりに時間がかかってしまいますが、ファイルの容量がそもそも軽いようです。
試しにPSDで作成してから、XDに変換してみると、同じレイヤー数にも関わらずPhotoshopで作成したものが約80MBなのに対して、XDで作成したものは約15MBでした。

1ファイルでサイト全体が見渡せる

ファイル内でリンク設定を行い、プロトタイプの作成が可能です。
そのため、基本的には1ファイルで1サイト分のデザインを作ることになり、結果としてページごとに違うデザインデータを開くという手間が省けます。
1サイト分のファイルになるとさすがにそれなりの容量になり、起動に時間がかかりますが、ファイルを開いた後の動作の軽快さは変わらずです。

コンポーネントでhoverイメージ・アクションを登録

Photoshopで制作していた時は、hover用のレイヤーを作成していました。
ただし、コーダーさんが気づかず見逃されて指定しないhoverアクションになることもあったのですが、コンポーネント機能でhoverイメージ、アクションを設定できるのでこういったことが起こりにくいです。
一度作ったボタンなどはアセットから簡単に設置が可能です。

繰り返し機能により作業スピードの短縮が可能

同じような要素が繰り返されるデザインはリピートグリッドで複製が可能。
横方向、縦方向の余白調整も簡単に行え、そもそも写真の差し替えが基本的にドラッグだけで可能なのでかなり時間が短縮できます。

プロトタイプ共有により、クライアントやコーダー、ディレクターなどと動作の共有がしやすい

背景、ヘッダー固定のデザインはPhotoshopデザインの時は口頭や文章で説明したり、モックアップに画像を貼り付けて実際に動かしてみたり…と 伝えることが難しかったのですが、そういったデザインもXDはプロトタイプ機能があるので共有が容易です。
共有リンクのURL発行が可能なのでデザインのプレゼンやコンペ時にもインパクトを与えることができるのではないかと思います。

スマホのプレビューがリアルタイムで確認できる

以前、PhotoshopではAdobe Preview CCというスマホアプリからphotoshopの画面をプレビューできていたものの、Photoshop CC2018より機能がなくなりました。
Adobe XDでは、Photoshopで無くなったデバイスプレビューの機能が使用できます。Photoshopの時と同様にスマホのXDアプリをインストールすることで使用可能です。
XDを普及させるためPhotoshopで機能がなくなったのでは？と邪推しているのは私だけではないはず…笑

デメリット

レイヤー効果が無い

Photoshopでよく行っていた、レイヤー効果のカラーオーバーレイ、グラデーションオーバーレイといった機能が無いので 画像にオーバーレイを掛けたいときは画像の上にカラーの四角を配置して透過させるなどの対応が必要です。

テキストの細かな調整ができない

まず、テキストの縦書きができません。
対応策としては、横書きのテキストを1文字ずつ改行するなどの処理が必要になります。
また、カーニングなどの文字詰めなどの調整もできないようです。

フォトレタッチや合成といった画像処理がXDではできない

XD単独では画像処理ができません。
Photoshopで編集というメニューがあり、Photoshopが起動され、編集は可能なのですが保存時にレイヤーが統合されるようで編集したものを再度開くと追加したレイヤーがなくなってしまいます。（汗）
このため、修正などのことも考えると予めPhotoshopで画像を別で編集しておいた方が安全です。
UIツールという役割を考えれば納得なのですが、XDだけで完結できないという部分がすこしもどかしいですね。

無いフォントの外観維持ができない

アイコンはfont-awesomeなどのアイコンフォントを使用するのですが、Photoshopではインストールされていないフォントでも外観だけ維持して、何を使われているか確認できます。
ところがXDでは完全に□（四角に文字化け）になってしまいました。
コーダーはデザイナーが使用しているフォントを全てインストールしているわけではないので、インストールを余儀なくされてしまいました。

まとめ

このように、新たな機能で時間短縮につながる部分はメリットに感じますね。
このほかにもテキストオブジェクトを後からエリア内とポイントに切り替えることができたり、色を抽出するときの拡大表示が分かりやすい、 テキストのコピーが簡単にできるといった 細かい部分のメリットも挙げられていました。

また、従来のツールでできたことができないのはデメリットになってしまいますね。
このほかにもPSDファイルをXDでは開けるのにXDファイルをPhotoshopで開けない…といった意見も。

とはいえ、アップデートのたびに新しい機能が追加されており、まだまだこれからさらに便利になるのではないかと期待しています。
※ちなみに2020年10月より、スタータープランでは以下のような制約が設けられました
・アクティブにできる共有リンクは 1 つだけになります。
・1つのアクティブな共有ドキュメントに招待できる共同編集者は 2人まで。
・1つのライブラリを公開できます。1人の編集者を追加できます。閲覧者の数に制限はありません（この機能制限は2021年中に開始予定）。