マニュアル キャンセル

レスポンシブサイズ変更とレイアウトの制約

  1. Adobe XD ユーザーガイド
  2. はじめに
    1. Adobe XD の新機能
    2. よくある質問
    3. Adobe XD でのデザイン、プロトタイプ、共有
    4. 必要システム構成
      1. ハードウェアとソフトウェアの要件
      2. Adobe XD、Big Sur、Apple Silicon | macOS 11
    5. ワークスペースの基本
    6. Adobe XD でのアプリ言語の変更
    7. UI デザインキットへのアクセス
    8. Adobe XD のアクセシビリティ
    9. ショートカットキー
    10. ヒントとテクニック
    11. Adobe XD サブスクリプションオプション
    12. XD スタータープランへの変更
  3. デザイン
    1. アートボード、ガイド、レイヤー
      1. アートボードの基本を学ぶ
      2. グリッドとガイドを使う
      3. スクロール可能なアートボードの作成
      4. レイヤーの操作
      5. スクロールグループを作成する
    2. シェイプ、オブジェクト、パス
      1. オブジェクトの選択、サイズ変更および回転
      2. オブジェクトの移動、分散および整列
      3. オブジェクトのグループ化、ロック、複製、コピー、および反転
      4. オブジェクトの線、塗りおよびドロップシャドウの設定
      5. 繰り返しオブジェクトの作成
      6. 3D 変形を使って透視図を作成
      7. ブール演算を使用したオブジェクトの編集
    3. テキストとフォント
      1. 描画ツールとテキストツールの操作
      2. Adobe XD のフォント
    4. コンポーネントとステート
      1. コンポーネントによる作業
      2. 入れ子になったコンポーネントの操作
      3. コンポーネントへの複数ステートの追加
    5. マスキングと効果
      1. シェイプでマスクを作成
      2. ぼかし効果の操作
      3. グラデーションの作成と修正
      4. ブレンド効果の適用
    6. レイアウト
      1. レスポンシブサイズ変更とレイアウトの制約
      2. コンポーネントとグループへの固定パディングの設定
      3. スタックを使用して動的なデザインを作成する
    7. ビデオと Lottie アニメーション
      1. ビデオを操作
      2. ビデオを使用したプロトタイプの作成
      3. Lottie アニメーションを操作
  4. プロトタイプ
    1. インタラクティブプロトタイプを作成
    2. プロトタイプのアニメーション化
    3. 自動アニメーションでサポートされているオブジェクトプロパティ
    4. キーボードとゲームパッドでプロトタイプを作成
    5. 音声コマンドや音声再生を使用したプロトタイプの作成
    6. タイマートランジションの作成
    7. オーバーレイの追加
    8. 音声機能付きプロトタイプのデザイン
    9. アンカーリンクを作成
    10. ハイパーリンクの作成
    11. デザインとプロトタイプのプレビュー
  5. 共有、書き出し、およびレビュー
    1. 選択したアートボードの共有
    2. デザインおよびプロトタイプの共有
    3. リンクのアクセス権限を設定
    4. プロトタイプを操作
    5. プロトタイプのレビュー
    6. デザインスペックの使用方法
    7. デザインスペックの共有
    8. デザインスペックを確認する
    9. デザインスペックのナビゲート
    10. デザインスペックのレビューとコメント
    11. アセットの書き出し
    12. デザインスペックからのデザイン素材の書き出しとダウンロード
    13. エンタープライズ版のグループ共有
  6. デザインシステム
    1. Creative Cloud ライブラリと連携したデザインシステム
    2. Adobe XD でドキュメントアセットによる作業
    3. Adobe XD での Creative Cloud ライブラリの操作
    4. リンク化アセットから Creative Cloud ライブラリへ移行
    5. デザイントークンを使用する 
    6. Creative Cloud ライブラリアセットの利用
  7. クラウドドキュメント
    1. Adobe XD のクラウドドキュメント
    2. デザインの共同作業と共同編集
    3. 共有されたドキュメントの共同編集
  8. 統合とプラグイン
    1. 外部のデザイン素材
    2. Photoshop で作成したデザインアセットの操作
    3. Photoshop からのアセットのコピー&ペースト
    4. Photoshop のデザインの読み込みまたは起動
    5. Adobe XD での Illustrator アセットの操作
    6. Illustrator のデザインの起動または読み込み
    7. Illustrator から XD へのベクターのコピー
    8. Adobe XD のプラグイン
    9. プラグインの作成と管理
    10. XD への Jira の統合
    11. XD 用 Slack プラグイン
    12. XD 用 Zoom プラグイン
    13. XD から Behance にデザインを公開
  9. XD iOS 版および Android 版
    1. モバイルデバイスでプレビュー
    2. Adobe XD モバイル版に関する FAQ
  10. トラブルシューティング
    1. 既知の問題と修正された問題
      1. 既知の問題
      2. 解決済みの問題
    2. インストールと更新
      1. XD が Windows 上で互換性がないように見える
      2. エラーコード:191
      3. エラーコード:183
      4. XD プラグインのインストールに関する問題
      5. Windows 10 で XD のアンインストールと再インストールを促すダイアログが表示される
      6. 環境設定の移行に関する問題
    3. 起動時のクラッシュ
      1. Windows 10 で起動すると XD がクラッシュする
      2. Creative Cloud からログアウトすると XD が終了する
      3. Windows でのサブスクリプションステータスの問題
      4. Windows で XD を起動すると、アプリがブロックされたという警告が表示される
      5. Windows でのクラッシュダンプの生成
      6. クラッシュログの収集と共有
    4. クラウドドキュメントおよび Creative Cloud ライブラリ
      1. XD クラウドドキュメントで発生する問題
      2. リンクされたコンポーネントに関する問題
      3. ライブラリとリンクに関する問題
    5. プロトタイプ作成、公開、レビュー
      1. macOS Catalina でプロトタイプのインタラクションを収録できない
      2. 公開ワークフローの問題
      3. 公開されたリンクがブラウザーに表示されない
      4. プロトタイプがブラウザーで正しくレンダリングされない
      5. コメントパネルが突然共有リンクに表示される
      6. ライブラリを公開できない
    6. 読み込み、書き出し、その他のアプリの操作
      1. XD での読み込みと書き出し
      2. XD での Photoshop ファイルの使用
      3. XD での Illustrator ファイルの使用
      4. XD から After Effects への書き出し
      5. XD での Sketch ファイルの使用
      6. 書き出しに表示されないサードパーティ製品

複数の画面サイズやレイアウトに対してレスポンシブサイズ変更とレイアウトの制約を使用する方法について説明します。

レスポンシブサイズ変更

近年では数々なデバイス向けのデザインを作成する必要があるため、モバイル、タブレット、デスクトップの解像度で使用される様々な画面サイズを考慮することが重要です。すべてのデザイナーが同じデバイスを使用しているとは限らないため、デザイナーは様々な画面サイズでのコンテンツの動作を考慮する必要があります。 

ユーザーのこの問題を解決するため、Adobe XD はレスポンシブサイズ変更と呼ばれる機能を開発しました。これにより、オブジェクトのサイズを変更する際、空間関係を維持しながら様々な画面サイズに最適なサイズで適応させることができます。

レスポンシブサイズ変更
レスポンシブサイズ変更

レスポンシブサイズ変更の手順

レスポンシブサイズ変更により、XD は適用する可能性の高いレイアウトの制約を自動的に予測し、オブジェクトのサイズが変更される際に自動的にそのレイアウトの制約を適用します。 

これまでは、レスポンシブのような動作を実現するには、デザイナーは手作業で複数のオブジェクトにレイアウトの制約を適用して、サイズ変更の際にオブジェクトに設定する必要がありました。このような単調で時間のかかる方法では推測と繰り返し作業が多くなり、デザインのクリエイティブなひらめきを劣化させます。

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

レスポンシブサイズ変更(サイズ変更中のデザイン素材の動作)

レスポンシブサイズ十字

サイズの変更中は、ピンクの十字がサイズを変更中のオブジェクト上に表示されます。十字により、グループに適用されているレイアウトの制約ルールを示します。XD では、レスポンシブサイズ変更と手動によるレイアウトの制約がどのように連携し合って動作するのか、視覚的にコンテキストに沿って学べる方法を提供しています。

サイズ変更中のグループにはピンクの十字

レスポンシブサイズ変更とグループ

サイズ変更の前に、類似のオブジェクトをグループ化し、関係を構築できます。XD は初期設定の状態でグループ化されたオブジェクトを保持し、既に使用している構造全体で階層を作ることができます。サイズが変更されても、オブジェクトはそのままグループ化されます。

レイアウトの制約を手動で編集

レスポンシブサイズ変更の結果に満足できない場合、レイアウトの制約ルールを手動で編集することができます。手動のレイアウトの制約を設定することで、コンポーネント、アートボード、レイヤーのあるグループのサイズを変更するときのオブジェクトの動作を明確に決定することができます。

手動」を選択して、オブジェクトにレスポンシブサイズ変更が設定されているレイアウトの制約を手動で編集します。手動のレイアウトの制約は、XD が自動で設定したレイアウトの制約より常にオーバーライドされます。次のレイアウトの制約を使用してルールを指定し、様々なコンポーネントの動作を制御できます。

  • 固定/可変幅
  • 固定/可変高さ
  • 固定/可変左マージン
  • 固定/可変右マージン
  • 固定/可変上マージン
  • 固定/可変下マージン
個々のオブジェクトにレイアウトの制約を設定する

オブジェクトグループにレイアウトの制約を設定する
オブジェクトグループにレイアウトの制約を設定する

レスポンシブにアートボードのサイズを変更する

初期設定では、アートボードのレスポンシブサイズ変更はオフになっています。オンにすると、アートボードのレスポンシブサイズ変更を開始できます。

レスポンシブサイズ変更をオンに切り替えるには

  1. デザインモードでアートボードを選択します。

  2. プロパティインスペクター」で、切り替えボタンを選択してレスポンシブサイズ変更を「オン」にします。

    レスポンシブサイズ変更をオンにし、「手動」を選択してレイアウトの制約を表示
    レスポンシブサイズ変更のオン/オフの切り替え

  3. 次のレスポンシブサイズ変更のオプションを選択します。

    • 自動:自動でレイアウトの制約を使用してアートボードのサイズを変更します。
    • 手動:「プロパティインスペクター」で利用可能なレイアウトの制約を手動で設定します。
    レスポンシブサイズ変更をオンにし、「手動」を選択してレイアウトの制約を表示
    レスポンシブサイズ変更をオンにし、「手動」を選択してレイアウトの制約を表示

グループのレスポンシブサイズ変更のオーバーライド

レスポンシブサイズ変更は複数選択やグループのサイズ変更の初期設定のサイズ変更動作ですが、次のことができます。

  • 拡大または縮小されたサイズ変更の場合、Shift キーを押して一時的にレスポンシブの動作をオーバーライドします。サイズ変更を行う際に、コーナー選択ハンドルを使用してグループの縦横比を固定することができます。
  • プロパティインスペクター」で、レスポンシブサイズ変更オプションを「オフ」にします。
アドビのロゴ

アカウントにログイン

[Feedback V2 Badge]