2019年のAdobe XD:これまでの長い道のりと、これから向かうところ #AdobeXD

Creative Cloud UI/UX & Web

Adobe XD製品版のリリースから2周年を迎えるにあたり、最近プラットフォームに追加された機能のいくつかを振り返るとともに、今後の製品ロードマップについて説明したいと思います。

昨今では毎月のように新しいツールが市場投入され、デザイナーにとって心躍る日々が続いていると思います。反面、プロダクトデザインチームにとってツールの標準化は悩ましい課題となっています。デザインという仕事は以前と違い、異なる職務をまたいで多くの人々が関与し、コラボレーションがより重要視されるものとなっているからです。

2年前の1.0リリース以来、私たちはプロダクトデザインチームに向けた最新のコラボレーションプラットフォームの提供に注力してきました。コミュニティからのフィードバックに基づき、これまでの20回を超えるメジャーアップデートによって、毎月XDに新機能と機能強化を提供し続けています。

私たち開発チームが目指しているのは、プロダクトデザインチームのために、プロトタイピングとコラボレーションの理想的なソリューションを構築することです。XDの事例集(英語)にあるような感じでみなさんのチームがXDを採用している場合でも、ツールの切り替えを検討中の場合でも、このブログ記事が私たちのこれまでの成果と今後の取り組みについての理解に役立つことを願っています。

デザインとプロトタイピング

ここ1年間は、最新のデザインツールにあって当然なコア機能の多くをXDに搭載することに注力してきました。グループをまたいだ複数オブジェクトの選択、タイポグラフィ機能の強化、アートボードガイド、書き出しマークなどがその例です。XDのすべてのリリースで追加されたすべての機能の詳細については、こちらの新機能の更新リストをご覧ください

もちろんそこで満足したわけではなく、デザイナーが不必要に時間を費やしていたボトルネックを探しました。ドキュメントごとに環境にないフォントの利用を確認し解決する作業はその一例でした。そこで、Creative Cloudに含まれるアドビの広範なフォントライブラリーを活用し、ドキュメントを開くとすぐに、環境にないフォントの問題のほとんどを自動的に解決する機能を追加しました。

シンボルをコンポーネントに置き換え、再利用可能なデザイン要素を作成できるようにしたのも最近のことです。強力なオーバーライドおよびサイズ変更をサポートしたコンポーネントにより、共有可能なデザインシステム(詳細は後述)の基盤が作成可能になりました。これは私たちのコミュニティから強く要望されていた機能であり、デザイナーの間でコンポーネントが急速に普及していることを嬉しく思っています。

プロトタイピングは、当初からXDの中核でした。忠実度の高低を問わず、エクスペリエンスをすばやく作成することで、デザインバリエーションの検証やユーザーテストが可能になり、デザインの意図をより正確にコミュニケーションできます。XDにはすでに、他のデザインツールにはないプロトタイピング機能、音声プロトタイピングと自動アニメーションがありますが、私たちはさらにキーボードショートカットおよびゲームパッドのトリガーを追加し、デスクトップとゲームコンソールのエクスペリエンスのプロトタイプ作成にXDが対応できるようになりました。

私たちは継続してXDのデザインおよびプロトタイピング機能の強化に取り組みます。以下の領域における今後の進展にご期待ください:

  • ブレンドモード、複数の境界線と塗り、箇条書きリストなど、みなさんからのフィードバック(英語)を優先順位付けしたうえでの、継続したデザイン関連機能の提供
  • コンテンツの変更にデザイン側が適応するようなインテリジェントなツールの開発に注力し、手作業によるレイアウト調整につきものの煩雑さを解消
  • より複雑なデザインシステムの構築を可能にするための、コンポーネントのステート、オーバーライドの管理、置換と入れ子構造のサポートなどによるコンポーネントの強化
  • ホバー状態のインタラクションサポート、コンポーネントのステート遷移の自動アニメーション、アニメーションの動きに関する詳細なコントロール
  • プロトタイプにおける、リッチメディア要素のサポート

これら予定されている新機能についてのフィードバックや、それ以外でもデザインおよびプロトタイピングに関する機能リクエストはUserVoice(英語)にぜひお寄せください。私たち開発チームは、XDを使っているデザイナーの声を聞くことがなにより楽しみなのです。

統合されたエコシステム

私たちは、XDの機能がプロダクトデザインチームのコアニーズと合致するように、常に心がけています。他の製品に存在するというだけの理由で機能を追加したり、より特殊なユースケースへの対応によってツールを肥大化させないという明確なルールを自らに課すことで、この使命を守り続けています。

Photoshop、Illustrator、Sketchからの読み込みにXDが対応するようになってしばらく経ちますが、コミュニティからのフィードバックに基づき、私たちチームは読み込みの忠実度を改善強化しました。直近の2つのリリースでそれを実感していただけます。また、最近追加された「Photoshopで編集」機能では、Photoshopでの結果がラウンドトリップでXDに戻されるため、画像の調整プロセスが非常に効率的かつシームレスなものとなります。

XDのサードパーティープラグインは、最近追加した新しいプラグインパネルによって大幅に使いやすくなりました。プラグイン開発者はカンバスに隣接したこの領域を使い、より良く、新しいエクスペリエンスを提供できます。現在200近くにのぼるXDのプラグインが提供されており、そこにはアクセシビリティツール、デザインリソースを読み込むツール、コンテンツを生成するツールから、定型タスクを自動化するものまですべてが揃っています。新しいプラグインパネルの詳細についてはこちら(英語)をご覧ください。また、Adobe Fund for Design基金に関連した活動の成果としてXDエコシステム内部に生み出された新しいツール群についてもお読みください(英語)。

私たちが提供するプラグインAPIを使うことで開発者はXDの機能を拡張し、音声UI(英語)をはじめとする新たな創造的フロンティアに取り組むデザイナーを支援できます。XDの音声プロトタイピング機能を発展させ、私たちはAmazon Alexaとの新しい統合機能を導入しました。これにより、Echo DotやEcho ShowなどのAlexa対応デバイスに直接音声プロトタイプを書き出してプレビュー(英語)できるようになりました。この統合機能は、デザイナーが従来のエクスペリエンス作成プロセスに音声という要素を組み込むことを可能にし、新しいメディアを活用したエクスペリエンス創造の後押しをします。

将来に向け、XDのCreative Cloud内における相互運用性と、より広範なエコシステムとの相互運用性の双方をさらに強化する以下のような取り組みを行っています。ご期待ください。

  • XD内でCreative Cloudライブラリの作成と利用のフルサポート
  • 新たなマーケットプレースのエクスペリエンス強化によるプラグインの検索性改善
  • 追加のプラグインAPI、ドキュメントバリデーター、およびクラウドドキュメントAPIの提供による拡張性の増強

コラボレーション

XDの登場以来、私たちは、デザインとプロトタイプを関係者と簡単に共有する手段をデザイナーに提供してきました。そしてみなさんのフィードバックに基づき、そのエクスペリエンスの改善に注力してきました。プロトタイプとデザインスペックのシングルリンク共有とナビゲーションの改善、CSSスニペットの自動生成による開発者サポート、ステークホルダーからのコンテンツへのアクセスリクエスト、モバイルデバイス上でのコメント入力サポートなどがその成果です。さらに、パートナーと緊密に連携することにより、Slack、Microsoft Teams、Jiraなど他のプロジェクト管理およびコラボレーションツールとXDとの連携を実現(英語)しました。

異なるプロダクトデザインチームがコラボレーションし、デザインドキュメント上で共同作業できるようにすることは、今年の私たちの大きな取り組みでした。みなさんからはほとんど見えていなかったと思いますが、近日予定している共同編集のサポート追加の開発が大詰めを迎えています。この機能は、複数のデバイス上で複数のデザイナーが同じXDドキュメントを開いて共同で作業し、その結果がすべての共同編集者にリアルタイムで反映されるというものです。共同編集に加えてバージョニングのフルサポートも追加される予定です。これにより、デザインの以前のバージョンにXD内から簡単にアクセスできるため、チームメンバー全員が安心して作業に取り組むことができます。

共同編集とバージョン管理の先に見えているロードマップでは、以下の領域に注力していきます。

  • プロジェクトに関連する成果物をすべて集約するための器として共有プロジェクトを使うことができるようにします。デザインチームのメンバー全員が、ドキュメント、中間作成物、アセットライブラリに簡単にアクセスできるようになります。
  • XDのリアルタイムコラボレーション機能がカバーする範囲をデスクトップ以外にまで拡張します。デザイナーが、XDを持っていないプロダクトデザインチームをドキュメントの共同編集に招待することも可能になり、誰もが最新のバージョンのデザインにいつでもアクセスして作業できるようになります。

デザインシステム

効率性と再利用性を確保したうえで大規模なデザインを可能とすることは、私たちチームにとって最優先の課題です。互いに関連しながら独立したいくつものプロジェクトを手掛ける数百名のデザイナーを抱えるアドビにとって、標準化したデザイン言語の利用はとても重要です。

クラウドドキュメントを単一の基準参照資料として定め、そこに再利用可能なコンポーネントを含められること。そしてアセットをそのようなドキュメントにリンクすれば、クラウドドキュメント上の更新がいつでも反映されること。 この2点が、XDを使ったデザインシステム構築の基盤となっています。詳細は、こちらのガイド(英語)をご覧ください。

ここ数か月、私たちは多くのお客さまとの対話を重ね、デザインシステムに関する私たちのロードマップを計画してきました。今後私たちが集中的に取り組む領域は以下の通りです。

  • XDがサポートするアセットの種類の拡大と、アセットパネル上でアセットを管理するためのツールの強化
  • アノテーションのサポートによる、デザインシステムへの説明の付与
  • 共有権限、バージョニング、デザインシステムの更新に関わるより詳細なコントロール
  • スタイルガイドのサポートの初期実装
  • クラウドドキュメントAPIを使ったデザインシステムの機能拡張を実現し、デザインドキュメントから成果物を直接生成するようなワークフローを可能に

将来に向けてパフォーマンスとクオリティを最優先に

私たち開発チームがこれまでにお届けした機能も、近日リリース予定の新機能もすべてそうなのですが、どんな個別の機能よりも、引き続きパフォーマンスと品質を最優先事項としていきます。私たちは、プロダクトデザインチームにとって最良のコラボレーティブデザインプラットフォームの提供に、継続して取り組めることを嬉しく思っています。本年のAdobe MAX(英語)では、いくつものXD関連の発表を予定しています。ぜひ実際に足をお運びいただくか、そうでなければキーノートのライブ配信をご覧ください。そして、Twitterアカウント(英語)またはUser Voiceフォーラム(英語)を活用して引き続きフィードバックをお寄せください。

ソーシャルメディア

日本語でのアップデート情報やUI/UXデザインの情報は、本ブログ以外にもFacebookページ「Adobe XD Japan」で配信しています。ページを「いいね!」しておけば、自分のタイムラインに情報が流れてきますのでぜひご活用ください。また、Twitterでの配信は@AdobeXD(英語)が積極的に行っており、ハッシュタグ #AdobeXD を付けて投稿すればXDチームにも届きます。

日本のユーザーコミュニティ

日本のユーザーコミュニティが各地で立ち上がり、毎月XDの勉強会を開催したり、使い方やTipsなどの情報共有など、積極的な活動をおこなっています。各地の「Adobe XD ユーザーグループ(XDUG)」が情報交換を行なっているFacebookページもご覧ください。

#MadeWithAdobeXD

Behanceでプロトタイプをシェアする際は、タグに#MadeWithAdobeXDを付け、使用ツールにAdobe XDを設定してください。AdobeXD ニュースレターで紹介させていただく場合があります。


この記事は2019年9月19日(米国時間)に公開されたAdobe XD in 2019: How Far We’ve Come and Where We’re Goingの抄訳です。

POSTED ON 2019.09.24