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

最終更新日 : 2022年6月15日

Adobe XD でオブジェクトを移動、整列、分散、配置する方法を説明します。

オブジェクトの移動

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

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

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

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

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

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

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

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

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

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:

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

  • オブジェクト > 整列 > 最前面へ - オブジェクトを全てのオブジェクトの上位に移動します。
  • オブジェクト > 整列 > 前面へ - オブジェクトを直前のオブジェクトの前面に移動します。
  • オブジェクト > 整列 > 背面へ - オブジェクトを直下のオブジェクトの下に移動します。
    \n
  • オブジェクト > 整列 > 最背面へ - オブジェクトを全てのオブジェクトの最下部に移動します。

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

Windows:

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

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

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

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

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