連載  /  

Adobe XD 8月アップデートリリース!アセットパネルでの並べ替え、デザインスペックからのアセット書き出しなど #AdobeXD

BY 公開

8月のAdobe XDアップデートには、プロトタイプのデザインと共有におけるコラボレーションを、より計画的に、より簡単に行える新機能が含まれています。アセットパネルにおいてはエレメントの並べ替えが可能になり、カラー、シンボル、文字スタイルなどをより整理整頓しやすく、探しやすくなります。今回のアップデートには、ブラウザ表示されたデザインスペックを任意の解像度とファイル形式で直接ダウンロードできる、開発者にとっても嬉しい新機能も含まれます。また、プロトタイプをwebに公開した後でもアクセス権を追加または削除できる新機能は、ステークホルダーにとっても朗報です。

この記事ではXDの新機能を動画とともに紹介します。また、日本時間 8月21日〜8月23日(米国太平洋時間 8月20日〜8月22日)にUXのトップデザイナーがAdobe Live(英語)でAdobe XDの最新機能をご紹介するデモを行いますので、ぜひご覧ください。

アセットパネルでの並べ替え

7月リリースのAdobe XDアップデートでは、アセットパネル上でカラー、文字スタイル、シンボルに名前を付けられる新機能を搭載しました。今回のリリースではさらに一歩進み、リスト上のアイテムを1つまたは複数選択し、任意の場所にドラッグして並べ替えできるようになりました。

これはプロジェクトの整理整頓に強い味方となります。例えば、アセットをそのアプリのプライマリ カラーなのかセカンダリ カラーなのかによって分類したり、シンボルをその背景イメージや属するアイコンセットによって仕分けたり、H1タグに相当する階層の文字スタイルを同じ場所にまとめたりできます。「アセットパネル上でエレメントを並べ替えできるようになったことで、私にとってデザイン作業がより効率的になりました。」とPoshmarkのジュニア ビジュアルデザイナー リア ソン(Leah Sung)は語ります。

「よく使うアセットは上のほうに置いておけますし、見た目や用途によってアセットを整理しておけばすぐに探しだせます。」

エレメントに適切な名前付けをしておけば、すべての、あるいは特定の種類のアセットを検索して絞り込むことができます。両者を併せれば、いくつものアートボードが含まれる複雑なプロジェクトであってもコンテンツの検索が一段と効率的に行なえます。

デザインスペックからのアセット抽出

デザイナーは自分が何をどうデザインし、ステークホルダーの要求をどう満たし、エクスペリエンスのユーザーテストをどう行えばよいか知っていますが、最終バージョンのプロダクトとしてデザインを実装する際に開発者が必要とするファイルの形式を厳密に知っているケースは稀ではないでしょうか。今回のAdobe XDアップデートでは、デザイナーと開発者がより協調しやすい機能が搭載されました。

デザインスペックを受け取った開発者は、ブラウザで開いたデザインスペックから直接、解像度とファイル形式を指定してアセットをダウンロードできるようになりました。次の動画で、その動作を確認してください。

もちろん、デザインのなかでどのオブジェクトがエクスポートできるのかについては、完全にデザイナーの裁量に任されていますが、エレメントをバッチ書き出し可能にしておくことによって、デザイナーと開発者のあいだのワークフローはこれまでになくスムーズなものとなります。「これまで私たちは、デザインスペックを確認したりアセットを抽出するためだけにサードパーティー製アプリケーションあるいはデザインツールを、開発者のぶんもライセンス購入していました。」と、Let’s Buildのプリンシパル パートナー キャメロン ザック(Kameron Zach)は振り返ります。

「このAdobe XDの新機能によって、私たちはプロジェクトの重要なデザイン指示を開発チームにわずか数クリックで行き渡らせることができます。開発案件で受け取るデザインやアセットの多くは、開発やテストのフェーズであっても変更がつきものなので、これは私たちにとってとくに有用なものです。今後の案件ではこの機能を積極的に使っていきたいです。」

プロトタイプとデザインスペックのコメントにおける@メンションのサポート

共有プロトタイプとデザインスペックに、宛先を指定できる@メンション機能が加わったことにより、ステークホルダーが自分に向けられた確認依頼コメントをフォローしやすくなりました。コメントフィールド入力中に「@」をタイプすると、非公開な招待状による共有の場合は招待済みのユーザーがドロップダウンリストに表示されます。公開のプロトタイプおよびデザインスペックの公開の場合は、少なくとも1度コメントをしたユーザーがドロップダウンリストに表示されます。コメント内で@でメンションされたユーザーには、メールまたはCreative Cloudデスクトップアプリによって直接通知が送られます。その通知をクリックすることで、参照されたアートボードを確認できます。

プロトタイプとデザインスペック共有への招待がブラウザから可能に

これまでXD内からのみ行うことができた、非公開招待のアクセス権管理がブラウザからも可能になりました。これにより、デザインがwebに公開された後であってもステークホルダーを追加したり削除することができます。公開済みリンクをクリックし、ウェブブラウザ上でプロトタイプまたはデザインスペックを表示してから、[招待]または[削除]ボタンをクリックしてステークホルダーを追加または削除します。

プロトタイプ制作のさまざまな過程で複数の担当者やチームとの共同作業が欠かせないデザイナーにとっては、すべてのステークホルダーの管理プロセスを大幅に省力化できる機能です。「Adobe XDはコラボレーションをこれまでになく簡単にしました。webでプロトタイプの公開済みリンクを開くだけで追加のステークホルダーに招待を送れるようになったので、XDを改めて開く必要がなくなりました。継続的なアップデートと、このような新機能の追加は、Adobe XDチームが私たちの要望に耳を傾けてくれている証拠です。」Perficient Digitalのアソシエート クリエイティブ ディレクターのマックス モーガン(Maxx Morgan)は語ります。

UXコミュニティ

これからもコミュニケーションを続けていきたいと思います。アップデート情報は、Twitterで@AdobeXDをフォローしてください。Twitterでハッシュタグ#AdobeXDを付けて投稿すればXDチームにも届きます。また、Facebookでビデオやアップデート情報を公開していますし、Facebookライブセッション中(英語)にはご質問にもお答えします。

#MadeWithAdobeXD

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

ソーシャルメディア

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

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

日本のユーザーコミュニティが各地で立ち上がり、ほぼ毎月XDの勉強会を開催したり、使い方やTipsなどの情報共有など、積極的な活動をおこなっています。

東京 Adobe XD Meeting
福岡 Adobe XD Meeting
大阪 Adobe XD Meeting

ご興味のある方はぜひご覧ください。

この記事は2018/8/21にポストされたAugust 2018 Release of Adobe XD: Reorder Assets, Asset Extraction, and Moreを抄訳したものです。

 

  TAGS

  AUTHOR

Keisuke Todoroki

アドビ システムズ 株式会社 / マーケティングマネージャー。 1999年、早稲田大学理工学部を卒業後、大手印刷会社に勤務。主にEC分野で J2EE開発に携わるが、Flexとの衝撃的な出会いを機にRIAの世界へ。 2008年4月、アドビ入社。 アドビのWebツール全般のマーケティングを担当。