おすすめデザインツールAdobe XD vol,3

井上 美穂
制作のおはなし

さて、XDシリーズもいよいよ3回目です。

暑く語りすぎて少々間延びしてしまっている感もあるのですが、今回はいよいよ クライアントさんにも開発チームにも役立つデザインビューについてのご紹介です。

モックアップがボタンひとつで共有可能


まず、XDにはデザインビューという機能があります。

これはなんとデザインしたXDデータを即座にプレゼンテーション形式で シェアできるという優れもの!


デザインが完成したら下記のようにタブをデザインから「共有」に切り替えます。

すると、右側のカラムがこんな感じになっているので。

表示設定:デザインビュー

にして「リンクを作成」ボタンを押すだけ! (当記事だと「リンクを更新」になってしまっているのですが初回はここが 「リンクを作成」という表記になっています。)

するとこのような感じでデザインしていたのを同じ状態で人に共有ができてしまうのです!!

どうですか、これ!

このようにこのままクライアントさんにお見せできるんですよ!

いちいち今まで何か資料にまとめていた方はこのURLを1本発行して メールにペタするだけでOKになるのでものすごく時短になります。

デザインに直接コメントできるので認識のズレが少ない

先程のデザインビューですが、画面ごとにコメントを寄せることができます。

こんな感じですね。

複数ページがあればそのページごとにもコメントができるので一体どのページを修正して欲しいのかもすぐにわかります。

これを使うことで、デザイン修正でよくある「一体どこのことを言ってるんだか、わからない!」という齟齬をかなり防ぐことができてしまいます。

また、この次も素晴らしいのですが、それでも「ページのどの要素を修正して欲しいんだかわからん!」という場合もありますよね?

その場合におすすめなのが、「ピンを打つ」という機能。

コメント欄の右にあるこの「ピンアイコン」を選択すると

左のデザインビューにこんなガイドが出てきます。

あとは修正して欲しい要素に向けてクリックするだけです。

すると、右のコメントにひとつピンを打たれた投稿が入っておりますが、このように 細かな修正指示を楽にすることができます!!

これでディレクターさんからの修正指示に対し、非常に言いづらい「どれのことでですか・・・?」という質問をデザイナーが せずに済み、忙しいディレクターさんをイライラさせずに済みます。

そして、ディレクターさんも「ああー伝わらなかったー」と思うことが減るので 非常にコミュニケーションが円滑に進みます。

何より、このデザインビューがあればいちいちレビューミーティングを組まなくていいんです! これは大きい!!と思うのはきっと筆者だけではないはずです。

開発機能でコーディング情報もすぐに共有可能

さて、この素晴らしいデザインビュー、これで終わりではございません。

なんと、このデザインビューに加えて共有には「開発」というモード選択があります。

この「開発」を選択しまして、「リンクを更新」を押しますと・・・

コメントアイコンの下に2つアイコンが追加されておりますね。

こちらを見てみるとですね・・・

どうですか!!

そのデザイナーが使ったカラーコード、余白、フォントやサイズなどの情報が一気に見れてしまうのです!!

いままでコーダーさんはイラレからひとつひとつ読み取ってくださっていたと思うのですが、そんな必要がもうありません!

し・か・も!

この開発機能は全てコピペできるように作られているので各要素に関してはコピペでいけてしまうのです!

そして、もっというと、開発機能を有効にした時点で同時にアセットの書き出しも行えるので 画像や写真などを書き出し素材に指定しておけば勝手に書き出してくれるため、デザイナーさんはそれをコーダーさんに連携するだけでOK!

ここまで至れり尽くせりしてくれるのが、このAdobe XDなのです。

どうですか? もう使わない手はなくないですか?

特にこのコロナで対面ミーティングもなかなかままならない状況ですので いかにクライアントさんとうまくコミュニケーションをとっていくかというのは 本当に重要になってくると思います。

それが、このツールひとつでここまで解決できるというのは本当に画期的なことですよね。

全3回でお送り致しましたこのAdobe XD、いかがでしたでしょうか?

特にUI/UXを考える場合にイラレに使い慣れたデザイナーさんはそうでもないのかもしれませんが、筆者のようにイラレの機能を余すことなく使いこなすほどのスキルがない方はガイドに振り回されたりすることが減るのでデザインに集中できてそこもGOOD POINTだと感じます。

Creative Cloudのコンプリートプランに入っている方は使用できると思いますので、是非少しずつでもいいので覚えていくことをおすすめいたします!