days

日々の徒然

【AdobeXD】今更ながらXDを触ってみた。

スポンサーリンク


f:id:aya_ino:20180814185318j:plain

 

Twitterなどを見ていると、めちゃくちゃもてはやされているAdobeXD。
勤務先は分業でディレクターがワイヤーを書いているため、自分がワイヤー(サイトの設計図)を作ることは現時点ではほぼありません。
興味はあったものの、必要に迫られるわけでもなくあまり時間が割けなかったので保留でしたが、XD無料化に伴って勤務先のディレクター陣もXDの利用を始めたので、この度チャレンジすることにしてみました。

とは言っても普通のディレクター/デザイナーさんにとっては、もう言うまでもない話ばかりなのでお恥ずかしいのですが、ワイヤーツールはほぼ初見の自分が触ってみた感想です。

 

 

AdobeXDとは

ざっくり言うと、2017年10月にAdobe社からリリースされたWebやモバイルデザイン向けのUI/UX系ツールです。

webサイトや、モバイルアプリなどのデザインに適した、オールインワンのUX/UIソリューションです。デザイン、プロトタイプ、共有、すべてをXDでおこなえます。
https://helpx.adobe.com/jp/xd/how-to/what-is-xd.html

つまりWeb・モバイルデザインのUI/UXデザインからプロトタイプ(画面遷移や遷移アニメーション)を作成し、共有まで一括でできてしまう優れもの。
リンクの飛び先(画面遷移)も設定でき、目視で確認できるので、あれ?この導線おかしい?なんてことが減ると思われます。

 

 

AdobeXD使用前の状況

それまでのワイヤーはPowerPointで作成していました。
Photoshopのショートカットが指に染み付いてしまっているので、ついキーを押し間違えてオブジェクトが意図したのと違うところへ移動してしまったりして「うがあああああああっ!?」となることが多々、多々…。
あまりにもPhotoshopが身にしみ過ぎているので、Photoshopだとできるのにぃぃぃ!とイライラすることも。
「同じ場所にペースト」って地味に使う気がするのだけどPowerPointにそんな機能あるのですかね。
調べたけれども出てこなくてしょんぼりしました。

 

 

触ってみた

いきなりワイヤーを作るのはまだハードルが高いので、Adobeさんで配布されているキットを利用してどんなことができるのか見て見ましょう。

 

1. 先ずはXDを開きます。

f:id:aya_ino:20180814185808p:plain

 

 

2. メニューの「ファイル」→「UIキットを取得」→「ワイヤーフレーム」を選択するとAdobeの中の人のBehanceへ飛びます(ブラウザ)。

f:id:aya_ino:20180814190343p:plain

 


そこから、「Download Kits」を選択し、ワイヤーフレームキットをダウンロード。

f:id:aya_ino:20180814190427p:plain


3. 展開するとWeb用とMobile用で別れていますので、とりあえずWeb用のファイルをオープン。

f:id:aya_ino:20180814190522p:plain

 

4. こんな感じでWeb用のワイヤーモックが入っています。

メニューやフォーム、フッターなどサイトに最低限必要なUIが詰まっています。

これをコピペして必要に応じて改変していけばかなりの時短ができそうですね。

f:id:aya_ino:20180814190555p:plain

 

 

5. XDで共有したり、モバイルでプレビューできたりしますので、モバイルの方にアプリを入れておくと便利。

f:id:aya_ino:20180814190636p:plain

 


6. モバイルプレビューのやり方は、Adobe Creative Cloud FIles にファイルを入れるだけ。
 Adobe Creative Cloud FIlesとはどこじゃ?!というと、ここにあります。

 自分のアイコンの横にある縦三つの点をクリックすると、以下のようなメニューが開きます。

f:id:aya_ino:20180814190656p:plain

このフォルダを開いて、プレビューしたいデータをぽいっと放り込みます。

 


7. モバイルでプレビュー。

Adobe Creative Cloud FIlesにぽいっとするとすぐにモバイルアプリの方でも反映されます。

 

f:id:aya_ino:20180814190858p:plain

 

(データの選択ミステイクです、こちらWeb用ワイヤーなのでちょっとおかしなことになりましたwモバイルのファイルを選べばもっと感動できたはず。。。)

 

f:id:aya_ino:20180814190844p:plain

 

 

8. いちいちファイルを持ってくのが面倒なんじゃああぁ!という人には、Macのみになりますが、USBで繋げば即反映(ライブプレビュー)されるのでMacユーザーには超便利機能かと思います。

 

f:id:aya_ino:20180814191016p:plain

 


軽い軽いと言われているのですが、私の会社PC(Win)ではズームなどの際にカクカクしてしまいます。
それと、ズームなどをした後にハンドツールを使う と言うことを何度か繰り返していると、固まります。ほぼ必ずと言っていいほど。
これは自分のPCだけなのか、Windows全体で起こる事象なのかわかりません。
しかし家のMacの方ではスムーズに動き、固まることもないので、おそらくWinの方で何かカクつく原因があると思われます。
また、MacとWinでは、Winの方に使える機能があると聞きましたが、さらっと触っただけの現時点ではどの部分かはわかりませんでした。

ショートカットキーの使用感はPhotoshopとやや違い軽くストレスは感じますが、PowerPointと同様に慣れの問題かもしれません。
どう違うかと言いますと、Photoshopでは指を離さなくてもそのままハンドツールに切り替えられたのですが、XDでは完全に離してからでないとハンドツールのショートカットを認識してくれないのです。
それと、アニメーションズームとかが効かないのも地味にストレスですね…。

 

 

個人的にすごくいいと思った機能は

  • 画面遷移(リンク)設定ができる(「プロトタイプ」タブ内でできます)
  • リピートグリッドでめっちゃ楽
  • かっこいいUIキットが無料で充実している
  • フォントやカラーなどのアセットがある

PowerPoint以外のsketchなどのツールを触ったことがないので比較はできないのが痛いところですが、ざっと触った感想です。
料金的にもsketchなどと比較する人も多いと思いますが、Adobe CreativeCloudコンプリートプランを利用されている方にとっては、バンドルされている分使いやすいかと思います。
XDはMac・WInどちらでも使えると言う点も、会社ではWin、家ではMacという自分にとっては高ポイントです。

 


XDの今後は?

個人的にAdobe使いの自分としては、PowerPointなどよりはずっと使いやすい。
Photoshopを使えないディレクターが使う分には高機能で良いと思います。
が、デザイナーがワイヤーを作ろうとした時、操作感がPhotoshopに近いだけに「Photoshopならささっとできるのに!!」というジレンマがかなり生まれそうです。


将来普及するか?はやや微妙な気はします…。
操作感がもっとPhotoshopに近づけばもっと流行る・・・のかな・・・?

 

 


ひとりごと

ぶっちゃけてしまうと、なんならPhotoshopの中に「ワイヤーモード」として切り替えできるようにすれば(Photoshopユーザーは)楽なんでない???と思ったり思わんかったり…。
そうなるとただでさえ重いPhotoshop自体が重くなってしまうのと、単体販売(今は無料ですが将来的に)できないと商売にならないからなんでしょうね。
大人の事情ってやつですかね。


本当に基本中の基本の操作しかいじっていないので、まだまだすごいポイントがあるはずです。
機能的にはとても使いやすく便利だと感じるので、これからに期待!という感想でした。

 

 

世界一わかりやすいAdobe XD UIデザインとプロトタイプ制作の教科書

世界一わかりやすいAdobe XD UIデザインとプロトタイプ制作の教科書

 
Adobe XD CC Classroom in a Book (2018 release)

Adobe XD CC Classroom in a Book (2018 release)

 
Adobe XD Webプロトタイプツール―Webデザインに動的要素をプログラミングなしで盛り (I/O BOOKS)

Adobe XD Webプロトタイプツール―Webデザインに動的要素をプログラミングなしで盛り (I/O BOOKS)

 

 


スポンサーリンク

 

プライバシーポリシー