Adobe XDをもっと使いこなすヒント! 第3回 オーバーレイの基本設定

Creative Cloud UI/UX & Web

この連載では、Adobe XDを便利に使うための様々なテクニックを、Adobe XDチームのツイートからピックアップしてご紹介します。今回は、オーバーレイの設定方法をテーマに、8つのツイートを取り上げます。

Tip 1. アートボードにオーバーレイを指定

プロトタイプモードで作業を行います、
まず、オーバーレイ表示したいアートボードにワイヤを引っ張ってつなぎます。ダイアログが表示されたら、上のビデオのように、インタラクションを「オーバーレイ」に設定します。するとアートボードを結ぶワイヤが点線になり、関係が変更されたことを示します。

Tip 2. オーバーレイするアートボードの背景

アートボードに「オーバーレイ」を指定すると、アートボードの背景が透明になります。背景色を設定したいときは、デザインモードに戻り、アートボードを選択してから、プロパティインスペクタの「塗り」をチェックします。

Tip 3. オーバーレイ画面からの移動先

オーバーレイを指定したアートボードには、「ひとつ前のアートボード」が遷移先にデフォルトで指定されます。つまり、プレビュー時にオーバーレイ画面をクリックすると、オーバーレイ画面が消え「ひとつ前のアートボード」に戻るのが標準の動作です。

もし、オーバーレイから他のアートボードに遷移したければ、遷移先を目的のアートボードに変更します。上のビデオでは、オーバーレイを閉じたときの遷移先に、左から2番目のアートボードを選択しています。

Tip 4. 画面より小さなオーバーレイの使用

オーバーレイに使用するアートボードのサイズはビューポートより小さくても構いません。大きさに関わらずオーバーレイのアートボードはビューポートの中心に配置されます。
上のビデオでは、オーバーレイ設定時に、緑色のアウトラインでオーバーレイ表示される位置が示されていることを確認できます。

緑色のアウトラインの中央のハンドルをドラッグして、ビューポート内の表示位置を変更できます。上のビデオのように、ドラッグ操作中はオーバーレイ画面のプレビューが表示されます。
ドラッグして移動した先が、オーバーレイ表示される位置になります。

Tip 5. オーバーレイ画面のスクロール

オーバーレイ画面がビューポートよりも縦方向に長い場合は、上のビデオのように、オーバーレイ用のアートボードにビューポートを指定して、スクロール位置を指定します。するとオーバーレイ表示された画面をスクロールできます。

Tip 6. オーバーレイ画面の連結

画面を縦に伸ばす代わりに、複数のオーバーレイ画面に分割して表示したいときは、オーバーレイ指定したアートボードをワイヤで順番につなぎます。
上のビデオでは、トランジションに「なし」を指定した3枚のオーバーレイ画面を連結して、使い方の説明画面を実現しています。


いかがでしたか?
これは便利そうだ!という使い方はあったでしょうか?

次回をお楽しみに!

POSTED ON 2018.07.20

Products Featured

  • Adobe XD

Tags

タグはありません