Adobe XD 11月アップデートリリース！デザインスペック追加で開発者への受け渡しをもっと簡単に #AdobeXD
Adobe XD アップデート
ユーザーのみなさんが自分のアイデアをさまざまなデバイスやプラットフォームでのユーザーエクスペリエンスとして具現化するために、XDにもっと多くの機能を求めていることは、UserVoiceなどでのコミュニケーションを通じて常に把握しています。今回のアップデートでは、こうした声にお応えし、最もリクエストの多かったいくつかの機能を追加しました。いずれも、デザインの手間を省き、アイデアを人々にスピーディに伝えるための機能です。
これらのアップデートが動作するところをご覧になりたい方は、11月14～16日のAdobeLiveで、UXのトップデザイナーによるAdobe XD最新機能のデモをご覧ください。
デザインスペック（ベータ版）
世界中のデザイナーとコミュニケーションすることで、デザインはアイデアをエクスペリエンスに変えるプロセスの一部にすぎないということを確信されたかと思います。UserVoiceに寄せられるリクエストからも明らかなように、コンセプトからデザイン、デザインからプロトタイプ、さらに制作作業に移行するには、開発者をはじめとするさまざまな人々との協調が欠かせません。デザインプロセスを完了させたら、自らの意図を開発者に伝えるという、自動化できない時間のかかるプロセスが始まります。
そうした理由からアドビは、新たにデザインスペック（ベータ版）機能を搭載しました。XDで作成したプロトタイプをURLで公開できるため、開発者はそこで画面遷移の確認、レイアウトする位置などの情報、スタイルのコピーができます。ポジション、テキストスタイル、フォントなどを開発者に伝えるために仕様を書き出す必要はなくなります。これまでと同様、アドビはデザインプロセスのスピードアップを重視しています。デザインスペック（ベータ版）によってデザイナーのみなさんが膨大な時間を節約できることを願っています。
https://blog.adobe.com/media_3c1d94c2037cbcbd02298691b1218a30579598cb.gif
なぜデザインスペックがベータ版なのか不思議に思う方がいるかもしれません。この機能は、デザイナーと開発者のコミュニケーション改善の第一歩です。デザインスペック（ベータ版）は、ワークフローを速やかに改善しますが、これは始まりでしかありません。すでに、デザイナーから開発者へのワークフローを改善するコードスニペットやアセット抽出などの追加機能へのご要望が数多く寄せられています。私たちは、デザインスペックのさらなる強化に取り組んでおり、みなさんからのフィードバックをお待ちしています。
この改良作業を継続する間は、「ベータ版」の呼び名はそのままにしておく予定です。ベータ版であっても、XDで提供されている他の機能と同様の品質と性能とお考えください。デザインスペック（ベータ版）とベータ機能の定義についての詳細は、ガイドページをご覧ください。
https://blog.adobe.com/media_2966c3f875a15e909047f5358af959e45601d397.gif
デザインスペック（ベータ版）は当初英語版のみの提供となりますが、今後Adobe XDがサポートするすべての言語で提供を開始する予定です。
レイアウトグリッド
グリッドとレイアウトシステムは、これまで受け継がれてきたデザインの伝統の一環であり、複数のスクリーンでの表示を考慮しなければいけない現代においても有用な手法といえるでしょう。Adobe XDはすでにマス目上のグリッドをサポートしていますが、本当に必要なのは、カラム、余白、ガターのあるレイアウトグリッドであるという声が寄せられています。新たに搭載されるレイアウトグリッド機能では、一貫性のある整ったデザインを制作し、エレメント間の比率を管理できるようになりました。
レイアウトグリッドはプロパティインスペクターまたはキーボードのショートカット（Macでは「Shift+Cmd+’」、Windowsでは「Shift+Ctrl+’」）を使用して表示/非表示が切り替えられ、カラーピッカーでグリッドの色や透明度を変更できます。余白は、等分に設定することも（リンクあり）、独立して定義することも（リンクなし）可能です。すべての特性（カラムの数、ガターとカラムの幅、余白）は、入力内容に基づいて自動アップデートされます。
https://blog.adobe.com/media_f8b34a92fb2dcb0174ac1fdef6ce8c6a9e06ae1a.gif
レイアウトグリッドをアートボード上に設定したら、作成したエレメントはグリッドにスナップされます（現行のマス目のグリッドの場合と同様です）。
レイアウトグリッドは、シンプルさとカスタマイズ機能の適切なバランスを見つけるための試みです。皆様からのフィードバックとエクスペリエンスの事例をお待ちしています。
JPG書き出し
多くの場合、制作を進める上で、アセットをSVG、PNG、またはご要望が多かったJPGフォーマットで開発者へ渡す必要があります。今回のリリースで、アートボード、エレメント、そして画像をJPGでも書き出せるようになりました。いずれも、書き出しの画質調整が可能です。
https://blog.adobe.com/media_9b42de457c7f94ca6a0aec03c08b44fd0b373b66.gif
Windows 10向けの改良点
コンテキストに応じるレイヤーとスマートズーム機能により、デザインの特定エリアへのナビゲーションが容易になりましたが、注目したいエリアのパンやズームが必要な場合があるかもしれません。今回のアップデートで、Windows 10のタッチ対応デバイスでは、XDキャンバス上で2本指でパンやズームができるようになりました。デザインモードとプロトタイプモードの両方で利用可能なこの機能によって、デザインのさらなるスピードアップが見込めます。
ワークフローによっては、アセットをXDに持ち込む必要もあるでしょう。その場合でも、InDesignのエレメントをコピーして自身のデザインにペーストしたり、SVGファイルを外部リンクされたファイルと共に読み込めたりできます。
テキスト機能の強化
ユーザーとコミュニケーションを図るために、デザインにシンプルなテキストを加えることは簡単なことではありませんでした。そこで、テキストの追加と更新をよりスピーディかつ容易にしてコンテンツに集中できるよう、2つの新機能を追加しました。
まず、ポイントテキスト（文字があるだけ1行で続いていくテキスト）からエリア内テキスト（特定エリアに収まるように流し込まれるテキスト）への切り替えと、反対にエリア内テキストからポイントテキストへの切り替えは、プロパティインスペクターでのクリック一つで簡単に行えます。
https://blog.adobe.com/media_124c20e8d3e0ea4cda3704a5b39d9ff5891ab879.gif
次に、自分が最後に使用したフォントファミリー、サイズ、ウェイト、アラインメント、色などのテキストプロパティを、別に作成したテキストエレメントに適用できます。別のツールを使ったり、プロトタイプモードに切り替えた場合でも、XDはその前に選択されたものを覚えています。
https://blog.adobe.com/media_552e6c1dd77e9bda7b61560f30c0dffe00c10fb4.gif
優れたコピーを作るためには何度もやり直しを行わねばなりませんが、この2つの機能強化により、繰り返しの時間が短縮されます。
ご要望に基づくその他の機能強化
これだけではありません。UserVoice、ソーシャルメディア、ユーザーミーティングなどでご要望があった機能や機能強化を提供する最新のアップデートを、以下にご紹介します。
カラーピッカー内でスポイトが利用可能に
カラーピッカー内でスポイトを利用し、アセットパネル内でグラデーションのカラーストップやスウォッチの値を把握できるようになりました。
https://blog.adobe.com/media_b90c275b67dcddc42bbdbea84c78130a4a86b654.gif
コメント時のメール通知
Webプロトタイプにコメントした場合、関連のスレッド上に動きがあった時点でメールで通知を受け取れるようになりました。プロトタイプの作成者はすべてのコメント追加時にメールを受信します。通知の受信拒否や一日のダイジェストのみ受信などの設定も選べます。
UXコミュニティ
これからもコミュニケーションを続けていきたいと思います。アップデート情報は、Twitterで@AdobeXDをフォローしてください。Twitterでハッシュタグ#AdobeXDを付けて投稿すればXDチームにも届きます。また、Facebookでビデオやアップデート情報を公開していますし、Facebookライブセッション中（英語）にはご質問にもお答えします。
Adobe XDを使っているUXデザイナーをリンク先で紹介しています。UXデザインの始め方、進め方、実際の作品に加え、作業中に聞いている音楽もわかります。ぜひご覧ください。
#MadeWithAdobeXD
Behanceでプロトタイプをシェアする際は、タグに#MadeWithAdobeXDを付け、「使用ツール」にAdobe XDを設定すると、Adobe XDのニュースレターに掲載される可能性があります。
ヘッダー画像 (XDで制作): Boosted Boards
この記事は、2017/11/14にポストされたNovember Update of Adobe XDを翻訳したものです。