Webflowで要素とコンポーネントインスタンスに名前を付ける：大規模プロジェクトの管理を効率化

Navigatorに同じ要素名が並び、目的の場所を探しにくいと感じたことはないでしょうか。Webflowでは、要素やコンポーネントインスタンスに、用途に合った名前を付けられます。たとえば同じカードを複数配置する場合も、「サービス紹介」「お問い合わせ」のように役割を区別できます。名称変更の操作と、クラス名との違い、使うときの注意点を紹介します。

複雑なプロジェクトで名前管理が必要になる理由

Webflowのナビゲーターパネルは、ページ上のすべての要素を階層構造で表示します。小規模なページであれば問題ありませんが、コンポーネントを多数再利用したランディングページや、入り組んだレイアウトを持つサービスページになると、同じ名前の要素が縦に並びます。「Hero Section」「Card」「Card」「Card」……という状態では、目的の要素を見つけるだけでスクロールと確認を繰り返す必要があります。

チームで作業する場合も、名前から役割を読み取れると引き継ぎがしやすくなります。「Card 1」だけでなく「Service Card」のように用途を含め、同じ役割には同じ命名ルールを使うと、ページ構造を追いやすくなります。

名称変更機能の使い方

Navigatorで対象の要素やコンポーネントインスタンスをダブルクリックし、新しい名前を入力してEnterで保存します。右パネル上部の名前をダブルクリックする方法や、対象を右クリックして「Rename」を選ぶ方法もあります。

選択した要素には、MacではOption＋R、WindowsではAlt＋Rのショートカットも使えます。たとえば同じコンポーネントを使った箇所に「Hero Card - product list」「Hero Card - feature」のような名前を付けると、インスタンスごとの役割を見分けやすくなります。

変更できない要素と権限の違い

Body要素と、コンポーネントインスタンス内のslotは名前を変更できません。slotの名前はメインコンポーネント側で変更します。また、Marketerロールで名称変更できるのはコンポーネントインスタンスです。利用できる操作は付与されたロールに従います。

カスタム名を元に戻すには、名前を空にして保存するか、右クリックメニューから「Reset name」を選びます。キャンセルする場合はEscapeを押します。

カスタム名とデフォルト名の使い分け

カスタム名を付けていない要素には、クラス、テキストの内容、静的アセットの名前、HTMLタグ、要素の種類などに応じた名前が表示されます。コンポーネントインスタンスには、メインコンポーネントの名前が使われます。表示名だけで判別しにくい箇所から、カスタム名を付けるとよいでしょう。

名称変更はWebflow内で整理するための機能です。CSSクラス名やスタイル、インタラクションは変わらず、付けたカスタム名は公開するHTMLやエクスポートしたコードにも出力されません。サイト上の見出し文を変更する操作とは区別して使います。

関連する管理機能との組み合わせ

同じコンポーネントを複数ページで使う場合は、メインコンポーネントの名前で共通の種類を示し、インスタンス名で配置場所や用途を補うと整理しやすくなります。色や余白の変更を目的に、インスタンスごとに別のクラスを作る必要はありません。

カスタム名を付けたあとも、元の名前を確認できます。NavigatorでMacはOption、WindowsはAltを押すと元の名前が表示されます。インスタンスの場合は右パネル上部のカスタム名にカーソルを合わせ、メインコンポーネント名を確認することもできます。

整理された環境が生産性を高める

名称変更を一度にすべての要素へ行う必要はありません。再利用の多いカード、似た構造が並ぶセクション、チームで頻繁に修正する箇所から付けていくと、目的の要素を探しやすくなります。

命名ルールは、短く役割が伝わる形でそろえます。「種類 - 用途」や「配置場所 - 内容」など、チームで読み取りやすい形式を決めておきましょう。クラスの整理については、スタイルセレクターの記事も参考になります。

参考資料

• 名称変更の公式ヘルプ