この投稿はWebflow社が提供する「Intro to the Editor」の内容を元に作成しています。
引用元：https://university.webflow.com/lesson/intro-to-the-editor
日本語版Webflow Universityでは、Webflowの基本的な使い方を解説しています。
動的コンテンツの追加、編集、削除を含む、サイト更新作業全般を簡単に操作できるエディター機能がWebflowには備わっています。
この投稿では、エディター画面へのアクセス方法から、静的コンテンツの編集方法、動的コンテンツの編集方法まで、詳細に解説します。
ウェブサイトを構築・デザインするデザイナー画面が開発者用の機能とするならば、エディター画面（Editor）はコンテンツの編集と管理のみを行う、クライアント用（Webに詳しくない方向け）の機能ということができます。シンプルなインターフェイスのエディターでは、公開されたウェブサイトを管理するためのツールがいくつも用意されています。また、これはプロジェクトの所有者だけでなく、第三者をコラボレーターとして招待することができます。
レッスン概要
Webflowのエディター画面は、公開されたWebサイトで使用可能になります。Webflowのエディター画面は、公開されたWebサイトを直接操作する形で、サイト内のコンテンツを編集したり、エディターパネルからページやコンテンツの管理を行うことができます。
Webflowの画面からエディターにアクセスする方法は3通りあります。
1．ダッシュボード上からのアクセス
2．プロジェクトのSettings画面からアクセス
3．デザイナー画面からアクセス
コラボレーターとして招待されたユーザーは、ブラウザのアドレスバーで自分のウェブサイトのURLの最後に「/?edit」を追加することで、自分のウェブサイトのエディターにアクセスできます（例：yourwebsite.com/?edit）。一度ログインすれば、Editorモードで自分のウェブサイトにアクセスすることができます。
後でサイトに戻ったとき、右下に「Edit site」ボタンが表示され、これをクリックするとエディターモードに遷移できます。
エディターを使用するには、ブラウザでサードパーティからのクッキーを受け入れるように設定する必要があることをコラボレーターには伝えておいてください。
Webflowは、Chromeの最新版またはSafariのエバーグリーンリリースに加え、様々なアップデートサイクルに対応した2つのバージョンでエディタを公式にサポートしています。また、すべてのブラウザの使用を非公式にサポートしています。
* ブラウザーをどの程度サポートしているかについては、使用する機能によって異なります (たとえば、フィルターはEdgeでは部分的にサポートされています)。詳細については、次を参照してください。
2022 年 6 月 15 日に、Microsoft は Internet Explorer 11 (IE11) のサポートを正式に終了しました。Webflow で公開されたサイトは、最新の Web ブラウザーでサポートされている業界標準の機能を使用していますが、IE11 でサポートされていない一部の機能は、そのブラウザーで正しく機能しない場合があります。Microsoft による IE11 サポートの詳細をご覧ください。
Webflow は、どのような状況でも IE 9 または IE 10 をサポートしていません。この決定の詳細については、こちらをご覧ください。
エディター画面から公開されているサイトの画面を開き、サイトを閲覧することができます。編集モードに切り替えるには、ページの右下にある「Edit site」ボタンをクリックします。
「Back to live site」をクリックすると、公開されているサイトの画面を開くことができます。
エディターにログインしようとしたときに、エラーメッセージが表示された場合、次のいずれかの修正を試してみてください。
デザイナー画面とは異なり、エディター画面では複数人で同時に編集することが可能です。
同じ箇所を2人以上で変更した場合、最後に編集した内容が反映されます。
エディターにアクセスすると、エディターツールバー（灰色のバー）が画面下に表示され、メイン画面には実際のウェブサイトと変わらない画面が表示されます。このツールバーから、ページ設定、動的コンテンツ、フォーム、エディターアカウントを管理するための様々なエディターパネルにアクセスすることができます。また、エディターで行った変更を確認したり、公開したりすることもできます。
エディター・ツールバーには、以下のタブとアイコンがあります。
ハンバーガーメニュー - このメニューからは、ダッシュボード、プロジェクト設定、デザイナーに移動できます。このボタンはデフォルトではWebflowのロゴを使用していますが、Proプランではこのロゴをお客様独自のロゴやクライアントのロゴに変更することができます。
「Pages」 - 「Pages」パネルを開き、サイトの静的ページと動的ページのすべてを一覧表示します。ここから、編集したいページを表示したり、ページの設定を管理したりすることができます。
「Collections」 - コレクションパネルには、すべてのコレクションリストが格納されています。任意のコレクションをクリックすると、ツールバーに新しいタブが表示され、そのコレクション内のすべてのアイテムのリストが表示されます。ここでは、任意のアイテムを編集したり、新しいアイテムを作成したりできます。
「Forms」 - フォームパネルを開くと、サイト上で送信されたフォームを確認したりCSVダウンロードしたりできます。
アカウント設定（歯車アイコン） - アカウント設定パネルを開くと、コラボレーターのアカウント情報を編集したり、プロフィール画像をアップロードすることができます。
ヘルプとサポート（ターゲットアイコン） - ヘルプとサポートパネルを開くと、エディタの使用に関するよくある質問を確認することができます。
ログアウト（右矢印アイコン） - エディターからログアウトできます。
「Back to live site ボタン」 - エディタモードからライブサイトモードに切り替わり、サイト訪問者が見るのと同じようにサイトを見ることができます。
保存 - すべての変更は、エディターに自動的に保存されます。左下の「Saving...」と「Saved」のステータスがこれを示しています。
変更履歴 - 右下の「Publish」ボタンの横に、「Unpublished Change（未公開の変更）」の数が表示されます。「Unpublished Change」をクリックすると、未公開の変更箇所やコレクションアイテムが表示され、どのコラボレーターが変更したかも確認することができます。
「Publish（公開）ボタン」 - エディターで行った全ての変更を公開することができます。
ページの編集作業は、エディターを使って直感的に行うことができます。さまざまな要素にカーソルを合わせると、編集可能な要素の右上に編集アイコンが表示されます。このアイコンをクリックすると、要素ごとに指定の編集ができます。
一部のスタイルと、カスタムコードで組み込んだ要素はエディター画面に表示されない場合があります。これは、エディター画面の仕様です。
編集可能なテキスト要素にカーソルを合わせると、テキスト要素の周りに薄いグレーのアウトラインが表示され、右上に鉛筆のアイコンが表示されます。ボックス内をクリックすると、テキストを編集することができます。
また、単語やフレーズを選択し、表示されるフローティングツールバーから書式設定を選択することで、書式を設定することができます。
リッチテキスト要素では、メディアの追加、リストの作成、スタイル設定、テキストのさらなる書式設定など、さまざまなことが可能です。
サイトに掲載している画像の入れ替えも可能です。置き換えたい画像の上にカーソルを置き、画像アイコンをクリックするだけです。あなたのコンピューターから新しい画像を選択し、アップロードすることができます。
画像に施される設定は、差し替え前の画像に設定した内容を踏襲するため注意が必要です。例えば、横長の画像を入れ替える場合、元画像に近い縦横比の画像の方が綺麗に表示される場合が多いです。
ボタン要素を編集するには、ボタンにカーソルを合わせ、右上に表示される設定アイコンをクリックします。
設定には2つのオプションがあります。
各ページの「Settings」では、SEOメタタイトルやメタディスクリプション、Open Graphタイトルやディスクリプション、Open Graph画像などのSEOにおける重要なページ設定を管理することができます。また、静的ページのパスワード保護設定や、コレクションページのRSSフィード設定も管理することができます。
各ページの「Settings」へのアクセス方法
検索バーからページ名で検索を掛けることもできます。
ページ自体をクリックすると、該当するページが開き、ページ上のコンテンツが編集できるようになります。
動的コンテンツを含むWebサイトを構築している場合、エディターの「Collections」タブにアクセスできます（WordPressにおける投稿機能のようなものです）。コレクションパネルには、すべてのCMSコレクションが表示されます。コレクションをクリックすると、コレクション名と同じタイトルの新しいタブが開きます。このタブには、そのコレクション内のすべてのコレクションアイテムが含まれます。
既存の項目をクリックして編集したり、「＋New」ボタンをクリックして新しく投稿したいアイテムの情報を登録することができます。
内容の入力やフィールドの更新が終わったら、次の操作ができます。
Create / Save:作成しているアイテムが新規の場合は作成、既存の場合は保存ができます。このアイテムは別の操作でサイトを公開した際に、一緒に公開されます。
Publish:サイト全体の公開とは別に、このアイテムだけを公開することができます。
Save as Draft:いわゆる下書き保存です。登録内容は保存されますが、公開はされません。
Cancel:これまで登録した内容を破棄します。
Schedule:公開するタイミングを指定できます。公開予約です。
アイテム名の右側にあるアイコンをクリックすると、そのアイテムのコレクションページを表示することができます。これにより、パネルが折りたたまれ、現在閲覧しているアイテムのページがブラウザ上に表示されます。これによって、プレビューしながら編集することができます。
「←」ボタンをクリックするとアイテム一覧に戻ります。
コレクションパネルでは、すべてのコレクションアイテムとそのステータスを確認することができます。複数のアイテムの削除、アーカイブ、ステータスの変更を一度に行うことができます。
開いたタブは「✕」ボタンで閉じることができます。
編集をすべて行った後は、「Publish」ボタンをクリックすることで、編集内容を公開できます。
エディターでの作業中は、エディターパネルがWebサイトの大部分を覆います。エディタパネルを折りたたんでウェブサイトを表示するには、上部にある「View Site」ボタンをクリックします。
このビューでは、通常と同じようにWebサイトを閲覧し、任意のページに変更を加えたり、確認したりすることができます。
エディターで行った変更は、編集したコレクションアイテムを個別に公開するか、「Publish」ボタンを押してすべての変更を公開するまで、実際のサイトには表示されません。青い「Publish」ボタンを1回クリックすると、ここまで行った変更内容がリストで表示されます。
エディターで公開すると、ステージングドメイン（テスト環境）とカスタムドメイン（本番環境）の両方にサイトが公開されます。公開する環境を指定したい場合はデザイナー画面もしくはプロジェクトセッティングスから公開を行ってください。
Webサイトにフォームを実装している場合、エディターには「Forms」タブがあります。ここでは、サイト閲覧者が送信したフォームの基本的な情報を見ることができます。また、フォームの全情報をCSVダウンロードしてみることもできます。
デフォルトでは、エディターにアクセスできる人であればだれでも、どの要素に対しても編集作業ができます。一方で、デザイナー画面で任意の要素をエディターでは編集できないようにすることができます。
あなたとサイトの共同作業者はエディタを使用して本番サイトのすべてのコンテンツを編集できますが、必要に応じて要素を編集不可能にすることができます。
また、ショートカットキー Command＋Shift＋L（Macの場合）、Control＋Shift＋L（Windowsの場合）で切り替えることもできます。
ただし、CMSの要素は編集制限を掛けられません。
Webflowのメンバーシップ機能はエディターでは管理できません。
いかがでしょうか。
当社では、Webflowの関心を持ってくださった方々に向けて、無料Webflow説明会を実施しています。
以下よりお問い合わせフォームにアクセスし、お気軽にお申し込みください。
ご発注を検討されている企業様だけでなく、フリーランスや制作会社など同業者様でも構いません。
Webflowの広がりによって、発注側も制作側もより幸せになれる社会の創造に向けて、当社は邁進していきます。
今後とも宜しくお願い致します。
Webflowとはなにか？についてはこちらで解説しています。合わせてご覧ください。
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サービス受託開発
マーケティングコンサル事業
シェアオフィス及びコワーキングスペースの運営