Adobe XDをもっと使いこなすヒント! 第33回 コンポーネントで使いやすくなったレスポンシブリサイズ

Creative Cloud UI/UX & Web

この連載では、Adobe XDを便利に使うための様々なテクニックを、Adobe XDチームのツイートからピックアップしてご紹介します。今回は、コンポーネント機能の追加によりぐっと実用的になったレスポンシブリサイズを改めて取り上げ、使い方に関する9つのツイートを紹介します。

Tip 1. アートボードにオブジェクトをフィットさせる

レスポンシブリサイズを使うと、サイズの異なるアートボードへのオブジェクトの再配置が楽になります。モバイル用とデスクトップ用の画面デザインをするときにはとても便利な機能です。

5月のアップデートでシンボル機能がコンポーネント機能に置き換えられたことで、すべてのオブジェクトがレスポンシブリサイズリサイズの対象になりました。

レスポンシブリサイズは、対象グループ内のオブジェクトの相対的な関係を自動的に調整します。ドラッグすると、リアルタイムで配置が更新されます。上の動画ではテキストエリア内の再配置も同時に行われる様子が分かります。

リサイズの結果は、グループ内のオブジェクトの配置の仕方やドラッグする方向により変わります。また、調整の基準はドラッグ開始時の配置で、オリジナルの配置ではありません。下の動画は、2回に分けてドラッグした時の結果を確認できます。

Tip 2. リサイズの単位ごとにグループ化する

レスポンシブリサイズは、選択されたグループ内のオブジェクトが対象です。グループが入れ子になっている場合、下の階層は対象に含まれません。そのため、レスポンシブリサイズを適用したい単位でグループ化しておくと個別調整が可能になります。

上の動画では、テキストが重なることを避けるため、一部のテキストフィールドだけをグループ化して相対位置を固定しています。

Tip 3. ドラッグ時の振る舞いを手動で設定する

レスポンシブリサイズを使っても思い通りに再配置されない場合、手動で個別のオブジェクトの振る舞いを設定することができます。プロパティインスペクタ内の「レスポンシブリサイズ変更」の下にある「手動」タブをクリックすると、設定用のコントロールが現れます。

左端のコントロールでは、上下左右からの距離を固定するか、可変にするかを選べます。上の動画では、ボタンの左端からの距離を固定にしています。

幅と高さをドラッグ操作に応じて可変にするか、固定したままにするかを選ぶコントロールもあります。

大抵のオブジェクトでは、幅と高さを固定するよう指定されています。オブジェクトの上下(あるいは左右)からの距離を両方とも固定して、ドラッグ操作に合わせてサイズが変わるようにしたい場合は、先に高さ(あるいは幅)を可変にしておく必要があることに注意しましょう。

Tip 4.レスポンシブリサイズを一時的にオフにする

レスポンシブリサイズは便利な機能ですが、単純にアイコンを拡大したいときなど、思わぬ結果になってしまう場合もあります。プロパティインスペクタを使ってレスポンシブリサイズをオフにすることはできますが、いちいち設定を切り替えるのは面倒です。

そのため、便利なショートカットキーが用意されています。Shiftキーを押しながらドラッグすると、一時的にレスポンシブリサイズがオフになります。上の動画を見ると、「With Shift」と表示されている時にはボタン内のアイコンが普通に拡大されている様子が見てとれます。

Tip 5. アートボードごとレスポンシブリサイズを適用する

アートボードに対しては、レスポンシブリサイズはデフォルトでオフになっています。アートボードのサイズ変更と一緒にオブジェクトの配置も変えたい場合は、アートボードを選択して、プロパティインスペクタから「レスポンシブサイズ変更」をオンにします。

アートボードのスクロール領域をつくるなど、アートボードのサイズだけを変えたい場合は、Tips 4で紹介したように、Shiftキーを押しながら行うと、わざわざ設定を切り替えることなくサイズ変更を行えます。

Tip 6. リピートグリッドを組み合わせて使う

リピートグリッドはレスポンシブリサイズと組み合わせて使うととても便利な機能です。しかし、グループと同様に、リピートグリッドの内部はレスポンシブリサイズによる再配置が行われません。

リピートグリッド内のオブジェクトを再配置したい場合は、ダブルクリックして編集モードに入り、Cmd+A (Mac)またはCtrl+A (Win)でセル全体を選択すれば、セル内の要素をレスポンシブリサイズを使って再配置できます。


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

次回をお楽しみに!

POSTED ON 2019.06.10