マニュアルキャンセル

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

検索

最終更新日 : 2021年9月3日

Adobe XD ユーザーガイド
はじめに
デザイン
1. アートボード、ガイド、レイヤー
2. シェイプ、オブジェクト、パス
3. テキストとフォント
  1. 描画ツールとテキストツールの操作
  2. Adobe XD のフォント
4. コンポーネントとステート
5. マスキングと効果
6. レイアウト
7. ビデオと Lottie アニメーション
プロトタイプ
共有、書き出し、およびレビュー
デザインシステム
クラウドドキュメント
統合とプラグイン
XD iOS 版および Android 版
1. モバイルデバイスでプレビュー
2. Adobe XD モバイル版に関する FAQ
トラブルシューティング
1. 既知の問題と修正された問題
  1. 既知の問題
  2. 解決済みの問題
2. インストールと更新
3. 起動時のクラッシュ
4. クラウドドキュメントおよび Creative Cloud ライブラリ
5. プロトタイプ作成、公開、レビュー
6. 読み込み、書き出し、その他のアプリの操作

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

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

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

XD の使用が初めての場合

XD を入手

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

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

アプリケーションを更新

新機能のご紹介

始める前に

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

コンポーネントの用語

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

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

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

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

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

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

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

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

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

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

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

例

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

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

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

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

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

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

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

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

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

ベストプラクティス

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

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

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

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

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

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

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

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

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

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

シナリオ 1：

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

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

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

シナリオ 2：

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

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

シナリオ 3：

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

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

シナリオ 4：

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

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

注意事項

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

ベストプラクティス

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

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

Creative Cloud ライブラリからのネストされたコンポーネントの追加

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

よくある質問

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

いいえ。最新バージョンの XD でネスト化コンポーネントを含む既存ドキュメントを開くと、XD はそれらのコンポーネントを新モデルに自動移行し、素早く作業を開始できます。

XD がドキュメントを開いたとき、それらの特定コンポーネントはアセットパネルのバージョンと一致しませんでした。データを失わずに移行するため、それらのメインコンポーネントはキャンバス上のインスタンスに変換されています。メインコンポーネントをキャンバスに戻す場合は、外部インスタンスを右クリックし、「メインコンポーネントを編集」を選択します。また、メインコンポーネントをキャンバスでインスタンスのように見せたい場合は、必要なオーバーライドをインスタンスからメインコンポーネントに転送できます。

更新を取得するには、リンクされたドキュメントを最新バージョンの XD で開きます。また、今後リンクされるドキュメントも、最新バージョンの XD で開いて正しいビヘイビアーを確かめる必要があります。

XD 34 以降、XD はメインコンポーネントを別のメインコンポーネント内にネストすることをサポートしなくなりました。以前のようにネスト化メインコンポーネントを作成しようとすると、内側のコンポーネントがインスタンスに変更されます。