【AdobeXD】アートボードの基本的な使い方を7つ紹介します!

takato(@n8takato)です!

XDのアートボードの使い方を知りたい

この記事は上記の課題に向けて作成しています。

XDのアートボードの使い方がわからず困っている方がいると思います。

そんな方向けにXDのアートボードの使い方について記事を作成しました。

XDを使い始めたばかりの方は是非読んでみてください。

この記事でわかること7つ

  1. アートボードの作成
  2. アートボードの追加
  3. アートボードの移動
  4. アートボードのサイズ変更
  5. アートボードの複製
  6. アートボードの書き出し
  7. アートボードの削除

この記事を書いた人

この記事を書いた僕はこんな人です!

  • 都内制作会社でwebデザイナーとして勤務
  • webデザイナー歴2年目のひよっこ
  • web制作現場で学んだことを発信している人

XDに関する他の記事はこちら

あわせて読みたい
【2022年版】AdobeXDで共有する方法を紹介します! XDで共有する方法を知りたい この記事は上記の課題に向けて作成しております。 XDには共有機能があります。 共有機能を使うことで他の人にデザインを共有することが出来...
あわせて読みたい
XDのスクロールグループ機能で各方向のスクロールを確認する方法! XDで各方向のスクロールを確認する方法を知りたい この記事は上記の課題に向けて作成しています。 XDにはスクロールグループという機能があります。 スクロールグループ...
目次

アートボードとは何か?

まず始めにアートボードについて説明します。

アートボードとはデザインを作成する作業場のような場所です。

XDファイルの中にアートボードを作成することでデザイン作業を行うことが出来るようになります。

XDファイルの中にある背景の白いものがアートボードです。
XD アートボード

さらに複数のアートボードを作成することも出来ます。

アートボードを複数作成することにより、トップページのPCバージョンとスマホバージョンの2つのデザインを1つのファイルで作成出来るようになります。

XDファイルに複数のアートボードを作成出来ます。
複数のアートボード

アートボードを作成してからデザイン制作に入ります。

アートボードの作成

XDファイルを新規で作成するとアートボードも自動で作成されます。

①XDを立ち上げるとこちらの画面が表示されます。

①XDを立ち上げるとこちらの画面が表示されます。
XDの立ち上げ

②作成したい内容に合ったファイルを選択します。

②作成したい内容に合ったファイルを選択します。
任意のアートボードを選択

③既にアートボードが作成されたファイルが表示されます。

③既にアートボードが作成されたファイルが表示されます。
自動でアートボードが作成される

このようにアートボードは自動で作成されます。

アートボードの追加

アートボードは複数作成することが出来ます。

①XDの左側にあるメニューから「アートボード」を選択します。

①XDの左側にあるメニューから「アートボード」を選択します。
アートボードの選択

②背景がグレーの部分を選択するとアートボードが作成されます。

2つ以上のアートボードを作成することも可能ですよ。

アートボードの移動

作成したアートボードは位置を移動させることが出来ます。

①アートボード左上にあるグレーの「アートボード名」を選択します。

①アートボード左上にあるグレーの「アートボード名」を選択します。
アートボード名を選択

②選択した状態でカーソルを上下左右に動かすとアートボードが移動します。

アートボードの位置を動かしたい時はこのように移動させてください。

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

アートボードはサイズを変更することが出来ます。

①アートボード名を選択します。

①アートボード名を選択します。
アートボードの選択

②アートボードの縁にある丸を選択してサイズを変更します。

②アートボードの縁にある丸を選択してサイズを変更します。
アートボードのリサイズ

アートボードの複製

アートボードを複製することも出来ます。

①アートボード名を選択してコピーします。

①アートボード名を選択してコピーします。
アートボードのコピー

②アートボードの隣でペーストします。

②アートボードの隣でペーストします。
アートボードのペースト

するとアートボードが複製されます。

Macユーザーはアートボードを選択した状態で「optionキー」を押しながらドラッグすると複製されます。

アートボードの書き出し

アートボードは様々な拡張子に書き出すことが出来ます。

XDで書き出せる拡張子

  • PNG
  • SVG
  • PDF
  • JPG

①書き出したいアートボードを選択します。

①書き出したいアートボードを選択します。
書き出すアートボードを選択

②「ファイル」→「書き出し」→「選択したオブジェクト…」を選択します。

②「ファイル」→「書き出し」→「選択したオブジェクト...」を選択します。
「選択したオブジェクト…」の選択

③「フォーマット」から書き出したい拡張子を選択して「書き出し」を選択します。

③「フォーマット」から書き出したい拡張子を選択して「書き出し」を選択します。
アートボードの書き出し

指定した場所に書き出されます。

アートボードの削除

アートボードは削除することも出来ます。

①アートボードを選択

②deleteキーで削除する

上記の流れでアートボードを削除することが出来ます。

【最後に】

この記事ではアートボードの基本的な使い方を7つ説明しました。

XDのアートボードの操作は非常に簡単です。

アートボードを上手く活用してデザイン制作してください。

XDをまだインストールしていない方は、 AdobeXD公式サイト よりインストールしてください。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次