マニュアル キャンセル

Adobe XD でのネストされたコンポーネントの操作

ここでは、Adobe XD のデザインシステムでネストされたコンポーネントを操作する方法について説明します。

デザインシステムの構築には、再利用のしやすさと柔軟性が重要です。それには、精密なレベルでコンポーネントを作成できる必要があります。コンポーネント作成で XD を使えば、コンポーネントの相互ネスト化や、メニューやカードベースのレイアウトなどの複雑なオブジェクトの作成ができます。

以下では、ネストされたコンポーネントを作成して使用し、シームレスなデザインエクスペリエンスを実現する方法について説明します。

コンポーネント
XD でのネストされたコンポーネントの操作

XD の使用が初めての場合

XD を入手

このアプリケーションの基本を学ぶ

Adobe XD を既にお持ちですか?

アプリケーションを更新

新機能のご紹介

始める前に

以下の概念に精通してください。

コンポーネントの用語

まず、ネストされたコンポーネントに関連する用語について説明します。

  • メインコンポーネント:メインコンポーネントは、すべてのコンポーネントプロパティを定義および制御するコンポーネントです。
  • コンポーネントインスタンス:コンポーネントインスタンスはメインコンポーネントのコピーであり、メインコンポーネントに加えられた変更を継承します。
  • ネストされたコンポーネント:ネストされたコンポーネントは、別のコンポーネント内のコンポーネントです。
  • 外部コンポーネント:外側コンポーネントは、内部に別のコンポーネントを含むコンポーネントです。

ネスト化コンポーネントを作成

ネスト化コンポーネントは、堅牢なデザインシステムの作成に役立ちます。メインコンポーネントを更新すると、その中にネストされているコンポーネントが更新された場合でも、すべてのインスタンスが更新内容を受け取ります。

ネスト化コンポーネントの作成では、以下のアプローチを利用できます。

アプローチ A:コンポーネントのインスタンスをコピーしてグループ内にペーストし、コンポーネントに変換します。

  1. メインのボタンコンポーネントを作成します。
  2. ボタンコンポーネントのインスタンスをコピーしてグループ内にペーストします。
  3. グループを選択し、コンポーネントに変換します。 

アプローチ B:既存のコンポーネントの中に、コンポーネントのインスタンスをコピー&ペーストします。

ボタンコンポーネントのインスタンスをグループの中にペーストします。

  1. メインのボタンコンポーネントを作成します。
  2. ボタンコンポーネントのインスタンスを別のコンポーネント内にコピー&ペーストします。

アプローチ C:コンポーネントの一部にドリルダウンし、その部分をコンポーネントに変換します。

  1. メインダイアログコンポーネントを作成します。
  2. コンポーネント内のボタンにドリルダウンします。
  3. ボタンをコンポーネントに変換します。

アプローチ A を使用して、ダイアログコンポーネントを作成します。

ボタンインスタンスをペースト

インスタンスをペーストする

ボタンコンポーネントのインスタンスをグループの中にペーストします。

コンポーネントに変換する

コンポーネントにする

グループを選択し、コンポーネントに変換します。

ボタンコンポーネントを作成する

ボタンコンポーネントを作成する

ダイアログのボタンコンポーネントを作成します。

ダイアログコンテナを作成する

ダイアログコンテナ

テキストや他のオブジェクトを内部に持つダイアログコンテナをグループとして作成します

ベストプラクティス

ネストされたコンポーネントを作成する際のベストプラクティスを以下に示します。

  • 複数のコンポーネントが内部にネスト化されたコンポーネントを作成できます。ただし、コンポーネントが多くのオブジェクトを伴う複数ステートを持つ場合、パフォーマンスが低下する可能性があります。そのような場合、最適なパフォーマンスを得るために、コンポーネントを最大 3 レベルの深度にネストして、1 レベル当たりのステート数を 1 コンポーネント当たり最大 10 ステートに制限できます。
  • コンポーネントをそれ自体の中にネストしないでください。コンポーネントが自己参照するため、無効なコンポーネントになる可能性があります。
  • 外側のメインコンポーネントの中に、複数のステートがあるネストされたコンポーネントが含まれている場合、ネストされたコンポーネントのステートを切り替えることができます。そのステートの変更は、外側のコンポーネントのすべてのインスタンスに反映されます。

ネスト化コンポーネントの同期

ネスト化コンポーネントを同期することで、メインコンポーネント内のネスト化コンポーネントにされた変更が、そのメインコンポーネントのすべてのインスタンスに反映されます。 

その働きを見てみましょう。 

例 1:メインボタンから変更を受け取るコンテナ内のボタン。

  1. 最初のメインコンポーネントとしてボタンを作成します。
  2. トグルメニュー内にボタンのインスタンスをネストします。
  3. コンテナ内にトグルメニューのインスタンスをネストします。

メインボタンコンポーネントに加えられたすべての変更は、トグルメニューとコンテナ内にネストされたすべてのボタンに反映されます。

ボタンコンポーネントのインスタンスをグループの中にペーストします。

次に、メインボタンの 2 つのインスタンス、メイントグルメニューの 2 つのインスタンス、およびメインコンテナの 1 つのインスタンスを作成します。

いくつかのシナリオを見てみましょう。

シナリオ 1:

シナリオ 1

メイントグルメニュー内にネストされたボタンのカラーを青に変更します。 

トグルメニューのインスタンス内とコンテナ内にネストされたすべてのボタンが青へのカラー変更を取得しました。

ただし、メインボタンの 2 つのインスタンスはカラーを変えません。ネスト化コンポーネントへの変更はそれらのコンテナに関連付けられるためです。カラー変更はトグルメニュー内のボタンのインスタンスにのみ適用されます。 

シナリオ 2:

シナリオ 2

メインコンテナ内のボタンのカラーをピンクに変更します。コンテナのインスタンス内のボタンもピンクに変わります。

他のボタンはカラー変更を取得しないことに注意してください。ネスト化コンポーネントへの変更はそれらのコンテナに関連付けられるためです。カラー変更はコンテナのトグルメニュー内のボタンのインスタンスにのみ適用されます。 

シナリオ 3:

シナリオ 3

コンテナインスタンス内にネストされたボタンのカラーを緑に変更します。

この変更は、メインコンポーネントではなくインスタンスでオーバーライドとして行われたため、他のボタンはいずれも緑色の変更を取得しません。 

シナリオ 4:

シナリオ 4

シナリオ 3 から続けて、メインコンテナ内にネストされているボタンのカラーを紫に変更します。 

コンテナインスタンスのネスト化ボタンは、既にオーバーライドされているため、カラーを変更しません。

注意事項

  • ネスト化コンポーネントはメインコンポーネントにできません。そのため、メインコンポーネントに変更を加える必要がある場合は、ネスト化コンポーネントを右クリックして、メインコンポーネントを編集を選びます。
  • 外部コンポーネントのインスタンス内のネスト化コンポーネントが交換された場合、メインのネスト化コンポーネントのメインステートにリセットでは、交換されたコンポーネントを伴うインスタンスを変更しません。

ベストプラクティス

ネストされたコンポーネントのインスタンスをオーバーライドする際のベストプラクティスを以下に示します。

  • コンポーネントのバリエーションを作成して再利用するには、インスタンスをオーバーライドするのではなく、メインコンポーネントでステートを作成します。
  • インスタンスをオーバーライドする場合は、オーバーライドするプロパティがメインコンポーネントからの更新を必要としないことを確認してください。例えば、ボタンコンポーネントのテキストをオーバーライドすると、メインコンポーネントに対して、ラベルは異なるものになりますが、サイズとカラーはその後も同期されます。

Creative Cloud ライブラリを使用すると、デザインシステムのスタイルとコンポーネントを配布して、ドキュメント全体で一貫して再利用できます。Creative Cloud ライブラリを通じてデザインシステムを作成して配布するには、ドキュメントアセットパネルにカラー、文字スタイル、コンポーネントを追加してデザインシステムアセットをキュレートし、それらをライブラリとして公開して XD や他の Creative Cloud アプリケーションすべてで再利用します。Creative Cloud ライブラリの使用方法について詳しくは、XD での Creative Cloud ライブラリによる作業を参照してください。

よくある質問

XD の以前のバージョンでは、ネスト化コンポーネントで行われた変更は、外部コンポーネントのインスタンスで更新されませんでした。エクスペリエンスを向上させるには、最新バージョンの XD でドキュメントを開きます。

詳細情報

XD のコンポーネントについて詳しくは、以下のビデオをご覧ください。
視聴時間:10 分

次のステップ

ここでは、XD のコンポーネントの操作方法について説明しました。さらに一歩踏み込んで、フィードバックを得るためにデザイナーや関係者とデザインを共有する方法についてご確認ください。

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

コミュニティで質問する

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

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

新規ユーザーの場合