AdobeXDはいいぞ
今更自分が言うまでもなく、もはや各所でその利便性についての言及やまとめ記事があがっていますが、実際に実践で使ってみてメチャクチャ役に立ってるので、経験に伴う所感などを書きたいと思います。
前置き
自分はデザイナー職ではなく、エンジニアです。
バリバリグラフィックソフトを扱う人間の目線の記事ではありません。
要件定義で便利だったこと
みんな大好き要件定義！！自分の仕事では このシーンで1番AdobeXD（以下、XD）が活躍してくれています。
動作が軽快ということは本当にいいぞ
XDの長所としてよく語られる点ですね。
君ほんとにAdobeさんちの子？とききたくなる立ち上がりの早さと動作の軽快さです。これの何が本当に良いかって打ち合わせの最中で取り出しても会話のリズムを途切れさせないんですよ。大事。
話をしながらでもサクサク画面ワイヤーを作っていけるぞ！
自分は、打ち合わせのその場で話を進めながら大まかな画面ワイヤーを引いてイメージ確認や調整をするという進め方をよくやるのですが、XDが登場する以前は紙やホワイトボードを使っていました。
アナログな道具を使うのは、書きだす早さを重視した結果なのですが、やはり話が進むにつれて修正したり書き足したりしていると、どうしてもアナログだとゴチャゴチャしてきますので、その作業をそのままデジタルに置き換えさせることの出来た恩恵は大きいです。
次項でも触れますが、XDは、紙やホワイトボードの作業をそのまま代替させてもイケるぐらいサクサク使えてます！
（IllustratorやPhotoshopも同じように使えなくはないんですが、自分はデザインが本職でないこともあり、どうしても使い慣れてないと素早く作成や調整するのが難しいな〜と思っています＞＜）
XDは使いやすいぞ！
XDは操作要素が結構シンプルな構成なので、初めて使う場合でも割りと説明無しでガリガリ使えます。少々Adobeソフトのアフォーダンスが必要になるかなーと思うところもありますが、実際使ってみた感じでは数回トライ＆エラーすれば動作を察することが出来ました。
非デザイナーで普段からグラフィックソフトを扱わない自分でも とっつきやすくて、実戦投入のハードルがめっちゃ低かったです。
マジで結構な早さで作れる事を証明するためにGIFアニメつける
実際にどんなような感じでやってるのかGIFにしたいと思います。
架空の案件で「ある商品のキャンペーンで、クイズに答えてTwitterでつぶやいて応募」的なものがあったとしてやってみます。
「まずトップ画面として説明と導線をつくるじゃないですか」「うんうん」
「いくつかの設問画面を作るじゃないですか」「うん」
「最後に結果ページ出して拡散ってかんじでどうでしょう」
各画面のイメージ書き出すのにおよそ1分弱、3画面で3分弱ほどです。
決して綺麗な画面を書いた速度の話ではありませんが、打ち合わせの席にいる皆が画面の要素が何があるかを見てイメージをつかむことが大事なので、見た目の綺麗さについては強くこだわりません。
上のGIFで作成するような例であれば
「設問の選択肢は３つまでにしよう」とか「最後の画面は１００点じゃなかったらリトライボタンをつけるのはどう？」とか、そういった要素の追加・削除のイメージが沸きやすくなるという、その点が重要だと考えています。
その場ですぐに画面イメージを確認出来るのはマジでいいぞ
アプリやウェブサイトを作ってみてから気づく物事って往々にしてなくならないものですが、先に動かして動作のイメージをつかめることでそういった事柄を作る前に気づくことができるようになりました。
見た目だけじゃなく動きのイメージの確認もあっというまだぞ
画面がどう動くかもあっという間に設定して確認できます。
こうして「ここからトップに行くのは変じゃない？」とか、「利用規約とかの画面がなくない？」とかイメージを付けていったりします。
作ったイメージを共有するのも手軽にできるぞ
XDの共有機能を使うとオンラインで動作イメージを共有できます。
実際に、今回作ったものを共有したのがこちらです http://adobe.ly/2eSU49a
何が良いってプロトタイプの動作をブラウザで確認できるのがメッチャ良い！！！のです。
他のプロトタイピングツールだと、確認をお願いする相手にもそのツールの用意を要求しないといけないケースが多かったですが、そういった煩わしいことも無いのが最高に嬉しいです。
製作時に便利だったこと
正直、製作時の話は番外編みたいな感じですが、1個すごく助かった事があったので書いておきます。
画像ボタン量産するのに便利だった！
これがどういうことかというと、デザインフォントを使用している都合により、超大量の画像ボタンを作る用事があったのですが、テキストをドラッグ＆ドロップして大量の要素に一括設定ができる機能のお陰でとても素早く作ることが出来たのです。
調整がいる要素については、XD上でカーニングもできますよ。
注意点
SVGで書き出すとき、フォントがアウトラインにならないことや、枠線設定等がちょっとおかしいことがあったので、SVGで書き出したときは一度イラレでアウトライン化と保存をし直すのをおすすめします。
まとめ
AdobeXDのおかげで今日も仕事できてます。
他の方のXD活躍シーンも聞いてみたい感じです。では〜。