UIデザインの面倒な部分を自動化！ラクしてプロトタイプが作れる「Adobe XD」のメリット/デメリット
はじめまして、wamと申します。
普段は新規プロジェクトのデザインやディレクションなどの仕事をしています。
息抜きに柴犬の画像をみたり、変なキャラクターを描いたり、柴犬の動画をみたり、アイスを食べたりして真面目に仕事をしています。
今回は、3/14にAdobeから発表された初のUXデザインツール「Adobe XD」について、実際に触ってみた使用感をご紹介したいと思います。
Adobe XDとはなんぞ？
Adobeからは初となる、プロトタイピングのためのソフトウェアです。
弊社でもプロトタイピングに力を入れているプロジェクトが増えており、いかに短時間でクオリティの高いプロトタイプを作成できるかが重要になってきています。
まずはAdobe Experience Design（Adobe XD）からソフトをダウンロードします。
※現在Mac OS Xのみインストール可能な状況です。Windowsは年内に対応予定との事。
起動画面
Adobe XDをインストールした後、起動すると最初に出てくる画面です。
この画面では、
- 新規作成する
- 元々用意されたサンプルファイルを開く
- iOS/Android/WindowsのUI Kitを開く
を行う事ができます。デバイスのUI Kitが内包されてるのは嬉しいですね。
新規作成してみる
デバイスにフォーカスして▼をクリックすると、プルダウンでiPhoneやAndroidを選択できます。
今回はせっかくなので、“柴犬をひたすら眺めるアプリ”を想定してみる事にしました。
はじめたくなる顔です。
画面自体はよく見る構成で、左側にツール、右側にパネル、中央にアートボードがあります。
また画面左上あたりに、「デザイン」と「プロトタイプ」を切り替えるタブがあります。
Adobe XDでは「画面を作る」作業と「画面に動きをつける」作業を1つのソフトで両方できるようになっています。
まずはデザインモードから、何ができるのかご紹介しますね。
デザインモード
デザインモードとは、画面をデザインする際に使うモードです。
私たちが普段PhotoshopやIllustrator、Sketchなどで画面のデザインを作るのと同じ作業をこのモードで行います。
基本機能を一通り触ってみたのでまとめました。
基本機能
| 選択ツール |
|
|---|---|
| 矩形 / 円形 |
|
| 線 |
|
| ペンツール |
|
| テキスト |
|
| アートボード |
|
| その他 |
|
こうしてまとめてみると、PhotoshopよりIllustrator寄りの機能になっているような気がします。
デザインモードはここが便利！
すごい数のアートボードになっても重くならない
公式の紹介動画をみていた際、アートボードの数が増えてもパフォーマンスが落ちないという解説がありました。
あやしい…
というわけで、試しに50ほどアートボードを並べて可愛い柴犬で画面を埋めてみました。
この状態で編集や移動、拡縮を繰り返しても重い印象はなくスムーズ。
PhotoshopやIllustratorだと、10前後でじわじわ重くなってきてヒーッ！となっていたのですが、それに比べれば断然スムーズです。
疑ってすみませんでした！
ただ、まだ機能が少ない分軽い可能性も。
今後バージョンアップしても変わらないことを祈ります。
画像のマスクや差し替えが簡単すぎる
Adobe XDでは、とても簡単に画像のマスクや差し替えをする事ができます。
なんてこったい。
矩形の上に画像をドラッグ&ドロップするだけです。
細かく画像の位置を調整したい場合は、「Object > Mask with Shape」を使えばIllustratorのクリッピングマスクと同じような事も可能です。
因みに、グルーピングしたアイテムを拡縮してもよしなに調整してくれます。
柴犬いい顔してますね。
しかし便利な世の中になったのぉ…
“リピートグリッド”は作業が楽しくなる機能
Adobeの公式動画で１番面白いと公言している機能です。
私も初めて動画をみた時にヒョエー！となったのはこれでした。
簡単にいうと、繰り返しアイテムを自動生成してくれる機能です。
手順を説明します。
- 繰り返し使いたいアイテムを選択
- 右側のプロパティにある「Repeat Grid」ボタンをクリック
- 枠線が緑色に変わるので、ドラッグして好きな位置まで伸ばす
- 上下左右の余白を調整
- 1個目のサムネに複数の画像ファイルをドラッグ&ドロップすると、リスト全てのサムネが差し代わる
あら〜とても便利ですね。
リストやグリッドUIの場合、これまではアイテムを複製して中の画像も１つずつ差し替えていましたが、その手間がなくなります。
リピートしているのでテキストは編集できないと思いきや、それぞれ編集できます。
PhotoshopやIllustratorにも是非入れて欲しい機能です。
デザインモードはここが不便…
psdやaiで保存できない
プロトタイプで作った画面は、本開発に向けてpsdやaiに書き出してブラッシュアップしたくなりますよね。
せっかくAdobe製品なのに、現状xdファイルでしか保存できないのが残念です。
早めに追加して欲しい機能の１つです。
リアルタイムなデータ共有がしにくい
web上ではなくローカルで作業するので、複数人で同時に作業する際、共通のパーツを使いたい場合に不便が生じます。
弊社では複数のデザイナーが同時にプロトタイプを作る機会が増えてきているので、リアルタイムなデータ共有が重要になってきています。
ただ今後のバージョンアップでCreative Cloud ライブラリ連携が予定されているので、ライブラリ連携が入れば複数人でも作業しやすくなりそうです！
プロトタイプモード
プロトタイプモードとは、画面遷移を設定する際に使うモードです。
Prottを使った事がある方はイメージしやすいかと思いますが、
画面と画面を線で繋いでアニメーション設定をするだけで、画面遷移を確認できます。
設定方法
- 画面やボタンなどのパーツを選択
- 青い「→」をクリックして遷移先の画面までドラッグ
- アニメーションの設定
これの繰り返しです。簡単！
遷移時のアニメーションは上下左右にスライドとアルファのみになっています。
プロトタイプモードはここが便利！
プレビュー時に画面操作を録画できる
ヘッダー右上にある再生アイコンをクリックするか、command + Enterをするとプレビューモードになります。プレビュー時は実際に画面をクリックして遷移を確認することができます。
command + EnterはFlashでパブリッシュする時と同じコマンドですね。なんだか懐かしい！
プレビュー画面の右上にある「Record」ボタンを押すと、画面操作を録画する事ができます。
この機能は、ユーザーテストで活用できそうです。
動画はmovで書き出されます。
画像は解像度毎に自動書き出し
File > Exportからアートボード毎に画像を書き出す事ができます。
保存形式はpngとsvgに対応していました。
web / iOS / Androidで解像度毎に自動で書き出してくれます。
試しにiOSを選択して@1x設定で書き出したら、アートボード毎に@1x/@2x/@3xのpngを書き出してくれました。
Androidを選択するとちゃんとdpi基準になります。
プロトタイプモードはここが不便…
シェア機能は閲覧を制限できない
Adobe XDでは、リンクをAdobeのサーバー上に生成してweb上で確認できるシェア機能があります。
一見便利ですが、パスワード設定や招待制などの機能がない為、あまり気軽にこの機能は使えないなと…
一度シェアしたリンクは「File > Manage Shared Links」の中にストックされているので、後から削除する事は可能です。
シェアすると下記サンプルのようなページを参照できるようになります。
Adobeが公開しているサンプル
今後のバージョンアップに期待
Adobe XDはこれから毎月バージョンアップをしていくと発表しています。
今後はどんな開発を予定している？
- グラデーション
- テキスト機能の強化
- エフェクト
- レイヤー機能
- スクロール可能なコンテンツ
- iOS/Android向けのアプリ（リアルタイムプレビュー）
- Creative Cloud ライブラリ連携
- テキスト機能の強化
- Windows 10対応
個人的にはこの辺りが早く欲しいなと思いました。
あとはプロトタイプモード時にタイマーでアイテムを表示/非表示できる機能が欲しい（切実）。
弊社は動画を扱う事が多い為、動画再生やgifアニメに対応してくれると更に嬉しいですが、重くなりそうですね…
最後に
一通り触ってみて、作業が非常にラクで楽しくなりました。
今後バージョンアップを予定している機能が入れば、弊社でも使うチームが増える可能性はあるのではと思っています。
今回公開されたPublic Preview版は「Adobe ID」を持っていれば無料で利用できます。
Adobeは他にもいろいろ新しいツールを発表していて、面白そうなのがいくつかあるのでまたご紹介したいと思います。
ではまた〜
