• このエントリーをはてなブックマークに追加

【2019年8月最新版】Adobe XDのレスポンシブサイズ変更方法まとめ

【2019年8月最新版】Adobe XDのレスポンシブサイズ変更方法まとめ
こんにちは、今年の春に入社したデザイナーの西村です。
今回は私がニジボックスに入ってから学んだ、AdobeXDの『レスポンシブサイズ変更』の設定方法についてまとめてみました。
さらに、構造がシンプルなボタンからカードデザイン・表組みなど、具体的な作成事例も一緒に紹介していますのでぜひご覧になってください。

レスポンシブサイズ変更とは?

レスポンシブサイズ変更とは、WEBコンテンツの様々なデバイス表示に合わせたリサイズなどの問題解決のために、AdobeXDが搭載している機能です。
デザインモードのプロパティインスペクターの中にあり(画像の赤枠内)、こちらから「自動」もしくは「手動」でコンストレイント※を指定します。

プロパティインスペクター箇所説明

より詳しい画面説明はAdobeサポートページをご確認ください。

※コンストレイントとは?
コンストレイト

コンストレイントとは、レスポンシブサイズ変更のルール指定を指します。
AdobeXDでは自動で指定され、手動でもルールを指定することできます。
コンストレイントを指定するとコンポーネントの下記の動きを制御することができます。

  • 固定/可変幅 ━
  • 固定/可変高さ ┃
  • 固定/可変左マージン ┣
  • 固定/可変右マージン ┫
  • 固定/可変上マージン ┳
  • 固定/可変下マージン ┻

レスポンシブサイズ変更設定の「自動」と「手動」

レスポンシブサイズ変更の「自動」とは?

XDは選択したオブジェクト、グループ構成とペアレントグループのエッジの近似、レイアウト情報を分析して自動的にコンストレイントを適用します。

上記はAdobeサポートページからの引用になり、レスポンシブサイズ変更の「自動」のコンストレイトはこちらに則って設定されています。

例えば下図はiOSのUIキットから拝借したツールバーですが、レスポンシブサイズ変更の設定は全て「自動」です。
こちらを横に伸ばしてみますと……。

コンストレイト_自動設定

ご覧の通り、中のアイコンは大きさなど変動・変形せず、左右端のマージンを維持したまま、幅が均等に広がっています。
これは、レスポンシブサイズ変更の「自動」のコンストレイントが適用されているからです。

ツールバーのディレクトリとコンストレイント設定

ツールバーのファイルのディレクトリと「自動」設定を解除した際のレスポンシブサイズ変更の設定は下記の通りです。

■toolbarとAction 1のコンストレイント
toolbarとAction 1のコンストレイント
「toolbar」と「Action 1」は元のアートボード内やディレクトリの中で左端に配置されていることから┣ (固定/可変左マージン) がチェックされていることがわかります。
■Action 2/3/4のコンストレイント
Action 2/3/4のコンストレイント
こちらの3つのディレクトリは可変に合わせて変動するため、マージンを固定するコンストレイントは設定されていません。
■Action 5のコンストレイント
Action 5のコンストレイント
ディレクトリの中で右端に配置されているので、┣ (固定/可変右マージン) がチェックされていることがわかります。
上記のほか、全てのディレクトリに共通して「━ (固定/可変幅)」「┃ (固定/可変高さ)」がチェックされていることでアイコンなどの高さ・幅が固定され、違和感のないレスポンシブサイズ変更が行われているのです。

ちなみにレスポンシブサイズ変更をオフしてしまうと下図のように歪んだ形に引き伸ばされます。
レスポンシブサイズ変更/設定なし

レスポンシブサイズ変更の「手動」が必要なケースとは?

先ほどのようにレスポンシブサイズ変更が「自動」のままで上手くいくケースもありますが、中には想定していた挙動と違う動きをすることもあります。
例えばこちらもiOSのUIキットから拝借したナビゲーションバーですが、設定を「自動」のまま横に伸ばしてみると……。

ナビゲーションバー:自動設定

時刻は真ん中に配置したままが良いのに動いてくれず、ずれてしまいます。
このような場合は「手動」の設定が必要となってきます。

「手動」の設定方法

最初にナビゲーションバーのディレクトリ構造とレスポンシブサイズ変更の設定を確認してみましょう。
こちらのパーツは下図のように上部のステータスバーと下部と背景のナビゲーションバーをそれぞれグループでまとめ、構築されています。

ナビゲーションバーのディレクトリ構造

では「time」のレスポンシブサイズ変更の設定を確認してみましょう。

今の設定では┣ ┫┃にチェックが付いています。
この状態ですと左側のマージン幅が固定となってしまい、広げた際に動いてくれません。

「time」のレスポンシブサイズ変更の設定
ナビゲーションバー:左マージン固定

まず┣ ┫両方ともチェックを外します。こうするとマージン幅が固定とならず可変に合わせて動いてくれます。
次に━「幅を固定」にチェックを入れます。これにより文字の大きさが固定されます。

「time」のレスポンシブサイズ変更の設定:変更後
ナビゲーションバー:手動設定

このようにレスポンシブサイズ設定を手動で調整すれば、レイアウト変更・リサイズ時の工数が削減されるなどメリットがあります。
初めのうちは仕様が掴めず、思ったように設定できないかもしれませんが、ボタンなど簡単な構造のものから練習してみましょう。

「レスポンシブサイズ変更」ボタンの設定方法

シンプルなボタンの設定

ボタンのようなレイヤー構造がシンプルなものからレスポンシブサイズ設定を行い慣れていきましょう。
文字サイズが固定のボタンを作りたい場合はポイントテキストで「幅を固定」「高さを固定」を設定します。

シンプルなボタンの設定

このように設定をすると幅を縮めても文字の大きさが変わらず、ボタンの縦横の可変が自由になります。
シンプルなボタンの挙動:成功

文字の設定を自動のままにすると可変に合わせて文字の大きさも変わってしまいます。
シンプルなボタンの挙動:失敗

複雑なボタンの設定

文字以外でも例えば角の▲など可変させたくない要素も同様に「幅を固定」「高さを固定」を設定すると……。
複雑なボタンの設定

このように設定をすると幅を縮めても文字の大きさが変わらず、ボタンの縦横の可変が自由になります。
幅を変更が発生しても▲の比率や大きさが変わりません!

複雑なボタンの挙動:成功

▲の設定が自動のままだと文字同様意図せず、可変で形が歪んだり大きさが変わってしまいます。

複雑なボタンの挙動:成功

「レスポンシブサイズ変更」カード型デザインの設定方法

コンポーネント設定:画面幅に合わせて要素が拡大縮小するようにしたい場合

次はカードデザインでコンポーネント化した際の設定方法を説明します。
今回は下図のように画像もテキストエリアも可変する想定です。

カード型デザイン

マスターコンポーネントファイル内の構造と各レイヤーのレスポンシブ設定


内包する要素をどうやって設定するのか理解しやすいようにフォルダ分けしましょう。
今回は自由に可変させたい画像とテキストエリアで分け、さらにテキストエリア内で細かくフォルダ分けしました。

■「img」「txt」「bg」の設定
「img」「txt」「bg」の設定
このフォルダ、レイヤーには自由に可変させたいのでどこにもチェックをつけません。
逆につけてしまうと意図せぬ位置で固定され、表示崩れが起きます。
■「name」の設定
「name」の設定
「name」は「txt」フォルダの中で左・上のマージンを固定させたいため、┳┣にチェックを入れます。
また、テキストの文字サイズも変更させたくないため、ポイントテキストで「幅を固定」「高さを固定」にもチェックを入れます。
■テキストボックスの設定
テキストボックスの設定
テキストボックスは「txt」フォルダの中で上下左右のマージンを固定させたいため、┳ ┫┻┣にチェックを入れます。
またポイントテキストと違い、テキストボックスに「幅を固定」「高さを固定」にチェックを入れるとボックスの幅と高さが固定されます。
そのためテキストボックスで可変させたい時はチェックを入れません。
■「Icon – SNS Set」の設定
「Icon - SNS Set」の設定
アイコンセットは「txt」フォルダの中で左・下のマージンを固定させたいため、┻┣にチェックを入れます。
中のアイコンも大きさを可変させたくないので、「幅を固定」「高さを固定」にチェックを入れます。


配置設定:画面幅に合わせて要素が拡大縮小するようにしたい場合

では、今設定したカードデザインを横一列に並べて画面幅に合わせてリサイズしましょう。下図は先ほどのカードデザインをリピートグリッドで複製配置し、グリッドを解除し再度グルーピングしたものです。
リピートグリッドを解除した直後のカード型デザイン

グループフォルダのレスポンシブサイズ変更を「自動」のままだとカードデザインの幅は変わらず、間隔の幅を広げて調整してくれます。
これは「自動」設定のiOSのツールバーの時と同様に、XDが自動で判断しコンストレイトを設定されたものだと考えられます。

ですが今回は画面幅に合わせてカードデザインの幅や余白も調整したいので、コンポーネントのレスポンシブ変更を下記のように設定します。

■左端のカードデザインの設定
左端のカードデザインの設定
左端に固定したいため┣ にチェックを入れます。
左右上下に可変させたいため「幅を固定」「高さを固定」は入れません。
■真ん中のカードデザインの設定
真ん中のカードデザインの設定
真ん中に配置したいため、どこにもチェックを入れず、自由に可変ができるようにしておきます。
■右端のカードデザインの設定
右端のカードデザインの設定
右端に固定したいため ┫ にチェックを入れます。
左端同様、左右上下に可変させたいため「幅を固定」「高さを固定」は入れません。
画面幅に合わせて綺麗に広がるようになりました!
コンストレイトを設定したカード型デザイン


レスポンシブサイズ変形とグループの関係

ここで1点注目していただきたいことがございます。
それは文字周りのマージンが広がったり、アイコンが歪んだりせずに、横に引き伸ばせたことです。

各グループのコンストレイト設定が成功している図

黒いバーに注目してください、各設定箇所の余白の幅が変わっていないことがわかります。
これはグループ毎にレスポンシブサイズ変更の設定が反映されているからです。

全てのグループを解除し、コンストレイントを「自動」にすると下図のようにバラバラの動きになってしまいます。

グループを解除しコンストレイトを全て自動にした際の図

よって、レスポンシブサイズ変更を手動で設定する場合は、下記のことが大事です。

  • 要素のマージンを固定したいのか、幅・高さを固定したいのか、具体的に何を制御したいのかを把握する
  • 要素が多い複雑なディレクトリ構造の場合は、各要素ごとにグループ分けをする


レスポンシブサイズ変更を利用した表の作り方

今まで試したことを応用して、リサイズや色の変更がしやすい下のような表を作成してみましょう。

http://

1. ベースとなるセルを作成し、コンポーネント化する

それぞれポイントテキスト、テキストボックス、背景の色違いで2種類のセルを制作しコンポーネント化します。
各テキストと背景のレスポンシブサイズ変更の設定は下図の通りです。
この時、マスターコンポーネントは消して隠してしまった方がうっかりいじったりするミスを防げるので安全です。

ポイントテキストの設定
ポイントテキストの設定は共通してテキストの文字サイズを変更させたくないため、「幅を固定」「高さを固定」にチェックを入れます。
またどのように文字を配置したいかにより、設定の方法が複数があります。

ポイントテキストの設定

■上寄せで配置したい場合
セルの中で左・上のマージンを固定させたいため、┳┣にチェックを入れます。

■真ん中に配置したい場合
可変するセルに合わせて高さのマージンを調整させたいため、┣にのみチェックを入れます。

テキストボックス・セルの背景の設定

■テキストボックスの設定
テキストボックスはセルの中で上下左右のマージンを固定させたいため、┳ ┫┻┣にチェックを入れます。

■セルの背景の設定
背景は幅修正やリサイズを踏まえ、自由に可変させたいのでどこにもチェックをつけません。
逆につけてしまうと意図せぬ位置で固定され、表示崩れが起きます。

2. コンポーネントのセルを組み合わせリピートグリッドで複製し解除する

境界線のことを考え、リピートグリッドの余白は-1pxで作りましょう。
またプラグインの「Repeat Grid Fitter」を使うと余白をぴったり合わせてくれるので非常に便利です。

リピートグリッド の図

3. バラバラになった列のグループをまとめてグループ化し、列のグループは解除する

画像のようなディレクトリにすることで、調整しやすい状態にします。

4. 全てのセルのレスポンシブサイズ変更を設定する

セルのレスポンシブサイズ変更は全て自動で設定されているため、全て手動で画像のように設定していきます。
この時、フォルダ内の全てのセルを選んで設定すると時短になります。

■セルの設定
セルのコンストレイント設定
背景同様、幅修正やリサイズを踏まえ、自由に可変させたいのでどこにもチェックをつけません。
逆につけてしまうと意図せぬ位置で固定され、表示崩れが起きます。


5. 全てのセルのレスポンシブサイズ変更を設定する

セルをコンポーネント化していたので、後に背景や線の変更があった際にはマスターコンポーネントの一括変更で対応できます。
またセルのインスタンス(子コンポーネント)は下図のように個別にサイズや色など変更できます。
なおセルのサイズ変更の際は、インスタンスを選択しサイズを変更してください。
背景のみ変更するとマスクで伸ばした箇所が隠れてしまいます

表のサンプルイメージ

レスポンシブサイズ変更のまとめ

  • レスポンシブサイズ変更とは、WEBコンテンツの様々なデバイス表示に合わせたリサイズなどの問題解決のために、AdobeXDが搭載している機能であり、設定には「自動」と「手動」がある。
  • 「自動」は選択したオブジェクト、グループ構成とペアレントグループのエッジの近似、レイアウト情報を分析して自動的にコンストレイントを適用される。
  • 「手動」でコンストレイントを設定する場合、ディレクトリ内のグループ構造に合わせて下記を参照に設定するとイメージ通りに設定しやすい。
コンストレイト

  • 固定/可変幅 ━
    オブジェクトの幅を変えたくない時や文字サイズを変更させたくない時にチェックを入れる
  • 固定/可変高さ ┃
    オブジェクトの高さを変えたくない時や文字サイズを変更させたくない時にチェックを入れる
  • 固定/可変左マージン ┣
    左のマージンを固定したい時にチェックを入れる
  • 固定/可変右マージン ┫
    右のマージンを固定したい時にチェックを入れる
  • 固定/可変上マージン ┳
    上のマージンを固定したい時にチェックを入れる
  • 固定/可変下マージン ┻
    下のマージンを固定したい時にチェックを入れる

初めは設定の仕方に慣れず困惑するかもしれませんが、とても便利な機能なのでたくさん試してみてくださいね!