Adobe XD 2019年11月アップデートリリース！リアルタイム共同編集、ドキュメント履歴、コンポーネントのステートなどをAdobe MAXで発表 #AdobeMAX #AdobeXD
Adobe XD アップデート
Adobe XDの新機能や機能強化をみなさんに毎月お届けできているのは大きな喜びですが、大きな新機能を発表することが恒例のAdobe MAXでのアップデートは、私たちにとって特別に重要なものです。今年もその例外ではなく、MAX 2019と同時に提供開始する今回のXDアップデートは、これまでで最大規模のものとなっています。
このリリースでは、リアルタイム共同編集、コンポーネントのステート、ホバートリガー、再設計されたプラグインマネージャーなど、アイデアをよりすばやく具体化し、コラボレーションを支援するための数々の新機能と機能強化が導入されています。もちろん、使いやすさとパフォーマンス、そして品質へのアドビのコミットメントは変わりません。結果として、デザイナー個人とデザインチームがデザインワークフローを強化するにあたり、XDに寄せられる信頼に応えたものとなっています。
いくつもの重要な新機能に加えて、みなさんのようにXDをお使いのデザイナーからのフィードバックに基づき、その他の多数の機能も改善しています。私たちは引き続き、UserVoice（英語）から寄せられる機能リクエストやXDの今後についてのTwitter（英語）、Facebook、ならびにコミュニティフォーラム（英語）上でみなさんとの対話を重ねていきたいと思っています。
本記事では、最新リリースのすべての機能をご紹介します。
Adobe XDでのコラボレーションの力
デザインとは、本質的に共同作業で進めるプロセスです。課題を深く理解し、データ、共感、調査に基づいたソリューションの構築と、ユーザー、制作チーム、関係者との絶え間ない対話を伴います。XDのMAX 2019リリースで、私たちはXDを軸としたコラボレーションをさらに前進させるための大きな一歩を踏み出しました。
リアルタイム共同編集（ベータ）
本日ベータ版として提供を開始するリアルタイム共同編集により、ユーザーはXDを介し、他のデザイナーとリアルタイムで共同作業ができます。共同編集のメカニズムはXDのバックグラウンドでシームレスに動作するため、ネイティブアプリケーションならではのパフォーマンスと動作品質という利点を十分に享受しつつ、複数のデザイナーがひとつのクラウドドキュメントのデザインと修正に同時に参加することを可能にします。リアルタイム共同編集の特長のひとつは、ユーザーと制作チーム全員がともに同じドキュメントで作業し、一元管理された基準となるマスターファイルとして参照するため、作業がダブる心配も、重複して作成されたドキュメントを管理する必要もありません。ユーザーとしても、チーム全体としても、余計な摩擦を取り除き、最高の仕事ができるということになります。
リアルタイム共同編集はオプトインで、XDのクラウドドキュメント設定でオンにできます。ドキュメントのリアルタイム共同編集がオンになっていれば、制作チームのメンバーをドキュメント編集に招待できます。招待したデザイナーがドキュメントを開いているか、どのアートボードあるいは個々のオブジェクトを編集中なのかを確認できます。
リアルタイム共同編集は、チームが共同で仕事を進める方法論を抜本的に変え、XDを使ったワークフローに新しい可能性を拓きますが、新しいことには学びが必要となります。そこで、コミュニティからのフィードバックをもとにさらに優れた共同編集を実現できるよう、本日より実際にみなさんにお試しいただけるベータ版として提供します。ベータ期間中、ぜひこの機能をお使いいただき、積極的にフィードバックをお寄せください。ただし正式版として提供開始する準備が整うまでは、品質とパフォーマンスに問題が生じる可能性があることをご承知おきください。
ドキュメント履歴
クラウドドキュメントは、ユーザーが作業を進行するバックグラウンドで自動的に保存を実行しますが、今回のアップデートではドキュメントの履歴、つまり時間経過に伴う編集履歴を確認できるようになりました。ドキュメント履歴を使えば、任意の過去バージョンを開き、エレメントをコピーして最新版ドキュメントにペーストしたり、特定のバージョンのドキュメント全体を保存して別系統の作業の起点とすることができます。ドキュメントの履歴は30日前まで遡って取得が可能で、それより古いものは自動的に削除されます。特定のバージョンのドキュメントを永続的に保持したい場合は、ブックマークすれば削除されなくなります。デザインプロジェクト全体における重要なバージョンに名前をつけて管理することも可能です。
ドキュメントの履歴にアクセスするには、画面上部にあるクラウドドキュメントの名前の横にあるドロップダウンアイコンをクリックします。
共有モード
デザインプロセスにおける重要な要素のひとつは、デザインを他のチームや関係者と共有してフィードバックを得ることであり、デザインが実プロダクトに容易に組み込めるよう開発者がそのまま使えるアセットを提供することです。共有は最初からXDにとって重要な概念でしたが、今回のアップデートでは、いくつかの異なる共有機能を1か所に集約した、「デザイン」、「プロトタイプ」と並ぶ新しい「共有」モードを追加しました。
共有モードは、プロジェクトを他の人と共有したい場合に開きます。ここでは、デザインレビュー、開発者への受け渡し、プレゼンテーション、ユーザーテストなど、異なるユースケースを想定した共有プリセットを利用し、共有のためのWebリンクの作成と管理を行います。共有されるアートワークにどのアートボードが含まれるかを送信前に確認でき、個々の共有リンクに名前をつけることで継続的に管理することもできます。さらに、個々の共有リンクに付与したアクセス権限の種類やパスワード保護もすべて1か所で確認できるようになりました。今後、異なるプロトタイプワークフローへの対応や、異なるアートボードのセットの共有などを含む、共有モードのさらなる強化を予定しています。
今回のアップデートでは、リアルタイム共同編集をはじめとする新機能すべてがXDのすべてのプランで提供されます。Adobe XDの有料プランのユーザーは新機能のすべてに無制限でアクセスでき、さらに無料のXDスタータープランでも、2020年4月末まではすべての共有およびコラボレーション機能を無制限で使えます。
これらの新機能によってXDを軸にした新しいワークフローが生まれ、みなさんやチームに新しい可能性をもたらすことを期待しています。
より複雑なインタラクションとプロトタイピングをサポート
開発の初期段階から、私たちはXDをUXデザインとプロトタイプ作成の両方を行うオールーインワンプラットフォームとして位置づけていました。私たちの目標は、バラバラのデザインツールで作成したファイルのバージョンを同期させながら維持管理するような雑用からデザインチームを開放し、素晴らしいエクスペリエンスの構築と提供だけに専念できるようにすることでした。ですので、この1年間で実施してきた数々のデザイン機能強化に加えて、今回インタラクションおよびプロトタイピングの領域が大幅にアップデートされたことを嬉しく思います。
コンポーネントのステート
XDのコンポーネントは、ドキュメント内で使われているUIパーツに手を入れるとき、同じものが使われている箇所すべてを何度も作り直すような無駄を省き、デザインプロジェクト全体の一貫性を維持するのに役立ちます。XDでデザインシステムを構築、運用している場合は、参照基準として一本化したソースファイルにコンポーネントをリンクする機能により、チームまたは組織が管理する複数のプロジェクトすべてを横断したUIパーツの再利用が可能になります。しかしながら、今日のエクスペリエンスは静的なUIパーツをただ並べたもので成り立つわけではありません。状況に応じて動的に変化し、反応することが期待されています。
そのため、今回のXDアップデートでコンポーネントにステートを追加しました。これからは、特定のタブがアクティブであることを示したり、ユーザーがボタンをタップした状態を示すなど、あるUIパーツが異なるタイプのユーザーインタラクションに応じて変化した状態のすべてのバリエーションをひとつのコンポーネントに持たせることができるようになります。コンポーネントがステートに対応したことで、シナリオごとに別々のコンポーネントを作成する必要がなくなり、複数ドキュメントにまたがるコンポーネントの維持管理が容易になり、結果的にエクスペリエンスの構築に専念できます。
コンポーネントのステートの作成は簡単です。コンポーネントを選択すると、画面の右側に表示されるプロパティインスペクターに、ステートの作成と管理のための新しいセクションが表示されます。ここでステートごとに、コンポーネントの塗りカラーや文字スタイルなどのプロパティを変更することができます。通常のコンポーネントと同様の手順です。
コンポーネントのステートはプロトタイプモードでも有効です。インタラクティブなUI要素の作成や、プロトタイプのエクスペリエンスを構成するマイクロインタラクションの実装に役立ちます。プロトタイプモードで選択したコンポーネントがステートを含む場合、アクションの移動先 としてそのコンポーネントに設定されたステートがリストされます。これにより、例えばデザインモードでボタンのコンポーネントに新規の「ホバー」ステートを追加、プロトタイプモードではアクションの移動先にその「ホバー」ステートを指定することができます。
Adobe XDのコンポーネントのステートの機能をわかりやすく説明するために、私たちはUI/UXデザイナーのダンスキー（Dansky）氏と共同開発した「XD Fresh UI Kit」を用意しました。このキットには、オンラインで果物や野菜を購入するエクスペリエンスを再現した、架空のアプリが含まれています。キットに含まれるコンポーネントにはチェックボックス、スイッチ、ボタンなどオンライン注文に使うUIパーツがあり、それぞれがコンポーネントのステータスを活用し、追加のアートボードなしでオンとオフの状態を表現しています。
ホバー状態のアクショントリガー
コンポーネントのステートが最も頻繁に使われるユースケースは、ホバー状態の表現です。XDがホバー状態に対応するのが遅すぎだとお考えの方もいらっしゃるでしょう。しかし私たちは、デザインチームにとって最も有用なかたち、つまりコンポーネントステートのパワーと組み合わせた提供が可能になるまで時機を見ていたのです。ホバートリガーはその名の通り、デスクトップアプリのボタンにマウスオーバーしたときのように、ユーザーがエレメント上にマウスカーソルを「重ねる」（ホバー）と発動します。
ホバーの場合、プロパティインスペクターでコンポーネントのステートを定義するのではなく、定義済みのメニューアイテム「ホバーステート 」として作成することもできます。この場合、ユーザーのホバーアクションに対応するために必要なインタラクションはすべて自動的にコンポーネントに追加されます。もちろん、プロトタイプモードのプロパティインスペクターのトリガー選択ドロップダウンリストから、手動でホバーを割り当てることもできます。タップ、ドラッグ、音声、キー／ゲームパッド、そして今回のホバーと、XDはトリガーサポートを拡張しています。
複数のインタラクションのサポート
XDが対応するユーザー入力の種類が豊富になり、インタラクションデザイナーは完全にインタラクティブなエクスペリエンスを、コードを記述せずにプロトタイプ化できるようになりました。ところがプロトタイプでは、ひとつのUIパーツが異なるユーザー入力に対して異なるインタラクションを返すようなケースが多くあります。タップ操作とドラッグ操作それぞれに別のアクションが割り当てられているオブジェクトなどがそれにあたります。従来、これを再現するにはアートボードを複製して異なる画面遷移フローを構築するしかありませんでした。しかし、今日からは違います。
今回のアップデートからは、ひとつのオブジェクトに複数のインタラクションを定義できるため、上述のような迂回策は不要になります。XDのプロトタイプモードでひとつのオブジェクトから複数のコネクターを引き出し、異なるインタラクションシナリオを設定するだけです。異なる入力に別々のインタラクションを割り当てられるため、さまざまな異なる音声コマンド入力やキー入力に応じて条件分岐するような複雑なインタラクションも設定できます。また、複数インタラクションの割り当てはコンポーネントのステートにも有効なので、アートボード間の遷移に加えて、コンポーネントステート同士の遷移の作成も可能になりました。XDは、トリガーにすでにインタラクションが割り当てられているかどうかを自動的に検知するため、競合の発生を心配する必要はありません。
コンポーネントへのステート概念の導入、新しいホバートリガー、複数インタラクションのサポートは、組み合わせてパワーを発揮します。みなさんにご活用いただくことを楽しみにしています。
拡張性と他のツールとの互換性
オープンなプラットフォームとして提供されていることに加えて、Creative Cloudに含まれる他のツールおよびサービス、ならびにサードパーティのツールおよびプラットフォームなど、他のツール類との相互運用性は、デザインチームがXDを選択する主な理由のひとつです。今回のリリースでも、XDと他のツールとの相互運用性を強化していますが、XDのコア機能に追加機能を構築できるようにする開発者向けの機能も新しく導入しています。
Creative Cloudライブラリ連携の強化
Creative Cloudライブラリは、ロゴや色などをCreative Cloudアプリケーション同士で共有するために使われます。XDのこれまでのCreative Cloudライブラリ対応は、PhotoshopやIllustratorなど、他のCreative Cloudアプリケーションで作成したアセットをXD内で利用できるという一方向のものでしたが、今回はみなさんからの要望をうけ、XD内でCreative Cloudライブラリの作成と管理ができるように強化しました。XDで作成したアセットやコンポーネントをCreative Cloudライブラリに追加すると、他のCreative Cloudアプリケーションで使用できるようになります。これにより、組織全体を横断したブランドアセットやマーケティング素材、さらにはデザインシステムアセットの共有を、ひとつに集約されたクリエイティブシステム内で完結できるようになりました。
Sketchファイルの読み込みと互換性の強化
デザインチームの多くが制作プロセス全体を通していくつものツールを併用していること、だからこそXDが存分に能力を発揮するためには既存アセットのツール間の移行が重要であることを、私たちは把握しています。Sketchからのデザインファイルの読み込みはかなり前に実装済み（ご要望に応え、読み込みの忠実度の改善も続行中）ですが、今回のアップデートでは、既存のSketchライブラリをXDのクラウドドキュメントに変換する機能を追加しました。これにより、Sketchライブラリに含まれるアセットをXDで構築したデザインシステムの一部として利用できるようになります。すべてのアセットおよびコンポーネントは、ソースとなる変換済みクラウドドキュメントにリンクされているため、XD内ではそのままリンクされたアセットとして使えます。ソースとなるクラウドドキュメントを開いてアセットを編集すれば、その変更はリンクされたアセットの仕組みによって、デザイン上のすべての使用箇所に反映することができます。
再設計されたプラグインマネージャー
MAX 2018で、私たちはAdobe XDプラットフォームへのアクセスのオープン化を発表し、テクニカルデザイナーや開発者がXDのパワーをさらに拡張するプラグインを開発できるようにしました。現在では、200を超えるプラグインがXDのために提供されています。Jira Cloud、zeroheight、UI Faces、Slack、Arrangerをはじめとする、反復的なタスクの自動化を支援するプラグインは数十にのぼります。他にもXDを他のツールと接続するもの、XDの新しい使い方を提供するものがあります。私たちの開発者コミュニティからは、常に新しいプラグインや、XDの新機能に対応するための既存プラグインのアップデートが提供され続けています。
私たちのエコシステムが拡大を続けているため、ユーザーそれぞれに固有のワークフローに最適なプラグインを探し出すのが難しくなり始めています。今回のリリースでは、この問題を解決するためにプラグインマネージャーを再設計しました。新しくなったプラグインマネージャーを使えば、おすすめのプラグインを表示したり、ピックアップされたコレクションを閲覧したり、異なるカテゴリーのプラグインを探索することができます。また、機能説明や他のデザイナーからの評価を含む、プラグイン自体の詳細情報を、XDにインストールする前に確認することができます。サポートを受けたりフィードバックを送るためにプラグイン開発者に連絡したり、他のチームメンバーにリンクを送ってプラグインを共有するための機能もあります。
プラグインマネージャーの再設計に加えて、開発者が利用できるAPIの範囲拡大にも引き続き取り組んでいます。今回のリリースでは、他のアプリケーションからXDドキュメントの情報を取得するための「XD Cloud Content API」を追加しました。私たち開発チーム自身も、Jira（英語）、Slack（英語）、Microsoft Teamsなどのプラットフォームとの統合にこのAPIを使っています。ぜひ、新しいAPIを開発にお役立てください。詳細は、開発者向けサイト（英語）をご覧ください。
デザインに「完成」がないように、私たちはデザイナーのニーズの成熟と変化にあわせXDを進化させ続けていきます。最新バージョンのXDをダウンロードするか、Creative Cloudデスクトップアプリ経由で入手し、ここで紹介した素晴らしい新機能の数々をぜひ実際に体験してください。
XDのアップデートについては随時こちらでお伝えしています。私たちのチームにぜひご意見やフィードバックをお寄せください。
ソーシャルメディア
日本語でのアップデート情報やUI/UXデザインの情報は、本ブログ以外にもFacebookページ「Adobe XD Japan」で配信しています。ページを「いいね！」しておけば、自分のタイムラインに情報が流れてきますのでぜひご活用ください。また、Twitterでの配信は@AdobeXD（英語）が積極的に行っており、ハッシュタグ #AdobeXD を付けて投稿すればXDチームにも届きます。****
日本のユーザーコミュニティ
日本のユーザーコミュニティが各地で立ち上がり、毎月XDの勉強会を開催したり、使い方やTipsなどの情報共有など、積極的な活動をおこなっています。各地の「Adobe XD ユーザーグループ（XDUG）」が情報交換を行なっているFacebookページもご覧ください。****
#MadeWithAdobeXD
Behanceでプロトタイプをシェアする際は、タグに#MadeWithAdobeXDを付け、使用ツールにAdobe XDを設定してください。AdobeXD ニュースレターで紹介させていただく場合があります。
この記事は2019年11月4日に公開されたNovember 2019 Release of Adobe XD: Coediting, Document History, Component States, and More Unveiled at Adobe MAXの抄訳です。