【Adobe XD】アートボード機能を分かりやすく解説【初学者向け】

こんにちはTERUです。
フリーランスでホームページやECサイト制作を仕事にしています。

読者の悩み

• Adobe XDのアートボード機能について知りたい

アートボード機能は、基本的な機能の一つです。
Adobe XDを利用する上で避けては通れない機能なので、本記事でしっかりと理解しましょう。

本記事では、アートボードの使い方から、WEB制作をする上でのオススメの利用方法まで具体的に説明します。

そもそもAdobe XDって何？何ができるの？という方は「Adobe XDとは？できることや特徴について初心者向けに解説」の記事をご覧ください。

この記事を読んで分かること

• Adobe XDのアートボード機能の使い方について理解できる

本記事の信頼性

• フリーランスとしてWordPress案件を中心としたWeb制作をメインに仕事をしている
• Web制作会社にてディレクターの経験もあり
• Web制作のフリーランスチーム（GrabAir）でも活動中

Adobe XDをまだ持っていないという方へ

Adobe XDをまだ持っていないという方は、Adobe CCを購入する必要があります。

Adobe CCを少しでも安く購入したい方は、「デジハリ経由でAdobe CCコンプリートプランを安く購入する方法」の記事をご覧ください。

アートボードとは？【Adobe XD】

アートボードは、簡単に言うと「WEBサイト」や「アプリ」の画面デザインを作成する作業領域のことです。

アートボードは、基本的にページ単位で作成するので、１アートボード＝１ページになります。
もちろん、１つのXDファイルに複数のアートボードを作成することも可能です。

アートボードについて、Adobe公式サイトでは下記のように説明されています。

アートボードとは何でしょうか？アートボードとは、アプリケーションの画面またはWebサイトのページを表します。これにより、デザインプロセスが合理化され、1つのドキュメントで複数の画面サイズに対応するインタラクティブなデザインを作成できます。

>>Adobe XD でのアートボードの使用

アートボードの作成方法【Adobe XD】

アートボードを作成する手順は以下になります。

手順①：Adobe XDを起動し、デフォルトで用意されているテンプレートかカスタムサイズを選択します。

選択したサイズのアートボードが作成されます。

カスタムサイズの場合、横幅、縦幅を自分で入力します。

アートボードの追加方法【Adobe XD】

アートボードを追加する手順は下記２パターンあります。

• カスタムサイズの場合
• テンプレートの場合

カスタムサイズの場合

手順①：ツールバーから「アートボード」を選択します。

手順②：アートボードが無いグレー背景箇所でドラッグします。

ドラッグは、マウスでクリックしたまま移動する操作のことです。
自分の好きな横幅、縦幅を調整してください。

新しいアートボードが追加されます。

テンプレートの場合

手順①：ツールバーから「アートボード」を選択します。

手順②：右パネルから、使用するテンプレートを選択します。

テンプレートはWEB、スマホ、タブレットと様々なサイズが選択可能です。

選択すると、新しいアートボードが追加されます。

アートボードの編集方法【Adobe XD】

アートボードの編集方法として、基本的な下記の操作を説明します。

• 名前変更
• 拡大・縮小
• 移動
• 複製
• 削除

アートボードの名前変更

手順①：アートボードの左上にある名前箇所をダブルクリックすると変更可能です。

あとは好きな名前を入力すれば変更完了です。

アートボードの拡大・縮小

手順①：対象アートボードの名前を選択します。

手順②：上下左右の赤丸箇所をドラッグすることでサイズの拡大・縮小が可能です。

簡単にサイズ変更が可能です。

アートボードの移動

手順①：対象アートボードの名前を選択します。

手順②：あとはドラッグするだけで好きな場所に移動できます。

アートボードの余白部分を選択して、ドラッグすることも可能です。

アートボードの複製

手順①：対象アートボードの名前を選択します。

手順②：コピー＋貼り付けをしてアートボードを複製します。

アートボードの削除

手順①：対象アートボードの名前を選択します。

手順②：「Deleteキー」または「右クリック＋削除」を選択します。

アートボードのオススメ利用方法【WEB制作向け】

WEB制作向けに、僕が普段から実践しているアートボードのオススメ利用方法をご紹介します。

• デザイン仕様書としてアートボードを利用

デザイン仕様書としてアートボードを利用

デザイン仕様書をアートボードにまとめる方法です。
実際に僕がチーム案件で行っているやり方になります。

デザイナーの方には、基本XDでデザインしてもらっているので、左端のアートボードにデザイン仕様書として下記のような内容をまとめてもらっています。

• 色情報(ベースカラー、サブカラー、アクセントカラー)
• 主要なパーツの文字サイズ（段落、見出しh2,h3）
• 各パーツのアニメーション（ボタン、グローバルナビ等）
• WEBアイコンやWEBフォントの情報
• その他連携事項

利用イメージ

デザイン仕様書を共有することで、デザイナーと開発者の摩擦を軽減し、コミュニケーションコストの削減にも繋がると考えています。

Adobe XDの関連記事

コンポーネント機能

リピートグリッド機能

スタック機能

その他

まとめ

今回は、Adobe XDの「アートボード」機能について、使い方を説明しました。

Adobe XDは、WEB制作をする上で利用頻度が高いツールなので、この機会に使えるようになりましょう！

▼Adobe XD公式ページ

コーディング作業でAdobe XDを使う場合は、下記のサイトが参考になります。