Adobe XD 7月アップデートリリース! アセット名の設定、点線と破線のサポート、デザインスペックのコメント機能など #AdobeXD

Creative Cloud UI/UX & Web

Adobe XD 7月アップデートには、さらに魅力ある体験を顧客や、同僚のデザイナーと開発者、ステークホルダーに提供するのに役立つ数多くの新機能が含まれています。点線や破線がサポートされたことにより、ファイルのアップロード領域やドラッグ&ドロップ領域の表現が可能になりました。また、アセットにラベルを付けて整理する新たな機能(数百ものアートボードを横断した検索が容易になります)も提供を開始しました。さらに、開発チームと会話が簡単にできるコラボレーションツールをデザインスペックに追加しました。

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

点線と破線のサポート

点線と破線、線端の形状、角の形状、その他の属性を線に適用できるようになりました。さらに、Adobe Illustratorから多用な属性を併せ持つ線をコピーして、XDのネイティブオブジェクトとしてペーストもできます。Equinox社のデジタルデザイン担当ディレクター、 セシリア ファローキ(Cecilia Farooqi)はこう語っています。「私のチームは、デザインに点線や破線を普段からよく使ってます。XDで線種サポートが拡張されたことで、他のアプリケーションでベクター画像を作成してからXDにペーストするような余計なステップが不要になりました。複雑なベクター画像の場合は特に、XDにペーストした後でも破線や間隔を調整できるのは大きな利点です。こういった嬉しい新機能の追加があるからこそ、XDがお気に入りのデザインツールなのです。」次の動画で、その動作を確認してください。

動画では、フィールド、ボタン、その他のエレメントを、Adobe XDがサポートする多様な点線と破線を用いて作成する様子が確認できます(一部Illustratorを使用)。この機能を使用することで、ドラッグ&ドロップの領域の作成や、ファイルのアップロード領域をわかりやすく囲んで表示したり、好みのおしゃれなデザインを作ることができます。

アセット名の設定

Adobe XD内で、アセットおよびデザイン設定の整理が容易に行えるようになりました。カラー、文字スタイル、シンボルに名前をつけてアセットパネル上に保存ができます。名前付きアセットはその種類か名前でフィルターでき、表示もリストとグリッド形式の切替えが可能です。また、マウスカーソルを重ねるとロールオーバー表示されるツールチップでアセット情報をすばやく確認できます。「デザインファイルには、数多くのカラー、文字スタイル、シンボルが含まれますが、名前を付けられ、その名前で検索できるようになり、時間が大幅に削減でき、整理が簡単にできるようになりました。XDにこの機能が追加されることを強く要望してきましたが、待ちに待った機能が実現したことをとても嬉しく思います。」とPoshmark社 シニア UXデザイン マネージャー、マリー ウェスト(Marie West)は語ります。次の動画で、その動作を確認してください。

動画では、このちょっとした機能がプロジェクトの整理に大きく貢献することがわかります。数百単位のアートボードがあっても、探しているものをすばやく見つけ出すことができます。

サードパーティワークフロー連携(Windows版)

XDで作成したデザインを、他のプロトタイピングツールやワークフローツールに組み込みたいという要望は、昨年XDが正式リリースされた直後から多く寄せられていました。Mac版では1月からサポートしていますが、今回Windows版でもZeplin、Avocode、Protopieなどとの連携を実現できたことを嬉しく思います。XDでデザインを開始して、使い慣れたツールに組み込むことによって、開発者へのプロジェクト受け渡しや高度なアニメーションの追加などの作業がよりスピーディーに行なえます。

デザインスペックのコメント機能

デザインスペックに、プロトタイプと同様の充実したコメント機能を追加しました。開発者がデザインにコメントをつけると、メールとCreative Cloudアプリ通知の両方が送られます。コメントに対する応答は、開発者がブラウザをリフレッシュすると反映されます。旧バージョンのAdobe XDで作成したデザインスペックは、Aobe XD 10以降を用いて再度パブリッシュをすることでこの新機能を利用できるようになります。次の動画で、その動作を確認してください。

動画では、デザイナーと開発者の両方の立場から新しいコメント機能を使っている様子が確認できます。質問の投稿やコメントの閲覧を、デザイン上ですばやくできるのが分かります。

その他の新機能:段落間隔の調整、クリップボードからの画像ペースト、パスワードの伏せ字表示、中国語(簡体字)サポート

今月のアップデートリリースに盛り込まれた、生産性向上のための主な改良点は以下の通りです。

  • 段落間隔の調整:段落同士の間隔を指定できるようになりました。また、Photoshop/Sketchで設定した段落間隔は、XDで開いたときに編集可能な状態で変換されます。
  • クリップボードからの画像のペースト:シェイプに画像の塗りを適用する場合、これまでは作業フォルダなどからドラッグ&ドロップする必要がありました。今回のアップデートでは、シェイプを選択し、[編集]>[アピアランスをペースト]をするだけで、クリップボードにコピーした画像で塗りを適用できます。その後は、Adobe XD 6月アップデートで追加された新機能により、画像マスクをダブルクリックするだけで画像のリサイズや移動が行えます。
  • パスワードの伏せ字表示:パスワード作成時に、文字の伏せ字表示を切り替えられます。この機能により、共有プロトタイプと共有デザインスペックへのアクセスを設定するときのセキュリティが高まります。
  • 中国語(簡体字)サポート:英語、フランス語、ドイツ語、日本語、韓国語に加え、新たに中国語(簡体字)をサポートしました。

このような機能が追加されたことにより、Adobe XDを使用して仕事の効率と安全性をさらに向上できます。Segal Savadのアートディレクター、 サラ グリーン(Sara Greene)は次のように語っています。「アドビはいつもユーザーの業務内容の改善に取り組んでおり、XDにおいては特に画像をクリップボードから直接シェイプにペーストできる機能は、まさに作業効率を上げてくれ、締め切りが迫っているときなどには重宝します」

UXコミュニティ

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

#MadeWithAdobeXD

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

ソーシャルメディア

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

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

ユーザーコミュニティであるAdobe XD ユーザーグループがほぼ毎月XDの勉強会を開催したり、使い方やTipsなどの情報共有など、積極的な活動をおこなっています。

この記事は2018/7/16にポストされたJuly 2018 Release of Adobe XD: Stroke Enhancements, Commenting on Design Specs, and Moreを抄訳したものです。

POSTED ON 2018.07.17

Products Featured

  • Adobe XD

Tags

タグはありません