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

by akihiro kamijo

Posted on 07-20-2018

連載

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枚のオーバーレイ画面を連結して、使い方の説明画面を実現しています。

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

次回をお楽しみに!

Topics: クリエイティブ, UI/UX & Web

Products: