Adobe XDをもっと使いこなすヒント！ 第3回 オーバーレイの基本設定
Adobe XDをもっと使いこなすヒント！
この連載では、Adobe XDを便利に使うための様々なテクニックを、Adobe XDチームのツイートからピックアップしてご紹介します。今回は、オーバーレイの設定方法をテーマに、8つのツイートを取り上げます。
Tip 1. アートボードにオーバーレイを指定
#adobexd #protip New in the June release: in prototype mode, choose the “Overlay” selection to switch the interaction to overlay. The wire switches to a dotted line to show the new relationship. @adobexd pic.twitter.com/soB08hpXo7
— Elaine Chao (@elainecchao) June 20, 2018
プロトタイプモードで作業を行います、
まず、オーバーレイ表示したいアートボードにワイヤを引っ張ってつなぎます。ダイアログが表示されたら、上のビデオのように、インタラクションを「オーバーレイ」に設定します。するとアートボードを結ぶワイヤが点線になり、関係が変更されたことを示します。
Tip 2. オーバーレイするアートボードの背景
#adobexd #protip By default, an overlay artboard’s background is switched to transparent. Easily turn it back to solid by selecting the artboard, going to Design mode, and clicking the artboard’s fill. @adobexd pic.twitter.com/4oa6LyQzjx
— Elaine Chao (@elainecchao) June 21, 2018
アートボードに「オーバーレイ」を指定すると、アートボードの背景が透明になります。背景色を設定したいときは、デザインモードに戻り、アートボードを選択してから、プロパティインスペクタの「塗り」をチェックします。
Tip 3. オーバーレイ画面からの移動先
#adobexd #protip By default, the overlay artboard is assigned a previous artboard transition, so clicking on it will dismiss the overlay. @adobexd pic.twitter.com/KK6Mxl4zYi
— Elaine Chao (@elainecchao) June 22, 2018
オーバーレイを指定したアートボードには、「ひとつ前のアートボード」が遷移先にデフォルトで指定されます。つまり、プレビュー時にオーバーレイ画面をクリックすると、オーバーレイ画面が消え「ひとつ前のアートボード」に戻るのが標準の動作です。
#adobexd #protip If you want to navigate from your overlay to another artboard entirely, simply change the destination from Previous Artboard to another artboard. @adobexd pic.twitter.com/V1GXTlfOnM
— Elaine Chao (@elainecchao) June 25, 2018
もし、オーバーレイから他のアートボードに遷移したければ、遷移先を目的のアートボードに変更します。上のビデオでは、オーバーレイを閉じたときの遷移先に、左から2番目のアートボードを選択しています。
Tip 4. 画面より小さなオーバーレイの使用
#adobexd #protip Your overlay artboard doesn’t need to be the same size as your viewport. By default, overlay artboards will center in the viewport. @adobexd pic.twitter.com/pk7ps74r4E
— Elaine Chao (@elainecchao) June 26, 2018
オーバーレイに使用するアートボードのサイズはビューポートより小さくても構いません。大きさに関わらずオーバーレイのアートボードはビューポートの中心に配置されます。
上のビデオでは、オーバーレイ設定時に、緑色のアウトラインでオーバーレイ表示される位置が示されていることを確認できます。
#adobexd #protip Drag the center handle of your overlay outline to move it within your viewport. You’ll get a preview to show you where it’ll be placed when the transition has been completed. @adobexd pic.twitter.com/Yb4EOGN8LO
— Elaine Chao (@elainecchao) June 27, 2018
緑色のアウトラインの中央のハンドルをドラッグして、ビューポート内の表示位置を変更できます。上のビデオのように、ドラッグ操作中はオーバーレイ画面のプレビューが表示されます。
ドラッグして移動した先が、オーバーレイ表示される位置になります。
Tip 5. オーバーレイ画面のスクロール
#adobexd #protip Your overlays can also be scrollable. Set the viewport on your overlay artboard to set the scrolling location. @adobexd pic.twitter.com/cWL6qXNTgQ
— Elaine Chao (@elainecchao) June 28, 2018
オーバーレイ画面がビューポートよりも縦方向に長い場合は、上のビデオのように、オーバーレイ用のアートボードにビューポートを指定して、スクロール位置を指定します。するとオーバーレイ表示された画面をスクロールできます。
Tip 6. オーバーレイ画面の連結
#adobexd #protip Set your overlay transitions to “none” and chain them to mock walking through your onboarding screens. @adobexd pic.twitter.com/6HLJu9M6Uh
— Elaine Chao (@elainecchao) June 29, 2018
画面を縦に伸ばす代わりに、複数のオーバーレイ画面に分割して表示したいときは、オーバーレイ指定したアートボードをワイヤで順番につなぎます。
上のビデオでは、トランジションに「なし」を指定した3枚のオーバーレイ画面を連結して、使い方の説明画面を実現しています。
いかがでしたか？
これは便利そうだ！という使い方はあったでしょうか？
次回をお楽しみに！