マニュアル キャンセル

オブジェクトの移動、分散および整列

  1. Adobe XD ユーザーガイド
  2. はじめに
    1. Adobe XD の新機能
    2. よくある質問
    3. Adobe XD でのデザイン、プロトタイプ、共有
    4. カラーマネジメント
    5. 必要システム構成
      1. ハードウェアとソフトウェアの要件
      2. Adobe XD、Big Sur、Apple Silicon | macOS 11
    6. ワークスペースの基本
    7. Adobe XD でのアプリ言語の変更
    8. UI デザインキットへのアクセス
    9. Adobe XD のアクセシビリティ
    10. ショートカットキー
    11. ヒントとテクニック
  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. エンタープライズ版のグループ共有
    14. XD アセットのバックアップまたは移行
  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 でオブジェクトを移動、整列、分散、配置する方法を説明します。

オブジェクトの移動

次のいずれかの方法でオブジェクトを移動することができます。

  • マウスでオブジェクトをドラッグします。
  • キーボード上の矢印キーを使用します。または
  • プロパティインスペクターで、正確な数理演算値(+、-、/、*)を使用します。

Shift キーを使用し、現在の X 軸および Y 軸の方向を基準にして、1 つ以上のオブジェクトを正確に水平方向または垂直方向に移動します。 

また、整列パネルを使用して、オブジェクト相互の相対的位置を決めることもできます。

ドラッグによるオブジェクトの移動

1 つ以上のオブジェクトを選択して新しい位置にドラッグします。

矢印キーを使用したオブジェクトの移動

  1. 1 つ以上のオブジェクトを選択します。

  2. オブジェクトを移動する方向の矢印キーを押します。 

X および Y 座標を使用したオブジェクトの移動

1 つ以上のオブジェクトを選択します。プロパティインスペクターで X 座標および Y 座標の新しい値を入力します。X および Y の値をクリックし、矢印キーを使用して値を増減させることもできます。

数学計算を使用したオブジェクトの移動

1 つ以上のオブジェクトを選択します。プロパティインスペクターの数値を入力できるボックスで、簡単な数値計算を実行します。例えば、現在の測定単位を使用して、選択したオブジェクトを 3 単位右に移動する場合は、現在の値の後に「+3」と入力します。

変更を計算するためにサポートされた数学演算は、+、-、/、* です。


数値を入力できるテキストボックスで、次のいずれかの操作をおこないます。

  • 現在の値全体を数式に置き換えるには、その値全体を選択します。
  • 現在の値を数式の一部として使用するには、その値の前または後をクリックします。

 

注意:

Shift キーを押しながら矢印キーを使用すると、10 px ずつ値が増えます。

オブジェクトの整列と分布

整列パネルを使用して、選択したオブジェクトを選択範囲またはアートボードに水平または垂直に整列または配置できるようになりました。

オブジェクト相互の相対的位置に整列または配置する

整列するオブジェクトを選択し、プロパティインスペクターで次のいずれかのオプションをクリックします。

  • 上揃え
  • 上下中央揃え
  • 下揃え
  • 左揃え
  • 左右中央揃え
  • 右揃え
  • オブジェクトを水平方向または垂直方向に分布
オブジェクトを水平方向に整列する
オブジェクトを水平方向に整列する

オブジェクトを垂直方向に整列
オブジェクトを垂直方向に整列

アートボードを基準としたオブジェクトまたはグループの整列

整列するオブジェクトまたはグループを選択し、プロパティインスペクターで次のいずれかのオプションをクリックします。

  • 上揃え
  • 上下中央揃え
  • 下揃え
  • 左揃え
  • 左右中央揃え
  • 右揃え

オブジェクトをピクセルグリッドに整合

オブジェクトの端をピクセルグリッドに合わせることができます。これをおこなうために、XD ではエレメントの X、Y、W、H のプロパティの整数値が丸められ、くっきりと表示されるようにします。

オブジェクトをピクセルグリッドに合わせるには、オブジェクトを右クリックし、「ピクセルグリッドに整合」を選択します。

ピクセルグリッドに整合
ピクセルグリッドに整合

ピクセルグリッドに合わせるということは、必ずしも X、Y、W、H プロパティに端数がなくなるということではありません。線やパス(中心線が引かれたシェイプ)の場合、ピクセルに合わせてくっきりと描くには、X/Y が 0.5 で終わる必要があることがあります。

Adobe XD ではアートボードグリッドをサポートしており、これはピクセルプレビューとは異なります。Adobe XD ではピクセルプレビューをサポートしていません。Adobe XD のアートボードグリッドの初期設定は、8 ピクセルグリッドです。グリッドの設定を変更して 1 ピクセルグリッドを作成できます。詳しくは、グリッドを使用してアートボードにエレメントを配置するを参照してください。

オブジェクトの配置

Adobe XD では、オブジェクトは描画した順にスタックされます。

レイヤーパネルを使用して、異なるレイヤーのオブジェクトを選択、並べ替え、移動することもできます。詳しくは、レイヤーの操作を参照してください。

Mac の場合:

オブジェクトをそのグループの上部または下部に移動するには、移動するオブジェクトを選択し、必要に応じて次のいずれかのオプションを選択します。

  • オブジェクト/配置/最前面へ - オブジェクトがすべてのオブジェクトの最上部に移動します
  • オブジェクト/配置/前面へ - オブジェクトをそのすぐ上にあるオブジェクトの上に移動します。
  • オブジェクト/配置/背面へ - オブジェクトをそのすぐ下にあるオブジェクトの下に移動します。
  • オブジェクト/配置/最背面へ - オブジェクトがすべてのオブジェクトの最下部に移動します。

Ctrl キーを押しながらオブジェクトをクリックし、コンテキストメニューの任意の整列オプションを選択することもできます。

Windows の場合:

オブジェクトを右クリックし、コンテキストメニューに表示される任意の整列オプションを選択します。

選択した画像のスタック先頭への移動
選択した画像のスタック先頭への移動

選択した画像の前面への移動
選択した画像の前面への移動

選択した画像の背面への移動
選択した画像の背面への移動

選択した画像のスタック末尾への移動
選択した画像のスタック末尾への移動

ヘルプをすばやく簡単に入手

新規ユーザーの場合

Adobe MAX 2025

Adobe MAX Japan
クリエイターの祭典

2025 年 2 月 13 日
東京ビッグサイト