コンポーネントを使用して、サイト全体で繰り返しのレイアウトやコンテンツを効率的に管理しましょう。
コンポーネントを使用することで、要素や子要素からカスタマイズ可能なブロックを作成し、サイト全体で効率的で拡張可能なデザインワークフローを維持できます。これにより、再発するレイアウトを個別に修正する必要なく、1か所で修正するだけですべての再発するレイアウトに影響を与えることができます。
コンポーネントを使用して以下のことができます：
このレッスンでは、次のことを学びます：
サイト内のほとんどの要素や要素グループからコンポーネントを作成できます。これは以下の4つの方法で行えます：
次の手順で新しいコンポーネントを作成できます：
次の手順で新しいコンポーネントを作成できます：
次の手順で新しいコンポーネントを直接コンポーネントパネルから作成できます：
詳しくは、メインコンポーネントの編集方法をご覧ください。
キーボードのショートカットキーを使用して、コンポーネントパネルを開き新しいコンポーネントを作成できます：
上記のいずれかの方法でコンポーネントを作成した後、主なコンポーネントを編集することになります。主なコンポーネントへのすべての変更は、そのコンポーネントのすべてのインスタンスに反映されます。いつでも、以下の方法で任意のコンポーネントインスタンス内に主なコンポーネントを編集できます：
詳細については、主なコンポーネントの編集方法 を確認してください。
コンポーネントは、コンポーネントパネルからアクセスできます。（キーボードショートカット Shift + A を使用して、直接コンポーネントにアクセスできます。）
コンポーネントを作成したら、サイト内のどこでも再利用できます。
コンポーネントインスタンスを選択すると、緑色でハイライト表示されてアウトラインが表示されます。[コンポーネントパネル] を開いて、サイト内で各コンポーネントが何回使用されているかを確認できます。
キーボードショートカット Command + E（Mac の場合）または Control + E（Windows の場合）を使用して、クイック検索を使用してキャンバスにコンポーネントを追加することもできます。。
注意: コンポーネントインスタンスを複製することは可能です（コピー＆ペースト、右クリック、またはキーボードショートカットの使用を使用して複製することができます）、しかし、主なコンポーネントをネイティブで複製することは現時点ではできません。代わりに、コンポーネントインスタンスをリンク解除し、そのリンク解除された要素または要素グループから新しいコンポーネントを作成できます。
主なコンポーネントをダブルクリックすると、主なコンポーネントに入り、コンポーネントの要素階層をナビゲーターパネルで表示できます。コンポーネントの要素階層は、主なコンポーネントからのみ表示されます（つまり、コンポーネントインスタンス内からでは表示されません）。
コンポーネントの場所を確認するためには、ナビゲーターパネルを開いてください。主なコンポーネントを編集した後、それを展開または折りたたんで、その中身を確認できます。これには他のネストされたコンポーネントも含まれます。
さまざまな方法でコンポーネントを操作し、編集する手順を説明しましょう。
コンポーネントのすべてのインスタンスに対して同じ変更を行うには、主なコンポーネントを編集する必要があります。コンポーネントインスタンス上で主なコンポーネントを編集するには、以下のいずれかの方法を使用できます：
コンポーネント・インスタンスを右クリックし、"Edit component "を選択してメイン・コンポーネントを編集する。
コンポーネント・インスタンスを選択し、ラベルの "鉛筆 "アイコンをクリックしてメイン・コンポーネントを編集する。
コンポーネントインスタンスを選択する。スタイルパネル、要素設定パネル、またはインタラクションパネルを開き、"Edit component "ボタンをクリックしてメインコンポーネントを編集します。この例では、ボタンはスタイルパネルに表示されています。
コンポーネントインスタンスビューでは、Element settings panel.内でコンポーネントプロパティのデフォルト値を見つけることができます。
コンポーネントプロパティを使用すると、メインコンポーネント内の特定の要素の値（テキスト、リッチテキスト、画像、ビデオ、可視性など）をコンポーネントインスタンスで変更できるようになります。また、コンポーネントプロパティをCMSフィールドに接続して、CMSコレクションからデータを取得することもできます。コンポーネントプロパティの定義について詳しく読むことができます。
お知らせ:注意: スタイルプロパティを変更するサポートは開発中
メインコンポーネントを編集すると、すべてのコンポーネントインスタンスに影響が出ます（特定の要素にコンポーネントプロパティが適用されている場合を除く）。
メインコンポーネントを編集する際に、構造や要素の順序を変更すると、サイト全体でコンポーネントインスタンスに同時に影響が出ます。
たとえば、カードデザインがコンポーネントとして設定されているとします。カードコンポーネントには、ヘッディング要素、段落要素、ボタン要素が含まれていますが、ボタン要素はカードの一番下に配置されています。カードのメインコンポーネントを編集し、ボタンをカードの一番下から一番上に移動する場合、その変更はサイト全体のカードコンポーネントのすべてのインスタンスに影響を与えます。
2つのコンポーネント・インスタンスが、それぞれ同じコンテンツとレイアウト（見出し、段落、いくつかのボタン）を表示します。
メインコンポーネントを編集する際、ボタンをコンポーネントの上部に移動した場合、そのボタンの位置はコンポーネントのすべてのインスタンスに影響を与えます。
メインコンポーネントの編集は、特定のコンポーネントインスタンスで明示的に変更されていない限り、そのコンポーネントのすべてのインスタンスに影響を与えます。コンポーネントプロパティの定義とコンテンツの変更について詳しく読むことができます。
メインコンポーネントの編集が終了したら、以下の方法でメインコンポーネントから抜けることができます：
デザイナーの左上隅にある「Back to instance」をクリックして、メインコンポーネントから抜けることができます。
メインコンポーネントの編集を停止した後、コンポーネントインスタンス内の要素を編集しても、その特定のコンポーネントインスタンスにのみ影響があります。
サイトのコンテンツをエディタで更新するためにコンテンツエディタを招待した場合、コンポーネント要素にコンポーネントプロパティで変更が加えられていない場合、一貫してすべてのインスタンスに適用される変更は、他のすべてのインスタンスに適用されます。
これは、編集対象の要素にカーソルを合わせると表示される情報のメモでも示されています。
コンテンツエディタがすべてのコンポーネントインスタンスに一貫して影響を与える要素を変更すると、情報提供のメモが表示され、変更がすべての同期された要素に影響を及ぼすことが伝えられます。
一方、コンテンツエディタがコンポーネントプロパティを介して変更されたコンポーネント要素に変更を加えた場合、その変更は編集中のコンポーネントインスタンスにのみ適用されます。
コンポーネントの名前を変更するには：
クイックファインドからコンポーネントの名前を変更するには、
注意： キーボードショートカット Command + E（Macの場合）または Control + E（Windowsの場合）でクイックファインドにアクセスできます。
コンポーネントを完全に削除するには：
注意： ナビゲーションバー、フッター、一部のフォームなど、各インスタンスにまったく同じコンテンツがあるコンポーネントを作成する場合、そのコンポーネントの要素にコンポーネントプロパティを作成する必要はありません。
コンポーネントプロパティを使用すると、コンポーネント内の特定の要素をコンポーネントインスタンスで一意の値で変更できます。
これは、構造が均一である必要があるが、各インスタンスに固有のコンテンツがある再発レイアウトパターンに適しています。または、異なるコンポーネントインスタンスで特定の要素を非表示または表示することにより、構造をわずかに調整したい場合です。
次に進みましょう：
サポートされているコンポーネントプロパティは次の通りです：
お知らせ： スタイルプロパティを変更するサポートは開発中です。
コンテンツプロパティを使用すると、コンポーネントインスタンス内で要素のコンテンツをカスタマイズできます。例えば、複数のページで使用するヒーローセクションのデザインを持っているとします。デザインの構造は変更する必要はありませんが、各コンポーネントインスタンスに異なる段落コンテンツが必要です。この段落に対してコンポーネントプロパティを作成し、コンポーネントインスタンスが表示される場所でその段落コンテンツを変更できます。
段落のコンテンツ（左）は、コンポーネントインスタンス内でコンポーネントプロパティ（右）を介して変更されます。
サポートされている要素は次の通りです：
可視性プロパティを使用すると、特定の要素を表示または非表示にして、異なるコンポーネントインスタンスでレイアウトのバリエーションを柔軟に作成できます。
例えば、ナビゲーションバーコンポーネント内のリンクやボタンを表示または非表示にすることで、ナビゲーションバーバリエーションを作成できます。また、異なるアイコンを表示または非表示にすることで、ボタンのバリエーションを作成することもできます。画像、動画、ボタン、リンクなど、コンポーネント内の複数の異なる要素を表示または非表示にすることで、セクション全体のバリエーションを作成することもできます。
可視性プロパティはすべての要素で使用できます。
ナビゲーションバーコンポーネントには「今すぐ購入」ボタンが含まれています。このボタンの表示は、可視性プロパティを介して管理されています。ホームページのコンポーネントインスタンスでは、ボタンが表示されています（上の例）。チェックアウトページのコンポーネントインスタンスでは、チェックアウト中には不要なためボタンが非表示になっています（下の例）。
プロのヒント：コンポーネントインスタンス内の非表示要素を選択するのに問題がある場合、ナビゲータを開いてコンポーネントの要素階層から非表示要素を選択します。
ナビゲータパネルでコンポーネント階層を展開すると、コンポーネント内の非表示要素を見つけることができます。非表示の要素は、"取り消し線付きの目 "のアイコンで表示されます。この例では、"Button Primary "が可視条件によって非表示になっています。
重要なポイント: "hidden"に設定された要素は、DOM（Document Object Model）の順序から削除されます。DOMの順序は、サイトの論理的な構造とそのアクセスおよび操作方法を指定するものです。そのため、非表示のコンポーネント要素はアシストデバイスによって読み取られず、サイト訪問者にとってよりアクセス可能な体験を提供します。また、繰り返しコンテンツが排除され、SEOにも悪影響を及ぼしません。
サイト上のコンポーネントインスタンスのプロパティ値を変更するには、まずメインコンポーネントでコンポーネントプロパティを作成する必要があります。その後、これらのメインコンポーネントプロパティをキャンバス上または要素設定パネルで直接オーバーライドして、異なるコンポーネントインスタンスにカスタムコンテンツを作成できます。
メインコンポーネントで新しいプロパティを作成し、同時にそのプロパティを特定のコンポーネント内の要素に接続することができます。あるいは、メインコンポーネントで直接コンポーネントプロパティを作成し、後で要素をコンポーネントプロパティに接続することもできます。
メインコンポーネントで新しいプロパティを作成し、そのプロパティを特定のコンポーネント内の要素に直接接続することができます。新しいプロパティを作成し、要素に接続する手順は以下の通りです：
メイン・コンポーネント内の要素を選択して、要素設定パネルにその要素の新しいコンポーネント・プロパティを作成する。
プロパティのデフォルト値を定義するには、Property settings をクリックします
要素のプロパティ値を変更し、メインコンポーネントを終了した後、要素を選択したままで、新しいコンポーネントプロパティは Element settings パネル の Component properties の下に表示されます。ここから、選択したコンポーネントインスタンスの値を編集できます（つまり、コンポーネントインスタンス内で選択した特定の要素に対してカスタムコンテンツを作成できます）。
青でハイライトされたコンポーネントプロパティ名は、非デフォルト値のコンポーネントプロパティ（つまり、選択したコンポーネントインスタンスに設定されたコンポーネントプロパティ値）を示しています。
また、コンポーネントインスタンス内で編集したい要素をダブルクリックすることで、キャンバス上で選択した要素のコンテンツの値も編集できます。コンポーネントプロパティに接続された要素は、コンポーネントインスタンス内のキャンバス上で点線の緑色のアウトラインで示されます。プロパティの値を変更する方法について詳しくはこちら。
その後、プロパティを要素に接続するために:
メイン・コンポーネントを編集して、要素設定パネルに新しいコンポーネント・プロパティを作成します。後で、これらのプロパティをコンポーネント内の要素に接続することができます。
コンポーネントプロパティのデフォルト値、タイプを定義するには、Element settings panel > Component properties でコンポーネントプロパティをクリックします。
要素のプロパティ値を変更し、メインコンポーネントを終了した後も、要素が選択されたままで、新しいコンポーネントプロパティはElement settings panelパネル内の Component propertiesの下に表示されます。ここで、選択したコンポーネントインスタンスの値を編集できます（つまり、コンポーネントインスタンス内で選択した特定の要素のカスタムコンテンツを作成できます）。
青色で強調表示されたコンポーネント・プロパティ名は、デフォルト値以外の値を持つコンポーネント・プロパティを示します（すなわち、選択されたコンポーネント・インスタンスに設定されたコンポーネント・プロパティ値）。
また、コンポーネント・インスタンス内で編集したい要素をダブルクリックすることで、選択した要素の内容の値をキャンバス上で編集することもできます。コンポーネント・プロパティに接続された要素は、コンポーネント・インスタンス内のキャンバス上で緑色の点線の輪郭で示されます。 プロパティ値の変更について、詳しくはこちらをご覧ください。
プロパティを作成したら、メインコンポーネントを終了 して個々のコンポーネントインスタンスに戻ります。ここで、コンポーネントプロパティの値を変更してコンテンツや表示をカスタマイズできます。
コンポーネントインスタンスを変更する方法は2つあります：
コンポーネントプロパティ内の静的コンテンツを編集する最も迅速な方法は次の通りです。
また、コンポーネントインスタンス内で編集したい要素をダブルクリックしてキャンバス上で選択したコンポーネントインスタンスの値を編集することもできます。
知ってると得**:** 選択したコンポーネントインスタンスの要素プロパティの値を表示し、変更するには、Element settings パネルを開いて、そこから直接値を変更することもできます。
コンポーネントインスタンスを選択し、要素設定パネルを開くことで、すべてのコンポーネントプロパティとその値の概要を確認できます。また、このセクションから直接値を変更することもできます。
コンポーネントプロパティをデフォルト値に戻すには、すべてのプロパティを一度にリセットするか、個別にリセットすることができます。
すべてのプロパティを一度にデフォルト値にリセットするには：
ご不明点があれば、どうぞお知らせください。
個別のプロパティをデフォルト値にリセットするには：
一貫したデザインを保ちながら、異なるCMSコレクションページでレイアウトを再利用するために、メインコンポーネントから切り離すことなく、コンポーネントインスタンス内でCMSコレクションデータを接続して表示することもできます。
次のCMSフィールドにプロパティを接続できます：
注意：コンポーネントプロパティをコレクションフィールドデータに接続するには、すでにサイト内でコレクションを作成している必要があります。
コレクションページでコンポーネントプロパティをCMSコレクションデータに接続するには：
このようにして、コンポーネントインスタンスは、選択したコレクションフィールドのコンテンツを表示します（コレクションフィールドにデータが入力されている場合）。
紫色の「点」アイコンをクリックすると、接続するコレクションフィールドのリストが表示されます。この例では、「Heading 2 - Text」をコレクションフィールドに接続しています。
要素をコレクションフィールドから切断するには：
要素設定パネルでプロパティを管理することで、メインコンポーネントのプロパティのリストを確認し、それらがコンポーネント内の要素に接続されているか切断されているかを判断し、各プロパティとやり取りしてデフォルト設定やプロパティ値を調整できます。
要素設定パネルの Manage properties セクションには、次の2つの方法でアクセスできます。
代わりに、コンポーネントの親要素ではなく、最初にコンポーネントの子要素をクリックした場合にも、コンポーネントプロパティを管理できます。
ここから、各コンポーネントプロパティと対話して以下の操作ができます：
デフォルトのプロパティ値を更新するには：
プロパティの名前を変更するには：
どの要素（または要素）がプロパティに接続されているかを判断するには：
プロパティを削除するには：
プロパティがまだコンポーネントの要素に接続されている状態で削除すると、そのプロパティがその要素から切断されることになります。もしプロパティが複数の要素に接続されていた場合、それらの要素からも切断されます。
削除すると、それらのプロパティはメインコンポーネント内でまだ定義されたままになり、それぞれのインスタンスから個別に削除されるまで、インスタンスに表示され続けます。
各インスタンスからコンポーネント プロパティを個別に削除するには：
メインコンポーネントから要素を削除すると、他のコンポーネント インスタンス内の対応する要素も削除されます（その要素がコンポーネント プロパティを介して一意の内容に変更されている場合でも同様です）。ただし、コンポーネント プロパティとそれに適用された値は、各インスタンスには残ります（そのプロパティに元々接続されていた要素が削除されている場合でも同様です）。
以前に使用したコンポーネント プロパティが残っているため、新しい要素または既存の要素をそれに接続することができます。それらの要素は、以前に設定されたプロパティに適用された値（テキストの内容の更新、画像の設定、表示/非表示の切り替えなど）を反映します。同じプロパティに複数の要素を接続することもできるため、各要素が同じコンテンツや表示設定を表示することができます。
例えば、2つの異なる状態を持つインタラクションを作成したとしますが、各状態のコンテンツが常に同じである必要があります。各状態の要素を同じプロパティに接続して、値を一貫させることができます。
新しいプロパティを追加するには：
メイン・コンポーネントを編集して、要素設定パネルに新しいコンポーネント・プロパティを作成します。後で、これらのプロパティをコンポーネント内の要素に接続することができます。
コンポーネント・プロパティのデフォルト値は、Element settings panel > Component properties でコンポーネント・プロパティをクリックすることで、そのタイプを含めて定義することができます。
注意: 新しいプロパティは、コンポーネントの要素と接続するまで切断された状態です。
メインコンポーネントのManage properties セクションで、コンポーネント要素からプロパティを切断できます。コンポーネント要素からプロパティを切断するには：
**
注意： プロパティが複数の要素に接続されている場合、各接続された要素に対して切断プロセスを繰り返す必要があります。
紫色の "点 "アイコン（または紫色のドロップダウンメニュー）をクリックして、特定の要素に接続する別のプロパティを選択できます。
コンポーネントを他のコンポーネントの中にネストすることで、複雑なレイアウトをより簡単かつ効率的に構築・保守することができます。例えば、ボタンを1つのコンポーネントとして作成することができます。そして、そのボタンのコンポーネントをサイト内のさまざまな他のコンポーネントの中にネストすることができます。ナビゲーションコンポーネント、ヒーローセクションコンポーネント、またはフィーチャーカードコンポーネントなどの中に配置することができるでしょう。
「Button」コンポーネントは「Card」コンポーネントの中にネストされており、左側のナビゲーターパネルの要素階層にも表示されています。
これにより、各コンポーネントを独立して1か所で更新し、それらの変更が他のすべてのインスタンスに影響を与えるのを確認できます。
コンポーネントをネストする方法は2つあります：
既存のコンポーネントを別の既存のコンポーネントにネストするには：
既存のコンポーネント内に新しいコンポーネントを作成するには：
知っておくと便利： メインコンポーネントを編集して新しいネストされたコンポーネントを作成することもできます。その後、新しいネストされたコンポーネントにしたい要素を右クリックし、「コンポーネントを作成」を選択します。または、キーボードショートカット Command + Shift + A（Macの場合）または Control + Shift + A（Windowsの場合）を使用します。
さらに、既にコンポーネントが含まれている親要素からもコンポーネントを作成することができます。例えば、非コンポーネントのカード（例：divブロック）がボタン要素を含んでいるとしましょう。ボタン要素をコンポーネントに変換しました。そして、今度はカード全体をコンポーネントに変換したいとします。ボタンコンポーネントの親要素（つまり、カードのdivブロック）を選択し、divブロックから新しいコンポーネントを作成します。これにより、ボタンコンポーネントがカードdivブロックコンポーネントの中にネストされることになります。
コンポーネントのプロパティが設定されたコンポーネントを別のコンポーネントの中にネストする際、ネストされたコンポーネントのプロパティを親コンポーネントのプロパティに接続するオプションがあります。これにより、ネストされたコンポーネントのプロパティは親コンポーネントのインスタンスから変更された値を使用できるようになります。
例えば、カードがあるとしましょう。そのカード内には見出し、段落テキスト、ボタンがあります。カード自体がコンポーネントです。カード内のボタン要素もコンポーネントです（つまり、ネストされたコンポーネント）。各要素にコンポーネントのプロパティが設定されている限り、ボタンのテキストをカードのテキストに接続することができます。
ネストされたコンポーネントのプロパティを親コンポーネントのプロパティにリンクするには：
この例では、ネストされたボタンコンポーネントのテキストブロックのプロパティを親のカードコンポーネントのプロパティに接続しています。
ネストされたボタンコンポーネントのテキストブロックプロパティを親カードコンポーネントの見出しプロパティに接続した後、ボタンコンポーネントは親プロパティの値を表示するようになりました。
コンポーネントのインスタンスを切断し、メインコンポーネントから独立して変更を加える方法は以下の通りです：
一度切断されると、デザイン内の他のリンクされた同じコンポーネントのインスタンスを編集しても、切断されたインスタンスには影響を与えません。
コレクションリストアイテムとコレクションページ内にコンポーネントを追加または作成することができます。そして、コレクションのフィールドをコンポーネントのプロパティに接続し、コンポーネント内で動的なデータを使用することができます。
コレクションリストアイテムにコンポーネントを追加するには、コレクションリストの外部でコンポーネントを作成し、その後キャンバスまたはナビゲーター内のコレクションリストアイテムにドラッグアンドドロップします。
すでにコレクションリストアイテムがCMSコレクションに接続されている場合、そのコレクションリストアイテムからコンポーネントを作成することはできません。既存のコレクションリストアイテムをコンポーネントに接続するには、まずすべてのCMSフィールドを切断し、次にコレクションリストアイテムをコンポーネントに変換し、最後にコレクションリストアイテムをCMSコレクションに再接続します。
