2017年の秋に正式版がリリースされた、WebサイトやアプリのUI/UXデザインツール「Adobe XD」。
使ってみました。
配置が簡単
ツールはWebデザインでよく利用する機能に絞り込んで作られています。
シンプル！
Adobeを使い慣れた人は（慣れてなくても？）あまり迷わず使えると思います。
予め書いた四角形に画像をドラックアンドドロップするとぴったりサイズでマスクがかかったり、
枠線やシャドウなどよく使う効果もポチっとワンクリックでつけられます。
Webのテンプレートによく必要になる、同じ形のリピートもあっという間。
中央揃えなどグリッドに揃えるのも簡単。
Illustratorの様にアートボード（ページ）を並べて全体を見渡せるのも良いところ。
アプリの要領が162MB、軽い。（Photoshopは2.25GB）
ページ移動の確認が簡単にできる
気持ち良いサイトづくりに欠かせないページの導線設計。
ページ移動の確認が簡単にできます。
これまでは、HTMLで簡単にコーディングをして…となかなか作るのが大変でしたが、こちらはデザイン上のボタンから直接ページ同士にリンクを張り、そのままAdobeのテスト用サーバにアップ、Webブラウザで動作の確認ができます。
①プロトタイプ画面に切り替え
②ボタンを選択して出てきた青いポッチを引っ張って
③リンク先のページにもっていくだけ。
④右上の共有ボタンから、すぐに公開してWebで確認ができます。
公開されたものがこちら
https://xd.adobe.com/view/3f51390d-f378-4109-aad4-d96dac3700cf/
Web用画像の書き出し
書き出しも簡単。
スライスツールなどを使うことなく、オブジェクト選択するだけで、2倍サイズやsvgなど書き出しができます。
Webサイト制作での利用
ワイヤーフレームなどの計画にはXDは便利だと思います。
（ただこのツールでワイヤーを作ってしまうと、綺麗すぎて逆にデザインの発想の妨げになるのではないかという気も…。
Photoshopのペンで書いたワイヤーラフを貼り付けてページ移動を確認する使い方もいいかなとも思います。Photoshopの様なえんぴつ（フリーハンド）ツールがほしいかも？ ）
Webデザインツールとしては、
シンプルなものであればできると思いますが、複雑な素材づくりはIllustratorやPhotoshopを利用する必要があるので、単体では厳しいと思います。
あくまでもUI/UXデザインツールですね。
と思っていたら、Adobeにワークフローイメージがありました。
https://helpx.adobe.com/jp/xd/help/adobe-xd-overview.html
ワイヤーフレーム作成（初期計画）というより、コーディング前のチェックに利用するイメージでしょうか。計画段階と最後の調整の両方に使っても良い気がします。
ちなみに、現在Webデザインの制作にどんなソフトが使用されているかというと、
AdobeのIllustratorとPhotoshopが主流かと思います。
また、SketchやFigmaなども使いやすく、こちらも人気がある様です。
どのソフトベストというのはなく、それぞれのソフトが得意なことがあるので、案件の進行方法、サイトの特性、などによって柔軟に選択・利用できる様にしておくのが良いかと思います。
ただし、Webサイトは作って終わりではなく、メンテナンス期間が5年10年と長いため（15年近くご利用になられたサイトもあります）、長期で互換性がありそうなソフトを選びたいところではあります。
ソフトに依存しない作り方にできるところはしたいですが。
XDもまだまだ実務で使用していかないと気づかない事が沢山あると思いますが、良いUIを作るために必要な時が来たら利用してみたいと思います。
実際に使ってみた感想
色々細かい事はできないので、画面レイアウトに集中できるところが良いと思いました。
ついつい細かい装飾が気になって進まないのですが、全体像を見失いにくい気がしました。
今回の流れとしては、ワイヤー（手描き）→画面構成（.xd）→.aiと.psでデザイン素材を作成して.xdに埋め込み。
リピートグリッドが調整に案外時間がかかるので、もう少し使いやすくなるといいなと思いました。例えばcssのflexbox感覚になると良さそうですが…。
あと注意が必要なのが、ファイルをコピーして使うと、プロトタイプが上書きで公開されます。ファイル名では判別されない様です。
デザイン修正があった場合に、ファイル名を日付などで管理しても、確認用URLが変わらないのは便利ですね。
確認用URLを変えたい時は、新規ファイルを作るか、プロトタイプを公開する際に「新規リンク」を選択すれば別のURLが生成される様です。
また気付きが何かあれば書きたいと思います。
2018/8/20追記
UIを共有しやすいはずなんですが、クライアント側で「プロトタイプの閲覧の操作が分かりづらい」という意見が多く、動線の確認にはあまり使えていません。
制作側についても、ページが多くなるとリンクを全てに張ることは困難。
結局ワイヤーフレームやデザインを画像やPDFに書き出しや、紙にプリントして書き込むのが主です。
2019/2/22追記
案件によっては使い分けでよく使用しています。
ダミーを使って手早くイメージを作り上げたい時などに。
最近（？）画像のトリミング位置が調整できる様になったのが非常に助かります。
そのまま仕上げまでデザインしてしまう場合もあるのですが、Web用画像への書き出しが非常に楽ではあるものの、写真の書き出しはPhotoshopの方がきれいな場合が多いので、重要な箇所の写真画像はPhotoshopで作成しなおす事があります。
貼り込んだ画像のファイル名が分からなくなってしまうのがちょっと不便。書き出し（⌘E）で、元画像のファイル名が見える事もあるけど（見えない場合もある）、どこかで元ファイル名が分かる（できればIllustratorの様に画像をoption+Wクリックで直接開ける）と便利なのに…と思います。
2019/4/24追記
元の画像がどれだか分からなくなるのが地味に不便。
貼り込んである画像を加工したいのに、どれか分からない！
画面上にファイル名を書き込んでおかなくてはならないです。
書き出そうとすると元のファイル名が見えたり、見えなかったり。
あともう少しプリントしやすいといいのですが。
ブラウザプレビュー用ではあるのでしょうが…。
2021/8/27追記
どんどん作りやすくなって、コーディングへの移行も割とスムーズなので（細かくは色々あるけど）、デザインの土台はほとんどXDになりました。画面構成はしやすいけどビジュアルデザインはしにくいので、バナーなどはPhotoshopやIllustratorを使っています。
