3月14日にAdobeの新デザインツール、Adobe XD(Experience Design)のPreview版が出ました！

3ヶ月経っててだいぶ今更感がありますが（汗）、どんな物だろうかと思って使ってみましたので、ご紹介します。

まず、起動時の画面がコチラ↓↓

プリセットでiPhone6、iPad、Web1920のサイズが用意されています。

今回はWeb1920を選んでみました！

デザイン画面が開き、これからアートボード上にパーツを配置してデザインしていきます！

XDでは、iPhone、Android、Windowsのデザインパーツが多数用意されています。上部メニューから『ファイル』→『UIキット』と進むと出てきます！

今回は『googleマテリアル』を選んでみます。

Androidで使われているデザインパーツがずらっと並んでいます！

これで制作にかかる時間も減らせそうですね！

この中からパーツを一個選んで配置してみます。

ウェブやアプリのデザインでは、こういったパーツは等間隔に何個も並べて配置したいですよね。

IllustratorやPhotoshopでは、作ったパーツをコピーしないといけませんでしたが、XDには『グリッドの繰り返し』機能があります！

パーツを選択した状態で『グリッドの繰り返し』ボタンを押すと、ハンドルが現れます。

ハンドルを掴んで広げると、

パーツが自動で繰り返されます！

そしてパーツ間のマージンも、隙間にカーソルを持って行くと、一気に広げることが出来ちゃいます！

どこか1ヶ所のマージンを調整すると全てのマージンが一緒に調整されるので便利！

もちろん上下の間隔も調整出来ます。

ハイ！これが一瞬にして出来上がりました！

今までは同じカタチのパーツを繰り返す時はひたすらコピーコピーコピー…だったのですが、作業時間数秒で終わってしまいます！

でも、各パーツの写真、文字はそれぞれ変えたいですよね？

では今からグレーの正方形に写真を入れ、『Title here』のテキストをそれぞれ書き換えようと思います。

まず挿入する画像と、文章を書いたテキストファイルを準備します。

画像を複数選択して、グレーの正方形へドラッグ＆ドロップすると…

全パーツに画像が入ります！しかもXDは自動でリサイズまでしてくるので、僕はつい感動してしまいました笑

お次は先ほどのテキストファイルを『Title here』にドラッグアンドドロップしてみます。

一気にテキストが入ってくれます！

ここでまたついつい感動してしまった私です（笑）

では一旦、ココまでの手順をおさらいしてみましょう。

  ①パーツを配置

  ②パーツを繰り返してマージン調整

  ③画像を一括挿入

  ④テキストを一括挿入

結果、かなり制作の効率化ができる！と感じました。

本当はまだまだ便利な機能があるのですが、長くなってきたのでまた次回ご紹介致します！