Adobe XD Preview 4 リリース！日本語UI、オブジェクト間の距離計測、ぼかし機能など
Adobe XD アップデート
この記事は、2016/6/21 にポストされた June Update of Adobe Experience Design CC (Preview) を抄訳したものです。
Adobe Experience Design（以下、Adobe XD）チームは、デザインコミュニティーの一員でもあります。したがって、毎日UserVoiceにあるコメントや投票、提案をチェックし、新機能の調査や優先度付け、設計に役立てています。ぜひ、みなさんからのフィードバックもお待ちしています。（日本語でも大丈夫ですよ！）
今回のアップデート内容
計測機能
よくコミュニティーで耳にするのは、デザイナーからコーダーへデザインカンプやアセットを受け渡す段階が一番厄介だということです。コーディングするためのさまざまな情報が必要になるからです。
そこで、まずはコーディングしやすいようにデザイン内にあるオブジェクト間の距離が簡単に取得できる計測機能をサポートしました。どんな階層にあるオブジェクトでも計測可能です。
計測機能の使い方
1．オブジェクトを選択して、Alt/Optionキーを押します。するとアートボードの端から距離が表示されます。なんらかの制約を定義したり、オブジェクトを別のオブジェクトの端と相対的に配置したい場合などにとても便利です。
2．オブジェクトを選択して、Alt/Optionキーを押したまま、他のオブジェクトにカーソルをロールオーバーさせます。すると両者の距離が表示されます。
3．オブジェクトが自分より大きなオブジェクトの上に配置されている場合、そのオブジェクト内での距離が表示されます。
4．オブジェクト同士の位置がX軸、Y軸でまったく重ならない場合、ガイド線（点線）が表示され、距離も表示されます。
5．オブジェクトを回転させた場合、バウンディングボックスの端で距離が計算され表示されます。
6．オブジェクトをゆっくりと動かしている間も距離が表示され続けます。
背景のぼかしとオブジェクトのぼかし
以下の2種類のぼかし機能が追加されました。どんなシェイプやテキストにも適用できます。
- オブジェクトのぼかし：オブジェクト自体をぼかす
- 背景のぼかし：オブジェクトの背面にあるものすべてをぼかす
オブジェクトのぼかし
選択したオブジェクト自体をぼかします。ぼかし量はスライダーで設定できます。
背景のぼかし
同じ画面内で特定の部分だけをハイライトさせたい時に便利な手法です。この効果はiOSやmacOS、Windowsでよく使われています。
背景のぼかしは以下の3つの設定ができます。
- ぼかしの量
- 明るさ
- 不透明度
プロトタイプの埋め込みタグ
プロトタイプを共有するためのURL発行だけでなく、Webサイトに埋め込むためのタグ発行もサポートしました。たとえば、作成したプロトタイプをBehanceに埋め込んで、世界中の人に進行中のプロジェクトを体験してもらうこともできます。
「リンク」から「埋め込み」に切り替えるとiframeのHTMLコードが表示されます。
日本語UI
今回のプレビュー版では日本語UIの他にもドイツ語、フランス語がサポートされました。その他の言語も今後サポートされる予定です。
今回のリリースの解説ビデオ（英語）もご覧ください。
まもなく追加予定の機能
ひとつ前のアートボードに戻る
プロトタイプモードで画面遷移を設定する際に、ひとつ前の画面に戻る機能がつきます。画面をいちいち戻るための設定が不要になって楽になります。
ズームツール
フィードバックとして寄せられていたズームツールを cmd + space のショートカットキーとともに追加予定です。
PDF読み込み/書き出し
PDFはクリップボードでよく使われていますが、SketchやKeynoteなど、他のツールからのコピー&ペーストを充実させていきます。さらに選択したアートボードやアセットをPDFに書き出す機能も予定しています。
製品に対するフィードバック
XDチームはみなさんからのフィードバックを生きがいにしています。そして、UI/UXに関わる人たちが次世代のデジタルエクスペリエンスをデザインするために使いたいと思うツールを提供する使命に燃えています。最新のAdobe XDをお試しいただき、ぜひフィードバックをお寄せください。
機能に関する感想や要望やバグなどがございましたら、Adobe XD UserVoiceページからご連絡ください。日本語でも大丈夫です。Twitterは、ハッシュタグ#AdobeXDを使用して投稿していただければ、チーム全員がツイートを確認できます。また、Facebookやパブリックフォーラムからもご連絡いただけます。
XDで作成したプロトタイプをBehanceで共有する場合のハッシュタグは#MadeWithAdobeXDで、「使用ツール」から「Adobe Experience Design」を選択してください。