Adobe XDのアートボードの使い方を解説する【初心者向き】

みやしも WEB制作

今回は、人気のデザインツールAdobe XD『アートボード』の使い方について、画像つきで詳しく解説してゆきます。

XDの基本ともいえる『アートボード』についての理解が深まり、スキルアップができる内容です!

▼この記事を書いたひと

フリーランスのみやしも(@miyashimo_eng)です。プログラミングやWEB制作など、IT関連の情報を幅広く発信してゆきます。

Adobe XDの「アートボード」とは?

XDにおけるアートボードとは「WEBサイト」や「アプリ」などの画面を表す作業領域のこと言います。

XDのアートボード
XDのアートボード

XDでは1つのファイルに複数のアートボードを作成することができる様になっています。WEBサイト・アプリの制作では、基本的には1アートボード=1画面をデザインするという原則したがって作業を進めてゆきます。



▼XDのアートボードについて

  • XDにおけるWEBサイトやアプリなどの画面を表す作業領域
  • 基本的には1つのアートボードに1つの画面をデザインする
  • アートボードは複数作成する事ができる
引き続き、アートボードの作り方や編集時のコツなどを解説してゆきます!

アートボードを追加する方法

XDでアートボードを追加するには、次のように操作してゆきます。



▼アートボードを追加する方法

  • ツールバーの『アートボード』を選択する
  • アートボード以外の灰色の部分をクリックする
新しいアートボードを追加する方法

すると次のように、ワークスペースに新しいアートボードが追加されます。

新しいアートボードが追加された状態

基本的にはこの様にすればアートボードが追加できます。ちなみに、この状態で続けてクリックしていくと続けてアートボードを追加することも出来ます。また、元の作業状態に戻るにはツールバーで『選択』を選択すればOKです。(もしくはEscキーを押す)

元の作業状態にもどる方法
続けて、追加したアートボードの名前の変え方・サイズの変え方について解説してゆきますね!

アートボードの編集方法

ここからは、Adobe XDにおけるアートボードの編集方法について詳しく解説してゆきます。



▼この章で解説する内容

  • アートボードの名前を変える方法
  • アートボードを移動する方法
  • アートボードのサイズを変更する方法
  • アートボードを削除する方法

アートボードの名前を変える方法

アートボードの左上にある名前の部分をダブルクリックすれば、各アートボードの名前を変える事ができます。

アートボードの名前を変える方法
デザインするWEBページの内容に合わせて、分かりやすい名前をつけてゆきましょう!

アートボードを移動する方法

アートボードが選択された状態でドラッグをすれば、アートボードを好きな位置に移動させることが出来ます。

アートボードを移動する方法

また、アートボードは次のような方法で選択することが出来ます。



▼アートボードを選択する方法

  • アートボードの左上の名前の部分をシングルクリックする
  • アートボードに何も置かれていない状態なら、シングルクリックする
  • アートボードに何か置かれている状態なら、余白の部分をダブルクリックする
アートボードの状態によって選択する方法が変わります。最初は少し戸惑うかもしれませんが、アートボードの状態に注意しながら作業をしてみましょう。
おすすめは名前の部分をクリックしながらドラッグする方法です。この方法なら、アートボードの状態にかかわらず確実に移動させる事ができますよ!

アートボードのサイズを変更する方法

アートボードを選択した状態で表示されるハンドルをドラッグ移動させることで、上下左右の方向に自由にサイズを変えることが出来ます。

アートボードのサイズを変更する方法

こちらも移動させる方法と同様に、あらかじめアートボードを選択しておく必要があります!

アートボードを削除する方法

アートボードを選択した状態でDeleteキーを押すか、右クリックして『削除』を選択すれば、そのアートボードを削除できます。

アートボードを削除する方法
以上でアートボードの編集方法の解説は終わりです。

アートボードの作業のコツ

ここからは、アートボードにおける実作業のコツについて、詳しく解説してゆきます。



▼この章で解説する内容

  • コツ①:拡大縮小を使いこなして視覚的に把握しよう
  • コツ②:全体のサイズ・位置は整えよう
  • コツ③:レイヤー機能を使って管理してみよう
アートボードへの理解をさらに深めてゆこう!

コツ①:拡大縮小を積極的に使ってゆこう

作業をすすめゆくとアートボードの数が増えてゆきますが、XDのズームイン・ズームアウトの機能を使えば、全体のアートボードの状態が視覚的に把握しやすくなります。

ファイル全体を俯瞰して見たり、集中して作業するためにも、拡大縮小を積極的に使ってゆきましょう!

セレクトボックスから表示倍率を指定する

XDではウィンドウの右上にあるセレクトボックスから、ズームイン・ズームアウトの指定が出来る様になっています。

セレクトボックスから表示倍率を指定する方法

ズームツールを使用する

ツールバーの『ズームツール』を使う事でズームイン・ズームアウトを行うことが出来ます。

ズームツールを使用する方法

XDの『ズームツール』ではクリックした箇所を中心に拡大がされます。反対に縮小をする場合は、Macなら『Option』キー、Windowsなら『Alt』キーを押しながらクリックします。

虫めがねアイコンの状態を見ながら操作すれば、クリック時の拡大・縮小の違いが分かりやすいですよ!

ショートカットキーを使う

次の様なショートカットキーを使ってズームイン・ズームアウトする事もできます。

【Mac】
①Command+『+』または『-』
②Option+スクロールホイールの上下で拡大・縮小

【Windows】
①Ctrl+『+』または『-』
②Ctrl+スクロールホイールの上下で拡大・縮小

ショートカットキーについて詳しく知りたい方は『Adobe XD ユーザーガイド』も参考になります。

作業環境に合わせて色々ためしてみましょう。XDはマウスとショートカットキーを組み合わせて作業するのがおススメです!

コツ②:全体のサイズ・位置は整えよう

作業を進めてゆくと自然とアートボードが増えてゆくと思いますが、例えば次のようにサイズ・位置の調整を行うと、整った見やすい作業環境を維持することが出来ます。



  • アートボードの全体を上の辺で揃える
  • 各アートボードは下方向にサイズ調整をする
アートボードの整え方
WEBデザインを行う場合は、アートボードの全体を上の辺で揃えつつ、各アートボードは下方向にサイズ調整を行う様にしましょう。こうすれば各ページの長さの違いにも対応しやすく、また全体の確認もしやすくなります。
複数人で作業をする時のマナーでもあります。アートボードは綺麗に揃えてゆきましょう!

コツ③:レイヤー機能を使って管理してみよう

慣れてきたらレイヤー機能も使いつつ、アートボードを管理してゆきましょう。



XDの左下にある『レイヤー』ボタンを押せば、左側のパネル表示が切り替わり、XDに含まれるレイヤーが一覧で確認できる様になります。

アートボードをレイヤー機能で管理する

アートボードの一覧は複製・削除・名前の変更といった基本操作にも対応しています。ファイルのアートボードを整理する際には、ここで操作を行うのも良いと思います。

オブジェクトを選択しているとパネルは次のような状態になりますが、「アートボード名」をクリックすれば、アートボードの一覧に移動することが出来ます。
オブジェクト選択時のパネルの状態
XDを使ったデザイン作業ではアートボードの枚数が2桁にのぼることも少なくありません。多くの情報を、多角的に把握できる様にしてゆく事が大切です!
以上でAdobeXDのアートボードの解説はすべて終わりです。

XDの関連情報まとめ

このほか、人気のデザインツール「Adobe XD」の関連情報をまとめて紹介いたします。

XDの基本的な使い方

Adobe XDの基本的な使い方について、つぎの記事で確認する事ができます。

各機能のくわしい使い方

各機能のくわしい使い方について、つぎの記事が参考になります。

アートボード:デザインの作業領域

リピートグリッド:デザインのくり返しを行う

コンポーネント:デザインを部品化して管理する

レイアウトグリッド:グリッドシステムのデザインに役立つ

プロトタイプ:デザインを動かすことが出来る

プラグイン:おススメも紹介する

この記事のまとめ

今回は、Adobe XDの『アートボード』使い方をくわしく解説してゆきました。



▼XDのアートボードについて

  • XDにおけるWEBサイトやアプリなどの画面を表す作業領域
  • 基本的には1つのアートボードに1つの画面をデザインする
  • アートボードは複数作成する事ができる
アートボードの扱い方を覚えると、XDを使った作業全般がスムーズになりますよ!

Adobe XDを使ってみよう

Adobe XDは無料から使えて、かつ初心者にも扱いやすい人気のデザインツールです。多くのWEBデザイナー・UI/UXデザイナーから支持を集めており、今やWEBサイト・アプリ開発の現場では欠かせないツールになります。



▼Adobe公式サイトはこちら

AdobeXDを今すぐ使う

※クリックすると別ウィンドウで開きます

デザインやUI/UXなどを学習するなら、ぜひ優先的に習得しておきたいツールですね!

基礎から学びたい方に向けて

Adobe XDの使い方を基礎から学びたい方に向けて、画像付きで分かりやすく解説する記事を書きました。



▼XDの使い方が知りたい方はこちら


WEB初心者の方や、これからクリエイターになりたい方は必見の内容です!

関連記事

最新記事