Adobe XD を利用するメリットを紹介します。

概要

Adobe XDが2017年の10月に登場して2021年10月で4年ほどになります。 機能追加やUI修正など、改良が続いていますが、最新のAdobe XDを利用するメリットをいくつか紹介します。

主な用途: ページのプロトタイプ制作

Adobe XDの主な用途の1つにページのプロトタイプ制作があります。1つのキャンバス内に複数のページデザインを作成でき、 ページの遷移もアートボード間の簡易的なリンクで実装できます。
手軽に作図でき、アイコンの画像なども簡単に配置でき、要素の繰り返し表示機能などもあるため、簡単に完成形イメージを作図できます。

メリット

• 簡単に作図ができる
• 繰り返しの表示もリピートグリッドで簡単に作図できる
• 1つのキャンバスに複数のページを記載できる
• アートボード間のナビゲーションを簡易に実装できる
• 色違い、デザイン違いのバリエーションの作図が簡単にできる
• 回覧の際にWebに公開した共有ドキュメントでコメントを共有できる
• Photohsop, Illustratorより動作が速い

などがあります。

デメリット

一方で、小規模なチームではメリットが感じられないことも多いです。

• Adobe XDで作図するより、CSS、HTMLを記述したほうが速い、XD作図が2度手間になる
• ナビゲーション機能は便利だが、最終的なHTMLのページの実装とはクリック時のフィーリングが違う
• マウスオーバーなどの細かい挙動も実装できるが、それこそ2度手間
• Adobe XDの出力が実装面ではほとんど役に立たない

などがあります。

ということもあり、小規模なチームでは使用しないことも多いかと思います。

用途: 画像加工

別の用途として、画像の加工に意外と便利です。
スクリーンキャプチャ画像をトリミングしたり、Webページの修正指示を出すために、Webページのキャプチャ画像をトリミングしたり、 説明書きを追加したりする作図に便利に使えます。
この作業を今まではPhotoshopで実施していましたが、Adobe XDに変えることで以下のメリットがあります。

メリット

• 動作が快適 (Photoshop, Illustrator より)
• 1つのキャンバスに複数のイメージ、アートボードを配置できる。(Photoshopでは1イメージ1ファイル、Illustratorはできる)
• ベクタ画像の配置がわかりやすい (Photoshopだとスマートオブジェクトになってしまう)
• アートボードをまとめて書き出しができるため、エクスポートが楽
• 色違い、デザイン違いのバリエーションの作図が簡単にできる
• アートボードをコピーすると、アートボード内の表示が画像としてコピーできる
• SVGとしてコピーすれば、Illustratorへのコンバートもスムーズ
• アートボードをコピー＆ペーストで簡単に複製できる
• テキストの配置が容易、幅指定のワードラップも簡単

デメリット

• 元ファイルを渡すときに、xd だと嫌がられる。(まだまだ、普及の途上)
• PDFへのエクスポートが弱い、キャンバス全体をPDFにできない
• ページをどんどん増やしてしまい、ファイルが巨大になる。
• 細かいパーツは、Photoshop、または、Illustrator で作図する必要がある。(1アプリ完結とはならない)
• Webページ修正指示の場合、小規模なチームでは直接コードを修正してレビューするほうが効率が良い

作図用途でも、小規模なチームの場合は直接コードを修正してレビューしたり、スクリーンキャプチャを取得したほうが効率が良いため、 ある程度のチーム規模がある場合の運用で活用の機会が多い印象です。

用途: オンラインミーティングでの資料提示、ディスカッション用ホワイトボード

テレワークの普及に伴い、オンラインミーティングでのホワイトボードとしても結構使えます。
共同で1つのホワイトボードを共有して、同時に編集をする場合は、Google Jamboard, Microsoft Whiteboard などの専用ツールを利用するのが適切ですが、 画面共有しながら議事をメモしていく使い方や、進行役が画面を見せながら説明するなどの用途で使えます。

メリット

• 動作が快適 (大規模なイメージの場合に特に顕著)
• 共同編集できないため、勝手に変更させたくない場合に適している

大きな構成図をPDFやExcelで開くとスクロールが重い場合などがありますが、Adobe XDで開くと スクロールや拡大、縮小が高速に動作して、スムーズにオンラインでも説明ができます。

デメリット

• 共同編集するのであれば、Google Jamboard, Microsoft Whiteboardのほうが適している
• PowerPointでも良くない？

まとめ

これまではページプロトタイピングでは、あまり活躍していなかった、Adobe XDですが、作図面では最近は活用の機会が増えてきました、 Adobe XDで画像を編集、加工して、PowerPointやExcelにペーストする使い方であっても、Photoshop、Illustratorより快適に作業できるケースも多いです。 一方で、印刷前提のデータを扱う場合などの最終出力イメージを編集するのであれば、細かい調整ができる、PhotoshopやIllustratorの利用が適しています。