Adobeのプロトタイプ作成ツール「AdobeXd」を触ってみた。
「UI/UXのデザインからプロトタイプの作成、共有まで。すべてを1つのアプリケーションで。」
このキャッチフレーズはXd公式サイトに載っているんですが、すごくないですか？
というのも、私は現在プロトタイプの作成といえばsketchでデザインしてProttでプロトタイプを作っているので、1つのソフトで完結するってすごい便利！こんなソフト待ってました！って感じでテンション上がりました。
（みなさんは初めてXdを使った時どんな感想を持ちましたか？）
という事で、今日は初めてXdを触った感想を書きます。
まずはソフトをダウンロード
ダウンロードは下記からできます。
作ったプロトタイプをiPhoneでプレビューするためのアプリもあります。
App Storeで「Xd」と検索すると出てきます。
iPhoneとMacをUSBケーブルで繋ぎ転送してプレビューできます。
初心者向けの基本操作
初心者向けの基本操作も動画で見れます。
「Xdができること」のイメージがつかめます。
新機能情報をチェックしたい時
よく更新されている様なので新機能情報などチェックするようにしたいです。
触った感想
デザインとプロトタイプ作成がこのソフト１つでできるのでsketch+Prottより作業時間が短縮できそう。現在sketchでのデザインに慣れているためXdでデザインするのに手間取っているが、これも使っていくうちに慣れると思う。
Illustrator・Photoshop・InDesignなどのAdobeの描画ソフト、sketchを使える人ならXdを覚えるのに時間はかからない。
・デザインの書き出し
ショートカット ⌘E
形式 PNG PDF SVG（JPEGは無い）
アートボードまたはオブジェクト単位で原寸書き出し。
sketchの様に細く1.5倍...など小数点の指定はできず、1倍、2倍、3倍しかない。
pdf書き出しは、1回で複数ぺージ書き出せるが、連結はされず単ぺージで書き出される。
スライス機能やドラックで書き出しができるsketchに比べ、Xdはそれができないので書き出しに手間がかかる。
書き出しに関してはsketchが断然有利か。
・オブジェクトや画像の配置
ドラッグで配置できる。（pdfは配置できない）
・プロトタイプの共有
その１ オンラインで共有できる（リンクを作成する必要有り）
その２ 作業者が録画したムービーファイルを共有
機能で感動したこと
リピートグリッド
タテヨコどちらにも繰り返しオブジェクトがコピーされる。
しかもオブジェクト同士のマージンも1箇所変更すれば全てに反映される。
各オブジェクトも1所変更すれば全てに反映される。（色とサイズ）
しかもテキストの内容は個別編集できる。
オブジェクトに画像をドラッグすると全ての画像エリアに挿入される。（違う画像を複数枚ドラッグすると順番よく挿入される）
シンボルツールがパワーアップしたような機能だと思った。
シンボルツール
ダイレクトに編集できるので便利（別ぺージでマスターを編集しなくてもいい）
画像の拡大縮小
Shiftを押さずに画像を拡縮しても、画像が変形することがない。
（でもこれに慣れてしまうと他ソフトを使う時注意が必要ですね...）
マスクをかけた画像のトリミング
普通だと、マスクで切られている部分（マスク外の画像）は見えませんよね。
そのためトリミング調整する時も「この辺りかな？あ、もう少し下だった...」なんてやってますが、Xdはマスクの編集モードになると画像全体が表示されるんです！！
なので「感」で合わせなくてもいいんですね。これ、地味な事だけど、作業する側にとってはとても重宝する機能ではないでしょうか。
ぼかしツール
簡単にモザイクをかけられる。Sketchでもぼかせるけど、私はこちらの方が簡単。
プロトタイプモードのプレビューモード
デザインに修正を加えるとダイレクトにプレビューに反映される。
プレビューしながら修正できるのがスゴイ。これはほんとに感激した。
まとめ
いままで使ってきたソフトには無い、目新しい機能がいくつかあってわくわくしました。
感じた事は、デザインしてプロトタイプまで作る人はXdが便利だと思うが、やはり画像書き出しの事を考えるとsketchが有利だと感じます。
自分が書き出すにしても、デザインファイルをそのままエンジニアに渡して実装してもらうにしても、書き出しはスムーズにできた方がいいな。
Xdが書き出しに強くなってくれたら嬉しいのですが...。
でもXdはまだ発展途上なので、これからの新機能追加に期待しつつ、案件に合わせてXdとsketchを使いわけようかと思います。
それでは、また〜。
