CSS NiteでAdobe XDの話がありました。デザイナーとコーダーでXDを使った場合の実演をおこなっていたのですが「便利だなあ」と思いました。
自分が体験してきたのはざっくりと、デザイナーさんがphotoshopでデザインをあげる、それをphotoshopで開きスライスする、サイズは定規ツールで測る、もし気になる点やコーディングが難しい点は印刷もしくはjpegに書き込んでデザイナーさんに相談する、といった流れでした。
ところがXDを使うとこれらの作業が１つのソフト内でリアルタイムに簡単にできるようです。ディレクターもXD上で修正指示も出せますし、どういった流れで修正が入ったかがコーダーも確認できます。こういったことができるソフトはZeplinなどいくつかあると思いますが、XDがおそらく一番使いやすいのだと思います。CSS Niteの参加者の方々も６割がXDの経験者でした。自分も出始めの頃に少し個人的に使ったことがあるのですが、今回のセミナーを機会にもう一度１から試してみようと思います。この１年で随分操作法もかわったようです。
XDを使ってみます
さっそく無料体験版をインストールしました。まずは、チュートリアルというものがあるので開いてみます。
なんかいろいろ出てきました。それぞれチュートリアルの内容が書いてあるようです。イラレやフォトショと操作方法が似ているので拡大してみてみます。とりあえず、指示通りに進めましたが、、わかりにくい。。。。とりあえずリンクを設定する方法をやってみました。
まずは、プロトタイプにして
すると三角形が出てくるので矢印をページにつなげる。
そしてプレビューを押す。
するとプレビュー画面が出てきて、リンクも設定されました。
おおお！これは便利！！どんな動きをするのかをいちいちhtmlをその場で書かなくても良いのがいいですね！今回はシンプルですが、アニメーションとかもつけられるそうで非常に動きの確認がしやすいです！！ほかのプロトタイプツールに比べて非常に使いやすいです！まあAdobe製品に慣れているからだと思いますが。。
そして、リストを作る時は、デザインにしてリピートグリッドを選択して動かすと、、
おおお！すごい早い！いちいちphotoshopでプロトタイプ作る際は余白を計算したり、何回か工程を挟まないと綺麗に増やせなかったのですが、これはワンクリックできれいに均等に増やせて良いですね！そのほか、ヘッダーの固定やスクロールの設定もすぐできました。アセットを利用することで、色変換もすぐにできますし、なによりプレビューの動きを録画できるのが良いです！動きを見る場合、今までhtmlで仮サーバにアップスマホの録画機能で動きを録画〜〜といったややこしいことをしていたのですがXD上で動きを録画でき共有できるのは非常に大きいです。
とりあえずチュートリアルを一通り追ってみましたが、結論としては「そりゃXD人気ですよね」といった感想です。製作の流れがこれ１つで痒いところにまで手が届く、これを使って是非製作をしてみたいと思います！引き続き、勉強していこうと思います！
