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

連載

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

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

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

#adobexd #protip New in the September release: Responsive Resize! This new feature is enabled for all groups and can be controlled through the property inspector. When you resize a group, it will calculate the relationships between the objects and adjust on the fly. @adobexd pic.twitter.com/ltE5M2ZBqH

— Elaine Chao (@elainecchao) September 24, 2018

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

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

#adobexd #protip The relationship between objects is recalculated at every separate drag, not in relation to the original shape of the object. @adobexd pic.twitter.com/ArgqlkLtdH

— Elaine Chao (@elainecchao) October 1, 2018

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

#adobexd #protip If responsive resize is on a group, temporarily turn it off by holding down the shift key while dragging. @adobexd pic.twitter.com/QcCxvU5IEQ

— Elaine Chao (@elainecchao) October 2, 2018

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

#adobexd #protip Don’t like the way your group is resizing? Create a nested group to keep components together when you resize. @adobexd pic.twitter.com/U3iOpoKC6A

— Elaine Chao (@elainecchao) September 25, 2018

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

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

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

#adobexd #protip Want finer grain control over your responsive resize? Select a group (or subgroup) and switch to manual. Select a control to “pin” your object to that side. @adobexd pic.twitter.com/HO5CwO9EdY

— Elaine Chao (@elainecchao) September 26, 2018

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

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

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

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

#adobexd #protip Want your objects to flex with your resize? Turn off the fixed width and height control to ensure it moves with your resize the way you want it to. @adobexd pic.twitter.com/S45X7WVNVI

— Elaine Chao (@elainecchao) September 27, 2018

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

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

#adobexd #protip Symbols currently don’t support resizing, so they’ll maintain their shape even if you set manual constraints on them. (Don’t worry, it’s on the roadmap.) @adobexd pic.twitter.com/sxGmxgcozt

— Elaine Chao (@elainecchao) September 28, 2018

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

#adobexd #protip By default, responsive resize is off for artboards. Turn it on and resize your artboard to cause all of the objects inside of it to flex. @adobexd pic.twitter.com/vnUNCoHR84

— Elaine Chao (@elainecchao) October 3, 2018

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

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

次回をお楽しみに！