AdobeXDの基本的な使い方メモ
割と大半の機能が無料で使える。
Web系画面やスマホアプリのプロトタイプ作成用。
公式のチュートリアル1およびチュートリアル２より。
動画は一部古いバージョンで場所が違っていたりする。
XDとは・・・画面デザインを作って、繋がりを持ったプロトタイプを作成、共有するという目的のためのソフト。
アートボード
個々の画面をアートボードと呼ぶ。
左側のメニューにアートボードを開くメニューが存在するのでそれをクリックすることで右側にアートボードツールが表示される。
配置したい大きさのプリセットを追加することで画面を追加可能。配置後に大きさの変更も可能。
全体を俯瞰したい場合はCtrl+0（Macの場合はCommand+0）を押す。
選択ツールでアートボードを選択すると、ボードのプロパティがウィンドウ右に表示される。
背景色などを変更したい場合はここで行う。
アートボード上のオブジェクト
図形
左側のツールから描画系（矩形、円など）を選択することでボード上に図形などを配置可能。
PthotoShopなどと似たような操作となっている。
Shiftを押しながら描くことで正方形や真円になる。
オブジェクトを選択する事でアートボード同様にウィンドウ右側にプロパティが表示される。
背景色や境界線の設定はここで行う。
角丸は選択時に図形の角に表示されるコーナーウィジェットと呼ばれる二重丸を操作する。
この時、一つの角だけ変更したい場合はAltキーやOptionキーを押しながらドラッグする。
細かく調整する場合は一度コーナーウィジェットをドラッグした後にプロパティのアピアランスの数値を変更する。
三角形のように形状を変更させたい場合はオブジェクトをダブルクリックしてアンカーポイントを出す。
アンカーポイントを削除すれば三角形になる。アンカーポイントを移動させることで形を変化可能。
線の部分でクリックする事でアンカーポイントを増やす事も出来る。
アンカーのダブルクリックでカーブにしたり、カーブの傾きを変更する事も可能。
曲線はペンツールでアンカーを置きながら描く。アンカーをドラッグする事でカーブを調整可能。
一度決めたものを変更する場合はダブルクリックからアンカーを出す。
これらの基本オブジェクトを結合して一つのオブジェクトを作成する。
２つのオブジェクトをShiftキーを使って選択すると、プロパティで整列や、型抜き、合体のボタンがアクティブになるのでこれで基本的な形を作成する。
結合オブジェクトの場合はダブルクリックすると角にコーナーウィジェットが表示される。これを利用して角を丸くする事が可能。
- 合体：重なり合う複数のオブジェクトを1つの形状に合体
- 前面オブジェクトで型抜き：背面のオブジェクトから前面のオブジェクトのエリアを型抜き
- 交差：オブジェクトの重なり合った部分だけを残し、1つのオブジェクトとして作成
- 中マド：オブジェクトの重なり合った部分を切り取って、それ以外の部分を1つのオブジェクトとして作成
最終的に複数オブジェクトを選択してから右クリックでグループ化を行う事で、１つのオブジェクトとして扱う事が可能になる。
また、様々な場所で利用するような（例えばフッター、ヘッダー）ものは複数オブジェクトを選択してから右クリックでコンポーネント化（従来でいうシンボル化）しておくと良い。
コンポーネントは別節で解説する。
テキスト
テキストツールでボード上をクリックするか、ドラッグして範囲を決めるかでテキストを配置する。
プロパティからフォント等を変更する。
CreateCloudのアセットからTypekitフォントをダウンロードする事で有償フォントなども利用可能。
画像
矩形オブジェクトなどにエクスプローラなどから画像をドロップしてやると、その中に画像が配置される。
オブジェクトの形にマスクしたい場合は最背面に画像を配置した上で、その上に乗っているオブジェクトを選択し、
上部メニューのオブジェクトから「シェイプでマスク」を選択する。
レイヤー
レイヤー構造がわかりにくかったり、選択しづらい場合は左メニュー下のレイヤー表示から確認可能。
リピートグリッドについて
規則性のあるレイアウトの場合、繰り返し項目のオブジェクトを選択した上でウィンドウ右のプロパティから「リピートグリッド」を選択する。
オブジェクトに現れる楕円のポイントを下や右にドラッグする事で繰り返し項目を作成可能。
隙間を調整する事も出来る。
アセットとコンポーネント
コンポーネント化されたものは左側メニュー下部の「ライブラリ」をクリックすると出てくるドキュメントアセットの中のコンポーネントに配置されている。
コンポーネントを利用して配置したものは一括でデザイン変更をかけることが出来る。
このアセットにはコンポーネント以外の文字や色なども登録する事が可能。
デザインの一括変更を行う事を考えるとアセットを活用した方が良いが、例えば色を右クリックしてキャンパスのハイライトをすると
同じ色を使っている箇所全てがハイライトされ、アセットから変更した場合は全てが変更されてしまうので注意が必要。
プロトタイプ作成
上部のタブをプロトタイプにする。
### 画面遷移
オブジェクトをクリックすると右に三角の印が出るので、それをドラッグして、リンク先にドロップする。
遷移（インタラクションと呼ぶ）のプロパティでは、アニメーションの設定などが可能。
リピートグリッドの中身にインタラクションを付ける場合はダブルクリックして選択する。
例えば前の画面に戻る、というようなボタンの場合はアクションで「一つ前のアートボード」を選択するとよい。
（その場合は三角の印はドラッグではなくクリックする）
画面内リンクの場合は「スクロール」を選択する。
モーダルウインドウの場合は、モーダル用のアートボードを作っておき、オーバーレイする。
なお、共通のナビゲーションメニューからの遷移を作成する場合はナビゲーションのみを配置した作業用アートボードを配置して、
そこから遷移設定をした上でナビゲーションをペーストすると効率的。
プレビュー
画面右上の再生ボタンでプレビューが可能。
共有
画面右上のドキュメントに招待ボタンから共同編集の招待が出来る。
共同編集ではなく、画面の遷移を皆で確認したいような場合はデザインレビューとしてプロトタイプ公開を行う。
共有タブのリンク設定から表示設定、リンクへのアクセスを選択してリンクを作成する。
URLで共有となり、ブラウザ上でコメントなどのフィードバックを得られるので便利。
- デザインレビュー：最も一般的な共有方法でコメントを付ける事が出来る。通常はこれで良い。
- 開発：コーディングのための色やピクセル指定などが表示される開発用の共有設定
- プレゼンテーション：最大化して、コメントなしで見せるような場合に使う事が出来る
- ユーザテスト：ナビゲーションなどの表示も全てなくした、テスト用の共有設定
その他
- イラレの素材をCCライブラリ上で共有し、XDから「ファイルーCCライブラリ」で開いて配置が可能
- ライブラリを使っている場合、イラレでの変更はXDに素早く反映される
- ライブラリから配置したものでも、ライブラリとのリンクを切ればXD内で独自編集可能となっている
- 半透明にして、その背景をぼかしたい、というような場合はオブジェクトのプロパティで設定する
- スマホ実機で確認する場合、アプリをインストールしてUSBで接続
- パッドだと二本指で移動出来る。マウスの場合はスペース押しながらドラッグで移動出来る