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

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

レスポンシブ・リサイズ

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

参考：
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コーディングに移る場合も、テキストは原則コピーアンドペーストです。ワイヤーフレームの段階で文法や誤字脱字を防いでおくと、その後の制作に影響が出ず、手戻りのリスクを減らすことができます。