はいさい（どうも、こんにちは）、南の国からやってきた、やんばるです。
今回はとある勉強会で便利だと教えて頂いた、Adobe社謹製『Adobe Experience Design（呼称：Adobe XD）』をご紹介致します。
『Adobe XD』はWEBに特化した一つのアプリケーション。プロトタイプを作成し、制作物の共有までの一連の流れを行うことができるツールなんです。
ちなみに現在（2016年3月末時点）公開されているのはベータ版。つまり無料で使用することが可能です。
これは製品版になる前にインストールしなきゃ。
「使命感」や「人柱」といった感情に駆り立てながらも、ではインストールッ！！
「Photoshop」と何が違うかって！？
「Photoshop」の場合、アートボードを複数作成したり、解像度の高い画像を配置した場合にデータが重くなることがよくありますよね。その度にイライラ。
その点『Adobe XD』では、一つのホームページのデザインをアートボードで丸ごと管理することができるのが強みだったりします。重い画像などを配置しても動作が軽く、これまでのAdobe製品と専売特許とも言える “重さ” はどこへやら。見違えるほど軽量に作られています。
極端な例を挙げるとすれば無尽蔵にアートボードを作成しても軽いんですね。これなら一つのデータで複数デバイスのワイヤーフレームデザインを管理することができそうです。
『Adobe XD』で大まかな遷移や遷移時の動きなどをワイヤーフレームで作成すれば、デザイナーやエンジニア間の出戻りを少なくすることもできそうです。スムーズな運用が実現できれば、工数自体の削減できそうな感じですね。
また、ユーザインタフェースも秀逸で、可能な限りカンタン、かつ直感的にプロトタイプを作成できるような構成になっています。非常にシンプルなので、どんな方でもデザイン構築が可能になるのではないでしょうか。
そしてプロトタイプ作成で忘れてならないのは、作成課程の確認作業です。
やっと制作物ができあがってそのイライラから解放されたかと思えば、まさかのデザイン変更。「Photoshop」の場合であれば、共有するためにJPEGで毎回の書き出し作業。さらにイライラ。。。
その点『Adobe XD』では、作成したものを動画やURLで共有することも可能です。特に便利で実用的なのはURLでの共有。URL共有の場合、Googleのスプレットシートのようなコメント付与機能も付いているため、修正の指摘などを制作物に直接手をいれることなくコメントでのキャッチボールが可能になるのです。
※上記画像はURLをPCブラウザで共有した場合の画面です
さっそく『Adobe XD』を使ってみた
『Adobe XD』ではプロトタイプとデザインの二つの編集画面があり、そこでデザイン設計、画面遷移の設定を考えながら作成していくことになります。
＜デザイン編集画面＞
各種ツールは「Photoshop」や「Illustrator」と配置が似ているので、これまでのAdobeユーザであれば、すぐに勘所は掴めるハズです。
もちろん、初心者の方でもツールが最低限の数に絞られている上にナビゲートもあるので「Photoshop」や「Illustrator」よりもカンタンに扱うことができるのではないでしょうか。
＜プロトタイプ編集画面＞
プロトタイプに切り替えた時の状態で全選択すると、下記画像のように遷移図が丸見えになります。
ちなみにコレは後ほどご紹介するデモの設定課程の全貌です。下部にあるGifAniと同じ遷移設定になってます。シンプルもなにも、選択ツールしかないｗ！
