アートボード上の様々なデザインや画面に合わせてデザインをレイアウトする方法を説明します。アートボードでグリッドを使用してデザイン要素を配置します。

通常、アートボートは、モバイルアプリまたは Web サイトの一部としてデザインされた各画面を表します。

1 つの Adobe XD ファイルには多数のアートボードを含めることができます。例えば、1 つのファイルで、モバイル、タブレット、デスクトップベースの各 Web エクスペリエンス用のアートボードを定義するように選択できます。または、ファイル内で、1 つのプラットフォーム用のユーザーフローの複数の画面をデザインすることもできます。

アートボードのプリセットサイズを、プロジェクトの開始時にスタート画面から選択できます。用意されたプリセットを使用せずに、カスタムサイズでアートボードを作成することもできます。アートボードのサイズを選択して新しいファイルを作成したら、アートボードツールを使用して必要な数だけアートボードを追加できます。

1 つの XD ファイル内の様々な画面用の複数のアートボード
1 つの XD ファイル内の様々な画面用の複数のアートボード

プロジェクト内のすべてのアートボードを表示するには、レイヤーパネルを開きます(ツールバーの をクリック)。

アートボードの作成

初めてプロジェクトまたはファイルを作成するとき、ホーム画面でいずれかのプリセットからアートボードのサイズを選択できます。カスタムサイズを指定するには、「カスタム」を選択し、サイズをピクセル単位で指定します。

アートボードを既存のファイルにさらに追加するには、アートボードツールをクリックします。次に、右側のパネルでいずれかのプリセットをクリックし、アートボードを配置する場所をクリックします。

カスタムサイズのアートボードを定義するには、アートボードツールを選択し、必要なアートボードをペーストボード領域で直接描画します。

スクロール可能なアートボードの作成

縦方向のスクロールバーにより、スクロール可能なアートボードを作成することができます。

注意:

このバージョンの Adobe XD では、横方向のスクロールはサポートされていません。

アートボードをスクロール可能にするには:

プリセットサイズを使用して作成されたアートボード:コンテンツがアートボードの所定の長さより長くなってしまった場合、アートボードの下部を目的の長さにドラッグしてデザインを続行します。アートボード上の点線は、スクロール可能なコンテンツの始まりを示します。

スクロール機能を無効にするには、アートボードを選択してから、プロパティインスペクターのスクロールセクションで「なし」を選択します。

カスタムサイズのアートボード:カスタムアートボードをスクロール可能にするには、アートボードを選択してから、プロパティインスペクターのスクロールセクションで「垂直方向」を選択します。

また、アートボードが表示されるウィンドウのサイズである「ビューポートの高さ」を指定します。ビューポートの高さは、スクロールを表示するアートボードの高さより短い必要があります。また、カンバス上の点線の先頭を必要な位置に移動して、ビューポートの高さを指定することもできます。

ビューポートの高さを編集する
ビューポートの高さを編集する

スクロール機能を無効にするには、プロパティインスペクターのスクロールセクションで「なし」を選択します。

アートボードの選択

アートボードを選択するには、選択ツールをクリックし、次のいずれかの操作を実行します。

  • アートボードのタイトルをクリックします。または
  • アートボードの背景をダブルクリックします。

アートボードのコピーとサイズ変更

Mac では、Option キーを押したまま、コピーするアートボードをドラッグします。Windows では、Alt キーを押したまま、アートボードをドラッグします。

または、「レイヤー」パネルでアートボードの名前を右クリックして、「コピー」を選択します。次に、もう一度右クリックし、「ペースト」を選択します。

アートボードのサイズを変更するには、アートボードをクリックして、端に表示された丸形のハンドルを使用します。

アートボードの再配置

アートボードのタイトルをクリックし、新しい位置にドラッグします。 

注意:

レイヤー」パネルでアートボードをドラッグして、アートボードリストでその順序を変更することができます。ただし、ここでは、アートボードの重なり順のみが変更されます。その位置(X 座標と Y 座標)は変更されません。

アートボードの名前を変更する

デフォルトでは、選択したプリセットに基づいてアートボードに名前が付けられ、順番にナンバリングされます。アートボードにカスタムの名前を指定するには、アートボードのタイトルをダブルクリックして、アートボードの新しい名前を入力します。

レイヤーパネルで、アートボードの名前を変更することもできます。アートボードのタイトルをダブルクリックするか右クリックして、「名前変更」を選択します。

アートボードの整列と分布

複数のアートボードを囲み枠で選択して、プロパティインスペクターの整列オプションおよび分布オプションをクリックします。

複数のアートボードの整列と分布
複数のアートボードの整列と分布

アートボード間でのエレメントのコピーと移動

あるアートボードから別のアートボードにエレメントを自由に移動できます。エレメントをドラッグし、目的のアートボードにドロップするだけです。

エレメントをコピーするには、Command+C キー(Mac の場合)または Ctrl+C キー(Windows の場合)を使用します。エレメントのペースト先のアートボードをクリックし、Command+V キー(Mac の場合)または Ctrl+V キー(Windows の場合)を押します。

Option キー(Mac の場合)または Alt キー(Windows の場合)を押したままエレメントをドラッグして、エレメントを複製することもできます。

また、「固定位置」を使用して、スクロールするアートボードでヘッダーやフッターなどのエレメントの位置を固定するか、フローティングエレメントにすることができます。プロトタイプモードのピンアイコンは固定エレメントであることを示します。他のデザインオブジェクトの上または下に重ねることができます。

 

注意:

ペーストする際、アートボードに収まらないオブジェクトのコレクションがある場合、これらはすべてアートボードの中心にペーストされます。

アートボードの周囲のグレーの領域をペーストボードとして使用できます。必要に応じて、任意のエレメントをペーストボードに配置し、コピーしてアートボードに移動できます。 

注意:

すべてのアートボードを書き出すとき、アートボードの一部ではないペーストボード上のエレメントは書き出されません。エレメントの一部がアートボードに配置されていると、アートボード上のエレメントのその一部のみが書き出されます。

複数のアートボードを同時にカット、コピー、移動、サイズ変更、ズームおよび削除する

複数のアートボードを囲み枠で選択して同時に編集します。 

同時に選択された複数のアートボード
同時に選択された複数のアートボード

選択ツールを使用して、選択するアートボードを囲むようにドラッグします。

複数のアートボードを選択する場合、アートボードを完全に選択していることを確認します。アートボードが一部しか選択されていないと、アートボード自体ではなく、アートボード内のオブジェクトが選択されます。

選択したアートボードの周りにバウンディングボックスが表示されます。 

サイズ変更

バウンディングボックス上のハンドルをドラッグして、選択したアートボードのサイズを変更します。

カット、コピー、ペースト

Ctrl キーを押しながらクリックして(Mac の場合)、または右クリックして(Windows の場合)、選択したすべてのアートボードをカット、コピー&ペーストするためのコンテキストメニューを開きます。

削除

キーボードの Delete キーを押して、または Ctrl キーを押しながらクリック(Mac の場合)するか右クリック(Windows の場合)してメニューを開き、選択したアートボードを削除します。または、レイヤーパネルで 1 つ以上のアートボードを選択し、右クリックして「削除」を選択します。

ズーム:「ズーム」モードに入るには、ツールバーのズームアイコンをクリックするか、キーボードの Z キーを押します。ズームモードでは、次の操作を実行できます。

  • ズームイン: XD カンバスの任意の場所をクリックするか、目的のアートボードをクリックします。または、ズームインする領域を囲み枠で選択します。
  • ズームアウト: Option キーを押しながらクリックするか(Mac の場合)、Alt キーを押しながらクリックします(Windows の場合)。

ズームモードに入らずにすばやくズームインまたはズームアウトするために、ズームモードを一時的にアクティブ化することもできます。

  • ズームイン:スペース + Command キー(Mac の場合)またはスペース + Ctrl キー(Windows の場合)を押してから、アートボード上の領域をクリックするか囲み枠で選択します
  • ズームアウト:スペース + Command + Option キーを押します

アートボード上の特定のオブジェクトにズームインするには、オブジェクトを選択し、表示/選択範囲に合わせてズームを選択するか、Mac では ⌘ 3 を使用します。Windows では、Ctrl+3 キーボードショートカットを使用します。

グリッドを使用してアートボードにエレメントを配置する

XD には、方眼グリッドとレイアウトグリッドの 2 種類のグリッドオプションが用意されています。 

方眼グリッド

方眼グリッドには、オブジェクトとテキストを整列できるガイド機能があります。描画時にオブジェクトの端がグリッドのスナップ領域内に入ると、オブジェクトは自動的にグリッドにスナップします。

方眼グリッドは、アートボード上でオブジェクトやテキストをレイアウト中に計測情報をすばやく理解するのにも役立ちます。 

XD の方眼グリッド
XD の方眼グリッド

レイアウトグリッド

レイアウトグリッドを使用して、XD の列を定義できます。レイアウトグリッドを使用すると、デザインの基本構造と、その中の各コンポーネントが異なるブレークポイントに対してどのように応答するかを定義できます(レスポンシブデザインの場合)。

アートボードをレイアウトグリッドに適用した後、それにエレメントをスナップできます(方眼グリッドと同じ)。ただし、アートボードのサイズが変更またはグリッドが調整されている場合、ピン留めされたアイテムはサイズ変更もリフローもされません。

XD のレイアウトグリッド
XD のレイアウトグリッド

グリッドを表示またはグリッドを隠す

アートボードを選択して、次のいずれかの操作を行います。

  • Mac の場合:「表示/レイアウトグリッドを表示」または「表示/方眼グリッドを表示」を選択します。
  • Mac または Window:プロパティインスペクターのグリッドドロップダウンリストからグリッドの種類を選択し、その横のチェックボックスを選択します。
  • ショートカットキー:
    • 方眼グリッドを表示:
      • Mac の場合 - ⌘ '
      • Windows の場合 - Ctrl + '
    • レイアウトグリッドを表示:
      • Mac の場合 - ⇧ ⌘ '
      • Windows の場合 - Ctrl + Tab
XD の方眼グリッドまたはレイアウトグリッドを設定する
XD の方眼グリッドまたはレイアウトグリッドを設定する

グリッドを非表示にするには、グリッドチェックボックスの選択を解除します。

方眼グリッド環境を設定する

方眼グリッドオプションを使用すると、グリッドの間隔とカラーを変更できます。一連のグリッドオプションを初期設定として保存すれば、その設定を後で簡単に使用することができます。詳しくは、方眼またはレイアウトグリッドの初期設定を参照してください。

注意:

XD では、ほとんどの測定値とフォントサイズに、CSS ピクセルの測定単位または iOS の測定値と同じである仮想ピクセルを使用します。仮想ピクセルは大まかに、72 dpi のモニターの 1 物理ピクセルに相当します。現時点では、XD で測定単位を変更することはできません。

グリッドサイズの変更

グリッドサイズを変更するには、プロパティインスペクターで間隔の値を編集します。値を小さくするほど、グリッドの密度が高くなります。 

オブジェクトを方眼グリッドにスナップする

グリッドにオブジェクトをスナップするには、オブジェクトのいずれかの端がグリッドのスナップ領域に入るまで、オブジェクトをグリッドの方にドラッグします。

オブジェクト描画中のグリッドへのスナップ
オブジェクト描画中のグリッドへのスナップ

グリッドにスナップしないようにするには、Command キー(Mac)または Ctrl キー(Windows)を押しながら、マウスをドラッグしてオブジェクトを描画します。

レイアウトグリッド環境を設定する

レイアウトグリッドを有効にすると、XD ではアートボードの性質に合った列がインテリジェントに表示されます。例えば、携帯電話のアートボードは、タブレットのデフォルトのレイアウトグリッドと比較して列の数が少なく、幅が狭くなります。

アートボードのサイズを変更すると、レイアウトグリッドの列の幅が新しいアートボードのサイズに合わせて変更されます。アートボード上のオブジェクトは変更されず、列との関係は維持されません。

アートボードのサイズを変更したときのレイアウトグリッドの動作
アートボードのサイズを変更したときのレイアウトグリッドの動作

プロパティインスペクターから列の数、列の幅、列のカラー、ふち取りの幅、およびマージンサイズの環境設定を変更できます。

レイアウトグリッドを変更後、その変更をデフォルトに設定したり、XD のデフォルトのレイアウトグリッドに戻したりできます。詳しくは、方眼またはレイアウトグリッドの初期設定を参照してください。

列と段間のプロパティを変更する

ニーズに合わせてレイアウト列のプロパティを変更できます。

レイアウトグリッドの列の数を設定するには、プロパティインスペクターで「」の値を編集します。列の数を変更すると、XD は自動的に列の幅を再計算します。

アートボードの列の間のスペースは、段間幅と呼ばれます。デフォルトの「段間幅」の値を変更して段間の幅を定義します。

列の幅を変更するには、デフォルトの「列の幅」の値を編集します。

XD でレイアウトグリッドを設定する
XD でレイアウトグリッドを設定する

マージンを変更する

レイアウトグリッドの設定中に、マージンのサイズを変更できます。 

左右のマージンを同じ値に調整するには、「リンクされた左右のマージン」アイコンをクリックしてマージンの値を編集します。

4 つの辺のマージンをすべて個別に調整するには、「各辺に異なるマージンを使用」アイコンをクリックして、各マージンの値を編集します。

左右のマージンのサイズを同じ値に編集する
左右のマージンのサイズを同じ値に編集する
マージンのサイズを個別に編集する
マージンのサイズを個別に編集する

方眼またはレイアウトグリッドの色を変更する

方眼またはレイアウトグリッドの色を変更するには:

  1. 方眼グリッドの場合は「方眼の大きさ」、レイアウトグリッドの場合は「」の横にあるボックスをクリックします。

    カラーピッカーが表示されます。

    グリッド内での編集
    グリッド内での編集
  2. 以下のことを実行できます。

    • 正確な値がわかっている場合は、HSBA または 16 進数フィールドに HSBA または 16 進数の値を指定します。
    • カラーフィールドとカラースライダーを使用して色を調整します。これを行った場合、HSBA の数値と 16 進数値が適宜調整されます。  
    • カラースライダーを使用するか、パーセンテージの値を入力して、塗りの不透明度を設定します。アルファを 0 に設定すると、レイアウトグリッドが [Outline] ビューに切り替わります。
    • スポイトを使用してアートボードから色を選択します。

    注意:

    Adobe XD では、16 進コードの短縮形もサポートされています。例えば、0 を入力して Return キーを押すと、コード #000000 のカラーが自動的に表示されます。同様に、#0A0A0A の場合は 0A を、#00AAFF の場合は 0AF を入力できます。

    カラーダイアログボックスでオプションを変更すると、グリッドのカラーが変化します。

  3. カラーを決定したら、保存します。これにより、カラーピッカーの下部の「+」アイコンをクリックして簡単にアクセスできるようになります。

方眼またはレイアウトグリッドの初期設定

初期設定の方眼またはレイアウトグリッド表示に戻るには、プロパティインスペクターの「グリッド」セクションで「初期設定を使用」をクリックします。

カスタマイズしたグリッド環境設定を初期設定として設定するには、「初期設定にする」をクリックします。これにより、アカウントのデフォルトのグリッドオプションが設定されます。XD で新しいファイルを開くと、この新しいデフォルトになります。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー