WebflowのキャンバスでCMSを直接編集！数値・コンポーネントにも対応した新機能

Webflowでコンテンツを更新するとき、キャンバスとCMS管理画面を行き来する手間を感じたことはないでしょうか。Webflowは2025年7月21日、キャンバス上で編集できる範囲を拡張しました。数値コンテンツやCMSに接続したコンポーネントも、表示を確認しながら編集できます。対応する内容と、更新するときの注意点を紹介します。

デザインビューとCMS管理の分断が生む非効率

CMSに接続したページでは、表示を確認したあとにCMS管理画面へ移り、元のフィールドを探して値を直す場面があります。短い文言や数値だけを調整したい場合にも、画面の移動が必要になると作業の流れが途切れます。

キャンバス上で編集できる内容なら、対象を見ながら変更し、周囲のテキストやレイアウトとの関係を確認できます。ただし、どのフィールドも無条件で編集できるわけではありません。CMSとの接続と、担当者に付与された権限を確認することが前提です。

キャンバス上で直接編集できるコンテンツが拡張

2025年7月の拡張では、数値コンテンツと、CMSに接続したコンポーネントインスタンスが対象に加わりました。見た目が数字であっても、接続先がNumber型かどうかは別なので、対象の設定でフィールドやプロパティを確認します。

数値コンテンツでは、Numberプロパティを持つコンポーネントインスタンスや、CMSのNumberフィールドに接続された要素をキャンバス上で編集できます。たとえば価格や件数などの値を、表示位置を確認しながら変更する用途があります。小数点や通貨記号など、値以外の表示設定も合わせて確認しましょう。

CMSコンテンツに接続したコンポーネントインスタンスも、キャンバス上での編集に対応しています。共有しているコンポーネント本体の構造を変更する操作と、接続されたCMSアイテムの値を変更する操作は分けて考えます。何を更新しているのか、接続先を確認してから編集しましょう。

利用できるモードと権限

この拡張は、発表時のDesign・Build・Editの各モードを対象としています。ただし、利用者全員に同じ編集権限が付くわけではありません。現在のサイトのロールや権限、編集を許可している内容に従って操作します。変更できないときは、接続先と担当者の権限を確認してください。

キャンバス編集とCMS管理画面を使い分ける

ページを見ながら数値や短い内容を直す場合は、キャンバス編集が役立ちます。一方、複数のフィールドをまとめて確認する場合や、公開状態を管理する場合は、CMS管理画面を開いた方が内容を追いやすいことがあります。作業内容に応じて使い分けましょう。CMS上でのやり取りについては、CMSのコメント機能も参考になります。

編集後は、保存された内容と、実際に公開する内容を分けて確認します。下書きの保存だけで本番へ反映されたとは判断せず、CMSアイテムのステータスを確認してください。公開前には別の画面幅でも表示を見て、数字の桁数が増えても改行や文字切れが起きないかを確かめます。

まとめ

キャンバス編集の対象が広がったことで、CMSに接続した数値やコンポーネントの内容を、表示を見ながら調整しやすくなりました。対応するフィールド型・接続先・権限を確認し、更新後は保存状態とレイアウトを確かめることが大切です。まずは一つの項目で操作を確認し、チーム内で更新の手順をそろえるとよいでしょう。

参考資料

• キャンバス編集の公式発表
• CMSアイテムの保存と公開