マニュアル キャンセル

XD での Creative Cloud ライブラリの操作

  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 で Creative Cloud ライブラリを使用してデザインシステムを作成し、共有する方法について説明します。

Creative Cloud ライブラリでは、デザインやブランドシステムのアセットをチームで大規模に一元管理して、配布できます。

まず、XD クラウドドキュメントで、デザインとブランドシステムを構成する一連のコンポーネントとスタイルを伴う、ステッカーシートをキュレートします。より広範なチームと再利用可能なそれらのアセットを共有する準備ができれば、適切な権限により、ステッカーシートのクラウドドキュメントをライブラリとして公開して、チームを招待できます。

チームがライブラリの招待を承諾することで、ライブラリのアセットを再利用して、今後のライブラリの更新時に同期できます。

Creative Cloud ライブラリを使用する理由

Natalia(デザインライブラリの所有者)の場合

natalia_persona

「デザインライブラリの所有者として、自分のデザインアセットとコンポーネントをライブラリに公開し、他のユーザーにデザインシステムライブラリを使用するよう促したい。」

Pedro(デザインライブラリの利用者)の場合

pedro_persona

「デザインライブラリの使用者として、ライブラリの共有アセットをシームレスに再利用し、Natalia が共有アセットを変更したときに通知を受け取りたい。」

同じように感じたことはありませんか?ここでは、すべてのアセットとコンポーネントをライブラリに公開し、他のユーザーが XD からデザインシステムを利用できるように招待する方法について説明します。

始める前に

Adobe XD を初めてご使用ですか?

無料体験版アプリを入手

XD を既に使用している場合

アプリを更新

新機能のご紹介

実際に試す

サンプルファイルを入手

.xdc、604KB

必要に応じて、XD に関する以下の概念を確認してください。

リンクされたライブラリの公開と共有

ライブラリを介してデザインシステムを構築および配布するには、ソースのクラウドドキュメントのドキュメントアセットパネルでデザインシステムアセット(カラー、文字スタイル、コンポーネント)をキュレーションします。

デザインシステムアセットを定義したら、それらのアセットをソースドキュメントにリンクされたライブラリとして公開します。それらをグループと共有して、すべての XD プロジェクトやその他の Creative Cloud アプリで一貫して再利用します。

リンクされたライブラリの公開

リンクされたライブラリの公開
リンクされたライブラリの公開

リンクされたライブラリを公開するには、次の手順に従います。

  1. ツールバーのライブラリをクリックし、ドキュメントアセットパネルビューを開きます。
  2. 「ライブラリとして公開」をクリックして、ライブラリマネージャーを開きます。
  3. ライブラリマネージャーで、公開をクリックします。または、新規作成をクリックして、リンクされたライブラリを公開をクリックします。

公開されたライブラリには、ソースドキュメントのドキュメントアセットパネルにあるすべてのアセットが含まれています。

リンクされたライブラリにアセットを追加できるのは、ソースドキュメントからのみですが、Creative Cloud アプリでアセットを使用することはできます。新規作成空のライブラリを作成を選択した場合、クラウドドキュメントにリンクされていない通常の Creative Cloud ライブラリを取得します。任意の Creative Cloud アプリから通常の Creative Cloud ライブラリにアセットを追加できます。

リンクされたライブラリまたは空のライブラリを作成する
リンクされたライブラリまたは空のライブラリを作成する

チームライブラリの公開

Creative Cloud グループ版またはエンタープライズ版をお持ちの場合、個人用ライブラリを公開するだけでなく、チームライブラリを公開できる場合があります。チームライブラリは所有権を共有しています。

チームライブラリを公開するには、次の手順に従います。

  1. ライブラリマネージャーを開きます。
  2. 新規作成空のライブラリを作成またはリンクされたライブラリを公開を選択します。
  3. チームスペースを選択し、チームライブラリを公開します。

チームライブラリとその利点については、ビジネス用の Creative Cloud ライブラリを参照してください。

ライブラリの共有

ライブラリを公開すると、共有ダイアログが表示され、チームメンバーを招待できます。

ライブラリの共有
ライブラリマネージャーからライブラリを共有

  • 共有をクリックして、ライブラリを共有するチームメンバーを追加します。
  • 編集可能権限を設定すると、チームメンバーは新しい更新をライブラリに公開できます。閲覧のみ権限を設定すると、チームメンバーはライブラリのコンテンツを利用できますが、ライブラリを更新または変更することはできません。

チームメンバーを招待すると、メールまたは Creative Cloud デスクトップアプリを介して、ライブラリの招待を承認するよう求められます。

ドキュメントの共同編集者を編集権限のあるライブラリに招待する

クラウドドキュメントの権限は、リンクされたライブラリと自動的に同期されません。そのため、ライブラリを公開する際は、必ずドキュメントの共同編集者全員を編集可能権限
のあるライブラリに招待してください。

XD クラウドドキュメントの権限は、リンクされたライブラリと自動的に同期されません。
XD クラウドドキュメントの権限は、リンクされたライブラリと自動的に同期されません。

ドキュメントの共同編集者がライブラリに対する編集権限を持っていない場合はどうなりますか?

リンクされたライブラリは、クラウドドキュメントに 1 つだけです。そのため、ドキュメントの共同編集者をライブラリに招待しない場合、共同編集者は、ライブラリが既に存在することを知らなくても、同じドキュメントから新しいライブラリを公開できます。共同編集者が新しいライブラリを公開すると、そのライブラリはドキュメントにリンクされ、元のライブラリはリンク解除されます。

共同編集者を閲覧のみ権限のあるライブラリに招待すると、共同編集者にはライブラリを更新するオプションが表示されません。ソースドキュメントのライブラリウィンドウには、最新の状態が表示されます。

ライブラリへの表示アクセス
ライブラリへの表示アクセス

ライブラリへの編集アクセス
ライブラリへの編集アクセス

例で学ぶ

  1. Natalia は、XD ドキュメント Brand_Systems の所有者であり、Pedro を共同編集者としてドキュメントに招待します。
  2. Natalia は、ドキュメントからリンクされたライブラリを作成します。このライブラリには、Brand_Systems という名前も自動的に付けられますが、Pedro をライブラリに招待するのを忘れています。
  3. Pedro はドキュメントに新しいアセットを追加し、リンクされたライブラリが存在することを知らずにライブラリを公開しようとします。
  4. Pedro は、ドキュメントのライブラリウィンドウで「公開」ボタンを選択し、これにより、リンクされた新しいライブラリ、Brand_Systems(1) が作成されます。 Brand_Systems(1) を作成すると、元のライブラリがドキュメントからリンク解除されます。
  5. Natalia は、別のドキュメントからライブラリ内のアセットへのリンクが破損していることに気付きました。

元のライブラリは共同編集者によってソースドキュメントからリンク解除されたのでしょうか?ライブラリのソースドキュメントとの再リンクを参照してください。

ベストプラクティス

  • リンクされた新しいライブラリをクラウドドキュメントから公開する際は、必ずドキュメントの共同編集者全員を編集可能権限のあるライブラリに招待してください。共同編集者がライブラリアセットを利用できるようにする場合にのみ、共同編集者を閲覧可能権限のあるライブラリに招待します。
  • ドキュメントに新しい共同編集者を招待する際は、リンクされたライブラリに招待し、必要な権限を付与してください。

注意事項

  • ライブラリを初めて公開する場合、サイズによっては公開に数分かかる場合があります。ライブラリ公開の進捗状況は、ライブラリマネージャーの進捗状況インジケーターから確認できます。 
  • ライブラリへの招待を初めて承諾する場合、ライブラリの同期に数分かかることがあります。ライブラリの同期状態は、Creative Cloud デスクトップアプリのクラウドアイコンをクリックして確認できます。ライブラリが完全に同期されると、XD や他の Creative Cloud アプリからもライブラリにアクセスできます。

ライブラリの利用

ライブラリの招待を承諾すると、XD や他の Creative Cloud アプリでライブラリのアセットを使用できるようになります。ライブラリのアセットを XD で使用するには、以下の手順を実行します。

共有ライブラリの特定

共有ライブラリを参照する

ライブラリパネルビューで、使用する共有ライブラリを見つけます。

ライブラリパネルビューでは、一部のライブラリを表示し、他のライブラリを非表示にすることができます。

共有ライブラリのアセットの使用

ライブラリをクリック

利用するアセットがあるライブラリをクリックします。

カラーまたは文字スタイルの適用

カラーと文字スタイルの適用

カラーや文字スタイルをカンバス上のオブジェクトやコンポーネントに適用し、コンポーネントをカンバスにドラッグして、リンクされたアセットにすることができます。

ドキュメント内にあるリンクされたアセットの表示

ドキュメントアセットパネルビューに切り替えると、すべてのローカルのアセットとリンクされたアセットが表示されます

ドキュメントアセットパネルビューに切り替えると、1 つまたは複数のライブラリで使用されているすべてのローカルアセットやリンクされたアセットを表示できます。

ライブラリパネルのライブラリの表示または非表示

ライブラリパネルビューでは、一部のライブラリを表示し、他のライブラリを非表示にすることができます。

  1. ライブラリマネージャーを開きます。
    • ドキュメントアセットパネルビュー:パネルの上部にある「ライブラリとして公開」をクリックします。
    • ライブラリパネルビュー:「+」または「ライブラリを管理」をクリックします。
  2. トグルを使って、ライブラリの表示と非表示を切り替えます。
  3. ライブラリマネージャーを閉じます。
ライブラリパネルビューでライブラリを表示または非表示にする
ライブラリパネルビューでライブラリを表示または非表示にする

公開されたライブラリの更新

XD クラウドドキュメントからライブラリを公開し、ソースクラウドドキュメント内のアセットを修正すると、最後にライブラリを公開してからの変更点が以下の方法で XD により通知されます。

  • 公開済みライブラリを変更すると、アプリ内メッセージが表示され、ライブラリの更新プロセスが容易になります。
  • ドキュメントアセットパネルの「ライブラリとして公開」にある青いバッジは、アップデートが発行可能であることを示します。

ライブラリへの更新を公開する準備ができたら、次のいずれかのオプションを使用します。

アプリ内メッセージからの更新

アプリ内メッセージからライブラリを更新する

アップデートの公開準備ができたことを通知するために、アプリ内メッセージで今すぐ更新をクリックします。

ライブラリマネージャーからの更新

ライブラリマネージャーからライブラリを更新する

ドキュメントアセットパネルビューで「ライブラリとして公開」をクリックして、ライブラリマネージャーを開きます。更新をクリックして、最新のアップデートをチームにプッシュします。

ライブラリのアップデートのプレビューと受け入れ

ライブラリを更新して公開するとどうなりますか?デザインプロジェクトでそれらの更新されたリンクアセットを使用する仲間のデザイナーが、次の通知を受け取ります。

  • ドキュメントアセットパネルビュー:更新が保留中のリンクされたアセット上に青いバッジ が表示されるとともに、パネルの下部に「すべてアップデート」ボタンが表示されます。
  • ライブラリパネルビュー:青いバッジ ドキュメントアセットの横)に、ドキュメントで保留中のアップデートの数が表示されます。

ドキュメントアセットパネルビューまたはデザインカンバスからの更新のプレビュー

ドキュメントアセットパネルから更新をプレビュー

リンクされたカラー、文字スタイル、コンポーネントの青い更新アイコン にカーソルを合わせます。

 ドキュメント内のリンクされたカラー、文字スタイル、およびコンポーネントをすべてアップデート

ドキュメント内のリンクされたアセットの更新

青い更新アイコンをクリックするか、ドキュメントアセットパネルビューの下部にある更新をクリックします。

アセットの検索とフィルター

ドキュメントアセットとライブラリのサイズが大きい場合、検索機能とフィルター機能を使用すると便利です。

ドキュメントアセットパネルビューで、検索語を入力してドキュメント内のアセットを検索します。ライブラリパネルビューで、アクティブなすべてのライブラリ全体からアセットを検索します。

XD には、プロジェクトで使用するアセットを絞り込むための次の 3 つのフィルターメカニズムが搭載されています。

  • アセットタイプ:表示するアセットタイプ(カラー、文字スタイル、またはコンポーネント)でフィルターします。フィルター結果には、ローカルアセットとリンクされたアセットの両方が表示されます。
  • ローカルアセット:ローカルドキュメントアセットのみを使用する場合は、ローカルアセットフィルターを選択します。
  • リンクされたアセットのソース:複数のクラウドドキュメントまたはライブラリからアセットがリンクされ、その中の特定のソースからのアセットのみを使用する場合は、目的のライブラリまたはリンクされたソースドキュメントをフィルターから選択します。
アセットの検索とフィルター
アセットの検索とフィルター

リンクされたアセットをローカルアセットに変換

リンクされたアセットの特定のスタイルやプロパティを試して変更する場合には、各自のドキュメントでそれらのアセットを使用している他のユーザーに影響が及ばないように、リンクされたアセットをローカルアセットに変換します。

  1. ドキュメントアセットパネルビューで、リンクされたアセットを選択します。
  2. アセットを右クリックし、「ローカルにする」を選択します。

注意事項

  • リンクされたアセットをローカルアセットに変換すると、ライブラリ内のリンクされたアセットに変更が加えられても通知が行われなくなります。同じリンクされたアセットを持つ他の XD ドキュメントは引き続き更新を受信します。

  • ローカルにする」は、ライブラリのアセットを使用する場合や、リンクされたコンポーネントをドキュメント間でコピー&ペーストする場合、またはリンクされたアセットが壊れている場合に機能します。

リンクされたアセットをローカルアセットに変換
リンクされたアセットをローカルアセットに変換

ライブラリのソースドキュメントとの再リンク

リンク解除されたライブラリをそのソースドキュメントに再リンクする方法について詳しくは、ライブラリのソースドキュメントとの再リンクを参照してください。

ライブラリの非公開

ライブラリが不要だと判断した場合は、ライブラリマネージャーからライブラリを非公開にすることができます。ライブラリを非公開にするには:

  1. ライブラリのソースドキュメントからライブラリマネージャーを開きます。
  2. 共有の横にある 3 つのドットをクリックして、非公開をクリックします。

ライブラリが非公開になると、このライブラリからリンクされていたアセットがリンク切れとなり、赤いバッジで示されます。リンク切れのアセットは削除するか、ローカルアセットに変換することができます。

注意事項

  • ライブラリを非公開にした後、再公開しても、そのライブラリからのリンクが切れたアセットが、再びそのライブラリにリンクされることはありません。

Creative Cloud アプリで作成されたライブラリのアセットの使用

XD を使えば、お客様やお客様のチームは、Photoshop や Illustrator などの異なる Creative Cloud アプリで作成されたアセットを簡単に使用できます。着想を呼ぶグラフィックコレクションのライブラリ、Adobe Stock の画像、ソースドキュメントへリンクしない再利用可能なカラーや文字スタイルのコレクションのライブラリなどから、アセットを Adobe XD で再利用できます。

XD で作成された通常の Creative Cloud ライブラリにあるアセットを使用する

他の Creative Cloud アプリにあるアセットを使用する

グラフィックをライブラリからデザインにドラッグすると、バッジで示される形でリンク化グラフィックになります。Photoshop や Illustrator でそのリンク化グラフィックグラフィックに変更を加えると、デザインですべてのリンク化グラフィックインスタンスが自動更新されます。リンク化グラフィックをリンク解除するには、リンクバッジをクリックするかコンテキストメニューを使用します。 

ドキュメントにリンクされていないカラー、文字スタイル、グラフィックのコレクションを使って XD で同様のライブラリを作成するには、ライブラリマネージャーで新規作成/空のライブラリを作成を選択します。

注意事項

  • コンポーネントをライブラリに追加するには、ドキュメントをライブラリとして公開することが必要です。
  • ライブラリではカラーや文字スタイルを編集できません。
  • 3D 変形グラフィックスをライブラリに追加すると、3D 変形が失われます。

ベストプラクティス

  • ライブラリアセットの更新の実行、チームによるそれらの更新のプレビューと承認、およびチームによる最新の変更の確実な同期をさらに効果的に管理するため、この記事で概説されるようにドキュメントからリンクされたライブラリを公開することをお勧めします。

詳細情報

XD でライブラリを操作する方法については、以下のビデオをご覧ください。

視聴時間:6 分

次のステップ

ライブラリの公開と共有の方法を最初に説明しましたが、一歩進んで、デベロッパーとデザインスペックを共有する方法を学んで、デベロッパーがデザインを Inspect できるようにします。

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

コミュニティで質問

質問やアイデアを共有するには、Adobe XD コミュニティに参加します。皆様からのご意見や作品をお待ちしております。

アドビのロゴ

アカウントにログイン