Webflowの編集モード活用ガイド：コンテンツ更新を効率化し、チームの生産性を向上

Webflowで構築したウェブサイトの保守運用、特にコンテンツ更新において、非デザイナーのチームメンバーがスムーズに作業できる環境は不可欠です。デザインの整合性を維持しつつ、迅速なコンテンツ更新を実現するために、Webflowの編集モードを最大限に活用しましょう。この記事では、編集モードの機能と活用方法、そして注意点について詳しく解説します。

‍

参考 https://university.webflow.com/lesson/edit-mode

編集モードとは：デザインとコンテンツ管理の使い分け

Webflowにはデザイナーモードと編集モードの二つが設けられています。Webflowのデザイナーモードは構築および設計を行うことができるのに対し、編集モードはコンテンツの編集と管理のみ可能となっています。モードの分離によってデザイナーとコンテンツ担当者の役割分担を明確にし、ワークフローを効率化する上で重要な役割を果たします。

コンテンツ担当者は、デザインの知識がなくても、ブラウザ上で直感的にコンテンツを編集できます。これにより、デザイナーはサイトのデザインや機能開発に集中できるようになり、チーム全体の生産性向上に繋がります。

編集モードで実現できること

編集モードは、多岐にわたるコンテンツ管理のニーズに対応しています。

静的コンテンツの更新

テキスト、画像、リンクの修正といった基本的なコンテンツ更新を、ディスプレイ画面で見たままの形で容易に編集を行えます。例えば、ブログ記事の修正、キャンペーンバナーの差し替え、リンク切れの修正などが、コードを触ることなく実現できます。また誤ってデザインを変更してしまうことがないため、デザインに影響を与えず編集を行えます。

動的コンテンツの管理 

CMSコレクションに紐づいたコンテンツも編集モードから直接操作可能です。ブログ記事、商品情報、チームメンバー紹介など、データベース化されたコンテンツを効率的に管理できます。新規コンテンツの追加、既存コンテンツの修正・削除などが、直感的なインターフェースで行えます。

SEO設定の最適化

ページタイトル、メタディスクリプション、OGタグなどのSEO関連設定も編集モードから行えます。コンテンツに合わせて最適なSEO設定を行うことで、検索エンジンからの流入増加を期待できます。

コンテンツの共同編集  

デザイナー画面とは異なり、編集画面では複数のユーザーが同時に静的および動的コンテンツを編集することが可能です。ただし、デザイナー画面では一人しか作業できないのに対し、編集画面では複数人が同時に作業できる点に注意が必要です。同じコンテンツを複数人が同時に編集した場合、最後に保存した人の変更が優先されます。そのため、チームメンバー間で編集するタイミングを調整することが大切です。

編集モードの使い方

Webflowダッシュボードから直接Editorページを開く方法

Webflowダッシュボードから対象サイトの3点をクリックしEditorからページを開きます。

‍

Designerページから切り替える方法

Webflowダッシュボードから対象サイトのサムネイルにカーソルを合わせ、「Open Designer」をクリックします。

‍

画面上部ナビゲーションのビルドタブをクリックすることで、編集モードに切り替えることができます。

‍

もしくはURLを開いて「?mode=edit」と打ち込めば、編集モードのログイン画面が開きます。

‍

編集モードからブログコンテンツを編集する方法

実際にブログのコンテンツを編集してみましょう。今回はダッシュボードからEditorとして入り、編集を行います。

‍

画面下に表示されるバナーについて解説します。

• Pages：ページ一覧が表示され、ページの設定を管理することができます。
• Collections：すべてのコレクションリストが表示されます。コレクションを選択するとツールバーに新しいタブが開かれ、そのコレクション内のすべてのアイテムのリストが表示されたコレクションアイテムパネルを見ることができます。
• Form：サイト上で送信されたフォームを確認したりダウンロードしたりできます。

‍

1. ブログを選択する今回はブログのコンテンツの編集なので、「コレクション」からブログを選択し、編集する記事を選択します。新規作成する場合は「New Blog」をクリックして作成します。

2. 編集画面を開く編集したいテキスト上にカーソルを合わせると鉛筆マークが表示されます。鉛筆マークをクリックすると直接テキスト編集が行えます。

3. 画像を差し替えや、配置の変更を行う画像の差し替えや配置の変更も行えます。画像をクリックするとスパナのマークが表示されます。

4. Altテキストを編集するスパナのマークをクリックするとAltテキストの設定も可能です。

5. ページ設定を行う編集モードではページ設定を行うことも可能です。ページ一覧から対象のページにカーソルを合わせると、「Setting」が表示されます。そちらをクリックし編集を行います。

6. SEOに関する設定を行うこちらではSEOに関するページ設定を行うことができます。タイトルタグやメタディスクリプション、OGイメージなどを設定しましょう。

7. 編集後の保存方法編集は自動的に保存されます。編集がすべて完了したら、Publishをクリックしサイトを公開します。編集画面から公開すると、ステージングドメインとカスタムドメインの両方にサイトが公開されます。

注意点

• デザインに関する制限: 編集モードでは、ウェブサイトのデザイン構造（レイアウト）、スタイル（色、フォントなど）、要素の設定（サイズ、位置など）といった、見た目に関する変更は一切行うことができません。
• 構造に関する制限: 編集モードでは、メインコンポーネントやコンポーネントインスタンスの構造を編集することはできません。つまり、コンポーネントの中身を直接変更することはできません。また、ページ名やページフォルダ、スラッグの編集、ホームページの設定など、ページ構造に関わる設定も変更できません。
• 機能に関する制限: 編集モードでは、カスタムコードやカスタム要素の追加・編集、CMS設定の更新、新しいCMSコレクションの作成など、機能に関わる操作も行うことはできません。

まとめ編集モードを利用してもっとWebflowを効果的に活用しましょうWebflowの編集モードは、コンテンツ更新プロセスを効率化し、チームのコラボレーションを円滑にする強力なツールです。その機能を最大限に活用することで、Webサイトの運用コストを削減し、ビジネスの成長に貢献します。