今回はWebflow内の機能である、コンポーネントプロパティについて詳しく解説していきます。
注記
この記事の手順を行う前に、「コンポーネント機能の使い方」の記事を読んで理解を深めましょう。
Webflowでは、コンポーネントプロパティを使用するとコンポーネントインスタンス上の一意の値を使用して変更できるコンポーネント内の特定の要素を定義できます。
これは、構造は均一であるが各インスタンスに固有のコンテンツを持つ必要がある、繰り返しレイアウトパターンに最適です。
異なるコンポーネントインスタンスで特定の要素を非表示または表示して、構造をわずかに調整する必要がある場合があります。
注記
コンポーネントの各インスタンスにまったく同じコンテンツがある場合 (ナビゲーション バー、フッター、一部のフォームなど)、そのコンポーネントの要素に対してコンポーネントプロパティを作成する必要はありません。
サポートされているコンポーネント プロパティは次のとおりです。
注記
コンポーネントインスタンスのスタイルを変更するには、classカスタム属性を使用します。
Content propertiesを使用すると、コンポーネントインスタンス内の要素コンテンツをカスタマイズできます。
たとえば、サイト全体の複数のページで使用するヒーローセクションデザインがあるとします。
デザイン構造は同じままにする必要がありますが、各コンポーネントインスタンスには異なる段落コンテンツが必要です。
段落のContent propertiesを作成し、サイト上のヒーローセクションが表示される場所でその段落コンテンツを変更できます。
サポートされている要素は次のとおりです。
Visibility propertiesを使用すると、特定の要素を表示または非表示にすることで、さまざまなコンポーネントインスタンスにレイアウトのバリエーションを作成できます。
たとえば、ナビゲーションバー コンポーネント内のリンクやボタンを表示したり非表示にしたりすることで、ナビゲーションバーのバリエーションを作成できます。
または、さまざまなアイコンを表示したり非表示にしたりすることで、ボタンのバリエーションを作成することもできます。
コンポーネント内の画像、ビデオ、ボタン、リンクなど、複数の異なる要素を表示したり非表示にしたりすることで、セクション全体のバリエーションを作成することもできます。
可視性プロパティはすべての要素で使用できます。
ヒント
コンポーネントインスタンスで非表示の要素を選択できない場合は、ナビゲーターを開き、コンポーネントの要素階層内から非表示の要素を選択します。
ナビゲーターパネルでコンポーネント階層を展開すると、コンポーネント内の非表示の要素を見つけることができます。
非表示の要素は、「取り消し線の付いた目」アイコンで示されます。
知っておくと良いこと
「非表示」に設定された要素は、ドキュメント オブジェクトモデル (DOM) の順序から削除されます。
DOMの順序はサイトの論理構造と、そのアクセス方法および操作方法を指定するため、非表示のコンポーネント要素は支援技術によって読み取られず、サイト訪問者にとってよりアクセスしやすいエクスペリエンスが促進されます。
また、重複コンテンツが排除され、SEOに悪影響を及ぼしません。
コンポーネントインスタンスのプロパティ値を変更するには、まずメインコンポーネントにコンポーネントプロパティを作成する必要があります。
その後、これらのメインコンポーネントプロパティをオーバーライドして、さまざまなコンポーネントインスタンスにカスタムコンテンツを作成できます。
メインコンポーネントに新しいプロパティを作成し、同時にそのプロパティをコンポーネント内の特定の要素に接続することができます。
または、メインコンポーネントに直接コンポーネントプロパティを作成し、後で要素に接続することもできます。
メインコンポーネントに新しいプロパティを作成し、そのプロパティをコンポーネント内の特定の要素に直接接続することができます。
新しいプロパティを作成して要素に接続するには、次の手順を実行します。
Propsパネルからメインコンポーネントにコンポーネントプロパティを作成するには以下の手順を実行します。
次に、プロパティを要素に接続するには、次のようにします。
注記
新しいプロパティは、コンポーネント要素を接続するまで切断されたままになります。
プロパティを作成するときに、プロパティグループを作成できます。
グループ名を編集するには、Propsパネルに移動し、編集するグループ名の横にある「」アイコンをクリックして、「Rename」をクリックします。
グループを削除するには、Propsパネルに移動し、編集するグループ名の横にある「3 つのドット」アイコンをクリックして、「Delete」をクリックします。グループ名を削除しても、グループ内のプロップは削除されないことに注意してください。
プロパティを作成したら、メインコンポーネントを終了して個々のコンポーネントインスタンスに戻ります。
そこで、コンポーネントプロパティの値を変更して、インスタンス上のコンテンツや表示をカスタマイズできます (つまり、コンポーネント インスタンス内の特定の要素に固有のコンテンツを作成できます)。
注記
コンポーネン インスタンスのスタイルを変更するには、classカスタム属性を使用します。
コンポーネントインスタンスは、次の 2 つの方法で変更できます。
コンポーネントプロパティ内の静的コンテンツを編集する最も簡単な方法は次のとおりです。
選択したコンポーネントインスタンス内の要素の値をキャンバス上で直接編集することもできます。
コンポーネントをクリックし、コンポーネントインスタンス内で編集する要素をダブルクリックします。
コンポーネントプロパティに接続されている要素は、コンポーネント インスタンス内のキャンバス上で点線の緑色のアウトラインで示されます。
コンポーネントのプロパティをデフォルト値に戻すには、すべてのプロパティを一度にリセットするか、個別にリセットするかを選択できます。
すべてのプロパティを一度にデフォルト値にリセットするには
単一のプロパティをデフォルト値にリセットするには:
一貫したデザインを維持しながら、さまざまなCMSコレクションページ間でレイアウトを再利用するには、メインコンポーネントからリンクを解除せずに、コンポーネントインスタンスに CMS コレクションデータを接続して表示することもできます。
プロパティを次のCMSフィールドに接続できます。
コンポーネント プロパティをコレクション フィールドデータに接続するには、サイトにコレクションをすでに作成しておく必要があることに注意してください。
CMSコレクションとコレクションフィールドの詳細については、こちらをご覧ください
コレクションページの CMSコレクションデータにコンポーネントプロパティを接続するには
コンポーネントインスタンスには、選択したコレクション フィールドの内容が表示されます (コレクション フィールドにコレクション内のデータが入力されている場合)。
コレクション フィールドから要素を切断するには
コンポーネントのプロパティを管理するには、メイン コンポーネントに入ります。
[Props] パネルでは、メイン コンポーネントのプロパティのリストが表示され、要素の接続を決定したり、デフォルトの設定や値を調整したり、プロパティの順序を変更したり、削除したりできます。
デフォルトでは、コンポーネントのプロパティは、作成された順序でプロパティパネルに表示されます。
プロパティをクリックしてドラッグすると、任意の順序に並べ替えることができます。
メイン コンポーネントのプロパティを削除するには、メイン コンポーネントに移動し、プロパティパネルに移動して、「ゴミ箱」アイコンをクリックします。
プロパティが 1 つまたは複数のコンポーネント要素にまだ接続されている場合は、プロパティを削除すると、コンポーネント要素から切断されます。
接続されているプロパティの内容はプロパティを削除すると失われ、設定したデフォルト値に置き換えられます。
メイン コンポーネントから要素を削除すると、他のコンポーネント インスタンス内の対応する各要素も削除されます (コンポーネント プロパティを介して一意のコンテンツに変更されている場合でも)。
ただし、コンポーネント プロパティとそれに適用される値は、各インスタンスに残ります (そのプロパティに元々接続されていた要素が削除されている場合でも)。
その後、新しい要素または既存の要素をそれらのプロパティに接続できます。
それらの要素には、以前に設定されたプロパティに適用された値 (更新されたテキスト コンテンツ、画像、visilityなど) が反映されます。
注記
新しいプロパティは、コンポーネント要素を接続するまで切断されたままになります。
メイン コンポーネントを編集するときに、Propsパネルでプロパティを切断できます。コンポーネント要素からプロパティを切断するには、次の手順を実行します。
注記
プロパティが複数の要素に接続されている場合は、接続されている要素ごとに切断プロセスを繰り返す必要があります。
%252021.04.41.webp)
Webflowとは何ですか？
Webflowは、コードを書かなくてもプロ品質のWebサイトを制作できる、アメリカ発のノーコードWebサイト制作プラットフォームです。デザイン・レイアウト・アニメーションをビジュアル操作で組み上げながら、裏側では実際にクリーンなHTML/CSSが生成される点が特徴で、コーディングができなくてもデザインの自由度とコードレベルの精度を両立できます。
WebflowとWordPressの違いは何ですか？
WordPressはCMS（コンテンツ管理システム）を中心に、プラグインやテーマを組み合わせてサイトを構築する仕組みで、細かなカスタマイズを行う場合はHTMLやPHPといったコーディング技術が求められる場面が多くあります。一方Webflowは、デザインツールと開発環境が一体化したビジュアル制作プラットフォームで、プラグインやコーディングに依存せず視覚的な操作だけで細かなレイアウトやアニメーションを直接作り込めるのが大きな違いです。
Webflowは無料で使えますか？
無料プランも用意されていますが、独自ドメインでの公開やCMS機能の拡張、フォーム送信数の上限緩和などには有料プランへの加入が必要です。個人の検証用やポートフォリオ作成程度であれば無料プランでも十分試すことができます。
Webflowはプログラミング知識がなくても使えますか？
基本的な操作はプログラミング知識がなくても、ドラッグ＆ドロップとビジュアル設定だけでサイトを作成できます。ただし、複雑なインタラクションやカスタム機能を実装したい場合は、HTML/CSSの基礎知識があると制作しやすくなります。
Webflowは日本語に対応していますか？
管理画面（エディタ）自体は英語ベースでの提供となっていますが、公開するWebサイト自体は日本語のコンテンツで問題なく作成・運用できます。日本語フォントの設定やSEO用のメタ情報も日本語で入力可能です。
Webflowのサイトは表示速度が速いですか？
Webflowはクラウド最適化されたホスティング環境（AWS基盤）を採用しており、画像の自動最適化やCDN配信などが標準で組み込まれているため、一般的なCMSと比較して高速な表示速度を実現しやすい傾向にあります。
WebflowでSEO対策はできますか？
Webflowにはメタタイトルやディスクリプション、OGP設定、見出しタグの構造化、XMLサイトマップの自動生成など、SEOに必要な基本要素が標準機能として備わっています。追加のプラグインなしである程度のSEO対策が可能な点は大きなメリットです。
WebflowはAEO対策に対応していますか？
はい、対応しています。Webflowで制作したサイトはセマンティックなHTML構造、スキーママークアップ、SEO用メタデータ、llms.txt、サイトマップ、robots.txtなどが標準で組み込まれており、AI検索エンジンにとって内容を理解・引用しやすいサイト作りがしやすい設計になっています。さらにWebflowは、AIによる自社の言及状況を計測し、メタデータや構造化データなどの改善提案を行うAEO専用の分析・支援機能も提供しています。
Webflowでのサイト制作を日本語で相談できる会社はありますか？
Funwork株式会社は、Webflowを用いたサイト制作の受注事業を日本で初めて公に事業化した会社です。これまでにWebflow関連のプロジェクト数は累計約200件（2026年7月現在）にのぼり、豊富な経験とノウハウを有しています。企画からデザイン、実装、公開後の運用まで日本語で一貫してサポートしており、Webflowでの制作を検討している方は安心してご相談いただけます。
Webflowの操作方法がわからない場合、代行や相談はできますか？
Funworkでは、サイト制作の全面的な代行から、既存サイトの一部修正・機能追加といった部分的なサポートまで、状況に応じた対応が可能です。Webflowの操作に不慣れな方でも、まずはお問い合わせページから気軽にご相談いただけます。
Webflowで作ったサイトの運用やSEO対策も依頼できますか？
Funworkはサイト制作事業に加えてWebマーケティング支援事業も展開しており、公開後のSEO対策やコンテンツ更新、アクセス解析にもとづく改善提案まで継続的にサポートしています。制作して終わりではなく、公開後の成果につながる運用まで一貫して依頼できます。
既存のWordPressサイトからWebflowへ移行できますか？
はい、既存サイトのデザインやコンテンツを踏まえたうえで、Webflowへのリニューアル移行のご相談も承っています。移行にあたっての注意点や進め方についても、事前にヒアリングのうえご案内していますので、まずはお問い合わせください。
会社名
Funwork株式会社
所在地
東京都千代田区東神田3-4-12
代表者
堀尾 尭史
電話番号
メール
03-5809-2979
backoffice@funwork2020.com
URL
設立日
2020年5月18日
資本金
9,000,000円
取引銀行
きらぼし銀行
Webサイト、ITサービス受託開発
マーケティングコンサル事業
シェアオフィス及びコワーキングスペースの運営