この投稿はWebflow社が提供する「Components」の内容を元に作成しています。
引用元：https://university.webflow.com/lesson/components
日本語版Webflow Universityでは、Webflowの基本的な使い方を解説しています。
2022年11月に発表されたWebflow大幅アップデートの中でも、特に注目の新機能が「コンポーネント機能」です。
これによって、元々効率的なサイト構築を可能にしていたWebflowがさらに大きく進化を遂げ、サイト内で繰り返し使用されるコンテンツを管理しやすくなりました。
ここでは、「コンポーネント機能」の詳細な使い方について解説していきます。
コンポーネント機能は、サイト上で構築したパーツを再利用可能にする機能です。
これによって、各所に配置している同一コンポーネントをまとめて編集することができるため、サイト修正の手間を省くことができます。
一方で、ある1カ所で使用しているコンポーネントにだけ修正をかけることもできるため、柔軟に効率的にサイト構築を進めることができます。
コンポーネント機能によってできること
レッスン概要
サイト内のほとんどの要素をコンポーネントにすることができます。
コンポーネントの作り方は次の4通りです。
「Collection List Wrapper」、「Collection List」、「Collection Item」の内部にコンポーネントを追加、作成することはできません。また、コンポーネント化する機能をサポートしていない要素の場合はコンポーネント機能は使用できません。
スタイルパネル（もしくは要素設定パネル）の上部に表示される「Create component」ボタンから、新しいコンポーネントを作成できます。
手順は次の通りです。
コンポーネントにしたい要素を右クリックして、コンポーネントを作成することもできます。
手順は次の通りです。
コンポーネントパネルでは、0からコンポーネントを作成することができます。
手順は次の通りです。
キーボードのショートカットキーで素早くコンポーネントを作成することもできます。
上記のいずれかの方法でコンポーネントを作成した後、メインコンポーネントを編集することになります。メインコンポーネントへのすべての変更は、そのコンポーネントのすべてのインスタンスに反映されます。いつでも、どのコンポーネントのインスタンスでも、次のいずれかの方法でメインコンポーネントに入ることができます。
一度作成したコンポーネントは、サイト内のどこでも再利用することができます。
手順は次の通りです。
コンポーネントのインスタンスを選択すると、ハイライトされ、緑色の枠で表示されます。メインコンポーネントを編集し、コンポーネントインフォメーションバーを参照して、その特定のコンポーネントがサイト内で何回使われているのかを確認できます。コンポーネントパネルを開くと、各コンポーネントがサイト内で何回使用されているのかを確認することができます。
コンポーネントインフォメーションバーは、メインコンポーネントを編集しているときに表示されます。デフォルトではキャンバスの一番下に表示されますが、一度クリックすると一番上に移動します。もう一度クリックすると、下に戻ります。
コンポーネントインスタンスの複製は可能ですが（コピー＆ペースト、右クリック、キーボードショートカットによる複製など）、メインコンポーネントの複製は現時点ではできません。代わりに、コンポーネントインスタンスのリンクを一旦解除し、そのリンク解除された要素または要素グループから新しいコンポーネントを作成することができます。
ナビゲータパネルを開いてコンポーネントの位置を確認し、コンポーネントを展開または折りたたんで、その中の要素階層を表示または非表示にすることができます。
コンポーネントの操作できることは大まかに次の5つです。
コンポーネントのすべてのインスタンスで同じ変更を行うには、メインコンポーネントを編集する必要があります。どのコンポーネントインスタンスでも、次のいずれかの方法でメインコンポーネントを編集することができます。
ネストされたコンポーネントの中にある要素を選択した場合、「Edit component」ボタンを押すと、親コンポーネントのメインコンポーネントを入力するか、ネストされたコンポーネントのメインコンポーネントを入力するかを選択するドロップダウンが表示されます。
メインコンポーネントビューでは、要素設定パネルにコンポーネントプロパティのデフォルト値が表示されます。
コンポーネントプロパティでは、コンポーネントインスタンス上で変更可能な、コンポーネント内の特定の要素の値を定義することができます。(また、コンポーネントプロパティをCMSフィールドに接続し、CMSコレクションからデータを取り込むこともできます。）
スタイルプロパティについては現在開発中です。
メインコンポーネントの編集は、すべてのコンポーネントインスタンスに影響します（そのコンポーネントインスタンスが、コンポーネント内の特定の要素にコンポーネントプロパティを適用している場合を除く）。
メインコンポーネントの編集モードで、構造や要素の順序を変更すると、サイト全体のすべてのコンポーネントインスタンスを同時に変更することができます。
例えば、カードデザインがコンポーネントとして設定されているとします。このカードコンポーネントには、見出し要素、段落要素、ボタン要素が含まれており、ボタン要素はカードの一番下に配置されています。カードのメインコンポーネントを編集して、ボタンをカードの一番下から一番上に移動すると、その変更はサイト全体のカードコンポーネントのすべてのインスタンスに影響します。
メインコンポーネントの編集モードは次のいずれかの方法で終了することができます。
メインコンポーネントの編集を終了した後に、コンポーネントインスタンス内の要素に変更を加えた場合、その特定のコンポーネントインスタンスにのみ変更が反映されることに留意してください。
Editorでコンポーネント要素に加えた変更は、コンポーネントプロパティで変更されておらず、すべてのインスタンスで同一の設定である場合は、他のすべてのインスタンスに変更が適用されます。
これは、編集対象の要素にカーソルを置いたときに表示されるツールチップでも説明されています。
また、エディタで、コンポーネントプロパティを介して変更されたコンポーネント要素に変更を加えた場合、それらの変更は編集しているそのコンポーネントインスタンスにのみ適用されます。
コンポーネントの名前を変更する手順は次の通りです。
コンポーネントを削除する手順は次の通りです。
各インスタンスで全く同じコンポ―ネントを作成・使用する場合（Ex.ナビゲーションバー、フッターなど）、そのコンポーネントのコンポーネントプロパティを定義する必要はありません。
コンポーネントプロパティでは、所定のコンポーネントインスタンス固有の値で変更可能なコンポーネント内の特定の要素を定義することができます。
これは、コンポーネントの構造は維持しつつ、あるコンポーネントインスタンスの要素を時と場合によって変更したい場合に有効です。また、異なるコンポーネントインスタンスで特定の要素を隠したり表示したりすることで、構造を微調整することもできます。
コンポーネントのプロパティについての説明事項は次の通りです。
さ
サポートされているコンポーネントプロパティは以下の通りです。
スタイルプロパティの変更については現在開発中です。
コンテンツプロパティを使用すると、コンポーネントインスタンス内の要素コンテンツを固有にカスタマイズすることができます。たとえば、サイト内の複数のページで使用するメインビジュアルセクションのデザインがあるとします。デザインの構造は変更する必要がありませんが、各コンポーネントインスタンスで異なるパラグラフが必要です。この場合、パラグラフのコンポーネントプロパティを作成し、そのインスタンスがサイト内のどこに表示されても、パラグラフの内容を変更することができるようにします。
サポートされている要素
表示プロパティを使用すると、特定の要素を表示または非表示にできます。これによって、異なるコンポーネントインスタンスにレイアウトのバリエーションつけることができます。
例えば、ナビゲーションバーコンポーネント内のリンクやボタンを表示/非表示にすることで、ナビゲーションバーコンポーネントのバリエーションを作成できます。また、異なるアイコンを表示・非表示にすることで、ボタンのバリエーションを作成することもできます。さらに、イメージ、ビデオ、ボタン、リンクなど、コンポーネント内の複数の異なる要素を表示／非表示にすることで、セクション全体のバリエーションを作成することもできます。
表示プロパティは、すべての要素で使用できます。
コンポーネントインスタンスの非表示要素の選択に問題がある場合は、ナビゲータを開き、コンポーネントの要素階層内から非表示要素をみつけ、表示にすることで意図した挙動になることが多くあります。
「hidden」に設定された要素は、DOM（Document Object Model）順序から除外されます。DOMの順序は、サイトの論理構造とアクセスや操作の方法を指定するため、非表示のコンポーネント要素が支援デバイスに読み取られることはなく、サイト訪問者にとってよりアクセスしやすいサイトになります。また、繰り返されるコンテンツを排除するため、SEOにも悪影響を与えません。
コンポーネントプロパティを作成（定義）すると、サイト内の任意のコンポーネントインスタンスでプロパティ値を変更できるようになります。これにより、異なるコンポーネントインスタンスにカスタムコンテンツを作成することができます。
コンポーネントインスタンスからコンポーネントプロパティを作成するには、次の3つの方法があります。
この操作によって、テキスト、イメージ、リッチテキスト要素の内容を手軽に変更することができます。
要素のプロパティ値を変更した場合、その要素を選択した状態でだと、先ほど変更したコンポーネントのプロパティが要素設定パネルで新しく利用可能になります。要素のプロパティ名は青色で表示され、自動的に生成されます。
24
要素のプロパティ値を変更した場合、その要素を選択した状態でだと、先ほど変更したコンポーネントのプロパティが要素設定パネルで新しく利用可能になります。要素のプロパティ名は青色で表示され、自動的に生成されます。
要素のプロパティ名は、青色で表示され、自動的に生成されます。
また、最初にメインコンポーネントで直接コンポーネントプロパティを作成することも可能です。これにより、後でコンポーネント要素をプロパティに接続することができます。
メインコンポーネントの中にコンポーネントプロパティを作成する手順は次の通りです。
プロパティを作成したら、メインコンポーネントを終了します。これ以降は、個々のコンポーネントインスタンスにおいて、コンポーネントのプロパティ値を変更し、インスタンス上のコンテンツや表示／非表示を個別にカスタマイズすることができます。
コンポーネントインスタンスの変更には次の2種類があります。
コンポーネントプロパティの静的コンテンツを編集する最も手っ取り早い手順は、以下の通りです。
選択したコンポーネントインスタンスの要素プロパティの値を表示・変更するには、要素設定パネルを開き、そこから直接値を変更することができます。
コンポーネントのプロパティをデフォルト値に戻すには、すべてのプロパティを一度にリセットするか、個別にリセットするかを選択することができます。
すべてのプロパティを一度にデフォルト値に戻す手順は、以下の通りです。
プロパティを1つずつデフォルト値に戻す手順は次の通りです。
一貫したデザインを維持しながら、異なるCMSコレクションページ（ブログやお知らせの記事詳細ページ）で同一レイアウトを再利用するために、メインコンポーネントからリンクを解除する必要なく、コンポーネントインスタンスでCMSコレクションデータを接続し表示することもできます。
以下のCMSフィールドにプロパティを接続することができます。
コレクションフィールドデータにコンポーネントプロパティを接続するには、サイト内にコレクションを作成している必要があることに注意してください。
Collection Listへの対応については現在開発中です。
コレクションページで、コンポーネントプロパティをCMSコレクションデータに接続する手順は次の通りです。
これで、コンポーネントインスタンスは、Collectionフィールドの内容を表示します。
Collectionフィールドと要素の接続を切るための手順は次の通りです。
要素設定パネルでのプロパティ管理では、メインコンポーネントのプロパティの一覧を確認し、コンポーネント内の要素との接続/非接続を判断し、各プロパティのデフォルト設定やプロパティ値を調整することができます。
要素設定パネルのプロパティ管理セクション（Manage propaties）には、コンポーネントの親要素もしくは子要素を選択して、要素設定パネルから確認できます。
また、コンポーネントの子要素を最初にクリックした場合にも、コンポーネントのプロパティ管理を確認することができます。
「Manage propaties」からは次のような操作を行うことができます。
手順は次の通りです。
手順は次の通りです。
また、ミニ設定メニューや要素設定パネルからもプロパティの名前を変更することができます。
手順は次の通りです。
手順は次の通りです。
プロパティがコンポーネント要素に接続されている状態で、それを削除すると、プロパティを削除しようとしたときに、そのコンポーネント要素（コンポーネント内の複数の要素に接続されていた場合は複数の要素）から切断されるという旨の警告が表示されます。
プロパティはメインコンポーネントから削除されますが、その値は、各インスタンスから別々に削除されるまで、それらが作成されたコンポーネントインスタンスに表示されます。
コンポーネントプロパティを各インスタンスから個別に接続を削除する手順は次の通りです。
メインコンポーネントから要素を削除すると、コンポーネントインスタンスが対応する他の各要素も削除されます（コンポーネントプロパティを介して固有の内容で変更されていたとしても削除されます）。ただし、コンポーネントプロパティとその適用値は、各インスタンスに残ります。
以前使用したコンポーネントプロパティが残っているため、新規または既存の要素をそのコンポーネントプロパティに接続することができます。それらの要素には、以前に設定されたプロパティに適用された値が反映されます（例：テキストコンテンツ、画像、表示／非表示など）。また、複数の要素を同じプロパティに接続し、それぞれの要素に同じ内容や表示／非表示の設定をすることもできます。
例えば、2つの異なるステートを持つ要素にインタラクションを作成した際、それぞれのステートにおけるコンテンツが常に同じである必要があるとします。各ステートの要素を同じプロパティに接続すれば、値は一貫性を保つことができます。
手順は次の通りです。
新しいプロパティは、コンポーネント要素を接続するまで、切断された状態になります。
メインコンポーネントの「プロパティの管理」セクションで、プロパティを切断することができます。
手順は次の通りです。
プロパティが複数のエレメントに接続されている場合、接続されているエレメントごとに切断処理を繰り返す必要があります。
ここで「紫の点」のマーク（または紫のドロップダウンメニュー）をクリックすると、その特定の要素に接続する別のプロパティを選択することができます。
コンポーネントを他のコンポーネントの中に入れ子にすることで、複雑なレイアウトをより簡単かつ効率的に構築・管理することができます。
例えば、ボタンをコンポーネントにすることができます。そして、そのボタンコンポーネントを、サイト内のさまざまなコンポーネントの中に入れ子にすることができます。ナビゲーションコンポーネント、メインビジュアルセクションコンポーネント、カードコンポーネントの中に配置するといったことができます。
これにより、1つの場所で各コンポーネントを独立して更新し、その変更が他のインスタンスに影響を与えるようにすることができます。
コンポーネントのネストは、次のいずれかの方法で行うことができます。
手順は次の通りです。
手順は次の通りです。
メインコンポーネントを編集することで、新しいネストされたコンポーネントを作成することもできます。ネストしたコンポーネントにしたい要素を右クリックし、「Create component」を選択します。または、キーボードショートカットのCommand + Shift + A（Macの場合）またはControl + Shift + A（Windowsの場合）を押下します。
すでにコンポーネントを含んでいる親要素からコンポーネントを作成することもできます。
例えば、ボタン要素を含む非コンポーネントのカード要素（Divブロック）があるとします。ボタン要素をコンポーネントに変更しました。ここで、カード全体もコンポーネントにしたい場合、ボタンコンポーネントの親要素（カード要素のDivブロック）を選択し、そのDivブロックから新しいコンポーネントを作成します。この結果、ボタンコンポーネントはカード要素（Divブロック）コンポーネントの中にネストされます。
コンポーネントプロパティが設定されているコンポーネントを、同じくコンポーネントプロパティが設定されている別のコンポーネントの中にネストした場合、ネストされたコンポーネントのプロパティを親コンポーネントのプロパティに接続するオプションがあります。これによってネストされたコンポーネントのプロパティが親コンポーネントのインスタンスの値の変更を反映できるようになります。
例えば、カード要素があるとします。そのカード要素には、見出しとパラグラフテキスト、そしてボタンがあります。カード要素はコンポーネントになっています。カード要素の中にあるボタン要素もコンポーネントになっています（つまり、ネストされたコンポーネントです）。コンポーネント内の各要素にコンポーネントプロパティが設定されている限り、ボタンのテキストをカード要素のテキストのどれかに接続することができます。
ネストしたコンポーネントのプロパティを親コンポーネントのプロパティにリンクする方法は次の通りです。
コンポーネントインスタンスのリンクを解除し、メインコンポーネントとは無関係に要素へ変更を加える方法は次の通りです。
一度リンクが解除されると、デザイン内のそのコンポーネントの他のリンクされたインスタンスを編集しても、リンク解除されたインスタンスが変更されることはありません。
いかがでしょうか。
当社では、Webflowの関心を持ってくださった方々に向けて、無料Webflow説明会を実施しています。
以下よりお問い合わせフォームにアクセスし、お気軽にお申し込みください。
ご発注を検討されている企業様だけでなく、フリーランスや制作会社など同業者様でも構いません。
Webflowの広がりによって、発注側も制作側もより幸せになれる社会の創造に向けて、当社は邁進していきます。
今後とも宜しくお願い致します。
Webflowとはなにか？についてはこちらで解説しています。合わせてご覧ください。
会社名
Funwork株式会社
所在地
東京都千代田区東神田3-4-12
代表者
堀尾 尭史
電話番号
メール
03-5809-2979
backoffice@funwork2020.com
URL
設立日
2020年5月18日
資本金
9,000,000円
取引銀行
きらぼし銀行
Webサイト、ITサービス受託開発
マーケティングコンサル事業
シェアオフィス及びコワーキングスペースの運営