弊社では、カンプデザインのツールとして「Adobe XD」を使い始めました。
Adobe XDを使えば、デザインはもちろんのこと、ページ遷移までをビジュアルでサクッと作れます。

デザイン作成のしやすさについては、公式サイトでも詳しく書いてありますので、そちらにお任せすることにします。
今回のテーマは、「Adobe XDを使った、デザインの確認」についてです。
良かったことや注意点を共有したいと思います。

Adobe XDを使って良かったこと

1) コメント機能を使って、修正点をブラウザ上で指定できる。
「プロトタイプを公開」機能でリンクを生成することで、カンプデザインをブラウザ上で公開することができます。そこから、コメントを残せるのですが、修正してもらいたい場所をピンポイントで指定することができます。

また、コメントに対してリプライができたり、「解決済み」ボタンをクリックしてコメントを非表示にすることも可能です。
これで、修正点漏れや、口頭での指示をすることでの時間ロスを防ぐことができます。

2) jsの動きを共有出来る
Adobe XDのプロトタイプ機能を使うと、画面遷移の動きを設定できます。
これを使うことで、2ついいことがあります。
1つは、クライアントへ完成イメージをより明確に伝えることができるので、食い違いを防ぐことができます。
2つめは、プログラマーの人に、画面遷移の動きをビジュアル的に共有出来ます。
「このボタンを押した時に、こういう動きにしてもらいたい」という説明を、言葉で伝えるよりスムーズです。

注意点
複数人での作業がしづらい
デザイナーチームの間で、xdファイルを共有して作業をしているのですが、覚えのないコンフリクトが結構な頻度で起きます。そのため通常のファイル名の後ろに「 (Conflicted copy from ****** on [年月日])」が付いたファイルがたくさん生成されてしまいます。
Adobe CCのストレージで管理する場合、同期がうまくいかないことが多い印象です…。

スマホサイトデザインを、スマホから確認がうまくできない。
スマホデザインの場合、ブラウザからプロトタイプを確認しようとすると、小さな比率で表示されます。ですので、クライアントさんへカンプ確認をお願いする場合は、プロトタイプ機能を利用するより、画像で切り出しての確認の方がスムーズです。

実機確認を行う場合は、Adobe XDのアプリを使うといいです。

定期的に行われるAdobe XDアップデートでどんどん改善されていますので、これからもっと使いやすくなってくると思います。