Adobe XD 2019年10月アップデートリリース!ブレンドモード、サイズ/位置調整のショートカット、非表示オブジェクトへのアクセスなど #AdobeXD

連載

Adobe XD アップデート

今月のAdobe XDアップデートには、ワークフローを確実に高速化する、エキサイティングな新しいキーボードショートカットの追加とUI強化、そして要望が多く寄せられていたブレンドモード(描画モード)の導入が含まれています。ブレンドモードを使えば、PhotoshopやIllustratorと同じ「比較(明)」「乗算」といった設定を画像に適用して他のレイヤーとブレンドできます。これにより、興味深くユニークな効果が生まれ、より魅力的な画像やグラフィックスをXDで作成できるようになりました。

今回のアップデートにはまた、Windows版およびMac版のXDアプリケーションのデザインスペックとデザインカンバスの両方で、完全に覆われたレイヤーや一部覆われたレイヤー、または非表示のレイヤーを扱いやすくするための新機能も含まれています。加えて、オブジェクトを簡単にナッジ(少しずつ移動)する、サイズ変更するための新しいキーボードショートカットも追加されました。

私たちは今回の新機能の追加を嬉しく思っていますが、来月のAdobe MAX(英語)ではさらに多くの新機能をお届けする予定です。本記事では、2019年10月アップデートの詳細に加え、11月初旬にリリース予定の次回アップデート(待望の共同編集機能を含みます)についても少しだけご紹介します。

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

Adobe XD をダウンロード

ブレンドモード:画像とグラフィックスに目をみはるエフェクトを追加

XDのブレンドモードでは、「比較(明)」や「乗算」といった既定のアルゴリズムを使い、デザインカンバス上のレイヤーを背景や他のレイヤーとブレンドする合成効果が得られます。ブレンドモードを使えば、ブランドカラーを使ったダブルトーン(単一のグレースケール画像を2版以上のカラーで印刷すること)効果を画像に適用することもできます。

この機能は、ブレンドしたいオブジェクト同士、またはオブジェクトと背景をクリックするだけで使用できます。プロパティインスペクターに新しいドロップダウンメニューが表示され、さまざまなブレンドモード から選択できるようになります。

この機能は、PhotoshopやIllustratorなど他のアドビツールにおけるブレンドモード(描画モード)と非常に似ており、そのためそれらツールあるいはSketchで指定したブレンドモードをそのまま読み込めます。その際、ブレンドモードはXD内での表示のために変換されるだけでなく、完全に編集可能な状態で読み込まれます。また、ブレンドモードは常に非破壊的であり、最終製品の開発に向けてデザインスペックとして引き継がれたときでも、開発者はブレンドモードの属性を確認できます。

オブジェクトを簡単に移動およびサイズ変更できる、新しいキーボードショートカット

キーボードショートカットはワークフローを大幅に高速化します。ショートカットを多用する皆さんには、デザインカンバス上のオブジェクトのサイズと位置を調整するための新しいショートカットを気に入っていただけるでしょう。

これまでも矢印キーを使用してオブジェクトを1ピクセル単位で移動できましたが、今回のアップデートで次のすべてができるようになりました。

これらの既存および新規ショートカットは、オブジェクトをグリッドにスナップする際にも有効です。方眼グリッドをオンにし、上記のショートカットを使用すると、オブジェクトを次のグリッド線にすばやく移動できます。この同じ動作は、オブジェクトのサイズ変更でも機能します。グリッドがオンの状態でショートカットを使用すると、サイズ変更が次のグリッド線にスナップし、微調整は矢印キーで行うことができます。

Microsoft TeamsまたはSlackとの統合で、プロトタイプを用いたコラボレーションをより緊密に

世界中のデザインチームが、Microsoft TeamsあるいはSlackのようなツールを使ってデザインのコラボレーションを行いながらプロジェクトを完成させています。Adobe Creative Cloud integration for Microsoft Teams(英語)やAdobe Creative Cloud integration for Slack(英語)といった統合アドインを使えば、数千ものチームが、使い慣れたツールの中から、Creative Cloudファイルを共有し、変更や更新について通知を受け取り、ファイルへのアクセス権限を更新できます。

今回の統合機能強化は、チームが使っているコミュニケーションプラットフォームがどちらであっても、XDプロトタイプまたはデザインスペックを介したコラボレーションを簡単に行えるようにするものです。これにより、共有された成果物へのコメントをMicrosoft TeamsまたはSlackから直接表示および追加できるため、すべてのコミュニケーションを1つのプラットフォームに集約しながらも、他のプラットフォームとコラボレーションできます。XDプロトタイプまたはデザインスペックにコメントが投稿されると、Creative Cloudアプリを介してMicrosoft TeamsまたはSlackに通知が投稿されます。あとはスレッドを開始して返信し、XDプロトタイプへのコメントを投稿するだけです。共有ファイルのオーナーまたは共同編集者がXDプロトタイプリンクへのコメント内で誰かに@メンションされた時には通知が送られるため、最も関連性の高いコメントのみが知らされることになります。

Slack用のCreative Cloud統合アドオンは今日からSlack App Directory(英語)で提供を開始します。強化されたMicrosoft Team用統合アドオンは近日提供を予定しています。その他、Adobe XDのアプリ統合について詳細はこちらをご覧ください(英語)。

重なり合ったレイヤーに簡単にアクセス(デザインカンバスおよびデザインスペック

オーバーレイを作成したり、ブレンドモードを使用したり、「シェイプ範囲を交差」「シェイプを結合」「前面オブジェクトで型抜き」のようなブール演算で複合オブジェクトを作成するたびに、デザイン上ではレイヤーが重なっていきます。これにより、レイヤー同士が重なり合い、個々のレイヤーを選択することが困難になります。

Adobe XDの最新アップデートでは、デザインカンバスとデザインスペックの両方で、背後にあるレイヤーやオブジェクトの個別選択が簡単になりました。デザインカンバス上で他のレイヤーを覆うレイヤーがある場合、Cmd(Mac)またはCtrl(Windows)を押しながらクリックを繰り返すことで、重なり合ったレイヤーの間を個別に循環して選択できるようになります。

これにより、対象のオブジェクトをレイヤーパネル内で探す必要がなくなります。目当てのオブジェクトを循環クリックで選択したら、プロパティインスペクターを使って操作するか、右クリックしてオプションを選択できます。この新機能は、重なり合ったグループにも有効で、複数のエレメントで構成されたグループの間を簡単に循環して選択できます。

デザインスペック上での重なり合ったオブジェクトの選択も簡単になりました。以下の動画では、1つのグループ内の異なるレイヤーそれぞれにブレンドモードが設定されています。開発者は右クリックでメニューにアクセスし、デザインスペック上で重なり合っているレイヤーを個別に選択して設定を確認することができます。

レイヤーに重ね順で簡単にアクセスできるようになったことで、どんな領域でもすべてのオブジェクトが確認できるようになり、重なり合ったオブジェクトの個別確認に伴っていたフラストレーションが軽減されます。

登場間近のエキサイティングな機能:ライブ共同編集など

今回のAdobe XD 2019年10月アップデートに含まれる新機能のすべてを皆さんにお伝えしましたが、まだいくつか素晴らしい新機能が登場を控えています。先月、XDのプロダクトマネジメントのシニアディレクターであるアンドリュー ショーテン(Andrew Shorten)が寄稿した製品ロードマップに関する記事にもあるように、そのうちの最重要なもののひとつがライブ共同編集です。これは、複数のデザイナーが同時に1つのXDドキュメントを開き、共同で、リアルタイムでデザイン編集できるようにするものです。

今後は共同編集に加え、ドキュメント履歴のサポートなど、生産性を高め、Adobe XDでのデザイン、プロトタイピング、コラボレーションをさらに楽しいものにするさまざまな機能を追加予定です。2019年11月4日〜6日に開催するアドビのクリエイティビティカンファレンスAdobe MAX(英語)で、その詳細が明らかになります。最新のアップデートについては、本ブログにて適宜ご紹介していく予定です。ご期待ください。

ソーシャルメディア

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

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

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

#MadeWithAdobeXD

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

Adobe XD をダウンロード

この記事は2019年10月10日に公開されたOctober 2019 Release of Adobe XD: Blend Modes, New Keyboard Shortcuts, Updated Collaboration Integrations, and Moreの抄訳です