プロジェクトに様々なサイズのアートボードを追加し、編集します。

必要な情報

このサンプルファイルは、このチュートリアルの学習内容の練習に使用できるAdobe Stock素材です。このチュートリアル以外でサンプルファイルを使用する場合には、Adobe Stockのライセンスを購入してください。このサンプルファイルの使用に適用される利用条件については、フォルダー内のReadMeファイルを参照してください。

学習した内容:XDプロジェクトでのアートボードの追加および編集

Adobe XDのアートボードは、モバイルアプリ、webサイトのページ、その他のプロジェクト用にデザインする各画面を表します。新しいドキュメントを作成するには、まず、アートボードのサイズを選択します。新しいドキュメントが作成されると、指定したサイズのアートボードが1つ作成されます。

アートボードの名前の変更

アートボードに名前を付けると、それがアプリデザインのどの画面を表すか、またはwebサイトのどのページを表すかがわかりやすくなります。アートボードの名前を変更するには、名前をダブルクリックします。名前を入力してEnterキーまたはReturnキーを押します。

アートボードのサイズの変更

以下のいずれかの方法で、アートボードのサイズを変更できます。

  • ツールパネルで選択ツールを使用して、アートボード内をクリックして選択します。この方法は、アートボードが空のときにのみ有効です。アートボードにコンテンツが含まれている場合は、アートボードの上の名前をクリックして選択します。
  • 右側のプロパティインスペクターに、幅と高さが表示されています。ここに値を入力して、選択したアートボードのサイズや向きを変更できます。
  • 選択したアートボードのバウンディングポイントをドラッグして、サイズを変更します。

新しいアートボードの作成

以下のいずれかの方法で、新しいアートボードを作成できます。

  • 既存のアートボードを選択し、「編集/コピー」を選択してコピーし、「編集/ペースト」を選択します。
  • アートボードツールを選択し、ウィンドウ内でクリックして選択しているアートボードまたはデフォルトのアートボードと同じサイズで新しいアートボードを作成します。
  • アートボードツールをクリックし、右側のプロパティインスペクターからデフォルトのアートボードサイズを選択します。
  • アートボードツールを選択し、ドキュメントに新しいアートボードをドラッグで描画します。

アートボードの選択と移動

  • 個々のアートボードを選択するだけでなく、選択ツールを使用してアートボードをドラッグすることで、複数のアートボードを選択することもできます。また、Shiftキーを押しながらアートボードをクリックすると、アートボードの追加選択または解除をできます。
  • アートボードをドラッグすると表示される整列ガイドを使用して、簡単に他のアートボードと揃えることができます。

ヒント:レイヤーパネル(表示/レイヤー)でアートボードを選択することもできます。

このページは役に立ちましたか。