この投稿は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とはなにか？についてはこちらで解説しています。合わせてご覧ください。
会社名
Funwork株式会社
所在地
東京都千代田区東神田3-4-12
代表者
堀尾 尭史
電話番号
メール
03-5809-2979
backoffice@funwork2020.com
URL
設立日
2020年5月18日
資本金
9,000,000円
取引銀行
きらぼし銀行
Webサイト、ITサービス受託開発
マーケティングコンサル事業
シェアオフィス及びコワーキングスペースの運営