Webディレクター、デザイナーがワイヤーフレームやプロトタイプを作る作業に非常に便利なツールであるAdobe XD。

Adobeではユーザーの声を受け、より使いやすく便利になるよう日々アップデートを続けています。9月に新たにアップデート版がリリースされました。
今回のアップデートではどのような機能が追加されたのでしょうか。内容を詳しく紹介していきます。

MAシェアと国産MAツールランキングを紹介

資料を無料ダウンロード

レスポンシブ・リサイズ

今回のアップデートの目玉と言えるのがレスポンシブ・リサイズ機能です。これによりデバイスごとのデザイン、レイアウトを簡単に作ることができます。レスポンシブデザイン、モバイル最適化が推進される昨今、非常に重要な機能と言えるでしょう。

参考：
Adobe XD September Update: Responsive Resize | Adobe Creative Cloud

Adobe XDにて複数のデバイスに跨いでデザインを作成するには、スマホ版、タブレット版、デスクトップ版などそれぞれのサイズに合わせたアートボードを用意します。その際、複製したコンテンツを手動で配置しなおす必要があります。

レスポンシブ・リサイズ機能は、配置されているコンテンツのグループを拡大縮小するだけで、相対関係が自動的に調整され、維持された状態でのリサイズが可能です。これにより、デバイスを跨いだデザインの制作効率が上がります。

また、より細かなコントロールをしたい場合には、手動モードに切り替えることで配置の条件を細かく設定できます。

タイマートランジション

プロトタイプ機能の中で新たに追加された便利な設定がタイマートランジション機能です。

プロトタイプで画面遷移をシミュレーションするトランジェント機能の中に、トリガーとして新たに「時間」が選択できるようになりました。

参考： [Adobe XD September Update: Timed Transitions | Adobe Creative Cloud](https://www.youtube.com/watch?v=Hsa_f-xdzHM):blank

画面遷移にはオブジェクトのタップのみがトリガーとして選択可能でしたが、時間経過での画面遷移もプロトタイピングできるようになりました。これにより、チュートリアルなどのアニメーションを表現できるようになります。

トランジションの開始までのディレイ時間を設定し、画面の切り替わりのスピードを調節します。一連のアニメーションを作る上で最初に設定したディレイ時間がデフォルトとなるので、スムーズな設定が可能です。

スペルチェック

テキスト入力時にアシストをしてくれるスペルチェック機能が実装されました。文字入力時にリアルタイムでのスペルチェックが行われます。スペルミスと判断された箇所にアラートが表示され、同時に修正候補のリストが表示されます。これによりタイプミスなどのリスクを最小限に抑えることが可能です。また、文法チェックの機能も備わっています。

参考： [Adobe XD September Update: Spell Check | Adobe Creative Cloud](https://www.youtube.com/watch?v=ZDsLJbg7mZ0):blank

Adobe XDで作ったワイヤーフレームやラフデザインなどを、制作チームのメンバーに共有し次の工程に移そうとすると、ほとんどの場合はテキストをコピーして使用されます。ワイヤーフレームから本番デザインに移行する場合、デザインからHTMLコーディングに移る場合も、テキストは原則コピーアンドペーストです。ワイヤーフレームの段階で文法や誤字脱字を防いでおくと、その後の制作に影響が出ず、手戻りのリスクを減らすことができます。

プロトタイプのフルスクリーン表示の改善

プロトタイプ機能を使いWebブラウザでの確認する際の表示が改善されました。フルスクリーン表示にした際、より実際の表示に近い形で素早く確認ができます。

参考： [Adobe XD September Update: Web Prototype Full Screen Viewing | Adobe Creative Cloud](https://www.youtube.com/watch?v=mMoIIJ64cWY):blank

従来のXDでは、モニターの表示幅やブラウザのサイズよりも、アートボードの幅が大きい場合、横スクロールで確認する必要がありました。確認するブラウザの幅を狭めると、画面幅にフィットして縮小表示されるため、実際のブラウザ表示により近い形で確認することが可能になりました。
また、フルスクリーンモードの背景色が黒から白に変更されています。多くのブラウザは白が背景色としてデフォルトであるため、より実際の表示を再現できるようになっています。

まとめ： Adobe XDは常に進化し続けている

今回9月のアップデートでは主に4つの機能が更新されましたが、月1程度のペースでAdobe XDのアップデートは非常に頻繁に行われています。ユーザーの使いやすさ、より高度なシミュレーション機能がどんどん更新されています。今後もAdobe XDのアップデートから目が離せません。