初心者でもわかる！Adobe XDの使い方 基本機能&ワークスペース編

こんにちは。WEBデザイン部の米村です。
今回はAdobe XDの使い方をご説明したいと思います。初心者の方にもわかりやすいように説明していますので、参考にしてみてください！
Adobe XDは、WEBサイトやモバイルアプリなどのデザインに適したUX/UIソリューションです。デザインからプロトタイプ、共有までのすべてをXDで完結することが出来ます。
しかし、同じAdobe製品のillustratorやPhotoshopのように細かいデザインはあまり得意ではありません。なので、私は全体の枠組みをXDでデザインし、バナーやアイコンの作成をillustratorなどで進めていく方法で作業を進めていきます。

Adobe XDの基本機能

XDには主に『デザイン』『プロトタイプの作成』『プロトタイプ・デザインスペックの共有とフィードバック』『共同編集』の機能があります。

デザイン

Webサイトなどの外観（UI）を作成できます。さらに、動きなどを加え、ユーザー体験（UX）を設計することが出来ます。

プロトタイプの作成

XDでは、作ったサイトなどがどのように動くか確認するプロトタイプ(試作)を作ることが出来ます。

プロトタイプ・デザインスペックの共有とフィードバック

作ったプロトタイプのリンクを送るだけでプロトタイプやデザインスペックを共有することが出来ます。
そして、そのリンク先でコメントを記入することができフィードバックを得る事が出来ます。

共同編集

同じドキュメントをリアルタイムで共同編集することが出来ます。

ホーム画面・ワークスペースの説明

ホーム画面

1. ホーム上の画像がホームになります。
2. 学ぶ…：XD の機能やツールなどに関連するすべてのチュートリアルにアクセスすることが出来ます。
3. クラウドドキュメント：クラウドに保存したすべてのドキュメントが表示されます。
4. 共有されたアイテム：共有されたクラウドドキュメントが表示されます。
5. 削除済み：削除されたすべてのクラウドドキュメントが表示されます。ドキュメントを復元したり、完全に削除したりすることが出来ます。
6. リンクを管理 ：クリックすると今まで公開してきたプロトタイプを管理することが出来るページにアクセスすることが出来ます。
7. ローカルコンピューター：自分のパソコンに保存しているPSDやAI・Sketch・XDを開くことが出来ます。
8. ドキュメント名 ：ドキュメントの名前です。
9. 保存場所：そのドキュメントの保存場所です。
10. 最近使用したもの：最近アクセスしたXDのドキュメントを表示します。
11. アートボードプリセット ：新規ドキュメントを作るときはここを選択して作ることが出来ます。
12. お知らせや学習：XDの新機能のお知らせやチュートリアルなどにアクセスすることが出来ます。
13. アカウント：現在ログインされているアカウントです。クリックするとアカウント情報にアクセスすることが出来ます。

デザインモード ワークスペース

1. メインメニュー：ファイルメニュー、編集メニュー、オブジェクトメニュー、表示メニュー、ウィンドウメニュー、ヘルプメニュー、そして各メニュー内のサブメニューにアクセスできます。
2. ホーム：ここを選択するとホーム画面が別ウィンドウで開ます。
3. デザインモード：ここでデザインをします。
4. プロトタイプモード：ここでプロトタイプ作成をします。
5. 共有モード：共有の設定をしたり、リンクを作成したり更新したりします。
6. ドキュメント名：現在開いているドキュメントの名前になります。名前の前に雲のアイコンがついているとクラウドに保存されており、アイコンがついていなかったらローカルに保存されていることになっています。
7. ドキュメントに招待：共同編集を有効したり、仲間のデザイナーなどを招待したり、現在このドキュメントを開いている人を表示します。
8. デバイスでプレビュー ：USB を介して複数のデバイスを接続し、データを転送し、ライブで表示する事が出来ます。
9. プレビュー ：デスクトッププレビューまたはスマホの Adobe XD アプリケーションを使用して、プロトタイプを見る事が出来ます。
10. 表示倍率：現在開いているドキュメントの表示倍率です。
11. 選択ツール：オブジェクトの選択や動かしたり出来ます。
12. 長方形ツール：長方形を作ることが出来ます。
13. 楕円形ツール：楕円を作ることが出来ます。
14. 多角形ツール：多角形を作ることが出来ます。
15. 線ツール：直線を引くことが出来ます。
16. ペンツール：直線や曲線、いろんなオブジェクトを作る事が出来ます。
17. テキストツール：文字を入れることが出来ます。
18. アートボードツール：アートボードを追加することが出来ます。
19. ズームツール：表示を拡大縮小することが出来ます。
20. アセット：プロジェクトで使用するオブジェクトのカラーや文字スタイルなどの情報を一元的に管理するところです。
21. レイヤー：アートボードやオブジェクトのレイヤーを管理するところです。
22. プラグイン：プラグインを管理したり見つけたりすることが出来ます。
23. プロパティインスペクター：色やフォント、オブジェクトの大きさ、線の太さなどの変更や、揃えたりすることが出来ます。
24. アートボード：絵画にたとえれば絵を描くためのためのキャンバスのようなものです。
25. ペーストボード：アートボードや既存のアートボードに含めない物を配置することが出来ます。

1. 整列：オブジェクトやテキストを揃えることが出来ます。
2. リピートグリッド：リピートグリッドを設定したり解除したりすることが出来ます。同じオブジェクトやテキストを繰り返し配置することができます。
3. パスファインダー：複数のパスを合体させたり、一方のパスからもう一方の形を切り抜いたり、バラバラにする事ができる機能です。
4. コンポーネント：コンポーネントに追加したりホバーの設定が出来たりします。コンポーネントとはボタンなどの共通のデザインを持つオブジェクトを管理する機能です。
5. 位置と大きさ：選択しているオブジェクトやテキストの位置と大きさを表示しています。Wが横幅でHが高さ、XがX座標値(横軸)でYがY座標値(縦軸)です。
6. 回転 ：選択しているオブジェクトやテキストを回転することが出来ます。
7. 反転：水平方向に反転させたり垂直方向に反転させたりすることが出来ます。
8. スクロール：水平方向や垂直方向にスクロールするように設定できます。
9. スクロール時に位置を固定：フローティングのように出来ます。
10. レスポンシブサイズに変更：PCを作っていた場合、自動か手動でサイズを変更することが出来ます。
11. フォント：テキストのフォントを指定することが出来ます。
12. フォントサイズ：テキストの大きさを調整することが出来ます。
13. フォントスタイル：フォントの太さや斜体を変更することが出来ます。
14. 文字間：文字と文字の間隔の調整することが出来ます。
15. 行間：行の間隔を調節することが出来ます。
16. 段落の間隔：段落の間隔を調整することが出来ます。
17. 段落：テキストを左揃え、中央揃え、右揃えに変更することが出来ます。
18. テキスト形式の変更：ポイントテキストかエリア内テキストに変更することが出来ます。
19. 文字の装飾：大文字にしたり小文字にしたり打ち消し線を引いたりすることが出来ます。
20. 不透明度：オブジェクトやテキストの不透明度を変更することが出来ます。
21. 描画モード：オブジェクトの描画モード(乗算やオーバーレイなど)の変更をすることが出来ます。
22. 角を丸くする：角を丸くすることが出来ます。
23. 塗り：オブジェクトやテキストの塗りの色を変更することが出来ます。
24. 線：オブジェクトやテキストの線の色を変更することが出来ます。
25. 線の詳細設定：線の太さの変更や点線にしたりすることが出来ます。
26. 線の詳細設定：線を内側に入れたり、角を取ったり、線の先端を丸くしたりすることが出来ます。
27. シャドウ：オブジェクトやテキストに影を付けることが出来ます。
28. 背景のぼかし・オブジェクトのぼかし：オブジェクトや写真をぼかすことが出来ます。
29. 書き出し対象にする：この項目にチェックを入れておくと書き出されます。

まとめ

XDの基本機能とワークスペース編でしたがいかがだったでしょうか？
今回は基礎中の基礎を説明しました。細かい部分も説明してありますのでもし作業していてわからなくなったら是非確認してみてください。
次回のブログでは新規ドキュメントの作り方や保存方法、既存のドキュメントの開き方について説明していきたいと思います！