BLOG

  1. HOME
  2. ブログ
  3. WEB制作・デザイン
  4. デザイン
  5. 今更ながらAdobe Experience Design(XD)を使ってみた
by フクムラ フクムラ

今更ながらAdobe Experience Design(XD)を使ってみた

今更ながらAdobe Experience Design(XD)を使ってみた

こんにちは!フクムラです
梅雨の時期になってきましてジメジメジメジメ
出かけるのも嫌になってきますよね…

さて、今回はデザインツールAdobe Experience Design(通称Adobe XD)プレビュー版がリリースされてしばらく経ちましたが、気になっていたのでいろいろ遊んでみました!

Adobe XDとは?

Webサイトやスマートフォン向け、タブレット端末向けアプリのUIおよびUXをインターフェイスデザインなどができ、Designモードと、画面遷移や画面遷移エフェクトなどの設定が行えるPrototypeモードの2つのモードがあります。

ちなみに現在はMac OS X版のみですが、Windows10版、iOSとAndroid向けの専用アプリも出るそうですよ

ではさっそくやって行きましょう!

Designモード

まずXDを起動すると、どの画面サイズでデザインを始めるかの選択画面が表示されます。

xd_image01

iPhone6を選択すると、iPhone6の画面サイズのアートボードが開かれました!スッキリ!ツールバーこれだけ!?

xd_image02

そして少しいじってみたところ… 軽!サックサク動く!快適です
後からiPadやWebなど他の画面サイズを加える事も可能です。

xd_image03

メニューにある、File > Open UI KitにはApple iOS、Google Materialデザイン、Microsoft WindowsのUIパーツ群が収められており、これらを使ってデザイン制作を行えばスピードアップをはかれる事間違いなし!

xd_image04

リピート機能「Repeat Grid」

xd_image05

複製したいオブジェクトを選択し、ツール右上の「Repeat Grid」を選択すると緑色の枠で囲まれます。

そしてそのまま広げると…

xd_image06

楽!すごい楽です
一瞬で選択したオブジェクト複製され、マージンの微調整も可能です。

そして、この状態から複数の画像を持って行くと…

xd_image07

すごぉい…便利…
一つひとつ当てはめていく手間が省けて、一気に画像を変更することが出来ました。
(ちなみに矩形や円形のオブジェクトを用意しておけば、そこにドラッグ&ドロップすることでそのオブジェクトの形状で自動マスクされます。)

Prototypeモード

左のツールバーの一番下をクリックすると端末リストが出てきて、iPhone6を選択すると新しいアートボードが作成されるので中ページを作っていきます。

画面左上にある「Prototype」をクリックするとモードを切り替えることができ、配置したすべてのオブジェクトに対して画面遷移のトリガーを設定することができます。

オブジェクトを選択し遷移させたい画面まで引っ張るだけで画面遷移の設定ができます。その際の画面スライドやイージング効果なども設定することが可能です。

xd_image08

はい、これだけで設定は完了しました。
画面右上の再生ボタンを押すとプレビューをする事ができます。

xd_image09

さらにプレビュー画面は録画することができ、それを共有し確認することも出来てとっても便利!

終わりに

最近はLINEの着せ替えを自分でデザインして誰でも投稿出来たりするので、無料でつかえるXDを使ってやってみるのも面白いかもしれませんね

UIパーツをすぐに引っ張り出せたりと便利なのですが、他のデザイン機能をもっと強化してほしかったり、レイヤーサポートもされてないのでXDだけで作業を完結させるのは難しそうですが、簡単に直感的にUXデザインができるのがすごく魅力的でした

まだまだプレビュー版なのでこれからの進化に期待したいです!

ページの先頭に戻る