あやね
Adobe XDは現在メンテナンスモードです。本記事はXDを利用できる既存ユーザー向けです。新規利用・再インストールの可否はAdobeアカウントの契約内容と管理者に確認してください。
XDを利用できる環境で、画面を開く、文字と画像を編集する、共有するまでの基本操作を確認します。プロトタイプを実際に組む練習は3画面のプロトタイプ演習、機能ごとの対応範囲はXD機能索引を参照してください。
1. 作業用のコピーを用意する
既存のXDファイルを開き、元のデータを残して複製します。必要なフォントと画像の利用権を確認し、共同作業では誰が正本を管理するかを決めましょう。
2. 画面作成で使う機能
2.1 繰り返す要素とコンポーネント
リピートグリッドでは同じ形のカードやリストを並べ、間隔と内容を調整できます。コンポーネントはボタンなどの共通部品を再利用するときに使います。メインとインスタンスの関係、上書きした属性が更新される範囲を確認してください。
2.2 プロトタイプ
画面同士をつなぎ、操作したときの遷移や表示をプレビューします。プロトタイプは操作の意図を検証するためのもので、実際のWebサイトのコード、データ処理やテストをすべて完成させる機能ではありません。
2.3 クラウドでの共同編集
XDはクラウドドキュメントの共同編集に対応しています。Adobeの共同編集手順を参照し、編集者の招待、保存状態とコメントの扱いを確認しましょう。
3. 既存アカウントと環境を確認する
3.1 XDが利用できるか確認する
AdobeアカウントとCreative Cloudアプリで、XDの利用権とインストール可否を確認します。組織アカウントでは管理者への確認が必要な場合があります。旧Starterのダウンロード案内を、新規取得の保証として使わないでください。
3.2 契約と保存容量を確認する
有料・無料という区分だけで現在の上限は決まりません。契約画面で請求内容、保存容量と割り当てを確認し、見つからない場合はAdobeの公式サポートへ問い合わせます。詳細はXD無料版と既存契約の確認ガイドを参照してください。
4. 一つの画面を作成して共有する
4.1 アートボードを作成する
新規ファイルで対象端末に合うアートボードを作成します。画面名を付け、幅と高さを確認しましょう。既存ファイルではサイズ変更前に複製を残します。
4.2 図形を配置する
長方形などの図形を配置し、整列と余白をそろえます。レイヤー名に役割を付けると、後から部品を探しやすくなります。
4.3 文字を入力する
見出し、本文、ボタンの文字を配置し、フォント、サイズ、行間と色を設定します。日本語の改行、長いラベル、文字のコントラストを確認してください。
4.4 画像を配置する
利用する画像を配置し、切り抜きと表示領域を調整します。元画像の比率と解像度を確認し、公開に必要な使用許諾も記録しましょう。
4.5 プレビューして共有する
プレビューで表示を確認し、共有モードで目的に合うリンクを作成します。レビュー用と開発者向けの設定を区別し、受け手の権限でリンクを開いてから送ります。
5. 新しい環境を検討するとき
5.1 移行する理由を決める
既存環境の保守、共同作業、取引先の指定など、移行が必要な条件を整理します。継続利用と部分移行も比較しましょう。
5.2 変換結果を検査する
FigmaやPixsoに移す場合は対応形式を確認して、代表的な画面でフォント、コンポーネント、エフェクトと画面遷移を比較します。対応機能の○×だけで、全機能が同じと判断しないでください。
5.3 無料枠と必要な契約を確認する
Pixsoの無料プランには3つのデザインファイルと3つのホワイトボードファイルが含まれます。個人の下書きや閲覧用シートの扱いはチームの編集用ファイル数と区別し、現在の料金と上限を確認してください。
5.4 小さなファイルで試す
新環境で編集、レビュー、開発への引き渡しを一巡し、修正量と必要な権限を記録します。Pixsoの登録は公式サイトの案内から進められます。
6. 基本操作の次に学ぶこと
画面を作成できたら、3画面をつなぐ演習で操作の流れを試しましょう。機能を探す場合は機能索引と対応範囲、XDからの移行は移行手順に進めます。
