Adobe XD CCを触ってみる

ついに正式版がリリースされましたね。

筆者はディレクターなのですが、ポジション上ちょこちょこデザインを触ることがあるので
新しいツールにはとても興味を惹かれるところであります。

弊社はPhotoshopをメインのデザインツールとしているのですが、使用経験のある方はご存知だと思いますが
とにかく重い。

スペックから言えば申し分なく、むしろ日々使うごとに新しい機能を発見するくらいには出来上がっているツールですが
ノートPCでIllustratorと同時起動するとカクカクするという経験をしたことがある方も多いはず。

もっとお手軽に、（お洒落なカフェなどでイイ気になってノートを開きサクサク仕事ができるような）
なおかつWeb制作に特化したツールはないものか、、

 

というわけで、今回は今注目を集めている、“Adobe XD CC”を触ってみた感想です。

 

UI

基本的なUIは上記の通り。超シンプルです。

少しoffice系に似ている…？

デフォルトだとツールボックスが左側にあったり各種調整ウィンドウが右側にあったりするのは、他のAdobe製品を踏襲している感じ。

Photoshopなど他ツールを使い慣れている方にとってはこれは地味に嬉しい。

 

使用感

これは私の完全な主観ですが、

IllustratorとPhotoshopを足して2で割った感じ。

オブジェクトツールで図形を描いた後に選択ツールに持ち替えないと移動はできないけど、レイヤーの概念はない、みたいな。

Photoshopの自動選択モードを常にONにしている、みたいな。

最初はほんの少しだけ、クセを感じるんじゃないかと思います。

 

機能面

 

リピートグリッド

恐らくXDの一番の訴求ポイントなんじゃないかっていう機能。これが書きたいがためにこの記事を書いたと言っても過言ではありません。

画像を選択して、

 

リピートグリッドボタンを押したら、

 

あとは図形を大きくする時のように、下にドラッグ＆ドロップしていくだけ。

これだけで、コンテンツの複製ができます。

 

ブログサイトなど、リスト形式のコンテンツがある場合はこれで一瞬です。

ちなみにいちいち余白を計算する必要もなく、

余白をドラッグ＆ドロップで一括変更が可能です。

これ実際に触ってみるとめちゃめちゃ楽しいし感動です。動画上げたいレベル。

 

新感覚プレビュー機能

右上にプレビューボタンがあるので、ワンクリックで実際のデバイスでのプレビューが試せます。

ページのどこまでがファーストビューとして見られるのか、アートボードにガイドも引いてくれます。親切。

 

デザインモード・プロトタイプモード

リピートグリッドに次ぐ第二の特徴として挙げられるのがこのプロトタイプモード。

左上のタブから、デザインモードとプロトタイプモードの切り替えができます。

デザインモードは通常のPhotoshopのようなデザイン用の画面ですが、プロトタイプモードは実際の画面の遷移を指定し、プレビューで挙動を確認する画面です。

 

上の例で説明すると、ボタンの遷移先を右のアートボードに設定しています。

この状態でプレビュー確認をするとボタンが押せるようになっており、実際に押して右側の画面へ遷移することを確認できるようになります。

 

遷移先の指定も、例のように線をドラッグ＆ドロップして繋げるだけ。とっても簡単です。

 

総評

結論、乗り換えるべきかどうかですが、

Webデザインの観点から考えると、もう少し先な気がしています。

理由としては

・他Adobe製品との互換性がイマイチ（特に.xdをPhotoshopで開けないのがちょっと痛い）

・比較対象としてよく挙がるツール、Sketchに搭載されている最大の武器“自動CSS書き出し”が未実装

このあたりが強いです。

少しアプリ制作向けかもしれません。

 

ただし、XDは今かなりのスピードで開発、アップグレードが行われており、上記のネック部分を解消できる日も近いのではないかと言われています。

外出先でノートを開き、気軽にデザイン制作ができるようになれば、益々効率化が図れそうです。