2017年10月に正式版がリリースされたAdobe のUXデザインツールの「Adobe XD」。「動作が軽い」「WEB制作に特化している」など使い勝手が良く、すでに活用を始めている方も多いと思います。
今回は弊社でのAdobe XDの活用方法を紹介します。
弊社でのAdobe XDの活用範囲
それからデザインでは以下のようにワイヤーフレームの制作からデザイン共有・フィードバックまで一連の業務をXDで完結させる制作スタイルを試験的に導入しています。
- ワイヤーフレーム制作
- プロトタイプ・UI設計
- デザイン制作
- デザイン共有・フィードバック
Adobe XDを活用するメリット
運用を初めて数ヶ月経つのですが数ヶ月運用する中で感じたXD活用のメリットをまとめてみました。
1.操作が簡単ですぐ使える・非常に軽い
同じAdobe製品なので当たり前ですがPhotoshopやIllustoratorに似たUIでほとんど違和感なく使い始めることができます。個人的にはFireworksやSketchなどよりも直感的に操作ができました。
2.ワイヤーフレームからデザインまで一括で管理できる
以前はワイヤーフレームはIllustorator、デザインはPhotoshopとツールが分断していました。
別に不便というわけではなかったのですが、同じツールで一括でできるようになったので、細かい作業を短縮することができました。
例えば、ワイヤーフレーム上で大まかなレイアウトが組まれた状態をそのまま引き継いでデザイン制作を開始することができるのでその作業が不要になります。
要は「ワイヤーフレームで定義されたレイアウトや要素をPhotoshop上で再構築する」という作業自体が不要になるので、仮に1P30分かかっていたとしたらかなりの時間短縮になります。
3.デザイン時の「地味に面倒な作業」を省略化できる
例えば記事一覧などで複数の写真が並ぶデザインなどの場合、デザイン段階ではダミー写真をいれるのですが、複数の写真をドラック＆ドロップするだけで一気に写真を入れ替えることができます。
このように「全体のイメージを掴む上には必要だけど地味に面倒な作業」がデザイン制作時にたくさんあるのですが、そういったものを省略し、本来のデザイン自体に専念できるのは大きなメリットだと感じます。
4.デザイン確認・UI・導線のチェックが簡単にできる
クライアントやチーム内でのチェック作業が非常に簡単になりました。以前のチェック方法はJPGなど画像で書き出すか、画像だけを入れたHTMLファイルを制作するなどでしたが、実際の画面でのイメージがわかなかったり、ひと手間多かったりと問題がありました。
XDのプロトタイプの公開機能であれば、１クリックでURLを生成することができます。修正があった場合などもURLを変えることなく更新が行えます。
場合によってはプロトタイプのコメント機能を使って、フィードバックやコーディングの指示内容を行うこともできます。
Adobe XDを使って見えてきた課題
一連の制作をXDを中心に行ってみた中で出てきた課題をピックアップしました。
1.プロトタイプ専用ソフトと比べると少し見劣りする
一部の要素を画面内に固定して表示するなどプロトタイプ専用ソフトと比べると少し見劣りする。
これは今後のアップデートに期待しましょう。
2.フォントがない場合、勝手に別フォントに置換される
一応エラー表示はされますが、その後勝手に切り替わってしまうのでコーディングする際にフォントが変わっていることに気づけない。これは運用ルールとしてコーディングはデザインスペックを参照にするようにすれば解決するかもしれません。
3.デザインデータの差分管理が煩雑になる
これは運用ルールの話ですが、現在は１サイト１ファイルでデータ管理をしているため、チーム内でデザインを分担する際など手動で最新ファイルに統合する必要があり煩雑になる場合があります。
まとめ
Adobe XDの最大の強みはWeb制作の一連の作業を１つのソフトに集約できるという点だと感じています。
実際は一人で作業するわけではないと思いますのでチーム内での作業フローの理解や意識合わせが重要だと思いますが、導入することでのメリットは高いと感じています。まるでAdobeの営業みたいな感じになってしまいましたが、XDを使い始めるきっかけになると幸いです。
