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

Creative Cloud UI/UX & Web

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

次回をお楽しみに!

POSTED ON 2018.12.13

Products Featured

  • Adobe XD

Tags

タグはありません