Adobe XD 9月アップデートリリース！レスポンシブリサイズ、タイマートランジションなど #AdobeXD
Adobe XD アップデート
9月のAdobe XDアップデートには、画面サイズの異なるデバイスに対応したデザインを簡単に作るための機能と、プロトタイプをより本物らしくする、時間によるタイマー設定が可能なトランジション機能が追加されました。「レスポンシブリサイズ」は、含まれるオブジェクトの相対位置と大きさを維持しながらデザインカンバスとオブジェクトグループの拡大縮小ができる、iPhoneとiPad向けデザインを同時に作成するような場合に便利な機能です。「タイマートランジション」は、ローディングしている時の効果やアニメーションループなどをシミュレーションするための機能です。また、フルスクリーン表示の改善とスペルチェック機能も加わり、XDは効果的なプロトタイプを簡単に作成したいデザイナーにとってこれまでになくパワフルなツールとなりました。
この記事ではXDの新機能を動画とともに紹介します。また、日本時間9月18日〜9月20日の午前1時～午前9時（米国太平洋時間9月17日〜9月19日の午前9時～午後5時）にUXのトップデザイナーがAdobe Live（英語）でAdobe XDの最新機能をご紹介するデモを行いますので、ぜひご覧ください。
レスポンシブリサイズ
複数デバイスに対応するようにデザインすることは、重要というよりも不可欠な要素となっています。Adobe XDは、オブジェクトの位置と大きさの相対関係を維持しながらオブジェクトグループ全体の拡大縮小ができる、レスポンシブリサイズ機能を新たに搭載しました。皆さんはデザインカンバス上に配置されたグループの拡大縮小を行うだけで、あとはXDが相対関係を自動的に調整して維持します。
Wyndham Hotels and ResortsのUX/UIデザイン マネージャーであるグレッグ ピラワ（Greg Pilawa）氏はこう語っています。「私たちのチームでは、増え続けるUIオブジェクトのライブラリに追加する新たなコンポーネントをデザインするとき、異なる画面サイズすべてに対応することをデザインの最初期段階から考慮します。XDの新しいレスポンシブリサイズ機能があれば、複数デバイスに対応した着想、デザイン、検証がすばやく行えます。各コンポーネントをゼロから作り直したり、手作業ですべてオブジェクトの位置を調整する必要はなくなります。これが私たちの仕事の効率向上につながることは間違いありません。」次の動画で、その動作を確認してください。
カンバスをリサイズすると、XDはそのサイズに合わせて各オブジェクトを再配置しますが、より詳細なコントロールが必要な場合は、配置条件を編集できる「手動」モードに切り替えます。手動モードでは、オブジェクトごとに高さと幅の拡大縮小比率や、グループ内での配列を指定できます。
特定のボタンやアイコンを画面の一隅にピン留めする、デザインの端に合わせてオブジェクトを固定する、アイコンのサイズと位置を変えないように余白サイズを固定するといった調整を自動的に行うレスポンシブリサイズは、複数デバイス対応デザインの作成プロセスをスピードアップします。
タイマートランジション
トランジションのトリガーとして新たに「時間」が加わり、アートボード間の遷移にディレイ時間を設定できるようになりました。チュートリアルや意思決定を導くデザインのプロトタイプ作成に便利な機能です。このディレイを利用して、自動フェード効果、スピナー、ローダー、プログレスバーなどで用いるループするアニメーションを作成できます。
プロトタイプモードでアートボード間のトランジションを作成する際、トリガーとして「タップ」の代わりに「時間」を選択し、トランジション開始までのディレイ時間を指定できます。この画面で指定した設定は、それ以降のページでもデフォルト設定として適用されます。次の動画で、その動作がアプリのチュートリアルとしてどのように活用できるかをご覧ください。
スペルチェック
Adobe XDに、デジタルでのコピーライティングに非常に役立つ機能「スペルチェック」が正式に組み込まれました。これにより、デザインカンバス上で入力した文字列のスペルをリアルタイムでチェックできるようになります。XDのスペルチェック機能をオンにすれば（デフォルトでオンとなっています）、デザイン上のテキストを選択すると、スペルミスの可能性がある箇所が表示されるようになります。次の動画で、その動作を確認してください。
スペルミスの可能性がある単語には異なるスペルの候補リストが表示されます。また、タイピング中にスペルミスの可能性があると判断したら、リアルタイムで候補を表示します。さらに文法チェック機能も備えています。
Webプロトタイプのフルスクリーン表示の改善
Adobe XDのフルスクリーン表示オプションの改善により、Webサイズのアートボードのブラウザ表示において、より本物に近いエクスペリエンスを提供し、より正確なデザイン意図の伝達が可能になりました。ブラウザ上で、Webおよびカスタムアートボードは上端にあわせて表示され、黒い余白は表示されません。モバイルアートボードは従来どおりフルスクリーン表示時には中央に配置されます。
モニターの表示幅よりも幅広なアートボードの場合、プロトタイプの幅はモニターに合わせられ、左右のスクロールはできません。次の動画で、その動作を確認してください。
フルスクリーンモードの背景色は、従来の黒から白になりました。多くのブラウザはデフォルトの背景色が白であるため、黒では実際のWebエクスペリエンスを正しく再現できないと考えられるためです。
ソーシャルメディア
日本語でのアップデート情報やUI/UXデザインの情報は、本ブログ以外にもFacebookページ「Adobe XD Japan」で配信しています。ページを「いいね！」しておけば、自分のタイムラインに情報が流れてきますのでぜひご活用ください。また、Twitterでの配信は@AdobeXD（英語）が積極的に行っており、ハッシュタグ #AdobeXD を付けて投稿すればXDチームにも届きます。
日本のユーザーコミュニティ
日本のユーザーコミュニティが各地で立ち上がり、ほぼ毎月XDの勉強会を開催したり、使い方やTipsなどの情報共有など、積極的な活動をおこなっています。
東京 Adobe XD Meeting
福岡 Adobe XD Meeting
大阪 Adobe XD Meeting
ご興味のある方はぜひご覧ください。
#MadeWithAdobeXD
Behanceでプロトタイプをシェアする際は、タグに#MadeWithAdobeXDを付け、使用ツールにAdobe XDを設定してください。AdobeXD ニュースレターで紹介させていただく場合があります。
この記事は2018/9/18にポストされたSeptember 2018 Release of Adobe XD: Responsive Resize, Timed Transitions, and Moreを抄訳したものです。