Adobe XD 2019年7月アップデートリリース! 開発者へのデザインスペックにプロトタイプモード追加、コメント入力のモバイル対応など #AdobeXD

連載

Adobe XD アップデート

デザインはチームで行うものです。役に立ち、使い心地のよいデジタルプロダクトを創り出すためには、デザイナーが自身のプロダクトに取り組む熱意以上のものが必要となります。今の時代に即したデザインとは、同じ組織に属する他のデザイナーや開発者、関係者、その他の協業者はもちろん、クライアント、顧客、そしてエンドユーザーとの共創を意味しています。今月のアップデートでは、レビューサイクルを加速し、デザイナーの意図を明確に伝達し、ビジョンを全員で共有するために、異なるチームがXDを軸として横断的にコラボレーションできる新しい方法を導入しました。

ぜひ最新バージョンのXDをダウンロードし、アップデートに含まれるすべての機能を活用してください。以下に2019年7月リリースの詳細をご説明します。

__
Adobe XD をダウンロード

デザイナーと開発者のコラボレーションを強化する単一共有リンク作成機能

デザイナーが自分のクリエイティブのビジョンから実際に動くものにするには開発者の手助けが必要ですが、それはデザインプロセスにおいて最も重要でありながらも、フラストレーションが生じる部分です。多くの場合、デザイナーの意図を正確に翻訳して実動するプロダクトに盛り込むのは、開発チームにとって骨の折れる仕事です。反対に、デザイナーたちからすれば、完成したプロダクトがなぜデザインどおりになっていないのか、疑問に感じることがしばしばです。

以前のバージョンのXDでは、デザイナーはルック&フィールを伝えるためのインタラクティブなプロトタイプを作成し、その共有リンクを生成することができました。また、アセット、カラー、文字スタイル、インタラクションなど、画面に含まれるすべての実装情報をデザインスペックの共有リンクで生成し、開発者に渡すこともできました。インタラクティブなプロトタイプとデザインスペックはともに開発者がデザイナーのビジョンを具現化する際に頼りになるものでした。しかしながら、それぞれが個別の共有リンクとして手渡されていたため、開発者がデザイナーの意図をきちんと理解するには、この2つを行き来する必要がありました。さらに、XDの高度なプロトタイプ作成機能によってデザイナー側でも作成可能になったより複雑なインタラクションを扱う際に、この問題はさらに難しいものとなっていました。

今回のバージョンでは、開発者が必要とするプロトタイプとデザインスペックの両方を含んだ、単一の共有リンクを生成できます。これにより、開発者はデザイナーの意図をより正確に理解でき、より直感的な開発者向けのワークフローを構築できます。使い方はシンプルで、これまで通り「開発用に共有」をクリックするだけです。

このような単一リンクを用いることで、開発者はプロトタイプの動作確認、コメントおよびフィードバックの入力、アセットのダウンロード、デザインおよびインタラクションに含まれる詳細すべての確認といった作業を一箇所で簡単に行えるため、貴重な時間の節約になるとともに、関係者全員がつねに最新の状況を共有できるようになります。また、ユーザーからのフィードバックに基づき、テキストコンテナに含まれるサブセットテキストの扱いを強化しています。開発者は、単一のテキストレイヤー上で、上付き文字および下付き文字のスタイルを含む複数のスタイルが適用された異なるテキスト範囲を選択し、その属性を確認できるようになりました。

プロトタイプの確認作業を迅速化するグリッド表示

デザインビジョンを視覚化し、さまざまな役割の人々すべてに伝えるために、XDにはパワフルなデザインおよびプロトタイプ機能が搭載されています。そして、「プレビュー用に共有」あるいは「開発用に共有」を使えば、プロトタイプへのリンクを生成し、プロダクトマネージャー、開発者、経営幹部、その他の関係者など、フィードバックを行いたい人々に共有できます。

複雑なプロダクトの場合、そのデザインに数十ものアートボードが含まれることは珍しくありませんが、そのような場合、デザイナーではない人(つまりすべての人々)にとって、特定の画面に移動して確認することは困難です。以前のバージョンのXDでは、プロトタイプを受け取ったのち、実際にクリックして個別の画面を次々に遷移して行かないと目的の画面にたどり着けませんでした。

最新バージョンのXDでは、デザインプロジェクトに含まれる画面すべてがサムネイルとして表示される新しいグリッド表示を使ってプロトタイプ内の画面一覧を表示できます。グリッド表示を使えば、レビューアーはXDプロトタイプの内容をより効率的に確認し、自分がもっとも関心を持っている特定の画面に直接移動できます。

コメント入力のモバイルWeb対応で、どこからでもフィードバックが可能に

プロジェクトの進行中、デザインチームは何度も反復的な改善作業に取り組むわけですが、スケジュール通りに進めるには、レビューの迅速な戻しが必須となります。対するレビューアー側は、モバイルデバイスからプロトタイプにアクセスすることも珍しくなく、とくに外出先の場合は、その場でコメントの記入や他のレビューアーの意見の確認をしたいと思うのではないでしょうか。

最新リリースのXDでは、手元でプロトタイプを表示しているモバイルデバイスから直接コメントを入力できるようになりました。モバイルのコメント入力対応で、チームメンバーと関係者はいつでもどこにいてもフィードバックを返せるため、レビューサイクルが加速します。

ソーシャルメディア

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

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

日本のユーザーコミュニティが各地で立ち上がり、毎月XDの勉強会を開催したり、使い方やTipsなどの情報共有など、積極的な活動をおこなっています。各地の「Adobe XD ユーザーグループ(XDUG)」が情報交換を行なっているFacebookページもご覧ください。また、5月25日の東京からスタートしたXDUGのフェス「XDUF」(札幌から沖縄まで全国12都市をリレー)にもご参加ください。

#MadeWithAdobeXD

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

__
Adobe XD をダウンロード

_
この記事は2019年7月16日に公開されたJuly 2019 Release of Adobe XD: Improved Designer-Developer Collaboration, Mobile Commenting, and Moreの抄訳です_