2016年11月までのAdobe XDをおさらい

Risa Yuguchi
12 min readNov 30, 2016

2016年3月のプレビュー1から2016年11月のベータ1まで

こちらは、Adobe XD Advent Calendar 2016の1日目の記事です

2015年10月、Adobe MAX 2015で紹介されたProject Cometのリピートグリッドの衝撃はとても大きかったです。5ヶ月後の2016年3月プレビュー版が公開され衝撃は事実だったことがわかりアップデートを重ねた11月とうとうベータ版に昇格!そこで国内では比較的Adobe Experience Design(以下 Adobe XD)自体をよく使い込んでる自分が、実際に使っていて記憶に残るアップデートを感想を交えまじえて振り返ってみようと思います。

3月Preview 1:早い軽い気持ちいい。しかし…

初のプレビューは何と言ってもこの3つに未来を見ました。

  • 起動の速さ
  • 一瞬で行われる画像のマスク
  • 噂通りのリピートグリッド

あと、…Adobe StockからダウンロードしたAi形式の日本地図をコピペしてプロトタイプできたのは今思い出しても感動ポイントです。

ちょうどフラットデザインの会員サイトの一部リデザインを依頼されていたので3月から実戦投入していました。PhotoshopのExtractを代表するHTML化するための機能はほぼなかったので、あまり巨大なサイトだったら使わなかったと思います。

余談ですが…この時使い方がわかっておらず、Adobe XDで作ったアイコン画像をSVGで書き出しIllustratorで直す作業をしていたのでぶっちゃけアートワークには使えないなぁと思いました。そんなことはなかったんですが。

XDだけで描いた絵。段々と機能が増えて表現力が上がる

一方で、この頃からエンジニアさんとかデザイナーじゃない人からの受けがびっくりするほど良かったのです。プロジェクターに映しながらアイデアを固めていくという用途には本当にむいています。

この時のAdobe XDにはテキストの字間行間を変更する機能がありませんでした。

4月Preview 2:字間・行間設定が来た!

本当はこれが一番の目玉機能じゃないんですが、4月プレビューが公開されるその日の深夜の公式放送で一番記憶に残っている機能です。2016年なのに行間が変えられるだけで歓声が上がるのはAdobe XDだけ!

余談ですが、この嬉しい機能のお陰でエリアテキストが表示されなくなったデザインがあり、幅や高さを一個一個直したのはなんともプレビュー版らしい思い出です。

もちろん一番大きかった機能追加はテキストデータをドラッグ・アンド・ドロップできるようになったこと。

日々リピートグリッドを使ってると意外と不満が出ます。

  • 任意の順番に並び替えできない
  • 配置変更に弱い(1列→2列のような配置変更すると順番がずれずコピーされる)
  • 上方向や左方向に伸ばせない
  • コンテンツ量によって高さが任意で変わらない

都道府県名を並べるようなコンテンツを作っていると特に上2つ太字のものが作業量を増やすのですが一気に解消されました。

この頃の悩みは…Adobe XDでスライドを作るようになっていたので部分的にフォントや色が変えられないという点でした。

5月Preview 3:テキストの部分スタイル変更

悩むと解決するって素晴らしい。確かAdobe XDで作ったスライドで発表した翌日くらいだったような…。あまりリピートグリッドと組み合わせて使う方はいらっしゃらないですが、このインパクトは大きかったです。

嬉しすぎてカレンダー考えちゃいました。

このネタで更に記事も書いちゃいました。

プロトタイピングの目玉はアートボードのスクロール。コレがあるだけで随分違うんですが…スクロールできると同時にStickyなヘッダとかが欲しくなるのですが2016年12月現在まだ開発中ですね。表に出て来るの楽しみです。

6月Preview 4:日本語UI現る

アプリケーションの世界にいて、英語と類似性の少ない言語は割りと後回しにされがち。でも、Adobe XDは英語の次に増えた言語群に日本語が入って、日本はよく力を入れられている地域だよと言われるのが実感できました。5月にプロトタイプツールを特集した勉強会でも日本語化はいつされるのかという質問があったりしましたが、ここで導入のハードルが一気に下がりました。日本語ブログ記事も増えて楽しかった時期です。

デザインモードでは、Photoshop・Illustratorユーザのあこがれ()である背景ブラーが登場です。この機能は、背景ブラーを設定したシェイプより下にあるオブジェクトをぼかす機能なのでオブジェクトの重ね順を強く意識させる機能でもあります。

丁度この頃Windows 10 UWP版のチラ見せがあったり、Facebookに今もありますがレイヤー機能のチラ見せが行われていました。Adobe XDの開発チームは期待を煽るの上手です。

7月Preview 5:オブジェクトブラー

前のアートボードへ戻る設定は、画面遷移を考える上でとても大切(特にモバイルは戻る機能を多用する場合が多い)な機能なのでこれには助けられました。

PDF書き出しは日本人にとっては今のところ残念機能。見た目の確認だけならいいですがフォントの一部アウトライン化されたりして普通のPDFとして扱うのはつらいです。SlideShareへのアップに使いにくいところもポイント。

初めてAdobe XDがフリーズ?仕掛けて事なきを得る

オブジェクトブラーは、ウィンドウ右側のプロパティインスペクタでシェイプに対して設定できるエフェクトの一つです。オブジェクトブラーと背景ブラーはプルダウンメニューでの切り替えになるため同時にかけられません。あまり使わないのですが…3月から仕事で使っていてはじめてAdobe XDが固まりかけたので記憶に残ってます。

Adobe XDはプレビュー版といえど、ほぼ落ちることもフリーズすることも少ない安定したアプリです。しかし、オブジェクトブラーをリピートグリッドで繰り返している要素に使ったところ、8GBのメモリを積んだ2015年のMBPがしばらく返ってきませんでした。ちょっとした数でもオブジェクトブラーは重いのでやっぱり避けたほうが良いです。

グラデーションを夢見すぎてブラーで再現させた人は少なかったようです。Illustratorからコピー&ペーストで持ってこられますしね。

8月Preview 6:期待の線形グラデーション

Illustratorからコピー&ペーストするより、同じデザインモードで自在にグラデーションが設定できると気持ちがいいもの。ストレスから解消されてデザインにグラデーションを盛り込みすぎたりもしました。Adobe XD以前のデザインは随分とグラデーションに頼っていたんだなぁと反省する良い機会に!

ベタ塗りとグラデーションはプルダウンメニューで切り替える

円形グラデーションも、Illustratorから持ってきさえすれば、色を調整することはできます。他の機能や詳しいことは公式ブログへ!

このバージョンから、リピートグリッドはシェイプ合成ができるようになっていてアートワークをXDで作るには便利です。

9月Preview 7:コツコツUXが向上

目玉機能は、Adobe XDで作業しているコンピュータにUSBでiOS端末またはAndroidフォンを繋いでリアルタイムプレビューができるモバイルプレビュー配信は嬉しかったのですが。

あえて上げるならこの2つ。任意の選択範囲にズームできるCmd+3と、やっとついた縦横比固定。これで作業速度が30%(適当な体感)くらい向上した気がします!

ドキュメント化はされてないのですがこんな改良点もありました。

  • テキストとシェイプの合成時、テキストがパス化されなくなった
  • Illustratorからコピーしたとき破線も描画できるようになった

10月の更新はAdobe MAXに注力するためということでおやすみに。

11月ベータ版:レイヤーが満を持して登場

一番嬉しかったのは書き出しのときのファイル名がレイヤー名になる点。これで毎度名前を指定して書き出すという手間がなくなりました。こういう手間って、Photoshopにスライスがなかった時代にしか味わったことありません(古い)。

シンボルも忘れてはいけない機能ですが、現在は私の使い方だと気になる点があり、使いみちが限定されています。せめてヘッダやフッタのような機能グループで登録しても使いやすければ…

  • 登録したときのままのサイズでしか配置できない
  • プロトタイプモードで内側のオブジェクトからリンクできない

といっても、パワフルな機能なのでこれからデザインするときにはどんどん使っていきたいところです。

まとめ

こうして振り返ってみると、この機能がくるとあの機能が欲しくなる順でリリースされたり、または開発中であるとUserVoiceで告知されたりとユーザの気を引くフローになっている事に気が付きました。

当初予告されていた毎月プレビュー版公開というのは100%実施されたわけではないのですが、着実な成長と変化があって8ヶ月間楽しく追っかけてきました。まだまだ他のUIデザイン特化ツールやプロトタイピングツールに比べると弱い機能もありますが、「考える速度でデザインする」この部分はずっと達成されていると思います。

3月から11月までどんどん機能が向上していくのに、ぜんぜん起動が遅くならない、操作が難しくならない、動作も重くならないAdobe XDに2016年12月と2017年も期待します。Windows版も!

--

--

Risa Yuguchi

UI Designer / Interaction Designer. Adobe Community Evangelist(2017-)