初めてAdobe XDを使うためのワークスペース・アートボードの解説をします

※このページでは広告のリンクを含みます

Adobe XDの操作にはワークスペースの画面とアートボードの操作を覚えないといけません。
本記事では、ワークスペースとアートボードについて解説しています。Webデザイナーに必要な項目のみ解説していますので、短時間で習得していきましょう。

Adobe XDは、同じAdobe社製のPhotoshopやIllustratorと違い、PhotoshopやIllustratorに慣れたクリエイターでも初見で操作することは難しいと思います。
なので、Webデザイナー初学者、経験者とも当記事を読むことで即実践できるようになります。

XDのワークスペースを開くと下記のようなインターフェイス画面が表示されます。

ワークスペース画面の構成は下記の図の通り。

1. モードエリア→「デザインモード」「プロトタイプモード」「共有モード」を切り替えることができる。
2. ツールバー→オブジェクトの選択、長方形・楕円形などの描画、テキストの入力などに利用するツールが収納されている。
3. プロパティインスペクター→各オブジェクトやテキストなどの塗りや線、レイアウトなどの細かな設定を指定できます。
4. アートボード→デザインとして表示される範囲
5. ライブラリ→カラー、文字、コンポーネントなどアートボードで使われているパーツごと管理できます。
6. レイヤー→レイヤーやアートボードを管理するパネルに切り替える。
7. プラグイン→インストールされているプラグインを表示し、デザイン中に使用できる。
8. ベースボード→アートボードの配置や不要なオブジェクトを退避させておくためのスペース。

Webデザイナーとして覚えておく必要な機能にしぼりましたので覚えておきたいです。

ホーム画面からアートボードプリセット（下図1）で任意のサイズを選択すればアートボードが開きます。

ちなみに、著者は複数のデバイスがプリセットされているので、デバイスのサイズを確認する時にも使っています。

Adobe XDデザインすることが目的です。デザインするための手段として下記のアートボードの操作方法は最低限覚えておきたいです。

ひとつずつ解説していきます。

Adobe XDは「クラウドドキュメント」と「ローカルドキュメント」の2種類の保存方法があります。

Adobe XDは共有・共同で制作をしていくためのツールになっているので、新規作成から保存すると基本クラウドドキュメントとして保存されるようになります。

クラウドドキュメントとしては、メインメニュー「ファイル」→「保存」（下図1）をクリックすると「Creative Cloudに保存」パネルが表示されますので命名（下図2）して［保存］ボタン（下図3）をクリックするとクラウドに保存されます。

Adobe XDの仕様上クラウドへの保存が標準となります。

クラウドに保存されたファイルは開始画面の「自分のファイル」よりクラウドアイコン（下図1）が入っているものになります。

ローカルドキュメントとして保存したい場合は、メインメニュー「ファイル」→「ローカルドキュメントとして保存」（下図1）をクリックします。
ローカル内での保存場所を選択するとローカル保存になります。

基本的にはローカルドキュメントは個人で作業する時に使用してく保存方法になっていますが、現場の実務としては会社の共同フォルダに格納して作業を共有していくようになっています。

クラウドドキュメントとして保存の使用は、クライアントにデザイン確認をしてもらうため使っています。

アートボードの左上にあるアートボード名は当初自動的なテンプレートの名前が入っておりそのまま作業していると作業上、全体的に俯瞰することが難しくなってしまうので管理し易いアートボード名に変更したいです。

アートボード名（下図1）をダブルクリックすることで名前を編集できます。

アートボード名を選択してドラッグすれば任意の位置に移動できます。

アートボードは複製できます。
複製にはアートボード名を選択してAltキーを押しながらドラックすると複製可能になります。

また、慣れてくればCtrl+Dのショートカットを使い時間効率をはかりましょう。

アートボードの削除にはアートボード名を選択してDeleteキーを押すとアートボードの削除が可能になります。

レイヤーの管理はレイヤーボタンをクリックするとレイヤーエリアが表示されます。
制作したアートボードごとにまとめられています。

アートボード名の左にあるアイコンをダブルクリックするとアートボード内に入っているレイヤーが表示されます。

また、アートボード名に出てくるアイコンは「書き出し対象」（下図1）と呼ばれるもので、アートボードに表示されているデザインを画像に書き出してくれます。（メインメニュー［ファイル］→［書き出し］→［選択したオブジェクト］→［選択したオブジェクト...］（下図2）をクリックすると選択したアートボードが画像として書き出されます。）

Adobe XDは、Webサイトやモバイルアプリなどのデザインカンプ制作やプロトタイプ作成や、ワイヤーフレーム作成、プレゼンテーション資料の作成も1つのアプリで実現できるのが特徴です。

Webデザイナー（UIデザイナー含む）やWebディレクターなど幅広い役職などに対応し、かつ共有機能を兼ね備えているためチームでの円滑なコミュニケーションを可能にしていますので、この機会にAdobe XDを使ってませんか。

Adobe XDの進化は早く、あっという間にインターフェイスが進化しているので、Adobe XDの専門書もすぐ古くなってしまうこともありますね。

インターネットでAdobe XDを学びつつ、手を動かして学んでいくと良いと思います。その時には当サイトを見てもらえると幸いですね。