Adobe XD でのデザイン、プロトタイプ、共有

最終更新日 : 2023年6月6日

XD を使用して、インタラクティブプロトタイプ、ワイヤフレーム、グラフィックをデザインする方法を説明します。

Adobe XD を使用すると、UX デザイナーは単体プラン Adobe XD を使用して Web アプリケーションやモバイルアプリケーション用のインタラクティブなユーザー操作性をデザインできます。

XD では、アートボードで簡単かつ迅速にデザインをおこなえます。その後、複数のアートボードをつないで、関係者と共有して繰り返せるインタラクティブプロトタイプを作成します。また、プラグインを使用して、繰り返される操作や、面倒で複雑なデザイナーの反復的ワークフローの一部も自動化することもできます。

Adobe XD は Photoshop、Illustrator や After Effects との親和性に優れています。

他の対応しているアプリケーションでデザインし、アセットを XD に読み込んでから、XD を使用してプロトタイプを作成して共有できます。 XD では、SVG とビットマップファイルの再現性が損なわれることがありません。 Adobe XD では、これらのアセットをさらに拡張することも、これらのアセットを使用してインタラクティブプロトタイプを作成することもできます。

一般的なワークフロー

ワークフローの手順の概要を以下に示します。

デザイン：デザインレイアウトエレメントを作成し、アートボードを追加し、Adobe Illustrator、Adobe Photoshop や Adobe After Effects などの他のアプリケーションからリソースをインポートします。また、プラグインを使用して、反復操作や、面倒で複雑なデザイナーの反復的ワークフローの一部を自動化することもできます。
プロトタイプ：デザインのオブジェクトまたはアートボードを選択し、アートボード間のインタラクションを作成します。
共有：プロジェクトをレビューする準備ができたら、関係者とプロトタイプやデザインスペックを共有したり、プロジェクトやアセット書き出したりすることができます。

XD でのデザイン、プロトタイプ作成、共有について、さらに詳しく説明します。

デザイン

Adobe XD の基本を学ぶ

Adobe XD の基本を学ぶ

Dani Beaumont

アートボードの既定サイズを選択します。カスタムサイズを使用する場合は、「カスタム」オプションの下のテキストフィールドに幅と高さをピクセル単位で入力します。カスタムサイズを指定するには、カスタムサイズアイコンをクリックします。

以下のいずれかの方法でアセットを収集します。

Adobe XD のデザインツールを使用して、最初からアセットをデザインします。詳しくは、描画ツールとテキストツールを参照してください。
Photoshop、Sketch、After Effects または Illustrator からデザインをコピーして Adobe XD のアートボードにペーストします。以下から、JPG、SVG、PNG、または GIF ファイルを読み込み、ドラッグ、またはコピー＆ペーストすることもできます。
- エクスプローラー（Windows）
- Finder（Mac）
- Web ブラウザー
- OS クリップボード

デザイン内のオブジェクトを拡張します。例えば、オブジェクトの結合またはマスク、線と塗りのプロパティの変更、オーバーレイを使用して基礎のアートボード上にコンテンツを重ねる、オブジェクトの移動または回転、レスポンシブサイズ変更を使用し複数の画面サイズおよびレイアウトのアセットをデザインすること、などがおこなえます。リンクされたアセットを使用して UI キット、ステッカーシート、またはスタイルガイドの単一バージョンを作成および保守し、ドキュメント間でそれらを共有して一貫したデザインスケーラビリティを実現、プラグインを使用して面倒で複雑な繰り返しのデザイナーワークフローの一部や繰り返し操作を自動化します。

詳しくは、以下を参照してください。

リピートグリッド機能を使って繰り返すエレメントを簡単にレイアウトして、グリッドを手動で複製しなくても、既存のコンテンツから作成できます。詳しくは、繰り返しエレメントの作成を参照してください。

面倒で複雑なデザイナーの反復的ワークフローの一部や繰り返される操作を自動化するには、プラグインを使用します。詳しくはのプラグイン作成と管理を参照してください。

プロトタイプで目的の画面ごとにさらにアートボードを追加します。詳しくは、アートボードの操作を参照してください。

プロトタイプ

インタラクティブプロトタイプを作成するには、音声機能、自動アニメーション、ドラッグジェスチャー、時限式トランジションを使用します。詳しくは、XD での音声デザインとプロトタイプ作成、自動アニメーションとドラッグジェスチャーを使用したプロトコルの作成、および時限式トランジションを使用するを参照してください。

プロトタイプで、またはプレビュー中にインタラクティブ機能をプレビューして、インタラクションを MP4 ファイルとして記録します。

アートボードをリンクするか、インタラクティブ機能を設定するには、アートボードまたはオブジェクトを選択し、右側の矢印をクリックします。ワイヤーが表示されます。別のオブジェクトまたはアートボードにワイヤーをドラッグして接続するだけで完了です。表示されるポップアップウィンドウで、トランジションオプションとトランジションの継続時間を指定します。

オーバーレイを使用すると、複数のアートボード間でコンテンツを複製することなく、トランジションの概念をシミュレートできます。詳しくは、インタラクティブプロトタイプの作成を参照してください。