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

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

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

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

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

一般的なワークフロー

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

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

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

XD でのデザイン、プロトタイプ作成、共有について、さらに詳しく説明します。次のビデオチュートリアルでも Adobe XD の機能の概要を説明しています。

デザイン

launch

Adobe XD を起動します。スタート画面が表示されます。

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


adding jpeg

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

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

詳しくは、外部アセットの操作を参照してください。


resizing

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

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


duplicate

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

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


adding artwork

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


プロトタイプ

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

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

linking

アートボードをリンクする:

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

オーバーレイを使用すると、複数のアートボード間でコンテンツを複製することなく、トランジションの概念をシミュレートできます。

詳しくは、インタラクティブプロトタイプの作成を参照してください。


preview

プロトタイプのプレビューおよび記録:

アプリケーション右上のプレビューアイコンをクリックします。XD では、プレビュー画面を表示して、別のページを表示したり、ページを移動したりすることができます。プレビュー画面の記録アイコンで、ページ間のフローを記録し、MP4 形式で保存できます。 

詳しくは、インタラクションのプレビューおよび記録を参照してください。


注意:

Adobe XD Windows 版では、プロトタイプの記録はサポートされていません。ただし、回避策が見つかっています。Windows + G キーを押して、ネイティブレコーダーを使用してプレビュー画面を記録します。

共有

share

次のいずれかの方法を使用して、プロトタイプをプロジェクトの関係者と共有します。

  • プロトタイプを Web に公開し、関係者がプロトタイプを閲覧してコメントできるように Web リンクまたは非公開の招待状(ベータ版)を提供します。また、iFrames をサポートする Web サイトにプロトタイプを埋め込むことができる、埋め込みコードを生成することもできます。詳しくは、プロトタイプを公開するを参照してください。
  • デザインスペックを公開し、開発者に Web リンクまたは非公開の招待状(ベータ版)を提供します。開発者は計測値、色および文字スタイルのデザインスペックを確認し、それらをコピーできます。詳しくは、開発者用のデザインスペックを公開するを参照してください。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー