iPhone・Mac・ウェブサービス・文房具について「生活に活かせる実用的な活用術」を提供するメディア

XDのアートボードの基本と全て!優れた機能と使い方を紹介

この記事のURLとタイトルをコピーする
xd-artboard

XDにおけるアートボードの基礎知識についてご紹介します。

ターゲットとなるデバイスにサイズを合わせる方法や、サイズの変更方法、複製や書き出し方など、意外と知らないアートボードのすべてをお伝えします。

アートボードとは

アートボードとは、ページのデザインを作成するための枠(フレーム)のようなものです。

ひとつのファイルの中に複数のアートボードを持つことで、複数のページを同時に管理・整頓することが可能になります。

xd-artboard_1

XDファイル自体は、ほぼ制限のないほど広い制作エリアを持っています。この中で複数の「アートボード」を作り、ワイヤーフレームやデザインを管理します。

xd-artboard_2

アートボードは、そのまま書き出し範囲にもなります。したがって、アートボードを作成するときはサイズに気をつけましょう

xd-artboard_3

アートボードの作り方

XDを起動すると、最初に制作するアートボードのサイズを選択します。

xd-artboard_4

対象となるデバイスが明確な場合は、該当するものを選びましょう。テキストをクリックすると、他のデバイスサイズを選択できます。

もし「対象デバイスが決まっていない」あるいは「ワイヤーフレームを作るわけではない」という場合は、カスタムサイズをダブルクリックしましょう。

以下が「アートボードを作っていない状態」の、初期のXDの画面です。このままではデザインを作れませんので、アートボードを作ります。

xd-artboard_5

アートボードは、左のツールバーの四角いアイコンをクリック。あるいはキーボードのA(ArtboardのA)を押してもOKです。

カーソルをドラッグすると、好きなサイズのアートボードが作れます。画面右にあるツールバーには、代表的なデバイスが表示されますので、これらを選択するのでもOK。

xd-artboard_6
ヒント

shiftキーを押しながらドラッグすると、縦横比が1:1の正方形が作れます。

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

xd-artboard_7

アートボードを選択した状態で、上下、あるいは四隅のすると、アートボードのサイズを任意に変更できます。

あるいは、右にツールバーから「横幅:W」「縦幅:H」を指定してもOKです。

アートボードを複製

アートボードを複製したいときは、まず、複製したいアートボードを選択した状態で、ショートカットキーCommandCでコピーします。

xd-artboard_8

そしてそのままショートカットキーCommandVでペーストします。ペーストされたアートボードは、元のアートボードで制作した内容もすべて複製されます。

xd-artboard_9
ヒント

あるいは、optionを押しながらアートボードをドラッグするだけでも、簡単に複製ができます。

アートボードを移動・整頓する

アートボードを名前の部分をドラッグすると、アートボードを移動させることができます。

xd-artboard

アートボードが複数ある場合は、他のアートボードとの配置がズレないように、自動的にタテ・ヨコを合わせてくれるガイドがでます。

また、アートボード同士の距離もピクセルで表記してくれます。

しかも、3枚以上のアートボードがある場合は、等間隔になる瞬間をピタッと止めてくれますので、アートボードの位置関係を整頓するのも非常に簡単です。

ヒント

アートボードを移動させるとき、shiftを押しながらドラッグすると、タテ・ヨコをまっすぐ移動させることができます。

ヒント

アートボードを選択した状態で、矢印キーを押すことでも、アートボードは移動させられます。

そのとき、1回クリックする毎に1px移動し、shiftを押しながら押すと10pxずつ移動させられます。

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

画面左のツールバーに、現在制作しているアートボードが一覧で並びます。

アートボードの名前をクリックすると、名前を任意に変更できます。クリックする名前は、左のリストでも、作業エリアでも、どちらでもOKです。

xd-artboard_10

アートボードの書き出し

XDでは、作成したアートボードを「JPGやPNGなどの画像データ」や「PDF」に書き出すことができます。

アートボードの書き出しは、メニューの「ファイル」から「書き出し」から実行できます。

xd-artboard_11
ヒント
選択したアートボードを書き出すためのショートカットキーは、CommandE。意外と使用頻度が高いので、覚えておくのがおすすめ。

「保存場所」「フォーマット」を選び、書き出しボタンを押せば完了です。

xd-artboard_12
ヒント

PDFでの書き出しでは、選択したアートボードをまとめて1つのPDFにすることも可能です。XDを使って資料を作れば、1つの冊子が簡単にできてしまうのです。

今日も来てくれて、ありがとうございます!

記事への感想や質問Twitterでいただけると喜びます。返信します。フォローはしなくてもいいけど、してくれたらもっと嬉しいです!

この記事のURLとタイトルをコピーする
当ブログの管理人
ばんか (bamka)
ばんか (bamka)ウェブディレクター・ブログ運営
iPhone・iPad・Mac。Evernoteなどのウェブサービス。ときどき文房具など。これらを使った『生活に活かせる実用的な活用術』をご提供しています。 管理人は当ブログの運営の他に、ウェブディレクター・ライター・セミナー講師など、いろいろな分野で活動しています。詳細は当ブログのプロフィールページをご覧ください。 各種仕事のご依頼も承っておりますので、ご希望の方はお問い合わせフォームからご連絡ください。
執筆著書
    SNSでフォローする