UI/UXデザイン界の新しい風!Adobe XD CCを便利に使い倒す!

  • はてブ

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


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

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

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


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



AdobeXDの操作感

オブジェクトの配置

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

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



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

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

03gif


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

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

04gif

スクロールの設定

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

05gif

画面遷移の設定を行う

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

06gif


プレビュー

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

07gif

完成品を共有する

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

01gif とってもカンタン。

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

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

手元の実機で確認

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

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

Illustrator、Photoshopとの連携

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

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


====

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





森島

執筆者: 森島

8bit デザイナーです。 コーディング・jQueryなど幅広く担当しています。

株式会社8bit (エイトビット)

東京都渋谷区でWebサイト制作、Webシステム開発などを行っております。
キャンペーンサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。

制作に関するご相談はお気軽にどうぞ

コンペ参加や相談ベースでもご相談承っております。

お問い合わせ