Dani Beaumont
最終更新日 :
2023年6月7日
- Adobe XD ユーザーガイド
- はじめに
- デザイン
- アートボード、ガイド、レイヤー
- シェイプ、オブジェクト、パス
- テキストとフォント
- コンポーネントとステート
- マスキングと効果
- レイアウト
- ビデオと Lottie アニメーション
- プロトタイプ
- 共有、書き出し、およびレビュー
- デザインシステム
- クラウドドキュメント
- 統合とプラグイン
- XD iOS 版および Android 版
- トラブルシューティング
- 既知の問題と修正された問題
- インストールと更新
- 起動時のクラッシュ
- クラウドドキュメントおよび Creative Cloud ライブラリ
- プロトタイプ作成、公開、レビュー
- 読み込み、書き出し、その他のアプリの操作
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 の基本を学ぶ
アートボードの既定サイズを選択します。カスタムサイズを使用する場合は、「カスタム」オプションの下のテキストフィールドに幅と高さをピクセル単位で入力します。カスタムサイズを指定するには、カスタムサイズアイコンをクリックします。
デザイン内のオブジェクトを拡張します。例えば、オブジェクトの結合またはマスク、線と塗りのプロパティの変更、オーバーレイを使用して基礎のアートボード上にコンテンツを重ねる、オブジェクトの移動または回転、レスポンシブサイズ変更を使用し複数の画面サイズおよびレイアウトのアセットをデザインすること、などがおこなえます。リンクされたアセットを使用して UI キット、ステッカーシート、またはスタイルガイドの単一バージョンを作成および保守し、ドキュメント間でそれらを共有して一貫したデザインスケーラビリティを実現、プラグインを使用して面倒で複雑な繰り返しのデザイナーワークフローの一部や繰り返し操作を自動化します。
詳しくは、以下を参照してください。
リピートグリッド機能を使って繰り返すエレメントを簡単にレイアウトして、グリッドを手動で複製しなくても、既存のコンテンツから作成できます。詳しくは、繰り返しエレメントの作成を参照してください。
面倒で複雑なデザイナーの反復的ワークフローの一部や繰り返される操作を自動化するには、プラグインを使用します。詳しくはのプラグイン作成と管理を参照してください。
プロトタイプで目的の画面ごとにさらにアートボードを追加します。詳しくは、アートボードの操作を参照してください。
プロトタイプ
インタラクティブプロトタイプを作成するには、音声機能、自動アニメーション、ドラッグジェスチャー、時限式トランジションを使用します。詳しくは、XD での音声デザインとプロトタイプ作成、自動アニメーションとドラッグジェスチャーを使用したプロトコルの作成、および時限式トランジションを使用するを参照してください。
プロトタイプで、またはプレビュー中にインタラクティブ機能をプレビューして、インタラクションを MP4 ファイルとして記録します。
アートボードをリンクするか、インタラクティブ機能を設定するには、アートボードまたはオブジェクトを選択し、右側の矢印をクリックします。ワイヤーが表示されます。別のオブジェクトまたはアートボードにワイヤーをドラッグして接続するだけで完了です。表示されるポップアップウィンドウで、トランジションオプションとトランジションの継続時間を指定します。
オーバーレイを使用すると、複数のアートボード間でコンテンツを複製することなく、トランジションの概念をシミュレートできます。詳しくは、インタラクティブプロトタイプの作成を参照してください。
アプリケーション右上のプレビューアイコンをクリックします。XD では、プレビュー画面を表示して、別のページを表示したり、ページを移動したりすることができます。プレビュー画面の記録アイコンで、ページ間のフローを記録し、MP4 形式で保存できます。
詳しくは、インタラクションのプレビューおよび記録を参照してください。
共有
デザインレビュー、プレゼンテーション、またはユーザーテストのためにプロトタイプを共有できます。また、開発用のプロトタイプやデザインスペックを公開したり、好みに応じて表示エクスペリエンスをカスタマイズしたりすることもできます。詳細は、デザインとプロトタイプを共有を参照してください。
