• カミナリツイッターカミナリtwitter
  • カミナリフェイスブックカミナリfacebook
  • カミナリインスタグラムカミナリinstagram

山陰の情報を発信するカミナリ

ナビ

30

JUNE

ウェブTHURSDAY 2016 / 6 / 30

新しいツールを試してみました!

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』にドラッグアンドドロップしてみます。

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

ここでまたついつい感動してしまった私です(笑)

 

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

 

  ①パーツを配置

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

  ③画像を一括挿入

  ④テキストを一括挿入

 

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

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

 

山住英正隠しプロフィール画像

TEXT by

山住 英正やまずみひでまさ)

1983年、鳥取県米子市生まれ。
株式会社カミナリ WEBコーダー、デザイナー。

この人が書いた他の記事を読む