マニュアル キャンセル

Photoshop で作成したデザインアセットの操作

  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. 書き出しに表示されないサードパーティ製品

Photoshop のデザインをレベルアップさせましょう。Photoshop のアートボードとアセットを XD に読み込み、忠実度の高いプロトタイプを作成する方法について説明します。

Adobe XD では、Photoshop のデザインとアートボードを接続してインタラクティブアプリケーションまたはプロトタイプに変形することができます。.psd ファイルを活用する場合や、単にコピー&ペーストをおこなう場合でも、XD と Photoshop 間の補完的な統合で簡単に操作できます。

Photoshop で作成したデザインアセットの操作

留意事項

Photoshop と XD は補完的な機能セットを備えていますが、一部の機能は依然として 1 対 1 にマッピングしません。続行する前に、Photoshop と XD で直接マッピングしない機能について見てみましょう

 

  • 一部の Photoshop のエレメントはラスタライズして XD デザインに転送することができません。サポートされる Photoshop のエレメントについて詳しくは、XD でサポートされる Photshop のエレメントを参照してください。
  • .psd ファイルとして XD ファイルを Photoshop に書き出すことはできません。ただし、XD でファイル/開くにより、Photoshop の多彩な写真編集機能を使用した、XD デザインに含まれる Photoshop 画像を開くことができます使用できます。
  • XD で PSD ファイルを開いた場合は、再度 .psd ファイルとして保存することはできません。
     

XD と Photoshop の操作時のシームレスなエクスペリエンスのために、相互運用性のワークフローについて改善が加えられています。それまでの間、ご意見またはご提案をお持ちの方は、UserVoice でお知らせください。

XD での Photoshop デザインの利用

Photoshop でデザインの準備が完了した後、XD に移動する場合、次のような方法があります。

Photoshop のデザインの読み込みまたは起動

 

詳細情報

Photoshop からのアセットのコピー&ペースト

 

詳細情報

Creative Cloud ライブラリアセットの利用

 

詳細情報

読み込んだアートボードのプロトタイプ

Photoshop のデザインを XD に読み込んだ後、こうしたデザインを使用してプロトタイプを作成する方法は次のとおりです。

Photoshop では、Photoshop のアートボードを XD で直接開いて、XD のアートボードを作成できます。Photoshop のアートボードは XD のアートボード形式にシームレスに読み込むことができます。

また外出時にも、2 つのアプリケーションの間で行き来して、視覚要素をどこからでも調整できます。

XD のデザイン向上を図るには、リピートグリッドステート自動アニメーション音声プロトタイプなど、XD の独自機能を使用して、レベルアップできます。

XD による共有と共同作業

プロトタイプを共有しましょう。

インタラクティブなプロトタイプをデザインし、作成するために Adobe XD を使用する主な利点の 1 つは、デザインとプロトタイプを共有し、関係者からフィードバックが得られることです。

共有されたデザインは、忠実度が失われることがなく、最適化されており、関係者からのフィードバックはリアルタイムで参照できます。デベロッパーは、共有されたアセットとデザインスペックをコーディングのためにダウンロードできます。

XD で共有モードを使用することで、デザインおよびインタラクティブプロトタイプを関係者と共有し、シームレスに共同作業と共同編集を行うことができます。ドキュメントの各バージョンが一定間隔で自動的に保存され、以前のバージョンからの変更を元に戻すことができます。

XD からファイルを共有した後、プロトタイプの解像度が影響を受けるかどうかご懸念をお持ちですか?そうしたご懸念は必要ありません。

よくある質問

Photoshop のアセットをコンポーネントに変換し、名前付け規則を維持しながら、プロジェクト全体で一貫して使用することはできますか?

Photoshop のアセットにより、異なるコンテキストとレイアウトで繰り返し要素を作成、維持するのに役立つ再利用可能なコンポーネントを簡単に作成できます。ボタンなど、再利用可能な要素を定義するためのマスターコンポーネントを作成し、そのプロパティを変更することで要素のインスタンスをカスタマイズできます。個々のインスタンスに加えた変更はその要素に固有ですが、マスターに加えた変更はプロパティがカスタマイズされていないすべてのインスタンスに反映されます。

画像ファイルを使用してカラースウォッチを作成する方法を教えてください。

Photoshop から XD にカラースウォッチの作成または読み込みをおこなうことはできません。回避策として、Photoshop のスウォッチパネルからライブラリパネルにこうしたカラーをドラッグし、XD で CC ライブラリを開いて、オブジェクトでそのカラーを使用して、アセットパネルにカラーを追加します。

次のステップ

これで、Photoshop で作成したデザインアセットを使用することができました。さらに一歩踏み込んで、インタラクティブプロトタイプを作成する方法や、フィードバックを得るためにデザイナーや関係者と共有する方法についてご確認ください。

ご質問または共有するアイデアがある場合

コミュニティで質問

ご質問または共有するアイデアがある場合は、Adobe XD コミュニティにぜひご参加ください。皆様からのご意見や作品をお待ちしております。

アドビのロゴ

アカウントにログイン