Adobe XD 6月アップデートリリース！固定オブジェクト、アートボードのオーバーレイ、四則演算など #AdobeXD

Adobe XD アップデート

Adobe XDの6月のアップデートリリースでは、UXデザイナー向けの新機能が追加されました。待ちに待った固定オブジェクトが設定可能になり、固定されたヘッダーやフッターをデザインに加えることができます。またアートボードのオーバーレイもサポートされます。オーバーレイでは、ポップアップキーボードやドロップダウンメニューなどのコンテンツを簡単に重ね合わせられるようになりました。さらに、生産性向上のための数多くの改良、そしてプロトタイプとデザインスペックをチームメンバーやクライアントなどに公開範囲を限定して共有できる、プライベート共有機能が追加されました。

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

__
Adobe XD をダウンロード

固定オブジェクト

固定オブジェクトは、デザインオブジェクトをアートボード上の特定の位置に固定表示する機能で、最も多くの要望を寄せられていた機能の1つです。固定オブジェクトは、他のデザインオブジェクトの手前または背後に配置することができ、アートボードをスクロールしても、ヘッダー、フッター、メニューなどが画面上の固定された場所に表示され続けます。固定オブジェクトはデスクトッププレビューだけではなく、プロトタイプやデザインスペックをウェブで共有した状態でもライブで動作し、より本物に近いインタラクション体験を提供します。次の動画で、その動作をご覧ください。
https://www.youtube.com/embed/2IAb96wvA5s?feature=oembed
ビデオで紹介されているのは、垂直スクロールをしてもヘッダー、フッター、メニューバーが固定位置に表示されるiPadアプリのプロトタイプをAdobe XDで作成しているところです。操作方法は、固定したいオブジェクトをクリック選択してデザインの最前面に移動させ、［固定位置］メニューアイテムを選択します。単一のオブジェクトもあるいはグループのオブジェクトのどちらも固定でき、重要な情報やナビゲーションツールを、ユーザーが常にアクセスしやすい状態に保つことができます。

アートボードのオーバーレイ

オーバーレイを効果的に使うことにより、デザイン内のインタラクションのシミュレーションを行ったり、ユーザーに重要なアクションを促すことができます。オーバーレイをサポートしたことによってAdobe XDでは、特定のコンテンツをアートボードの手前に簡単に重ねて表示できるようになり、ドロップダウンメニュー、スライドアップするキーボード、ライトボックス（画像の拡大表示）エフェクトといったエレメントが表現できます。従来のように、複数のアートボードそれぞれにエレメントを複製して配置する必要はありません。オーバーレイは固定オブジェクトと同様に、デスクトッププレビューだけでなく、プロトタイプやデザインスペックをウェブ共有したときにもライブで動作します。次の動画で、その動作をご覧ください。
https://www.youtube.com/embed/4cpz2OIHYvw?feature=oembed
このビデオでは、特定のオブジェクト（この場合は検索ボックス）がクリックされると、別のアートボードデザインの手前にオーバーレイで表示されるスライドアップキーボードが簡単に設定できることがわかります。Adobe XDのオーバーレイ機能の優れた点は、1つのオーバーレイ要素をリンクしてトランジション効果を選択するだけで良く、オーバーレイコンテンツをすべてのアートボード上に複製配置する必要はなくなりました。

プライベート共有（ベータ）

プロトタイプとデザインスペックへのアクセスがこれまで以上にセキュアになりました。共有したいプロトタイプについて、新たな「プライベートリンク」を作成し、メールで特定の相手を招待します。メールにはメッセージ文を書くことができ、メールを受け取った人はデザインをレビューしコメントすることができます（これにはAdobe IDが必要ですが、お持ちでない方も表示される手順に従えば無償で作成できます）。次の動画で、その動作を確認してください。
https://www.youtube.com/embed/QZx-2wjpCu4?feature=oembed
レビューを依頼する先のチームメンバーは、先に共有されたプロトタイプまたはデザインスペックからいつでも削除することができます。統合されたウェブポータルによりデザインの共有、レビュー、追跡も簡単になりました。Perficient Digitalのアソシエートクリエイティブディレクター、マックスモーガン（Maxx Morgan）はこう語っています。「よりセキュアな状態でプロトタイプを共有したいシチュエーションにもAdobe XDが対応してくれるようになりました。新たなプライベート共有機能を使えば、チームメンバーにレビューの招待を送ってからコメントを受け取るまでが分単位になりました。」

画像の塗りのトリミングと位置調整

以前のバージョンのAdobe XDでは、シェイプあるいはパスに対してデスクトップから画像をドラッグ＆ドロップした場合、その画像をトリミングしたり位置調整することができませんでした。最新のアップデートではダブルクリックするだけで、簡単にできるようになりました。次の動画で、その動作を確認してください。
https://www.youtube.com/embed/_2dlaFOViHs?feature=oembed
この新機能は多くのデザイナーにとって大幅な時間節約となるでしょう。Ideas Collideのクリエイティブディレクター、ジェイミーヌズバック（Jamie Nuzback）は「Adobe XDの良さはシームレスなところにあります。マスク用のシェイプに画像をペーストしたあとでも、とても簡単に編集できるようになり、思い通りの結果を得るために他のソフトウェアで作業する必要が減りました」と、述べています。

その他の新機能：数値フィールド内の四則演算、Photoshop/Sketchの画像の塗りサポート、モバイルアプリでのTypekitサポート

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

Photoshop/Sketchの画像の塗りサポート：上述の、画像の塗りの編集機能が追加されたことにより、Photoshop/Sketchファイルの画像の塗りも編集可能な状態で変換されます。
数値フィールド内の演算：InDesign、Muse、Illustratorのように算術演算子を使用して簡単な数値の演算が可能です。
モバイルアプリでのTypekitサポート：XDモバイルアプリでCreative CloudファイルからXDドキュメントに読み込む際に、使用されているTypekitフォントを自動認識して同期します。

これらの新機能でAdobe XDはますます使いやすいツールとなりました。数値フィールド内の演算機能を使えば、オブジェクトグループのサイズを80%に縮小したり、タイルデザインのためにアートボード領域を分割したり、オブジェクトをX/Y方向それぞれに特定のピクセル数だけ移動させたりすることができます。Sapient Razorfishのエクスペリエンスリード、ダニエルオニール（Daniel O’Neil）はこう語っています。「新しい演算機能はほんとうに時間節約になります。ワイヤーフレームを作成する際に、オブジェクトを配置して位置関係をあれこれ調整することがすばやく簡単にできるのです。」

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（2016年7月発足）
福岡 Adobe XD Meeting（2018年5月発足）
大阪 Adobe XD Meeting（2108年6月発足）

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