レスポンシブデザインにも対応！Adobe XDの4つの新機能

2018年10月23日

ニュース

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

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

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

スペルチェック

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

参考：
Adobe XD September Update: Spell Check | Adobe Creative Cloud

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

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

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

参考：
Adobe XD September Update: Web Prototype Full Screen Viewing | Adobe Creative Cloud

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