Adobe XDをもっと使いこなすヒント! 第15回 レスポンシブリサイズの特徴を掴む

Creative Cloud UI/UX & Web

この連載では、Adobe XDを便利に使うための様々なテクニックを、Adobe XDチームのツイートからピックアップしてご紹介します。今回は、レスポンシブリサイズの振る舞いに関連する8つのツイートを取り上げます。

Tip 1. グループに対してレスポンシブリサイズを使う

レスポンシブリサイズは、グループのサイズを変更すると、グループ内のオブジェクトの配置を自動的に調整してくれる機能です。プロパティインスペクタのトグルボタンで機能のオンオフが可能で、グループに対してはデフォルトでオンになっています。

オブジェクトの配置はリサイズごとに計算されます。すなわち、最初と最後のサイズが同じでも、一気にドラッグして変更した場合と、一旦大きさを変えた後にもう一度ドラッグした場合では、レイアウトの結果が異なります。下のビデオでその様子が確認できます。

グループをドラッグする際、Shiftキーを押すと、一時的にレスポンシブリサイズ機能が解除されます。下のビデオでは、アートボード上に「With Shift」が表示されている間は、単純な拡大が行われています。ボタン内のアイコンが横に伸びているのが分かりやすい違いです。

Tip 2. グループを入れ子にして振る舞いを変える

レスポンシブリサイズは、グループの直接の子にあたるオブジェクトのレイアウトを調節します。2階層目より下のオブジェクトは対象となりません。子にあたるオブジェクトをグループ化すると、それらのオブジェクトは孫になるため(新しくつくられたグループが子になる)、レスポンシブリサイズの対象が変わります。

そのため、レスポンシブリサイズは使いたいが、一部のオブジェクト間の配置は変えたくないという場合には、グループを入れ子にすると便利です。

Tip 3. オブジェクトの移動方向を制限する

オブジェクトを上下には移動するのは構わないいが、画面の左辺からの距離は維持したい、という場合があると思います。そんなときには、手動モードが利用できます。

上のビデオのように、グループ内から移動を制限したいオブジェクトを選択し、レスポンシブリサイズを手動に切り替えます。すると上下左右それぞれの位置を固定できるコントロールが表示されます。コントロールが青なら固定、グレーは可変の状態を示し、クリックにより切り替えられます。
上のビデオではボタンの左側のコントロールを青くしたことで、グループを右に広げてもボタンの位置が移動しなくなりました。

ですが、グループが小さくなるようなドラッグ操作をすると、固定されていたはずの位置が動く場合があります。これは、レスポンシブリサイズが、デフォルトではオブジェクトの大きさを変更しないためです。オブジェクトをグループ内に収めるための十分な空白がない場合には、移動せざるを得なくなるわけです。

Tip 4. オブジェクトの大きさを可変にする

さて、オブジェクトの大きさを可変にする手段も提供されています。手動モードにすると、位置固定用のコントロールの右側に、縦を固定するコントロールと横を固定するコントロールが表示されます。デフォルトでは青色、すなわちどちらも固定になっています。
上のビデオのように、サイズを可変に設定すると、グループのサイズとオブジェクトのサイズが連動して変わるようになります。

現時点では、シンボルのサイズは常に固定です。この制限は、将来のバージョンで無くなる予定です。今は、下のビデオのようにシンボルだけサイズが維持された状態になります。

Tip 5. アートボード全体をリサイズする

アートボードに対するレスポンシブリサイズは、デフォルトではオフになっています。これをオンにして、アートボードのサイズを変更すると、アートボード上のオブジェクトを自動的に再配置することができます。上のビデオでその様子が確認できます。


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

次回をお楽しみに!

POSTED ON 2018.11.1

Products Featured

  • Adobe XD

Tags

タグはありません