Adobe XDをもっと使いこなすヒント！ 第33回 コンポーネントで使いやすくなったレスポンシブリサイズ
Adobe XDをもっと使いこなすヒント！
この連載では、Adobe XDを便利に使うための様々なテクニックを、Adobe XDチームのツイートからピックアップしてご紹介します。今回は、コンポーネント機能の追加によりぐっと実用的になったレスポンシブリサイズを改めて取り上げ、使い方に関する9つのツイートを紹介します。
Tip 1. アートボードにオブジェクトをフィットさせる
#adobexd #protip Responsive resize is a way of resizing objects, not of actually creating responsive experiences in your shared prototype or preview. @adobexd pic.twitter.com/Dbxrh63XYQ
— Elaine Chao (@elainecchao) September 25, 2018
レスポンシブリサイズを使うと、サイズの異なるアートボードへのオブジェクトの再配置が楽になります。モバイル用とデスクトップ用の画面デザインをするときにはとても便利な機能です。
5月のアップデートでシンボル機能がコンポーネント機能に置き換えられたことで、すべてのオブジェクトがレスポンシブリサイズリサイズの対象になりました。
#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
レスポンシブリサイズは、対象グループ内のオブジェクトの相対的な関係を自動的に調整します。ドラッグすると、リアルタイムで配置が更新されます。上の動画ではテキストエリア内の再配置も同時に行われる様子が分かります。
リサイズの結果は、グループ内のオブジェクトの配置の仕方やドラッグする方向により変わります。また、調整の基準はドラッグ開始時の配置で、オリジナルの配置ではありません。下の動画は、2回に分けてドラッグした時の結果を確認できます。
#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
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
レスポンシブリサイズは、選択されたグループ内のオブジェクトが対象です。グループが入れ子になっている場合、下の階層は対象に含まれません。そのため、レスポンシブリサイズを適用したい単位でグループ化しておくと個別調整が可能になります。
上の動画では、テキストが重なることを避けるため、一部のテキストフィールドだけをグループ化して相対位置を固定しています。
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
レスポンシブリサイズを使っても思い通りに再配置されない場合、手動で個別のオブジェクトの振る舞いを設定することができます。プロパティインスペクタ内の「レスポンシブリサイズ変更」の下にある「手動」タブをクリックすると、設定用のコントロールが現れます。
左端のコントロールでは、上下左右からの距離を固定するか、可変にするかを選べます。上の動画では、ボタンの左端からの距離を固定にしています。
#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
幅と高さをドラッグ操作に応じて可変にするか、固定したままにするかを選ぶコントロールもあります。
大抵のオブジェクトでは、幅と高さを固定するよう指定されています。オブジェクトの上下（あるいは左右）からの距離を両方とも固定して、ドラッグ操作に合わせてサイズが変わるようにしたい場合は、先に高さ（あるいは幅）を可変にしておく必要があることに注意しましょう。
Tip 4.レスポンシブリサイズを一時的にオフにする
#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
レスポンシブリサイズは便利な機能ですが、単純にアイコンを拡大したいときなど、思わぬ結果になってしまう場合もあります。プロパティインスペクタを使ってレスポンシブリサイズをオフにすることはできますが、いちいち設定を切り替えるのは面倒です。
そのため、便利なショートカットキーが用意されています。Shiftキーを押しながらドラッグすると、一時的にレスポンシブリサイズがオフになります。上の動画を見ると、「With Shift」と表示されている時にはボタン内のアイコンが普通に拡大されている様子が見てとれます。
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
アートボードに対しては、レスポンシブリサイズはデフォルトでオフになっています。アートボードのサイズ変更と一緒にオブジェクトの配置も変えたい場合は、アートボードを選択して、プロパティインスペクタから「レスポンシブサイズ変更」をオンにします。
アートボードのスクロール領域をつくるなど、アートボードのサイズだけを変えたい場合は、Tips 4で紹介したように、Shiftキーを押しながら行うと、わざわざ設定を切り替えることなくサイズ変更を行えます。
Tip 6. リピートグリッドを組み合わせて使う
#adobexd #protip Switching screen sizes is a cinch with a combination of repeat grid and responsive resize. Simply double click to enter the edit context, Cmd+A (Mac) or Ctrl+A (Win) to select all, and resize! @adobexd pic.twitter.com/5ZVA2kQrCl
— Elaine Chao (@elainecchao) January 8, 2019
リピートグリッドはレスポンシブリサイズと組み合わせて使うととても便利な機能です。しかし、グループと同様に、リピートグリッドの内部はレスポンシブリサイズによる再配置が行われません。
リピートグリッド内のオブジェクトを再配置したい場合は、ダブルクリックして編集モードに入り、Cmd+A (Mac)またはCtrl+A (Win)でセル全体を選択すれば、セル内の要素をレスポンシブリサイズを使って再配置できます。
いかがでしたか？
これは便利そうだ！という使い方はあったでしょうか？
次回をお楽しみに！