マニュアル キャンセル

Adobe XD でドキュメントアセットによる作業

XD でドキュメントアセットを管理する方法について説明します。

ドキュメントアセットパネルでは、デザインプロジェクトで使用するカラー、文字スタイル、コンポーネント、オーディオアセットを一元的に作成、管理および共有できます。

ドキュメントアセット

ドキュメントアセットを使用する理由

Richard は、デザインリーダーとして、クラウドベースのシステムでデザインアセットの作成と使用を標準化する作業に取り組んでいます。彼は、デザインシステムトレーニング全体のカラー、文字スタイル、コンポーネント、オーディオアセットを管理する方法について調査を進めています。

 

  • XD でのアセットの作成方法や管理方法について情報を収集しています。

 

  • XD でアセット管理システムを構築するための支援を必要としています。

以下では、Richard のような方を対象として、XD のドキュメントアセットの概要を説明し、使用を開始できるように支援します。

始める前に

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

ドキュメントアセットの追加

デザインのスタイルとコンポーネントのキュレーションを始めるには、ツールバーのライブラリをクリックするか、「Cmd + Shift + Y(macOS)」または「Ctrl + Shift + Y(Windows)」を押して、ドキュメントアセットパネルを開きます。

ヒント :

アセットパネルですべてのノードを一度に展開または折りたたむには、Cmd を押しながらクリック(macOS)、または Ctrl を押しながらクリック(Windows)すると、時間と労力を節約することができます。

ドキュメントアセットパネルでは、ドキュメント全体で再利用するか後でライブラリの一部として公開するカラー、文字スタイル、コンポーネント、オーディオまたはビデオを、次の手順に従って追加してください。

カラーを追加

  • カンバス上のオブジェクトを選択し、ドキュメントアセットパネルのカラーの隣りにある + アイコンをクリックします。選択したオブジェクトに関連した、塗りつぶしと境界線カラーが、XD によって抽出されます。

文字スタイルの追加

  • カンバス上のテキストを選択し、ドキュメントアセットパネルの文字スタイルの隣りにある + アイコンをクリックします。テキストレイヤーに適用されているすべてのスタイル(サブ範囲のスタイルを含む)が XD によって抽出されます。

コンポーネントの追加

  • カンバス上のオブジェクトを選択し、ドキュメントアセットパネルのコンポーネントの隣りにある「+」アイコンをクリックして、コンポーネントに変換します。
  • カンバス上でコンポーネントを作成すると、XD から自動的にドキュメントアセットパネル内のコンポーネントに追加されます。

オーディオの追加

オーディオアセットを追加する

  • プロトタイプモードのプロパティインスペクターでプロトタイプに追加されたオーディオファイルは、自動的にドキュメントアセットに表示されます。

ビデオの追加

ビデオの追加

  • カンバス上のビデオを選択し、ドキュメントアセットパネルのビデオの隣りにある「+」アイコンをクリックします。
  • ビデオをコンポーネントに変換すると、ビデオはドキュメントアセットパネルのコンポーネントビデオの両方に追加されます。

注意事項

  • ドキュメントアセットに影のカラーを追加することはできません。
  • 共通のプロパティを持つ文字スタイルはグループ化できません。 
  • オーディオファイルは、ドキュメントアセットからのみ削除できます。

  • プロトタイプモードのプロパティインスペクターから、オーディオファイルを追加できます。
  • オーディオファイルの名前を変更したり、並べ替えたりすることはできません。
  • クラウドドキュメントにリンクしているオーディオファイルは、リンクされません。 

ヒントとテクニック

  • 組織のニーズに合わせてアセットの名前を変更したり、並べ替えたりするには、ドキュメントアセットパネルの リストビューを使用します。グリッドビュー は、サムネールとアセットが大きなレンディションで表示されているため、アセットの再利用に最適です。
  • プリフライトチェックを行う場合は、ドキュメント内のすべてのアートボードを選択して、ドキュメントで使用されているすべてのカラーと文字スタイルを抽出します。

ドキュメントアセットの適用と再利用

これで追加されたアセットをドキュメントアセットから表示できるようになりました。アートボード上でオブジェクトやオブジェクトグループを選択し、カラーや文字スタイルをクリックして選択範囲に適用できます。

デザインで 1 つ以上のコンポーネントを使用するには、ドキュメントアセットパネルでそれらを選択し、キャンバスにドラッグします。これらのコンポーネントのインスタンスはキャンバス上に作成されます。

カラー、文字スタイル、コンポーネントを再利用するには、次の手順に従います。

カラーの再利用

カラーの再利用

以下のいずれかの操作を行います。
  1. 1 つのオブジェクトまたはテキストレイヤーを選択し、カラースウォッチをクリックして、単色の塗りつぶしカラーとして適用します。
  2. 複数のオブジェクトを選択し、選択範囲に 1 つのカラーまたはグラデーションを適用することもできます。
  3. またはドキュメントアセットでカラースウォッチを右クリックし、「境界線カラーを適用」を選択して線カラーとして適用したり、16 進値をコピーして再利用したりできます。
  4. オブジェクトの境界線に同じカラーを適用するには、オブジェクトを選択し、カラーを選択して、Opt(macOS)を押すか、Alt(Windows)を押します。

文字スタイルの再利用

以下のいずれかの操作を行います。
  1. テキストレイヤーまたはテキストの一部を選択し、文字スタイルをクリックして文字スタイルを適用します。
  2. 複数のオブジェクトを選択して、選択範囲全体に文字スタイルを適用することもできます。

複数コンポーネントの再利用

複数コンポーネントの再利用

以下のいずれかの操作を行います。
  1. ドキュメントアセットからカンバスにコンポーネントをドラッグします。
  2. 複数のオブジェクトを選択し、カンバス上で複数のコンポーネントをドラッグすることもできます。
  3. コンポーネントをドラッグするときに、別のコンポーネントインスタンスにカーソルを合わせて入れ替えることができます。 

ヒントとテクニック

  • 使用するカラーや文字スタイルの統一を図るため、カラーと文字スタイルを保存した後は、選択したオブジェクトに対して必ずドキュメントアセットからカラーと文字スタイルを適用します。

ドキュメントアセットの編集

アセットを追加して再利用した後は、ドキュメントアセットでアセットを編集することで、ドキュメント全体に一括で変更を適用できます。この機能により、ドキュメント全体のカラーや文字スタイルを効率的に変更できます。 

準備、正しいアセットを編集していることを確認してください。

  • ドキュメントアセットでアセットを右クリックして「カンバスでハイライト」を選択すると、特定のカラーや文字スタイルを使用しているすべてのオブジェクト、または特定のコンポーネントのインスタンスを確認できます。
  • カンバス上で任意のオブジェクトを選択して右クリックし、「アセットのコンポーネントを表示」を選択すると、ドキュメントアセットでそのカラー、文字スタイル、またはコンポーネントを見つけることができます。
カンバスでハイライト
ドキュメントアセットでアセットを右クリックし、「カンバスでハイライト」を選択します。

アセットのコンポーネントを表示
カンバス上の任意のオブジェクトを選択して右クリックし、「アセットのコンポーネントを表示」を選択します

ドキュメントのアセットを編集するには、次の手順に従います。

カラーの編集

カラーの編集

  • カラースウォッチを右クリックし、「編集」を選択して、ドキュメント全体のカラー値を変更します。
  • そのカラーを使用しているカンバス上のすべてのオブジェクトがリアルタイムで更新されます。これは、全体にわたってカラーの変更をプレビューし、編集を行う場合に便利です。

文字スタイルの編集

文字の編集

  • 文字スタイルを右クリックし、「編集」を選択すると、ドキュメント全体でそのスタイルを変更できます。
  • そのスタイルを使用しているカンバス上のすべてのテキストレイヤーが、リアルタイムで更新されます。

複数コンポーネントの編集

コンポーネントの編集

  • カンバス上またはドキュメントアセットパネルでコンポーネントを右クリックし、「メインコンポーネントを編集」を選択して、カンバス上のメインコンポーネントをハイライト表示するか、削除されている場合は再作成します。
  • メインコンポーネントに加えられた変更は、その他のコンポーネントインスタンスに反映されます。

注意事項

  • 複数のオブジェクト(100 個以上)で使用されるカラーまたは文字スタイルを編集した場合、パネルでの変更内容がカンバス上のすべてのオブジェクトに反映されるまでに時間がかかる場合があります。

ヒントとテクニック

  • 編集がデザインに及ぼす影響を判断するには、ドキュメントアセットでアセットを編集する前に、「カンバスでハイライト」オプションを使用します。
  • 文字スタイルのカラーを編集するには、カラー値を変更した後、グローバルなカラー値を変更して文字スタイルを保持します。
  • リンクされたカラーまたはリンクされた文字スタイルを更新すると、適用対象のリンクされたカラーまたは文字スタイルを持つオブジェクトのみが更新されます。

ドキュメントアセットの管理と整理

アセットの追加後、次の方法でドキュメントアセットパネル内のアセットを管理および整理できます。

  • アセットの表示と並べ替え
  • アセットの検索とフィルター
  • アセットにカーソルを合わせる
  • アセットの並べ替え、名前の変更、削除

アセットをグループ化する方法については、「アセットをグループとサブグループに整理する」を参照してください。

アセットの表示と並べ替え

アセットの表示と並べ替え

  • グリッドビュー: サムネールの表示に最適化され、アセットを視覚的に識別できます。
  • リストビュー: 整理がしやすいように最適化され、すべてのアセットの名前を表示して並べ替えることができます。
  • 名前順で並べ替え: アセットカテゴリとその中にあるすべてのアセットをアルファベット順に並べ替えます。

両方のビューでアセットを追加、再利用、編集できます。 

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

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

検索を使用してアセットを検索する

タイプでフィルターを使用して、ドキュメントアセットをカラー文字スタイルコンポーネントでフィルターします。詳しくは、アセットの検索とフィルターを参照してください。

アセットにカーソルを合わせる

アセットにカーソルを合わせる

アセットのサムネール上にカーソルを合わせると、次の情報が表示されます。

  • カラー: 16 進値またはカスタムカラー名が表示されます。
  • グラデーション: グラデーション値の停止が表示されます。
  • 文字スタイル: 行間などのプロパティが表示されます。
  • コンポーネント: カンバス上にあるそのコンポーネントのインスタンス数が表示されます。

アセットの並べ替え、名前の変更、削除

  • リストビューで、各カテゴリー内のアセットをドラッグして並べ替えることができます。
  • 右クリックしてアセットの名前を変更できます。また、リストビューに切り替えて、すべてのアセットの名前を変更することもできます。コンポーネントパスをダブルクリックして、レイヤーパネルでメインコンポーネントの名前を変更することもできます。
  • ドキュメントアセットからカラー、文字スタイル、コンポーネント、またはオーディオを削除するには、右クリックして「削除」を選択します。パネルからコンポーネントを削除すると、そのインスタンスがグループ解除され、カンバス上の通常のオブジェクトに戻ります。

注意事項

  • リストビューの使用中は、コンポーネントの大きなプレビューは表示できません。
  • アセットを並べ替えて、様々なカテゴリーに分類できます。 

ヒントとテクニック

  • ドキュメントアセットのフィルターを使用すると、特定のカテゴリーまたはアセットのソースのみをフィルターして表示できます。
  • 変更がデザインにどのような影響を与えるか不明な場合は、「カンバスでハイライト」を使用して、ドキュメント全体でそのアセットのインスタンスを表示できます。
  • 未使用のコンポーネントを特定するには、カンバス上のすべてのオブジェクトを選択して右クリックし、「アセットのコンポーネントを表示」を選択して、ハイライト表示されたコンポーネントをリストの一番上にドラッグします。
  • 次の場所にカーソルを合わせると、対応する情報が表示されます。
    • グラデーション:グラデーションの開始値と終了値がツールチップに表示されます。値の間の「–」は、2 つの分岐点を持つグラデーションを示し、値の間の「...」は、複数のカラー分岐点を持つグラデーションを示します。
    • コンポーネント:カンバス上にあるそのコンポーネントのインスタンス数がツールチップに表示されます。
  • リストビューでアセットの名前を変更する場合、TAB キーを使用してリストビューの次のアセットの名前を変更し、SHIFT+TAB を押して逆方向に移動します。

アセットをグループとサブグループに整理する

ツリー表示またはパス表示内のドキュメントアセットパネルで任意の数のグループとサブグループを作成することにより、ドキュメントアセットを簡単に整理できます。

  • ツリー表示:階層に配置されたグループとサブグループが表示されます。ドキュメントアセットパネルの右上隅にある  ツリー/パス切り替え)アイコンをクリックして、ツリー表示に切り替えます。
  • パス表示:グループパスのリストが表示され、各パスには、スラッシュ(/)で区切られたグループとそのネストされたサブグループが表示されます。パス表示は、ネストグループ構造を平坦化し、サブグループ内のすべてのアセットを簡単にスキャンできるようにします。ドキュメントアセットパネルの右上隅にある ツリー/パス切り替え)をクリックして、パス表示に切り替えます。

ツリー表示とパス表示の両方で、次の方法からアセットを整理できます。

ツリー表示(左)とパス表示(右)のドキュメントアセットパネル
ツリー表示(左)とパス表示(右)のドキュメントアセットパネル

次のいずれかの方法で、各アセットカテゴリ(カラー、文字スタイルなど)内にグループを作成します。

  • アセットを複数選択して右クリックし、選択肢から「新しいグループ」を選択します。
  • アセットカテゴリ(カラー、文字スタイル、コンポーネントなど)を右クリックし、「サブグループの作成」を選択します。
  • アセットを右クリックし、要素から「新しいグループ」を選択します。
  • アセットを右クリックして「移動先」を選択し、フォルダーアイコン、「作成」、「移動」の順にクリックします。
  • アセットを複数選択して右クリックし、「選択したアイテムの移動先」を選択してから、フォルダーアイコン、「作成」、「移動」の順にクリックします。
グループ内にサブグループを作成する
アセットを複数選択し、右クリックしてグループを作成する

グループの作成後、作成したグループを右クリックして次のいずれかを実行します。

  • サブグループを作成:サブグループを複数作成します。
  • 移動先:アセットカテゴリ内のグループにアセットを移動します。
  • グループ名を変更:グループ名をつけます。
  • グループ化解除: グループを削除し、グループ内のアセットを 1 レベル上に移動します。
  • 削除: グループとそのグループ内のアセットを削除します。

グループとサブグループを作成したら、アセットをドラッグしてそれらのグループに移動できます。または、アセットを右クリックして「移動先」を選択すると、移動先のグループにアセットを選択できます。

グループパスでスラッシュ(/)を使用して一度に複数のネストされたサブグループを作成し、パスを編集することでアセットを簡単に整理できます。詳しくは、スラッシュを使用してアセットを整理するを参照してください。

パスを編集してアセットを整理する

スラッシュ(/)を使用して、任意のアセットカテゴリ内のグループおよびサブグループを簡単に整理します。スラッシュを使用することで、次のタスクを実行できます。

  • ネストされたサブグループのあるグループを作成する
  • パスを編集してグループ解除し、アセットを移動する

ネストされたサブグループのあるグループを作成する

スラッシュ(/)を使用して、グループ内に複数のネストされたサブグループを一度に作成します。

次の場所でスラッシュを使用して、ネストされたサブグループを作成できます。

  • ドキュメントアセットパネルの「パス表示」と「ツリー表示」
  • レイヤーパネル(メインコンポーネントのみ)

グループ名の入力後、スラッシュを追加し、サブグループ名を入力して、必要な数のレベルをネストします。同じ名前のサブグループがネストレベルに既に存在する場合、2 つのサブグループが結合されます。

パスを編集してグループ解除し、アセットを移動する

パス編集の機能を使用して、一度に複数のグループ解除機能を実行するか、移動先機能とグループ解除機能を組み合わせます。

次の場所でパスを編集できます。

  • ドキュメントアセットパネルのパス表示
  • レイヤーパネル(メインコンポーネントのみ)

パスをダブルクリックして編集します。パスからグループまたはサブグループを削除すると、その中のすべてのアセットが 1 レベル上に移動します。パスから一度に任意の数のネストレベルを削除し、アセットを複数のレベルに移動できます。既に存在するパスを入力すると、すべてのアセットがそのパスに移動します。 

注意事項

  • スラッシュを含むアセット名を持つ古い XD ドキュメントをお持ちですか?このようなドキュメントを XD 50 以降で開くと、次のいずれかを実行するように求めるプロンプトが表示されます。

a. スラッシュをダッシュ(—)に置き換え、グループ階層を保持します。

b. スラッシュを新しいネストレベルに変換し、グループ階層に深度を追加します。

  • XD で Sketch ドキュメントを開くと、そのアセットのグループ化と構造が保持されます。
  • パスを編集しても、アセットは削除されません。グループとそのすべてのアセットをまとめて削除するには、グループを右クリックして「削除」を選択します。
  • レイヤーパネルでメインコンポーネントのグループを整理すると、そのコンポーネント名がドキュメントアセットパネルに反映されます。
  • XD クラウドドキュメントからリンクされたライブラリを公開すると、すべてのグループとサブグループがライブラリに保持されます。
  • デザインスペックを公開するときに、アセットのグループパスは表示されません。

ヒントとテクニック

  • ドキュメントアセットをアートボードで既に整理している場合は、アートボード名を右クリックして、「アセットでコンポーネントを表示」、「アセットのカラーを表示」、「アセットで文字スタイルを表示」のいずれかを選択します。 選択したアセットカテゴリのすべてのアセットが強調表示され、ドキュメントアセットで選択されます。これらのアセットのいずれかを右クリックし、選択肢から「新しいグループ」を選択して、これらすべてのアセットを含むグループを簡単に作成します。
  • ドキュメントアセットに名前が付けられていて、それらをすばやくグループ化する場合は、検索を使用して、検索条件に一致するようにそれらのアセットを絞り込みます。そして、フィルターされたアセットだけでグループをすばやく作成できます。

ドキュメントアセットの整理に関するプロ向けのその他のヒントについては、次のビデオをご覧ください。

アセットの共有と公開

これでドキュメントアセット内に、再利用可能なカラー、文字スタイル、コンポーネントをすべて作成できました。この後は、Creative Cloud ライブラリを使ってデザインシステムアセットを公開し、チーム内で共有する方法をご確認ください。

詳細情報

アセットの操作について詳しくは、以下のビデオをご覧ください。


次のステップ

ここでは、XD のアセットとライブラリの操作方法について説明しました。さらに一歩踏み込んで、ライブラリを使用して、アセット、コンポーネント、デザインシステムを共有する方法や、既存の XD クラウドドキュメントをライブラリに移行する方法をご確認ください。

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

コミュニティで質問

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

ヘルプをすばやく簡単に入手

新規ユーザーの場合