【サンプルあり】Adobe Experience Designのポテンシャルがすごい【Xd】

こんにちは！ デザイナーのすずきです。
すっかり春ですね。新しい季節はわくわくしますね。

Adobe Experience Designとは

というわけで、あのAdobeさんからUXデザインツール、Adobe Experience Design（以下、Adobe XD）がリリースされましたので、さっそく使ってみました。
User experience, prototyping app | Adobe Experience Design CC

そもそも何ができるツールなの

カンタンにいうと、今まで紙でワイヤーフレームを描いてPhotoshopなりIllustratorでデザインカンプを制作して…といったWebデザインの一般的の制作工程を、この子だけで完結できるようになった！というかんじです。
特徴としては、とにかく速い！ 動作も速いし、もうなんかいろいろ速い!!

実際に架空のWebデザインをつくってみる

どれだけAdobe XDがすんごいのかというのをみなさまに体験してもらうために、架空のWebデザインをつくってみようと思います。
題材にさせていただいたのは、大正義ぱくたそさんでちょうど特集をやってた、ヴァイオリニスト「Yukiko」さんのWebサイトです。

まずはトップから

こちらからとりあえずAdobe XDをダウンロードして、起動してみましょう。あ、ちなみに現在プレビュー版のみのリリースで、Mac OS Xでしか提供されていません。Windowsユーザーのみなさんは今すぐMacを購入してください。

こんなかんじでデザインをつくりたいデバイスが選べる画面が出ますので、今回は一番左のiPhone 6を選択します。
ちなみに、下のUI KITSにはiOSやGoogleマテリアルデザインの基本画面がそのまま使える形であるので、うまいこと使ってみてください。

デバイスを選んだあとはこんなかんじの画面になります。ふだん使ってるPhotoshopなんかと比べると、ゾクゾクしちゃうくらいシンプルですね。
とりあえず、せっかくステキな素材があるので、大胆に使わせてもらおうとおもいます。画像をFinderからD&Dしてみます。

こんなかんじになります。触ってみるとわかると思いますが、いいかんじに画面端にスナップされたり、変形がデフォで縦横比固定だったり、画面からはみ出た部分は勝手に非表示になったり、とっても使い心地がよいです！

テキストいれます。ちなみに、テキストは「T」、選択は「V」でツール切り替えできます！

せっかくなので、今回はネイティブアプリ風にしてみます。

使い道がまだ固まってない素材なんかは、アートボードの外側にとりあえず置いておくことなんかもできます。

背景置いた上にボタンを配置してトップページのできあがり。

下層ページをつくる（レッスン）

アートボード名を選択して、option+D&Dでカンタンにアートボードを複製できるのです。

「R」で長方形ツールに切り替えできるので、単色背景にします。

画像を入れたい部分に長方形を配置して、画像をFinderからD&Dすると…

自動的にマスクされます!!

下層ページをつくる（メディア）

同じ要領で、先ほどつくった下層ページを複製します。

同じカードをリピートさせたいですね。そんなときは、リピートさせたい部分を「⌘+R」すると…

緑の何かがでてきました！ 引っ張れそうな部分を引っ張ってみると…

なんと繰り返してくれます!! もちろん横リピートもできます！ なんてこった！

Adobe XDの本領！Prototypeモード

いままでは「Designモード」でデザインをつくっていたわけですが、Adobe XDの本領発揮はここからです！
クライアントにデザインだけ提出するのはなんか味気ないなぁ、と思っていたアナタ！ 朗報です！
画面左上のモード選択で「Prototypeモード」を選択しましょう。

こんな画面に切り替わります。
下メニューのアイコンを選択しましょう。

おや？何か矢印のようなものがでてきました…
試しに別のアートボードに引っ張っていってみましょう。

そうです！指定の要素を選択すると画面遷移が指定できるのです!!
実際にいろいろ指定してから、「⌘+return」でプレビューしてみると…

こんなかんじになります。
動くだけですごくちゃんとしてる感が出ますね！
ちなみに、できあがったプロトタイプは、クライアントに提出する場合なんかには、カンタンにシェアができます！
今回作ったプロトタイプは　http://adobe.ly/1WyAWOA　より。

まとめ

かけあしではありましたが、Adobe XDのすごく雑な説明はこんなかんじです！
私もこれからどんどん使い込んでいかなければいけないのですが、少しでもAdobe XDの魅力が伝われば幸いです！
また、まだプレビュー版ということもあり、いろいろ機能追加していく予定もあるそうなので、
ぜひ、こんな機能あったらいいな、と思った方はこのへんでどしどし募集しているようなので、国内でもAdobe XDを盛り上げていければいいですね！

以上、Adobeさんからの提供はまったくありませんでしたが、Adobe XDの紹介でした！

かしこ。