Adobe XD機能索引｜画面編集・プロトタイプ・共有の対応範囲

Adobe XDは現在メンテナンスモードです。本記事はXDを利用できる既存ユーザー向けです。新規利用・再インストールの可否はAdobeアカウントの契約内容と管理者に確認してください。

目的の機能を探したい既存ユーザー向けの索引です。初めて画面を作る場合は基本操作ガイド、接続を練習する場合は3画面のプロトタイプ演習を利用してください。このページでは機能が担当する作業と、別途確認が必要な範囲を整理します。

1. XDを使う前に確認すること

XDの利用権、インストール可能なバージョン、OSの対応状況はAdobeアカウントと公式ヘルプで確認します。旧プランの価格、試用日数や保存容量を現在の契約へ一律に当てはめないでください。

2. 画面作成・試作・共有の機能

2.1 レイアウトと再利用

アートボード、図形、文字と画像を使って画面を構成します。リピートグリッドは繰り返し並ぶ要素、コンポーネントは共通部品の管理に使います。間隔、文字の折り返し、上書き属性を変更して結果を確認しましょう。

2.2 プロトタイプと状態

トリガーとアクションで画面遷移や表示を設定し、プレビューで動作の意図を確認します。実際の通信、決済や業務ロジックを完成させる機能とは区別してください。必要な状態や条件が表現できるか、対象バージョンで試します。

2.3 共同編集・レビュー・開発者共有

クラウドドキュメントの共同編集、レビュー用リンク、開発者向けの仕様共有を区別して設定します。共同編集はAdobeの手順に従い、編集権限と保存状態を確認してください。共有リンクは公開範囲と更新状態を受け手として確認します。

3. 他の作業と分けて考える範囲

3.1 視覚効果とレイヤー

XDには塗り、グラデーション、影などの視覚効果があります。「レイヤー効果がすべて使えない」という説明は正確ではありません。一方、Photoshopのすべての合成・調整機能と同じではないため、必要な効果を具体的に確かめてください。

3.2 写真の調整

画像の配置、表示領域の調整と、本格的な写真補正・レタッチを区別します。元写真を修正する必要がある場合は画像編集ソフトで処理し、XD側で差し替えて表示を確認します。

3.3 実装とコード

デザイン仕様やアセットを開発者へ共有できますが、完成したWebサイトのコードと同じではありません。画像を書き出す以外にも開発者向け共有を使い、レイアウト、文字と素材の情報を確認します。実際の実装、動作、アクセシビリティとセキュリティは別途検証してください。

4. 自分の環境で検証する

4.1 確認しやすい基本作業

代表的な画面で、図形配置、文字修正、リピートグリッド、コンポーネント更新と共有を一巡します。操作に必要な工程を記録し、チームで同じ結果を得られるかを確認しましょう。

4.2 制約と運用上の注意

大きな画像や複雑な構造では、処理時間は端末やファイルによって変わります。どれだけ編集しても常に軽いとは保証できません。OS更新、フォント、共同編集の接続とバックアップを定期的に確認します。

5. 移行先を評価するための索引

新しいツールを選ぶときは、現在使っている機能を表にし、同じ作業がどう実現できるかを確かめます。画面の見た目だけでなく、部品構造、履歴、権限と引き渡し方法も確認してください。

Pixsoもこの検証対象にできます。Pixsoの無料プランには3つのデザインファイルと3つのホワイトボードファイルが含まれます。個人の下書きや閲覧用シートの扱いはチームの編集用ファイル数と区別し、現在の料金と上限を確認してください。 プラグインやテンプレートは、それぞれの対応範囲と利用条件を確認して使います。

6. 次の作業を選ぶ

画面編集の基本に進む、プロトタイプを練習する、XDファイルの移行を検証する。目的に合うページから進めてください。