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

【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社が提供する20以上のアプリやサービスが使い放題になるサブスクリプションサービスです。
※XD、Photoshop、illustrator等のWeb制作でよく使うアプリも全て含まれています。

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

Adobe CCを契約済みの方へ

既にAdobe CCを契約しており、毎月の支払いが少し高いなと思ってる方にお得な情報です。
デジハリ版Adobe CC学生教職員版)に乗り換えることで、年間4万円以上お得になります。

目次

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

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

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

複数のアートボード例
複数のアートボード例

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

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

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

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

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

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

アートボードの作成方法

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

アートボードの作成方法2

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

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

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

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

カスタムサイズの場合

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

カスタムサイズの場合

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

カスタムサイズの場合2

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

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

カスタムサイズの場合3

テンプレートの場合

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

テンプレートの場合

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

テンプレートの場合2

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

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

テンプレートの場合3

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

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

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

アートボードの名前変更

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

アートボードの名前変更

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

アートボードの名前変更2

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

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

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

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

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

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

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

アートボードの移動

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

アートボードの移動

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

アートボードの移動2

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

TERU

普段アートボード上には、様々なオブジェクトが配置されていることが多いので、僕は名前を選択して移動する方法を普段から使っています。

アートボードの複製

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

アートボードの複製

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

アートボードの複製2
ショートカットキー
  • Macの場合:コピー「command + C」+貼り付け「command + V」
  • Windowsの場合:コピー「Ctrl + C」+貼り付け「Ctrl + V」

アートボードの削除

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

アートボードの削除

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

アートボードの削除2

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

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

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

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

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

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

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

利用イメージ

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

Adobe XDの関連記事

コンポーネント機能

リピートグリッド機能

スタック機能

その他

まとめ

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

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

▼Adobe XD公式ページ

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

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