見出し画像

デザインチェックにXD使ってみた

話題のAdobeXD!早くて簡単便利!
Illustratorなどで制作していると、いきなりツールを変えるにはハードルが高い、何をどうすればいいか悩みながら使い続ける中、ツールを変えなくても活用できる使い方があったのでご紹介します。

XDでデザインチェック

デザインチェックは、1.Illustratorで制作→2.画像書き出し→3.ブラウザにアップロード→4.チャットツールなどでやり取りがありました。
XDのプロトタイプ機能を使えば3と4がスムーズに行えるようになりました…!

プロトタイプ機能

「共有」リンクから「プロトタイプを公開」を選べばブラウザ上で閲覧できるURLを生成してくれます。XDのアートボードに書き出したjpgを配置して公開するだけ!html書かなくてもボタンひとつで完結!

「共有」にはパスワードを設定できるので安心。
さらにベータ版ですが、招待した人だけに共有できるプライベート機能もあります。

XDでコミュニケーション

デザイン確認後、チャットツールやメール、電話などやり取りが発生します。全てカバーできるとは言いませんが、XDのコメント機能で集約できます。

アートボードにピン留め

機能指示や修正箇所にピンを立ててコメントを書いてやりとりができます。番号を振っていけるので、特定の箇所にコメントがつけれたり「解決済み」などステータスも変更できるので便利!

※コメントの通知やコメントが多くなると色々埋もれてしまうのが難点。

XDで進行管理

ページが複数あるサイト制作は、サイトマップやダッシュボード的な画面をXDで作成すれば、制作中のページの進捗確認に使えます。

サイトマップとページ分のアートボードを作成し、XDのプロトタイプモード(ページ内の細かな画面遷移設定に使われる機能)でリンクを設定するだけ!

修正後はリンクを更新するだけなので「どれが最新ですか?」や「修正終わってるの?」などのやりとりも防げます。

まとめ

いきなり制作ツールを変えなくても一部の機能だけで充分使える

足りない機能がある事だけに注目せず、併用して円滑に制作ができる点を探しながら使ってます。
もう既にこういった使い方をされてる方が多いかもですが、まだまだIllustratorやPhotoshopメインで制作されてる方の参考に少しでもなれば嬉しいです。


この記事が気に入ったらサポートをしてみませんか?