操作性から見たAdobe XD (2016年3月版ベータ版)

Adobe XDは、2015年のAdobe MAXで、AdobeのUXデザインツールとしてproject Cometという名で発表されたツールで既に紹介する記事もあるけれど、あえて一月近く利用した上で操作性から良い点と少し気になった点をまとめてみた。

重さを感じさせない動作

発表当時のデモの時から、その軽量性がアピールされてきたけれど、実際使ってみてびっくりするほど軽く使えている。全アートボードを表示するのも、各アートボードを実寸で表示するのも一瞬で拡大縮小できるし、どんな状態でも、オブジェクトの移動やプロパティ変更に妙な遅延を感じることもない。例えば、都道府県単位で選択・編集可能なベクターの日本地図を複数のアートボードに配置したりしても全く速度は変わらなかった。

私が主に使用しているMacbook Pro 13インチは2015年のもので比較的新しく軽さを語るのには向かないが、IntelliJ IDEA、IllustratorやPhotoshopと同時に使っていても特に動作が遅くなったりすることはなかった。Macbook Airでも問題なく動作するという話も聞いている。

この作業に負担のない軽さのおかげで、一つのファイルの中にすべての案を収めておくことができる。それが活かされるのは、次の3点だと感じた。

• サイトやアプリの全体の一貫性や画面間の整合性をとりやすい
• 各レイアウト案やワークフローの比較検討がし易い
• 試行中に出た捨て案や二番手以降の案になったものをいくらでも同じファイル上においておける

この３つは手書きの手軽さ以外の紙を使う良さと同じもので、今までのグラフィックデザイン環境と異なっている。

特に私は、利便性から1つのFireworks PNGにWebサイト全体のデザインを保存していたので、複数の画面案を負担なく表示して、全体とそれぞれのアートボードとを簡単に行き来でき、編集できる軽量さには魅力を感じた。

残念ながら、良さだけを感じてこの機能を使っているが気になる点がないかというとそうでもない。拡大縮小表示するときに小さなイラつきがある。

選択している、もしくは、作業をしているポイントを中心に拡大することが現状はできない。そのために、「実寸大に戻す」もしくは「拡大表示する」ショートカットキーを使う前に、画面の中央に、中心としたいものを表示してから実行する必要がある。すでに慣れているので大きな問題ではないが、Photoshopなどでも最近は選択したものを中心に表示の倍率を変更できるので、そちらに合えばより望ましい。

編集操作の一貫性

Adobe XDでは、アートボードに追加済みのオブジェクトならほぼなんでも矢印ツールで選択するか、ダブルクリックするだけでシームレスに編集が行える。Photoshopでも、Illustratorでも、移動を意味するツールは複数あって、しばしば使い方を学ぶ障害になった。しかし、Adobe XDはひとつのツールでとても分かりやすい。ダブルクリックで行えるシームレス編集にはいくつかあるが、Adobeのアプリとして新しいといえるものが2つある。一つがパスの操作、もう一つがグループ内の編集だ。

パスの操作

AppleのKeynoteの機能に似ている。直線でも、矩形でも楕円でもダブルクリックすればパスにアンカーポイントの追加・削除、ハンドルによる調整ができる。

シームレスなグループ編集

独自性の高い機能に感じた。シームレスなグループ編集と言っても、かつてのFlashやFireworksとは違って操作しやすい工夫がなされており、グループは一度編集状態にすれば、Cmd+Aの全選択でグループ内のオブジェクトのみ全選択できる。表示はシームレスでも、きちんとグループを編集するための環境が整えられていて、細部に気を使いながらも全体を見たいUIデザイナーには親切な仕様だ。

また、Adobe XDの看板機能でもあるリピートグリッドの繰り返される要素はグループになっているので、自分で作ったグループと同様にダブルクリックすれば自由に各オブジェクトのプロパティさえも編集でき、繰り返された要素にもすぐに反映する。近い機能をSketchも3.7で実装検討中だが、シームレス編集は採用されないようである。

編集操作の一貫性や、リピートグリッドの手軽さは、Adobeの今までのアプリとは違う、アプリとしてのUIの新しさを感じた。それはもしかすると、FlashやIllustratorがマシンパワーがない時代に設計されたことに由来するのかもしれない。

レイヤーが存在しない

Adobe XDの現行バージョンには、レイヤー(もしくはアートボード上に存在するオブジェクトを管理するための機能)が存在しない。これには、良い点と悪い点がある。悪い点はそのままレイヤーの利点でもあるので先に述べたい。

レイヤーが存在しないためにできないことがある

レイヤーのおかげで、そのオブジェクトが画面上どこにあっても、もしくは非表示にしていても、デザイナーはそれを常に把握することができる。残念ながらIllustratorはそのレイヤーがあっても、孤立点しばしば問題になることがあるけれど、メニューの中でこれが選択されているときはこれが表示になって…などを表現するのに便利に使っていた機能だ。UIデザインの過程が進んで、より完成に近い段階になった際にはこの機能は間違いなく必要になってくると思う。

ただし、初期のプロトタイプではそこまで必須な機能でなく、むしろレイヤーを意識しないことで利点もある。

レイヤーを整理する手間から開放される

気にしなければいいのだけれど、Web系のデザイナー歴が長いとどうしても外せないのが、後で見た時にわかりやすいレイヤー構造で作成することだ。こちらに意識が行ってしまうため、レイヤーが最初から存在せず思うがままに作れるのはプロトタイプを作成する上で助けられた。

特に、複製やアートボード間のオブジェクト移動時、必ず一番上にくることが明確でレイヤーの重ね順のどこに入るかを意識する必要がないのは気楽である。Photoshopも現在は同じ仕様であるのに、気持ちの上では思ったところに挿入されず、なんとも落ち着かない。レイヤーをどう使っていくかが既にできあがっている環境では、どの階層に挿入されるかはとても重要であるためだろう。

フォーラムでもレイヤーを求める声は大きいのでいずれ実装されるだろうが、現在のPhotoshopのような細かいレイヤー管理を意識させる作りでないことを希望する。

2016年3月版をまとめて

現時点(2016年3月版)のAdobe XDは、プロトタイピングの機能だけみると、残念ながら画面遷移止まりで、ユーザテストで実行させたいアクションを設定させたりする機能は操作性を考える以前に他のライバルになるツールに比べて弱い。

一方、さすがAdobeの作ったUXデザインのためのツールというか、今まで紙で行っていた初期のアイデア出しからの情報設計・レイアウト作業を単純にデジタル化するための操作性・機能性がとても素晴らしい。自分に限って言えば、クリエイティブな作業に負担にならない試行の簡単さ、比較時の使い勝手の良さから紙での画面設計作業は完全に捨てられると考えられた。

Adobe XDは月1ペースでβ版リリースを予定していると聞いているので(記事を公開する頃には出てそうだが)、次のリリースも期待したい。