マニュアル キャンセル

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

  1. Adobe XD ユーザーガイド
  2. はじめに
    1. Adobe XD の新機能
    2. よくある質問
    3. Adobe XD でのデザイン、プロトタイプ、共有
    4. 必要システム構成
      1. ハードウェアとソフトウェアの要件
      2. Adobe XD、Big Sur、Apple Silicon | macOS 11
    5. ワークスペースの基本
    6. Adobe XD でのアプリ言語の変更
    7. UI デザインキットへのアクセス
    8. Adobe XD のアクセシビリティ
    9. ショートカットキー
    10. ヒントとテクニック
    11. Adobe XD サブスクリプションオプション
    12. XD スタータープランへの変更
  3. デザイン
    1. アートボード、ガイド、レイヤー
      1. アートボードの基本を学ぶ
      2. グリッドとガイドを使う
      3. スクロール可能なアートボードの作成
      4. レイヤーの操作
      5. スクロールグループを作成する
    2. シェイプ、オブジェクト、パス
      1. オブジェクトの選択、サイズ変更および回転
      2. オブジェクトの移動、分散および整列
      3. オブジェクトのグループ化、ロック、複製、コピー、および反転
      4. オブジェクトの線、塗りおよびドロップシャドウの設定
      5. 繰り返しオブジェクトの作成
      6. 3D 変形を使って透視図を作成
      7. ブール演算を使用したオブジェクトの編集
    3. テキストとフォント
      1. 描画ツールとテキストツールの操作
      2. Adobe XD のフォント
    4. コンポーネントとステート
      1. コンポーネントによる作業
      2. 入れ子になったコンポーネントの操作
      3. コンポーネントへの複数ステートの追加
    5. マスキングと効果
      1. シェイプでマスクを作成
      2. ぼかし効果の操作
      3. グラデーションの作成と修正
      4. ブレンド効果の適用
    6. レイアウト
      1. レスポンシブサイズ変更とレイアウトの制約
      2. コンポーネントとグループへの固定パディングの設定
      3. スタックを使用して動的なデザインを作成する
    7. ビデオと Lottie アニメーション
      1. ビデオを操作
      2. ビデオを使用したプロトタイプの作成
      3. Lottie アニメーションを操作
  4. プロトタイプ
    1. インタラクティブプロトタイプを作成
    2. プロトタイプのアニメーション化
    3. 自動アニメーションでサポートされているオブジェクトプロパティ
    4. キーボードとゲームパッドでプロトタイプを作成
    5. 音声コマンドや音声再生を使用したプロトタイプの作成
    6. タイマートランジションの作成
    7. オーバーレイの追加
    8. 音声機能付きプロトタイプのデザイン
    9. アンカーリンクを作成
    10. ハイパーリンクの作成
    11. デザインとプロトタイプのプレビュー
  5. 共有、書き出し、およびレビュー
    1. 選択したアートボードの共有
    2. デザインおよびプロトタイプの共有
    3. リンクのアクセス権限を設定
    4. プロトタイプを操作
    5. プロトタイプのレビュー
    6. デザインスペックの使用方法
    7. デザインスペックの共有
    8. デザインスペックを確認する
    9. デザインスペックのナビゲート
    10. デザインスペックのレビューとコメント
    11. アセットの書き出し
    12. デザインスペックからのデザイン素材の書き出しとダウンロード
    13. エンタープライズ版のグループ共有
  6. デザインシステム
    1. Creative Cloud ライブラリと連携したデザインシステム
    2. Adobe XD でドキュメントアセットによる作業
    3. Adobe XD での Creative Cloud ライブラリの操作
    4. リンク化アセットから Creative Cloud ライブラリへ移行
    5. デザイントークンを使用する 
    6. Creative Cloud ライブラリアセットの利用
  7. クラウドドキュメント
    1. Adobe XD のクラウドドキュメント
    2. デザインの共同作業と共同編集
    3. 共有されたドキュメントの共同編集
  8. 統合とプラグイン
    1. 外部のデザイン素材
    2. Photoshop で作成したデザインアセットの操作
    3. Photoshop からのアセットのコピー&ペースト
    4. Photoshop のデザインの読み込みまたは起動
    5. Adobe XD での Illustrator アセットの操作
    6. Illustrator のデザインの起動または読み込み
    7. Illustrator から XD へのベクターのコピー
    8. Adobe XD のプラグイン
    9. プラグインの作成と管理
    10. XD への Jira の統合
    11. XD 用 Slack プラグイン
    12. XD 用 Zoom プラグイン
    13. XD から Behance にデザインを公開
  9. XD iOS 版および Android 版
    1. モバイルデバイスでプレビュー
    2. Adobe XD モバイル版に関する FAQ
  10. トラブルシューティング
    1. 既知の問題と修正された問題
      1. 既知の問題
      2. 解決済みの問題
    2. インストールと更新
      1. XD が Windows 上で互換性がないように見える
      2. エラーコード:191
      3. エラーコード:183
      4. XD プラグインのインストールに関する問題
      5. Windows 10 で XD のアンインストールと再インストールを促すダイアログが表示される
      6. 環境設定の移行に関する問題
    3. 起動時のクラッシュ
      1. Windows 10 で起動すると XD がクラッシュする
      2. Creative Cloud からログアウトすると XD が終了する
      3. Windows でのサブスクリプションステータスの問題
      4. Windows で XD を起動すると、アプリがブロックされたという警告が表示される
      5. Windows でのクラッシュダンプの生成
      6. クラッシュログの収集と共有
    4. クラウドドキュメントおよび Creative Cloud ライブラリ
      1. XD クラウドドキュメントで発生する問題
      2. リンクされたコンポーネントに関する問題
      3. ライブラリとリンクに関する問題
    5. プロトタイプ作成、公開、レビュー
      1. macOS Catalina でプロトタイプのインタラクションを収録できない
      2. 公開ワークフローの問題
      3. 公開されたリンクがブラウザーに表示されない
      4. プロトタイプがブラウザーで正しくレンダリングされない
      5. コメントパネルが突然共有リンクに表示される
      6. ライブラリを公開できない
    6. 読み込み、書き出し、その他のアプリの操作
      1. XD での読み込みと書き出し
      2. XD での Photoshop ファイルの使用
      3. XD での Illustrator ファイルの使用
      4. XD から After Effects への書き出し
      5. XD での Sketch ファイルの使用
      6. 書き出しに表示されないサードパーティ製品

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

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

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

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

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

一般的なワークフロー

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

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

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

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

デザイン

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

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

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

 

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

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

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

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

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

プロトタイプ

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

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

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

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

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

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

共有

デザインレビュー、プレゼンテーション、またはユーザーテストのためにプロトタイプを共有できます。また、開発用のプロトタイプやデザインスペックを公開したり、好みに応じて表示エクスペリエンスをカスタマイズしたりすることもできます。詳細は、デザインとプロトタイプを共有を参照してください。

アドビのロゴ

アカウントにログイン