コンポーネント概要 - Webflow ヘルプ

コンポーネントを使用して、サイト全体で繰り返しのレイアウトやコンテンツをより効率的に管理します。

コンポーネントは、要素や子要素からカスタマイズ可能なブロックを作成し、一貫性があり効率的でスケーラブルなデザインワークフローを維持する力を与えます。これらのブロックをサイト全体で再利用し、単一の場所で修正することで、繰り返しのレイアウトを個別に修正する手間を省けます。

コンポーネントの作成方法

Webflowで視覚的にコンポーネントを作成するか、DevLinkを使用して外部コードベースから既存のコンポーネントをインポートできます。このセクションは視覚的開発に焦点を当てています。

要素または要素のグループからコンポーネントを作成し、サイト全体で各インスタンスが同一か、コンテンツ、レイアウト、スタイルの変更を許可するかを選択できます：

• インスタンスごとに同一のコンテンツとデザイン — 繰り返しのレイアウト（例：ナビバーやフッター）用のコンポーネントを作成し、サイト全体で再利用します。コンテンツやデザインの変更は、コンポーネントのすべてのインスタンスに自動的に更新されます。
• インスタンスごとにユニークなコンテンツ — 一貫したレイアウトとデザインを持つコンポーネントを作成し、各インスタンスに異なるコンテンツを持たせることができます（例：ヒーローセクションのレイアウトで、各インスタンスにユニークなテキスト、画像、またはビデオを持たせる）。コンポーネントのプロップスとスロットを使用します。
• インスタンスごとに異なるスタイルバリアント — 定義済みのスタイルとレイアウトオプションを持つコンポーネントを作成します（例：ソリッドとアウトラインのボタン、または水平と垂直のカードレイアウト）。コンポーネントのスタイルバリアントを使用すると、別々のコンポーネントを作成することなく、各インスタンスのデザインをカスタマイズできます。

コンポーネントを作成するには：

1. コンポーネントに変換したい要素を選択します
2. コンポーネントパネル、スタイルパネル、または要素設定パネルを開きます
3. パネルの上部にある「コンポーネントを作成」アイコンをクリックします
4. コンポーネントに名前とオプションの説明を付け、作成をクリックします

既存のコンポーネントを複製するには、コンポーネントを選択し、「その他のオプション」ドットをクリックして、複製を選択します。

コンポーネントを作成した後はメインコンポーネント内にいることになります。つまり、メインコンポーネントへの変更は、そのコンポーネントのすべてのインスタンスに反映されます。いつでも、以下の方法で任意のコンポーネントインスタンスでメインコンポーネントに入ることができます：

• コンポーネントインスタンスをダブルクリック
• インスタンスを右クリックしてコンポーネントを編集をクリック
• インスタンスを選択してラベルの「鉛筆」アイコンをクリック
• インスタンスを選択して右パネルの右上にある「レンチ」アイコンをクリック

メインコンポーネントの編集について詳しくはこちら.

コンポーネントの使用と再利用方法

コンポーネントを作成したら、サイトのどこにでも再利用できます：

1. コンポーネントパネルを開く
2. コンポーネントにカーソルを合わせてプレビューを表示
3. 任意のページにコンポーネントをクリックしてドラッグ
4. キャンバス上またはナビゲーターに直接コンポーネントインスタンスをドロップ

コンポーネントインスタンスを選択すると、緑色で強調表示され、アウトラインが表示されます。コンポーネントパネルを開いて、サイト内で各コンポーネントが何回使用されたかを確認します。

ナビゲーターパネルでコンポーネントの要素階層を表示するには、Optionキーを押しながらダブルクリック（Macの場合）またはAltキーを押しながらダブルクリック（Windowsの場合）するか、「メインコンポーネントを編集」アイコンをクリックします。コンポーネントの要素階層はメインコンポーネントからのみ確認できます（コンポーネントインスタンス内では確認できません）。

コンポーネントを編集する方法

コンポーネントを操作し編集するさまざまな方法を見ていきましょう：

• メインコンポーネントを編集する
• コンポーネントのプロパティ、スロット、スタイルバリアント
• コンポーネントスタイルバリアントを作成する
• バリアントプロパティを管理する
• コンポーネントインスタンスのバリアントを変更する
• コンポーネントスタイルバリアントを並べ替え、名前変更、複製、または削除する
• メインコンポーネントを終了する
• エディターでコンポーネントを編集する
• コンポーネントの名前や説明を変更する
• コンポーネントをグループ化する
• コンポーネントを削除する

メインコンポーネントを編集する

コンポーネントのすべてのインスタンスに同じ変更を加えるには、メインコンポーネントを編集する必要があります。メインコンポーネントは、次の方法で任意のコンポーネントインスタンスで編集できます：

• キャンバス上でコンポーネントインスタンスをダブルクリックする
• ナビゲーターでOption + ダブルクリック（Mac）またはAlt + ダブルクリック（Windows）する
• インスタンスを右クリックしてコンポーネントを編集をクリックする
• インスタンスを選択し、ラベルの「コンポーネントを編集」アイコンをクリックする
• インスタンスを選択し、右パネル上部の「コンポーネントを編集」アイコンをクリックする

メインコンポーネントの編集は、すべてのコンポーネントインスタンスに影響を与えます（ただし、そのコンポーネントインスタンスに特定の要素に適用されたコンポーネントプロパティがある場合を除く）。メインコンポーネントを編集する際、構造や要素の順序を変更して、サイト全体のすべてのコンポーネントインスタンスに同時に影響を与えることができます。

コンポーネントのプロパティ、スロット、スタイルバリアント

コンポーネントのプロパティ（プロップス）、スロット、スタイルバリアントを使用すると、各コンポーネントインスタンスにユニークな設定を作成できます：

• プロップス — メインコンポーネント内の個々の要素設定（例：テキスト、リンク、画像、またはビデオ）をプロップスに接続します。これにより、コンポーネントの全体的な構造やデザインを変更せずに、各インスタンスでこれらの設定をカスタマイズできます。プロップスはCMSフィールドに接続して、CMSコレクションから動的にコンテンツを引き出すこともできます。
• スロット — スロットは、他のコンポーネントのプレースホルダーとして機能する既存のコンポーネントに配置できる要素です。これにより、各インスタンスがスロット内に異なるコンポーネントを含むことができるモジュラーなコンポーネントを構築できます。
• スタイルバリアント — 単一のコンポーネントに対して複数のデザインオプションを定義し、異なる使用ケースに合わせて外観を適応させることができます。例えば、ソリッドまたはアウトラインボタン、水平および垂直カードレイアウトなどのスタイルバリアントを提供できます。

コンポーネントスタイルのバリアントを作成する

コンポーネントのバリアントを、異なるレイアウト、色、フォントスタイルなどで作成できます（例：ソリッドまたはアウトラインのボタン、水平および垂直のカードレイアウト）。サイト全体でコンポーネントの各インスタンスにどのバリアントを使用するか選択できます。

コンポーネントスタイルのバリアントを作成するには：

1. メインコンポーネントを編集
2. スタイルパネルに移動
3. スタイルセレクターで「コンポーネントバリアント」アイコンをクリック
4. 「プラス」アイコンをクリック
5. バリアントに一意の名前を付ける
6. Enter/Returnキーを押して確認

バリアントプロパティを管理する

コンポーネントスタイルのバリアントを作成すると、そのコンポーネントに対してバリアントプロパティが自動的に作成されます。バリアントプロパティの名前を変更したり、プロパティグループに追加したり、プロップパネルでコンポーネントのデフォルトバリアントを設定したりできます。

バリアントプロパティの名前を変更するには：

1. メインコンポーネントを編集
2. プロップパネルに移動
3. バリアントプロパティをクリック
4. 一意のプロパティ名を入力
5. Enter/Returnキーを押して確認

バリアントプロパティをプロパティグループに追加するには：

1. メインコンポーネントを編集
2. プロップパネルに移動
3. バリアントプロパティをクリック
4. グループを選択するか、一意の名前を入力して新しいグループを作成
5. 作成をクリックするか、Enter/Returnキーを押して確認

コンポーネントのデフォルトバリアントを設定するには：

1. メインコンポーネントを編集
2. プロップパネルに移動
3. バリアントプロパティをクリック
4. デフォルトのドロップダウンからバリアントを選択

コンポーネントインスタンスのバリアントを変更する

他のコンポーネントプロパティと同様に、コンポーネントの各インスタンスに対してスタイルバリアントを選択できます。コンポーネントインスタンスのバリアントを変更するには：

1. コンポーネントをシングルクリックしてプロップパネルを開く
2. このインスタンスのバリアントをバリアントのドロップダウンから選択

コンポーネントスタイルバリアントの並べ替え、名前変更、複製、削除

デザインモードでは、コンポーネントスタイルバリアントを管理できます（並べ替え、名前変更、複製、削除）。

コンポーネントのバリアントを並べ替えるには:

1. メインコンポーネントを編集
2. スタイルパネルに移動
3. スタイルセレクターで「コンポーネントバリアント」アイコンをクリック
4. バリアントをクリックしてドラッグし、新しい位置に移動

バリアントの名前を変更するには:

1. メインコンポーネントを編集
2. スタイルパネルに移動
3. スタイルセレクターで「コンポーネントバリアント」アイコンをクリック
4. バリアントにカーソルを合わせ、「その他のオプション」アイコンをクリック
5. 名前変更をクリック
6. 新しい一意のバリアント名を入力
7. Enter/Returnキーを押して確認

バリアントを複製するには:

1. メインコンポーネントを編集
2. スタイルパネルに移動
3. スタイルセレクターで「コンポーネントバリアント」アイコンをクリック
4. バリアントにカーソルを合わせ、「その他のオプション」アイコンをクリック
5. 複製をクリック
6. 新しい一意のバリアント名を入力
7. Enter/Returnキーを押して確認

バリアントを削除するには:

1. メインコンポーネントを編集
2. スタイルパネルに移動
3. スタイルセレクターで「コンポーネントバリアント」アイコンをクリック
4. バリアントにカーソルを合わせ、「その他のオプション」アイコンをクリック
5. 削除をクリック
6. ポップアップモーダルで削除をクリックして確認

メインコンポーネントを終了する

メインコンポーネントの編集が完了したら、次の方法でメインコンポーネントを終了できます:

• デザイナーの左上隅にある「戻る」矢印をクリック
• キャンバス上でコンポーネントの外をクリック
• キーボードのEscapeキーを押す

エディターでコンポーネントを編集する

コンテンツエディターを招待してサイトのコンテンツをエディターで更新してもらう場合、コンポーネントプロパティで変更されていない要素に対する変更は、すべてのインスタンスに適用されます。

一方、コンポーネントプロパティを介して変更された要素に対する変更は、編集しているコンポーネントインスタンスにのみ適用されます。

コンポーネント名や説明を変更する

コンポーネント名や説明を変更するには：

1. コンポーネントパネルを開く
2. コンポーネント名にカーソルを合わせ、「その他のオプション」ドットをクリック
3. 設定を編集をクリック
4. 変更を行い、保存

コンポーネントインスタンスの名前を変更する

個々のコンポーネントインスタンスの名前を変更して識別しやすくすることができます。特に同じコンポーネントをページ上で複数回使用する場合に便利です。

コンポーネントインスタンスの名前を変更するには：

• ナビゲーターまたは右パネルの上部で：

1. コンポーネント名をダブルクリック
2. 新しい名前を入力
3. Enterキーを押すか、クリックしてカスタム名を保存

• キャンバス上で：

1. コンポーネントインスタンスを右クリック
2. 名前を変更をクリック
3. 新しい名前を入力
4. Enterキーを押すか、クリックしてカスタム名を保存

名前を元のコンポーネント名にリセットするには、名前変更中にカスタム名を削除するか、ナビゲーターまたはキャンバス上でインスタンスを右クリックして名前をリセットをクリックします。

コンポーネントをグループ化する

コンポーネントをグループに整理するには：

1. コンポーネントパネルを開く
2. コンポーネント名にカーソルを合わせ、「その他のオプション」ドットをクリック
3. 設定を編集を選択
4. グループドロップダウンから既存のグループを選択するか、新しいグループを作成するために入力

コンポーネントグループの名前を変更またはグループ解除するには、グループタイトルにカーソルを合わせて「その他のオプション」ドットをクリックします。

コンポーネントを削除する

コンポーネントを完全に削除するには：

1. サイトからコンポーネントのすべてのインスタンスを削除またはリンク解除する
2. コンポーネントパネルを開く
3. コンポーネント名にカーソルを合わせ、「その他のオプション」ドットをクリック
4. 設定を編集を選択
5. 削除をクリックし、確認する

コンポーネントインスタンスをメインコンポーネントからリンク解除する方法

コンポーネントインスタンスをリンク解除し、メインコンポーネントとは独立して変更を加えるには：

1. リンク解除したいインスタンス内の任意のコンポーネント要素を右クリック
2. インスタンスのリンク解除をクリック

リンク解除後、デザイン内の他のリンクされたインスタンスを編集しても、リンク解除されたインスタンスは変更されません。

ライブラリを使ってサイト間でコンポーネントを共有する

ライブラリを使用して、ワークスペース内のサイト間でネイティブおよびコードコンポーネントを共有できます。これにより、ワークスペース内の複数のサイトで使用されるコンポーネントを更新するための単一の場所を提供し、ワークフローを加速し、デザインシステムを強化できます。

Webflowヘルプに戻る