AdobeXD アートボードの作成

2022年8月18日

AdobeXDについて

AdobeXDは、ワイヤーフレーム・アニメーション・プロトタイプ・共同作業などの機能がすべて統合されたウェブデザインツールです。

XDの基本的な使い方について、初めてデザイン制作ツールに触れる方にも分かりやすく書いていきたいと思います。

[AdobeXD] アートボードとは?

アートボードとは、画面デザインなどを制作する際に作業を行う領域のことです。

絵画に例えると絵を描くためのキャンバスのようなもので、AdobeXDを使用して作業をするための土台となります。




[AdobeXD] アートボードの作成

AdobeXDを起動後、表示されているテンプレートサイズまたはカスタムサイズ(任意のサイズ)のどちらかを選択します


テンプレートサイズを選択した場合 → 選択したテンプレートサイズのアートボードが作成されます


カスタムサイズを選択した場合 → アートボードツールを使用してアートボードを作成します

①左端のツールバー下から2番目の「アートボード」ツールを選択します


②画面上で矢印方向にドラッグするとアートボードができます


③アートボード上に表示されている円形のハンドルをドラッグしながらサイズ調整ができます

縦横のサイズ変更はもちろん、拡大縮小もこの円形ハンドルで簡単に行うことができます


作成したいアートボートの数値が決まっている場合は、画面右側の入力ボックスへ数値を入力して任意サイズのアートボードを作成します


また、新しいアートボードを追加するときも同じようにアートボードツールを使用して作成します

[AdobeXD] アートボードの追加 

<テンプレートサイズの場合>

①アートボードツールを選択します


②画面右側に表示されているテンプレートサイズの中から選択します


③テンプレートサイズの新しいアートボードが追加されました

<カスタムサイズの場合>

①アートボードツールを選択します


②何もないグレー背景の画面上で矢印方向にドラッグします


③カスタムサイズの新しいアートボードが追加されました

[AdobeXD] 

<NEXT → アートボードの編集・表示サイズ変更