ワイヤーフレーム制作にオススメな「Adobe XD」の成長がヤバい!

ZIMA


ワイヤーフレーム制作にオススメな「Adobe XD」の成長がヤバい!

こんにちは! ディレクターの ZIMA です。

先日チームのみんなに連れてってもらった某馬肉居酒屋のお手洗いに「死ぬこと以外かすり傷」って筆書きされた紙が貼ってありました。

いやいやいやいや……。

 
全然関係ないのですが、世の Web ディレクターのみなさんに質問です。
皆さんは WF (ワイヤーフレーム)制作ツールには何を使っていますか?

Cacoo、Sketch、STUDIO、Photoshop…

昨今、UI / UX の重要性とともにいろいろなツールが増えてきましたが LIG では Adobe XD をつかっている人が多いようです。他の Adobe 製品と同じショートカットキーが使えるのが特徴で、Adobe 馴れしてることもあって僕自身も特に違和感なく使えました。

詳細については、過去にずんこさんが詳しくレビューしているので下記記事をご覧ください。

 
そんな Adobe XD の特徴は、専用のユーザーフィードバックサイトがあることだと思います。Adobe の記事によると、実際にフィードバックがアップデートの優先順位に影響しているとのこと。良い機会なので、2017 年に入ってからアップデートされた機能を調べてみました。

今回は、そのなかでも WF を作成する際にとても役に立っている機能 3 つをご紹介します。

▼目次

ソース元:Adobe Creative Station
>> https://blogs.adobe.com/creativestation/serialization/adobe-xd-update

 

シンボルのオーバーライドと一括更新

item001

シンボルは Adobe Illustrator で重宝されている機能のひとつですよね。
XD でも同様に、例えば共通するナビメニューや見出し、ボタンなど全体に繰り返し使用するオブジェクトをシンボル化し、カンタンに登録・利用できるので、格段に時間の節約になっている嬉しい機能です。

2017 年アップデートされた機能は、貼り付けた個々のシンボルインスタンスのカスタマイズが行えるようになったこと。おかげで「ここだけ変えて」って言われるオーダーにも困らず対応できちゃいます。もちろん すべてのインスタンスに適応することも可能ですから、ナビメニューを一気に変更したりすることもすぐにできてしまいます。

ページ数の多い案件の WF 制作に活用できますね。

 

インタラクションを保持したコピー&ペースト

item002

XD のプロトタイピング機能はぜひ使ってみてほしいです。

ページ内のオブジェクトからリンク先のページにワイヤーをつなげると、プロトタイピングの際にリアルなインタラクション体験ができ、実際の画面推移をイメージしやすい WF が作成できます。デザイナー、エンジニアとのイメージ共有にもとても役立ってます。

 

item003

2017 年アップデートされた機能は、オブジェクトのコピー時にこのインタラクション機能も保持されるため、シンボルと同様 繰り返しの作業が非常にスムーズになりました。一度生成したページの機能までコピーできるのは非常に効率的ですね。

 

コメント機能

item004

2017 年のアップデートでもっとも嬉しい機能かもしれません。

作成した WF のプロトタイプをお客様やチームのデザイナー、エンジニアにオンライン共有する際に、画面上にコメントを書き込める機能なのです。表示されているアートボード上にピン留めできるので、どの部分に関するコメントなのか、かなりわかりやすくレビューしあえるので とても便利です。

以前はレビューを別画面で表示させていたので、ひとつのツールで完結できるようになり時短につながりました。さらには入力したコメントを「解決済み」にするボタンが増えたので、レビュー側も製作者もコメントの見落としを防げて助かります。

 

まとめ

Web 制作のディレクターの役割において、いかにチームの作業効率を上げ、クライアントとの疎通を円滑におこなえるようになることはとても重要なことです。実際、WF ではイメージが伝わらず、デザインフェーズに入ったあとでレイアウトや画面推移について変更が生じたケースが多いのですが、今回紹介した Adobe XD の機能を活用することで、クライアントともリアルなイメージの疎通ができるうえに、修正が入った場合でも迅速に対応できるのではないでしょうか。

これからも成長し続ける Adobe XD から目が、いや手が離せません!

 

ZIMA
この記事を書いた人
ZIMA

ディレクター

関連記事