Adobe XDをもっと使いこなすヒント！第20回ビューポートを設定する

Adobe XDをもっと使いこなすヒント！

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

Tip 1. アートボードをスクロール可能にする

#adobexd #protip Drag down the bottom of your artboard to make it a scrolling artboard. The viewport is set to the size of the artboard preset by default. @adobexd pic.twitter.com/HW431Gq1cE

— Elaine Chao (@elainecchao) November 8, 2018

アートボードをスクロール可能にしたいときは、アートボードを選択後、底辺をドラッグして広げます。すると、下に伸ばした分だけ縦スクロールできるようになります。その際、元々アートボードに指定されていたサイズがビューポートのサイズになっています。

もちろん、実際のスクロール操作はカンバス上では試せません。画面右上のデスクトッププレビューアイコンをクリックして、プレビューウインドウを開いてから行います。

Tip 2. ビューポートのサイズを調整する

#adobexd #protip Quickly adjust the viewport height of your scrolling artboard by dragging the tab on the left side up and down. @adobexd pic.twitter.com/ejiaLa6HZf

— Elaine Chao (@elainecchao) November 9, 2018

デフォルトで設定されたビューポートのサイズを変える手軽な方法は、アートボードの左側に表示されている青いタブをドラッグすることです。このタブの横の点線は、ビューポートの境界を示す目印にもなっています。

ドラッグ中は、アートボードの中央に、ビューポートの高さを示す数字が表示されます。

#adobexd #protip Set your viewport height precisely by editing it manually in the property inspector. @adobexd pic.twitter.com/gn3pntXvK9

— Elaine Chao (@elainecchao) November 13, 2018

ビューポートの高さは、プロパティインスペクタに明示的に数字を指定して変更することもできます。アートボード上に目印になるオブジェクトがない場合はこちらの方が簡単で確実です。

Tip 3. アートボードのスクロールをオフにする

#adobexd #protip Select the artboard and change the scrolling to “None” to turn off artboard scroll. @adobexd pic.twitter.com/D4OmWQKYeL

— Elaine Chao (@elainecchao) November 12, 2018

一旦スクロール可能な状態にしたアートボードを、後からスクロールしないように変更するには、プロパティインスペクタで、スクロールのドロップダウンを「なし」にします。

この操作によりビューポートはリセットされます。操作後にドロップダウンを「なし」から「縦スクロール」に戻しても、ビューポートは復元されません。

Tip 4. アートボードの向きを変える

#adobexd #protip Switching up your artboard orientation from portrait to landscape is as easy as clicking a button in the property inspector. @adobexd pic.twitter.com/KqzYJKNmCf

— Elaine Chao (@elainecchao) July 18, 2018

アートボードの向きを縦長と横長で切り替えたい場合は、プロパティインスペクタ内のアイコンをクリックします。その際、ビューポートが設定されていると、アートボードのサイズはビューポートのサイズ（つまり、ドラッグして広げる前のサイズ）に戻ります。

レスポンシブリサイズが「オン」になっていても、アートボード上のオブジェクトの再配置は行われません。

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