UIデザインの面倒な部分を自動化!ラクしてプロトタイプが作れる「Adobe XD」のメリット/デメリット

UIデザインの面倒な部分を自動化!ラクしてプロトタイプが作れる「Adobe XD」のメリット/デメリット

2016.04.26
title
やってみた

はじめまして、wamと申します。
普段は新規プロジェクトのデザインやディレクションなどの仕事をしています。
息抜きに柴犬の画像をみたり、変なキャラクターを描いたり、柴犬の動画をみたり、アイスを食べたりして真面目に仕事をしています。

今回は、3/14にAdobeから発表された初のUXデザインツール「Adobe XD」について、実際に触ってみた使用感をご紹介したいと思います。

Adobe XDとはなんぞ?

Adobeからは初となる、プロトタイピングのためのソフトウェアです。
弊社でもプロトタイピングに力を入れているプロジェクトが増えており、いかに短時間でクオリティの高いプロトタイプを作成できるかが重要になってきています。
artwork1
まずはAdobe Experience Design(Adobe XD)からソフトをダウンロードします。
※現在Mac OS Xのみインストール可能な状況です。Windowsは年内に対応予定との事。

起動画面

Adobe XDをインストールした後、起動すると最初に出てくる画面です。
first
この画面では、

  • 新規作成する
  • 元々用意されたサンプルファイルを開く
  • iOS/Android/WindowsのUI Kitを開く

を行う事ができます。デバイスのUI Kitが内包されてるのは嬉しいですね。

新規作成してみる

デバイスにフォーカスして▼をクリックすると、プルダウンでiPhoneやAndroidを選択できます。
device

今回はせっかくなので、“柴犬をひたすら眺めるアプリ”を想定してみる事にしました。
new
はじめたくなる顔です。

画面自体はよく見る構成で、左側にツール、右側にパネル、中央にアートボードがあります。
また画面左上あたりに、「デザイン」と「プロトタイプ」を切り替えるタブがあります。
Adobe XDでは「画面を作る」作業と「画面に動きをつける」作業を1つのソフトで両方できるようになっています。

まずはデザインモードから、何ができるのかご紹介しますね。

デザインモード

デザインモードとは、画面をデザインする際に使うモードです。
私たちが普段PhotoshopやIllustrator、Sketchなどで画面のデザインを作るのと同じ作業をこのモードで行います。
基本機能を一通り触ってみたのでまとめました。

基本機能

選択ツール
  • illustratorと同様、図形やテキストをクリックで選択、ドラッグで位置の移動や拡縮、Shift押しながらクリックで複数選択などができる
  • ダブルクリックでパスを編集できる
  • Illustratorにあるダイレクト選択ツールはない
矩形 / 円形
  • illustratorと同様、矩形には線と塗りがあり、それぞれ色の変更が可能
  • 線の太さ・透明度の指定ができる
  • 複数の図形を選択してアライメントを揃えることができる
  • シャドウは外側のみ可能
  • illustratorにあるパスファインダー機能がある
  • 矩形を作成した後、内側ある円をドラッグすると四隅を角丸にできる(altキーを押しながらドラックすると一箇所だけ角丸にできる)が、数値での指定はできない
  • Object > Path > Convert to Pathをすると矩形のパスを編集できるモードになる(キーボードのvを押して選択ツールに切り替えた後ダブルクリックでも可)
  • 矩形同様、線の太さ・色・透明度の指定ができる
  • シャドウも外側のみつけられる
ペンツール
  • Illustratorのペンツールと同様、パスで描画する
  • パスで図形を描いた後、セグメント(図形の線の上)にフォーカスするとアンカーポイントを追加できる
  • アンカーポイントをダブルクリックでハンドル表示
  • ブラシはない
テキスト
  • 日本語には対応しているが、行間など細かい設定はまだできない
  • PhotoshopやIllustrator同様、ドラックしてエリア選択後、その範囲で改行して文字を打つ事は可能
  • 文字サイズは上下キーで変更できる(Shiftキーを押しながらやると10ずつ増減)
アートボード
  • アートボードの追加は、ツールが選択された状態で画面をクリック
  • アートボードのサイズは後からも自由に変更可能
  • アートボードからはみ出た部分はカットされる(非表示になる)
  • アートボードは選択ツールでShiftを押しながら複数選択が可能、位置も自由に動かせる
  • アートボード名はキャンバス左上にあるテキストをダブルクリックで編集可能
その他
  • レイヤーは現状ないが、重ね順は変えられる
  • 複数のファイルを開いた場合、それぞれ別viewで表示され、Photoshopやillustratorのように1つにまとめてタブ切り替えができない
  • command + Gで選択したアイテムをグループ化、Shift + coomand + Gでグループ解除ができる
  • 配置した画像や図形、テキストなどはcommand + Lでロックが可能。表示された鍵アイコンをクリックすると解除が可能になる
  • 画面全体の拡縮はトラックパッドでピンチイン/ピンチアウト、もしくはcommand +/-で可能

こうしてまとめてみると、PhotoshopよりIllustrator寄りの機能になっているような気がします。

デザインモードはここが便利!

すごい数のアートボードになっても重くならない

公式の紹介動画をみていた際、アートボードの数が増えてもパフォーマンスが落ちないという解説がありました。
artwork2

あやしい…

というわけで、試しに50ほどアートボードを並べて可愛い柴犬で画面を埋めてみました。
artboard
この状態で編集や移動、拡縮を繰り返しても重い印象はなくスムーズ。
PhotoshopやIllustratorだと、10前後でじわじわ重くなってきてヒーッ!となっていたのですが、それに比べれば断然スムーズです。
疑ってすみませんでした!

ただ、まだ機能が少ない分軽い可能性も。
今後バージョンアップしても変わらないことを祈ります。


画像のマスクや差し替えが簡単すぎる

Adobe XDでは、とても簡単に画像のマスクや差し替えをする事ができます。

imageChange

なんてこったい。
矩形の上に画像をドラッグ&ドロップするだけです。
細かく画像の位置を調整したい場合は、「Object > Mask with Shape」を使えばIllustratorのクリッピングマスクと同じような事も可能です。

因みに、グルーピングしたアイテムを拡縮してもよしなに調整してくれます。
item
柴犬いい顔してますね。
しかし便利な世の中になったのぉ…


“リピートグリッド”は作業が楽しくなる機能

Adobeの公式動画で1番面白いと公言している機能です。
私も初めて動画をみた時にヒョエー!となったのはこれでした。

repeatGrid
簡単にいうと、繰り返しアイテムを自動生成してくれる機能です。
手順を説明します。

  1. 繰り返し使いたいアイテムを選択
  2. 右側のプロパティにある「Repeat Grid」ボタンをクリック
  3. 枠線が緑色に変わるので、ドラッグして好きな位置まで伸ばす
  4. 上下左右の余白を調整
  5. 1個目のサムネに複数の画像ファイルをドラッグ&ドロップすると、リスト全てのサムネが差し代わる

あら〜とても便利ですね。
リストやグリッドUIの場合、これまではアイテムを複製して中の画像も1つずつ差し替えていましたが、その手間がなくなります。
リピートしているのでテキストは編集できないと思いきや、それぞれ編集できます。
PhotoshopやIllustratorにも是非入れて欲しい機能です。

デザインモードはここが不便…

psdやaiで保存できない

プロトタイプで作った画面は、本開発に向けてpsdやaiに書き出してブラッシュアップしたくなりますよね。
せっかくAdobe製品なのに、現状xdファイルでしか保存できないのが残念です。
早めに追加して欲しい機能の1つです。


リアルタイムなデータ共有がしにくい

web上ではなくローカルで作業するので、複数人で同時に作業する際、共通のパーツを使いたい場合に不便が生じます。
弊社では複数のデザイナーが同時にプロトタイプを作る機会が増えてきているので、リアルタイムなデータ共有が重要になってきています。
ただ今後のバージョンアップでCreative Cloud ライブラリ連携が予定されているので、ライブラリ連携が入れば複数人でも作業しやすくなりそうです!

プロトタイプモード

プロトタイプモードとは、画面遷移を設定する際に使うモードです。
Prottを使った事がある方はイメージしやすいかと思いますが、
画面と画面を線で繋いでアニメーション設定をするだけで、画面遷移を確認できます。

設定方法

  1. 画面やボタンなどのパーツを選択
  2. 青い「→」をクリックして遷移先の画面までドラッグ
  3. アニメーションの設定

prototype

これの繰り返しです。簡単!
遷移時のアニメーションは上下左右にスライドとアルファのみになっています。

プロトタイプモードはここが便利!

プレビュー時に画面操作を録画できる

ヘッダー右上にある再生アイコンをクリックするか、command + Enterをするとプレビューモードになります。プレビュー時は実際に画面をクリックして遷移を確認することができます。
command + EnterはFlashでパブリッシュする時と同じコマンドですね。なんだか懐かしい!

preview

プレビュー画面の右上にある「Record」ボタンを押すと、画面操作を録画する事ができます。
この機能は、ユーザーテストで活用できそうです。
動画はmovで書き出されます。


画像は解像度毎に自動書き出し

File > Exportからアートボード毎に画像を書き出す事ができます。
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は他にもいろいろ新しいツールを発表していて、面白そうなのがいくつかあるのでまたご紹介したいと思います。

artwork3

ではまた〜

 

編集部オススメ

  • このエントリーをはてなブックマークに追加

あわせて読みたい記事

この記事を書いたメンバー

wam

wam

Designer

アイスが好きすぎてほぼ365日食べてるデザイナー。新規プロジェクトのデザインやディレクション、グラフィック系もロゴ・イラストなど色々やります。

ドワンゴデザイナー メンバー募集 ! !