Adobe XD 2019年3月アップデートリリース！Adobe Fontsとの自動同期、コピー＆ペーストでIllustratorでのベクター編集 #AdobeXD
Adobe XD アップデート
3月のAdobe XDアップデートには、生産性を向上しワークフローをよりスムーズにする機能がいくつも盛り込まれています。XDからのコピー＆ペースト操作だけでIllustratorにオブジェクトを読み込んでベクター編集を行い、コピー＆ペーストでXDに戻すことが可能になり、2つのアプリの連携はさらに強化されました。「書き出しマーク」チェックボックスの追加、ならびにデザインカンバス上の複数選択に対して一斉にこのチェックボックスを適用できる機能も追加されています。
フォントの管理も簡単になりました。受け取ったデザインでローカル環境に無いフォントが含まれていた場合でも、そのフォントがAdobe Fontsライブラリに含まれていればバックグラウンドで自動的に読み込まれるようになり、環境に無いフォントを個別に探してインストールする必要はなくなりました。また、より効果的なユーザビリティテストを実現するために、プロトタイプ上に表示するUI設定に新たな選択肢を加えました。さらに、Jiraサーバー連携、ブラウザ上でのドラッグジェスチャーのサポート、グループを横断して複数のオブジェクトを選択できるダイレクト選択機能の強化といった、大規模で複雑なユーザーインターフェイスプロジェクトにおいて生産性を大幅にアップする機能が追加されています。今月のアップデートの詳細とその他の情報について、ぜひ読み進めてください。
新機能：コピー＆ペーストによるIllustratorへの編集可能ベクター読み込み
Adobe XDとIllustratorの両方を使うデザイナーにとって、アイコンやロゴなどの複雑なベクターコンテンツをさらに快適に扱えるようにする新機能が追加されました。XDでコピーしたベクターは、完全に編集可能なベクターコンテンツとしてIllustratorにペーストされるようになりました。
この便利なコピー＆ペースト処理により、デザイン要素をさらに簡単に細かく編集することができます。例えば、アイコンの線幅の変更のような作業は、アイコンをコピー、Illustratorにペースト、編集、XDにコピー＆ペーストで戻す、といったようにスムーズに完了し、書き出しのワークフローは不要です。次の動画でご確認ください。
このコピー＆ペーストのワークフローは、XDがクリップボード上にSVG情報を含めて保持できるようになったことで実現しました。SVGは多くのWebブラウザがネイティブに扱える、解像度に依存しない形式です。Adobe XDのコンテンツを開発者向けにエクスポートする際、アイコン類をSVG形式で保存することも今回のアップデートで可能になりました。
機能強化：アセット書き出し用にマークが容易に
Adobe XDチームは、アプリ開発チームへのデザインの共有をさらに容易にしました。これまでも、レイヤーパネル上で個々のオブジェクトを選択して書き出し用にマークできましたが、今回のアップデートにより、XDではPhotoshopおよびIllustratorからインポートしたエレメントすべてが自動的に書き出し用としてマークされるようになりました。
このプロセスの他の改善点として、オブジェクトを書き出し用としてマークする方法を複数追加しました。レイヤーパネル上だけでなく、デザインカンバス上での右クリックからのコンテキストメニュー、キーボードショートカット、またはプロパティインスペクターを使ったマークが可能になりました。次の動画でご確認ください。
マーク済みのオブジェクトを一斉に選択してマーク解除したい場合は、デザインカンバス上で「すべてを選択」を実行し、「書き出し用にマーク」をクリックして全オブジェクトの設定を一斉に切り替えます。すべてのオブジェクトの書き出し用マークは解除されます。デザインを開発者に共有する際、デザイナーが行う作業は「ファイル／書き出し」で全オブジェクトのダウンロードを可能にし、「共有／開発のための共有」を実行して開発者が最終ファイル形式とその解像度をコントロールできるよう設定するだけです。
機能強化：環境に無いフォントの自動読み込み
フォント管理のスムーズなワークフロー実現のために、今回のアップデートではフォントの扱いを改善しました。Adobe Fontsライブラリからのダウンロードと、XD内での非アドビフォントの管理が容易になっています。
これまでXDでは、デザインに使用したフォントをその後Creative Cloudアカウントから除外した際、あるいは他のデザイナーから共有されたXDドキュメントに自分のコンピューターにインストールしていないフォントが含まれているような場合の対応に手間がかかっていました。
今回のアップデートから、Creative Cloudアカウントにインストールされていないフォントが使われているドキュメントを開くと、バックグラウンドで自動的にそのAdobe Fontsをアクティベートし、コンピューターにインストールします。これはドキュメントを開いたままの状態で実行されます。
上の動画では、新しくXDに追加された「環境に無いフォント」機能を確認いただけます。アセットパネルには「環境に無いフォント」セクションが追加され、環境に無いフォントを特定したのち、システムにインストールするかインストール済みの他のフォントに置き換えるかといった対応が容易にできるようになりました。
機能強化：グループを横断した複数オブジェクトの選択
複数のオブジェクトで構成されたユーザーインターフェイスをXDで作成する場合、オブジェクトのグループ化による整理整頓は必須の作業です。しかしながら、グループ内のオブジェクトを個別に編集するのはやや面倒な作業でした。そこで今回のアップデートでは、ダイレクト選択機能を拡張し、グループをまたいだ複数オブジェクトの選択と編集がより簡単に行えるようになりました。
今回のアップデートから、グループを横断した複数のオブジェクトに編集を加えたい場合、Windowsの場合はShift + Ctrlキーを、Macの場合はShift + Cmdキーをクリックすることで、対象となるグループ内のオブジェクトを選択できます。この状態で、プロパティインスペクターに表示された共通属性の編集や、コンテンツの複製といった操作を複数選択したオブジェクトに対して一括で行えます。
これは一見して小さな機能強化に見えますが、デザインがより複雑になり、膨大な数のオブジェクトが異なるグループに別れて含まれるような場合に、作業を大幅にスピードアップしてくれる機能です。グループ内の特定のオブジェクトに編集を加えるたびに、グループ化を一時的に解除するという手間が不要になります。
新機能：ユーザビリティテスト時のナビゲーションコントロール非表示
Webブラウザ上でプロトタイプを共有する際、ユーザーへのナビゲーションUI要素の表示可否を設定できるようになりました。デザインしたインターフェイスをユーザーにとって実際のWeb体験により近い状態におき、そのナビゲーションや機能発見のしやすさをテストできます。
プロトタイプを共有するとき、「ナビゲーションコントロールを表示」チェックボックスをオフにすることができます。デフォルトではWebプロトタイプ上に表示される「前へ／次へ」およびアートボード番号を非表示にできます。次の動画で、その動作を確認してください。
新機能ではありませんが、「ホットスポットのヒントを表示」チェックボックスをオフにすれば、ユーザーにクリック可能領域の存在を知られないようにできます。実際のアプリケーションを操作しているときと同様の、ガイドがない状況にユーザーをおいてインターフェイス操作を再現する、真のユーザビリティテストが実施できます。
新機能：Jira Software ServerおよびData Center連携と、Webブラウザ上でのドラッグジェスチャーのサポート
Adobe XDとJira Softwareの連携によって、XDの共有プロトタイプおよびデザインスペックへの直リンクを「Jiraの課題」へ埋め込み可能になり、デザイナーと開発者の共同作業がよりスムーズになりました。昨年9月にJira Software Cloudをサポートするアドオン「XD for Jira Cloud」の提供を開始（英語）しましたが、今回のアップデートでは、特別なデータガバナンス要件を満たすカスタムソリューションが必要なエンタープライズ顧客向けに機能拡張し、Jira Software ServerおよびJira Software Dat Centerのサポートを追加しました。詳しくは、Atlassian Marketplace上の私たちの製品ページをご覧ください。Jira管理者がこの機能をオンにする方法についてはこちらをご確認ください。
さらに、今月のアップデートにより、アートボード間をドラッグジェスチャーで移動する際のトランジションがブラウザ上でも再現可能になり、ブラウザにおけるプロトタイプ体験が大幅に向上しました。
XDプラグインエコシステム：UXを強化するためのAIのイノベーション
拡大を続ける開発者コミュニティによって新たなプラグインが投入され、イノベーションが継続しています。今月は、ユーザー体験の向上にAIを活用した新しい2つのプラグインをご紹介します。「Vempathy for XD（英語）」は、テスターの人数およびプロファイルと依頼するタスクを指定するだけで、セルフサービス方式のポータルサイト上にホストされたユーザビリティテストとしてプロトタイプをエクスポートできるプラグインです。送信ボタンを押すだけで、XDプロトタイプに対するテスター操作の録画機能と、動画および音声のAI解析を利用したセンチメント判定機能を備えた、パッケージ化されたユーザビリティテストを作成できます。テスト結果は24時間後にポータル上に収集されます。もうひとつのプラグインは、新しい「This Person Does Not Exist（英語）」サービスとXDの連携により、AIで生成したアバターをデザインに取り入れることを可能にするものです。
ソーシャルメディア
日本語でのアップデート情報やUI/UXデザインの情報は、本ブログ以外にもFacebookページ「Adobe XD Japan」で配信しています。ページを「いいね！」しておけば、自分のタイムラインに情報が流れてきますのでぜひご活用ください。また、Twitterでの配信は@AdobeXD（英語）が積極的に行っており、ハッシュタグ #AdobeXD を付けて投稿すればXDチームにも届きます。
日本のユーザーコミュニティ
日本のユーザーコミュニティが各地で立ち上がり、ほぼ毎月XDの勉強会を開催したり、使い方やTipsなどの情報共有など、積極的な活動をおこなっています。各地の「Adobe XD ユーザーグループ」が情報交換を行なっているページはこちらです。（設立順）
ご興味のある方はぜひご覧ください。
#MadeWithAdobeXD
Behanceでプロトタイプをシェアする際は、タグに#MadeWithAdobeXDを付け、使用ツールにAdobe XDを設定してください。AdobeXD ニュースレターで紹介させていただく場合があります。
この記事は、2019/3/12（米国時間）にポストされたMarch 2019 Release of Adobe XD: Editable Vectors in Illustrator, Better Font Management, Improved Exporting, and Moreを抄訳したものです。