2019年はコラボレーション機能の拡充に注力した「Adobe XD」
午後に行われたブレイクアウトセッションの一つとして、アドビ システムズ株式会社のマーケティングマネージャー轟啓介氏が、「コラボレーションを加速するAdobe XDの新機能と今後の進化」と題し、Adobe XDの最新動向をデモを交えつつ紹介した。
50以上の製品やサービスを提供しているアドビは、世界各国さまざまな部門をまたいだチームが100以上あり、ステークホルダーも多岐にわたる。例えば、ボタン1つをとってもOSやブラウザなどの違いから1100種類近くに及ぶそうだ。デザイン作業を事故なく円滑に進めるためには、体系的に管理する必要がある。それを実現するのが、「Spectrum（スペクトラム）」という独自のデザインシステムだ。これを使い、デザインに関するあらゆるルールを一元管理している。スタイルガイド、UIキット、ソースコードなどが含まれており、一部のスナップショットは一般公開されている。
「Adobe XD」は、WebサイトやモバイルアプリのUX/UIデザインを担当する製品で、デザイン・プロトタイプ作成・共有と、デザインのワークフロー全般にわたって支援する。
Adobe XDは2017年10月に、米国で開催されたAdobe MAX 2017のタイミングで正式リリースされた。アドビ社内でもPhotoshopやIllustratorを始めとするアプリやサービスの開発に使われており、Adobe XD自体もAdobe XDを使って開発されている。
また、サブスクリプションモデルで提供されている「Adobe XD」は、ベータ版の段階からアジャイル開発・リーン製品開発に基づいて、実際のユーザーフィードバックをもとに、早く堅牢な形で開発され続けている。毎月新機能がリリースされており、2年経った現在では150以上の機能が追加されているという（2019年11月リリース分がバージョン24）。
このように着実に進化をし続ける「Adobe XD」だが、轟氏は2019年の開発テーマを「コラボレーション」だと説明する。複数人で制作する場合はもちろん、例え1人で制作する場合でもクライアントとのやり取りなどが発生するため、制作活動に関わる全員にとって主要な領域だ。特に、「デザインシステム」と「クラウド」のサポートを強化したという。
中でも、轟氏が注目の機能として具体的に紹介したのは、「コンポーネント」「リンクされたアセット」「リアルタイム共同編集」「ドキュメント履歴」の4点だ。なお、XDのデザインシステムはクラウド機能に依存しており、オフラインでは使うことができない。
1つ目は「コンポーネント」機能。従来はシンボルと呼ばれていたが、今年5月から大幅に強化され改称された。図形やテキストなどをひとまとまりにして管理する機能で、再利用や一括修正ができるため、ボタンやグローバルメニューなど、後から使い回すものを管理するのに便利だ。
従来との違いは、オリジナルとなるマスターコンポーネントと、複製した子のコンポーネント（インスタンスと呼ばれる）との間に親子関係が生じる点。マスターコンポーネントに行った変更は、即座にインスタンスにも反映される。
また、コンポーネントの要素は上書き（オーバーライド、Override）することができ、インスタンス側でサイズやカラー、角丸、テキスト、内包される要素などに個別に変更を加えると、それらにはマスターコンポーネントの変更が反映されなくなる。なお、後からマスターコンポーネントに追加した要素は、インスタンスにも反映される。
Adobe XDには、ECサイトにおける商品一覧のように、複雑な要素の組み合わせが繰り返すレイアウトをドラッグ操作で簡単に行える「リピートグリッド」と呼ばれる著名な機能があるが、コンポーネントの上書きを併用すると、より柔軟なデザインを行える。
また、コンポーネントはインタラクションも保持することができ、例えば従来グローバルメニューからの画面遷移の設定は、画面ごとに個別にワイヤーを引く必要があったが、コンポーネントを使うことで一元管理できるようになり、作業効率とメンテナンス性が増した。
また、2019年11月には、1つのコンポーネントに複数のステート（状態、States）を持てる機能が追加された。これにより、初期状態、マウスホバー時、クリック時、無効時と、さまざまな状態をコンポーネントに内包して管理できるようになった。
ステート間には、短いアニメーションをマイクロインタラクションとして設定できる。ただし、現在のところ、1つのアートボードで同時に動かせるマイクロインタラクションは1つだけである点には注意だ。
中でもマウスホバー時のホバーステートは特別なステートで、マウスカーソルをポイントした際のインタラクションをAdobe XDが自動で設定してくれる。
なお、轟氏はTipsとして、動きが遅い場合はデフォルトで設定される「自動アニメーション」を「トランジション」に変更すると早くなることや、スタイルガイドとして分かりやすくするには、状態を切り替えたインスタンスを並べてみせるとよいことなどを紹介した。
スタイルガイドを分かりやすくする例。下段がコンポーネントを使用したもので、左端のマスターコンポーネントのインスタンスを右に並べ、それぞれステートを切り替えて、ホバー時、クリック時の様子を見せている
2点目は「リンクされたアセット」。作成したスタイルガイドは、XDクラウドドキュメントとして保存することでクラウドを経由して共同制作者と共有し、カラーや見出しのスタイル、ボタンなどを簡単に共通化できる。また、オリジナルのアセットに変更が加えられると、変更の通知が届き、マウスオーバーでプレビューし、クリックするだけで変更の適用と、ワークフローをシンプルにできる。
3点目は、まだベータ版としての提供になるが「リアルタイム共同編集」機能。Googleドキュメントのような形で、オンラインで1つのファイルを共同編集でき、変更内容がリアルタイムに共有される。
ログインユーザーの誰がどのオブジェクトを編集しているかは色で判別できる。また、データのトランザクションはロックせずに楽観的な排他制御が行われているようで、もし同じオブジェクトを同時に編集した場合は、先にクラウドに送信された内容が採用され、後から送信した変更は破棄される。
また、この機能にも関連するが、4点目として「ドキュメント履歴」機能も紹介された。クラウドでの作業内容は、適宜自動でバックアップが取られる。そのため、轟氏は「よく行われている、ファイル名に日付や『_finalfinal2』などをつけるオレオレバージョン管理をする必要がなくなる」と述べた。
バージョンは30日経つと履歴が消されてしまうが、バージョン名やタグをつけることで永続化ができるという。特定バージョンから新規に開き直すこともできるので、過去の内容に戻したいといった作業も楽に行える。
なお、Ctrl＋Z／⌘＋Zによるアンドゥも使えるが、個人単位で管理され、自分の作業のみに適用される。
他にも、クラウドでのアセット共有を行う「Creative Cloudライブラリ」におけるXDからの登録への対応（従来は読み込みのみ）、1つのオブジェクトへの複数のインタラクションの設定（キーボードショートカットなどが設定できるように）、共有設定の有無を確認しやすい「共有モード」、検索しやすくなった新しいプラグインマネージャーなども紹介された。
2019年11月のタイミングで、このようなクラウド関連機能が一気に導入されてきたが、轟氏は「まずは本プロジェクトではなく、いろいろとテストして理解した上で、使って欲しい」と勧めた。
最後に、イベント当日にベータ版として発表されたばかりの新しいプラグイン「Quick Mockup」も紹介された。UXデザイナー以外がワイヤーフレームやモックアップの作成を行うことが多いという、日本独特のデザインプロセスに着目したもので、普段PowerPointやExcel、Keynoteでラフを作成している非デザイナーを対象に、Adobe XDをより使いやすくするツールとなっている。2020年春の正式リリースを予定しているが、Quick Mockupのページ経由か、プラグインマネージャーから検索してベータ版をインストールできる。
今後は、引き続きコラボレーション機能の強化や、リアルタイム共同編集機能の着実な製品化を目指すという。轟氏は、ユーザーからのフィードバックが大事である点を今一度強調して、講演を締めくくった。
