UI/UXデザインがラクラク！カンプデータが簡単に作れる Adobe XD

サービスを立ち上げる時、まずは、画面の仕様や動作遷移の確認に、画面の設計を行うと思います。
いわゆるプロトタイプですね。（より完成品のイメージがしやすいよう、紙芝居のようなものを作ります。）

• iPhoneアプリ
• Andoroidアプリ
• Webサービス　など…

AdobeXDは、プロトタイプが簡単に作成できるアプリケーションです。
操作が非常に直感的で、画像をドラッグドロップするだけでマスクされたり。
必要最低限のデザイン機能なので、ノンデザイナの人でも扱いやすいです。
完成品をを共有するのも簡単。


さらに、AdobeCCのプラン内に含まれているため、現在CCを契約中の方は追加料金などは不要で使用できます。これは使わない手はない、といった感じです。
Sketchもいずれ不要になってしまうんでしょうか。

AdobeXDの操作感

オブジェクトの配置

AdobeXDを触ってみると、ガイドの表示がとても丁寧です。


余白の調整が簡単。どこの要素から何pxかまで、ていねいに表示されます。

画像のマスクもドラッグするだけ

写真を丸く切り抜きたい時も、円形のオブジェクトを作り、その上にコンピューター上の画像をドラッグドロップするだけです。

同じ要素を並べたい！リピートグリッド機能

一覧画面などは、同じ要素が複数並びます。
そんな時にはリピートグリッド機能が便利です。

スクロールの設定

スクロールの設定をして、アートボードを縦に伸ばすだけでスクロールの設定になります。

画面遷移の設定を行う

画面遷移の設定も簡単です。線をつなげてアニメーションを設定していくだけ。

プレビュー

こちらが完成品。すぐにプレビューできます。（Flashを作っていた時のよう！）

完成品を共有する

プロトタイプが完成したら、完成品を共有することができます。

とってもカンタン。

URLはCreativeCloudで出力されます。
共有後にコメントのフィードバックを受けて同じURLのままファイルを更新できます。
閲覧にパスワードをかけることも可能です。

削除する際は、Creative Cloudのマネージャから、[アセット]＞[ファイル]で確認できます。
出先からはブラウザからAdobeのアカウントでログインすれば同じ操作ができます。

手元の実機で確認

AdobeXDにはiPhone、Androidの両方にプレビュー専用のアプリがあります。
CreativeCloudを介して確認することもできますし、実機をUSBで接続して都度落として確認することもできます。（こちらはMacのみ対応機能）

アプリが無くても、前項の共有URLを使用すれば確認できるようなので、クライアントにささっと確認してもらうなんてことも可能です。

Illustrator、Photoshopとの連携

リリース時にはIllustratorやPhotoshopとの連携がイマイチという評判がちらほら聞こえていたのですが、
先日アップデートされsvgやpdfでの出力が可能になりました。

プロトタイプ完成後のデザインワークも、きちんと行えます。


====

Adobe XDが現場で使用されていく機会は今後どんどん増えていくと思います。CCをご利用中の方は気軽に試せると思うので、ぜひ一度使ってみてください。