※2022/12/15 Webflow CMS（投稿機能）のエディター画面操作方法について追記しました。
この投稿はWebflow社が提供する「Client's guide to the Editor: Introduction」の内容を元に作成しています。
引用元：https://university.webflow.com/courses/clients-guide-to-the-editor?video=t7moqInkxo4
この記事では、Webについて詳しくない方でも自社のWebサイトを簡単に更新できる『エディター画面（Editor）』の概要を説明します。
公開しているサイトプロジェクトを保持するアカウントから任意のユーザーにエディター画面（Editor）の招待メールを送ることができます。
招待されたユーザーには次のようなメールが送られます。
このボタンをクリックすることで、次の様なエディター画面（Editor）のアカウント登録画面が開きます。
任意の名（First Name）姓（Last Name）と大文字を含む10桁以上の英数字（Password）を入力し、Join nowをクリックすると、エディター画面（Editor）画面が開きます。
見た目は普段から目にしている自分のサイトとほぼ変わりません。
スクロールすればコンテンツが見れますし、クリックすればページ遷移もします。
しかし、ページ上の要素をクリックすると、コンテンツの編集が可能になっていることが分かると思います。
マウスカーソルをテキスト要素にあてたときに、右上にペンマークのボタンが表示されている場合は、その箇所のテキストを書き替えることができます。
ここで操作できることは次の通りです。
Webflowによって構築・公開されたサイトであれば、どのページに置いても上記の「テキストの書き換え」が可能になっています。
マウスカーソルをボタンなどリンクを設定している要素にあてたときに、右上に歯車のボタンが表示されている場合は、その箇所のリンク設定を編集することができます。
リンクには次の設定が可能です。
リンクはテキストやボタンだけでなく、画像にも設定していることがありますが、この場合リンクの設定がうまく働かないことがあります。
これは、次で説明する画像の差し替え機能と競合してしまうためです。
マウスカーソルを画像を設定している要素にあてたときに、右上に画像のアイコンが表示されている場合は、その箇所の画像を挿し替えることができます。
画像のアイコンをクリックすると、WindowsではExplorerが、MacではFinderが起動し、任意の画像と差し替えることができます。
画像の差し替え時には、画像の縦横比や画質、容量に注意が必要です。
差し替える画像同士はなるべく縦横比が近いものを選びましょう。横長の箇所に縦長の画像を挿し替えると画像の表示が歪になることがあります。
画質が粗い画像(縦横サイズが小さい画像)に差し替えると、画質が粗く表示されることがあります。また、簡単更新ツール(Editor)上で画像を明るくしたり色付けしたりは出来ないので、すでに加工済みの画像を上げるようにしましょう。
容量の大きい画像に差し替えてしまうと、ページの表示速度が遅くなる場合があります。当社では、画像の大きさにもよりますが、大きくても200kb程度でお願いしております。WebflowはpngやjpgだけでなくWebPにも対応していますので、差し替える画像は必ずWebPに変換するようにしましょう。
簡単に更新できるようになっているからこそ、細かい編集をすることはさすがに叶いません。色付けやフォントサイズ、フォントファミリーの変更の様にCSSを用いて開発されるスタイルの設定を変更したい場合は、Webflow構築の出来るクリエイターに更新を依頼するようにしましょう。
当社では、軽微な修正であれば追加料金は頂かず、お電話中に直すこともあるくらいスムーズに更新作業を承っています。こうした細かいところの柔軟さもWebflow構築のメリットと言えるでしょう。
各ページの「Settings」では、SEOメタタイトルやメタディスクリプション、Open Graphタイトルやディスクリプション、Open Graph画像などのSEOにおける重要なページ設定を管理することができます。また、静的ページのパスワード保護設定や、コレクションページのRSSフィード設定も管理することができます。
各ページの「Settings」へのアクセス方法
検索バーからページ名で検索を掛けることもできます。
ページ自体をクリックすると、該当するページが開き、ページ上のコンテンツが編集できるようになります。
簡単更新ツール(Editor)画面の下部に表示されているナビゲーターから様々な機能にアクセスできます。
Pegeタブからは、サイト内のすべてのページにアクセスできます。これは、投稿ページ(CMSページ)も含めたすべてのページです。
Collectionタブからは、投稿コンテンツ(CMSコンテンツ)の追加、編集、削除ができます。※CMS機能を実装している場合に限ります。
サイト構築時に設計した項目を入力していくことで、自分のサイトに新しい投稿コンテンツ(CMSコンテンツ)を追加することができます。
項目ごとに日本語で説明書きを入れられたり、カスタム項目については日本語でも設定できるので、日本語ベースで操作して頂けます。
Formタブからは、これまで問い合わせフォームから送信された履歴を見ることができます。※フォーム機能を実装している場合に限ります。
その他にも、アカウント設定・ヘルプ・ログアウトのタブがあります。
画面上の右下、もしくは右上に青いPublishボタンがあります。これまで作業してきた編集内容は、一時的に簡単更新ツール(Editor)上で保存されており、一般公開されている本番サイトには反映されていません。このPublishボタンを押下することで、ここまで編集してきたすべての内容が本番サイトに反映されます。
Publishボタンをクリックすると、これまでの編集履歴を確認することができます。
ここからは、WebflowCMS（WordPressで言うところの投稿機能）を使って、お知らせやコラムの投稿や編集をする方法について解説します。
コンテンツの管理画面は、ナビゲーターの「Collections」をクリックして表示することができます。
表示されたコレクション一覧から、編集したいCMSコレクションを選択すると、コレクションアイテムの一覧が表示されます。
投稿を追加するには、右上の「＋ New ～（例はBlog Post）」をクリックします。既存の投稿を編集したい場合はリストの中で任意のコレクションアイテムをクリックしてください。
すると、コレクションアイテムの管理画面が表示されます。
ここではよく使用されるフィールドについて解説していきます。
どんなフィールドが表示されるかは、CMSコレクションの設計によって変わります。
コレクションアイテムにデフォルトで用意されている項目です。コレクションアイテムの名前であると同時に、多くの場合投稿記事のタイトルとして使用されます。
コレクションアイテムにデフォルトで用意されている項目です。投稿記事のURLを一意に決める文字列を登録します。
例：https://www.funwork2020.com/post/clients-guide-to-the-editor
※上記の太字の部分がSlugです。
機械的に番号を付与していってもいいのですが、URLで記事の中身が分かるように、記事の概要を表す英単語を並べることをおすすめします。これによって、閲覧者はもちろん、SEOの観点からも好ましいのに加えて、社内で管理する際にも役立ちます。
投稿記事の概要を入力するフィールドです。通常はテキストのみ登録可能になっており、画像やリンクは入れられません。
用途としては、コレクションリスト（記事一覧画面）でタイトルと合わせて概要文を表示させたり、SEOで重要なメタディスクリプションとして使用されます。
アイキャッチとも呼ばれる、投稿の内容を表し、閲覧者の興味を惹くために重要な1枚画像のことです。
用途としては、コレクションリスト（記事一覧画面）でタイトルと合わせて表示させたり、SEOではOpen Graph 画像に使われたり、記事詳細ページで閲覧者の興味を惹くために文頭に置かれたりします。
CMSコレクションに置いては画像1枚1枚の容量に気を遣う必要があります。なぜなら、運用していく中で投稿数は10にも100にも膨れ、画像の容量負荷によってページの表示スピードがかなり遅くなるリスクがあるためです。
ページの表示スピードが下がると、著しくUXを損なうだけでなく、SEOにもマイナスの影響を与えます。
Webflowには画像の容量を制限するような機能はありません。従って、サイト制作者はフィールドの説明欄に画像の容量を制限するような文言を入れて、クライアントが重い画像を投稿しないようにする必要があります。
例：画像容量200kb推奨 / Webp画像の投稿を推奨 など
投稿するコンテンツのメイン部分です。多くの場合リッチテキストフィールドが用意されており、テキストだけでなく、画像・動画・カスタムコード・リンク・見出しなど様々なコンテンツを入れることができます。
次に主だったリッチテキストフィールドに追加できるコンテンツを下記に記します。
リッチテキストには次のコンテンツが追加できます。
Webflowの標準機能には無いその他の主だったコンテンツを下記に記します。
これらのコンテンツはカスタムコードコンテンツを用いて、コーディングすることで実装可能になります。
投稿にはスイッチフィールドが用意されていることがあります。これは、サイト側でこのコンテンツの表示非表示を切り替えたり、画像など一部コンテンツを投稿ごとに変えたいときに使用します。
投稿の表示を絞り込んだり、ユーザーに投稿を探しやすくするためにカテゴリーがセットされている場合もあります。
プルダウンになっており、選択すると、この投稿にカテゴリーがセットされます。
カテゴリー自体が1つのCMSコレクションで構築されている場合、クライアントでカテゴリーを追加することができる場合もあります。
投稿日（Date）
CMSコレクションの設計次第では、投稿日を手動で登録できることもあります。多くの場合、投稿記事の一覧ページは日付順に並んでいます。その際、投稿日を自動で設定されてしまうと、一覧の並び順を制御することが難しくなり、運用に支障をきたします。そこで、投稿日を手動で入力できるようにすることで、例えば更新したある投稿だけを上位表示にするといった制御が可能になります。
このほかにも様々なフィールドがWebflow CMSには用意されています。実際に自分のサイトがどのような仕様になっているのかは、制作会社に確認してください。
各フィールドの入力が完了したら、投稿画面右上のボタンから投稿データを任意のステータスに変更できます。
次に主だった項目を説明します。
「Save」をクリックすると、投稿データは「Staged Chamges」というステータスになります。これは、サイト全体がPublishされたときに、この投稿データも一緒に本番サイトに公開されることを意味します。
入力した登録データを本番サイトに公開します。コレクションアイテム上の「Publish」はこの投稿記事だけを本番サイトに公開してくれます。
「Save as Draft」をクリックすると、対象の投稿データを本番サイトに公開することなく保存することができます。
作成、編集した投稿データの公開日時を指定することができます。
コンテンツを削除（物理削除）したい場合は、コレクションアイテム一覧右上の「Select...」ボタンをクリックし、任意の投稿にチェックマークを付け、「Delete」ボタンをクリックすることで完了します。
ただし、この操作によって削除したコレクションアイテムは二度と復元できないことに注意してください。
尚、選択したアイテムについては、「Delete」ボタンの右にある「Update Items」から任意のステータスにまとめて変更することもできます。
2点だけ重要なことをお伝えします。
再び簡単更新ツール(Editor)にアクセスしようと思った際に、初回登録と同様にメールに記載のボタンをクリックしてもうまくいきません。
再アクセスするには、ブラウザのURL入力窓に「自社のWebサイトURL」の後ろに「?edit」をつけてEnterを押すことで簡単更新ツール(Editor)にアクセスできます。
表示されたEmailとPasswordに以前設定した内容を登録すれば、簡単更新ツール(Editor)画面が開きます。
また、1度簡単更新ツール(Editor)画面を開いたことのあるサイトを表示した際に、右下にアイコンが出てくる場合があります。このアイコンをクリックすることで、いつでも簡単更新ツール(Editor)画面にログインすることができます。
Webflowのデザイナー画面と同様に、簡単更新ツール(Editor)も同時に複数人で編集することができません。これは、編集が競合した際の制御機能がまだWebflowには備わっていないためです。今後この制限が緩和されることもあるかもしれませんが、、、
Webflowのアップデートを待ちましょう。
いかがでしょうか。
当社では、Webflowの関心を持ってくださった方々に向けて、無料Webflow説明会を実施しています。
以下よりお問い合わせフォームにアクセスし、お気軽にお申し込みください。
ご発注を検討されている企業様だけでなく、フリーランスや制作会社など同業者様でも構いません。
Webflowの広がりによって、発注側も制作側もより幸せになれる社会の創造に向けて、当社は邁進していきます。
今後とも宜しくお願い致します。
Webflowとはなにか？についてはこちらで解説しています。合わせてご覧ください。
Webflowについての基本的な使い方について解説した他の記事はこちらからご覧ください。
Webflowのメリットについて解説した記事も投稿しています。よろしければご覧ください。
会社名
Funwork株式会社
所在地
東京都千代田区東神田3-4-12
代表者
堀尾 尭史
電話番号
メール
03-5809-2979
backoffice@funwork2020.com
URL
設立日
2020年5月18日
資本金
9,000,000円
取引銀行
きらぼし銀行
Webサイト、ITサービス受託開発
マーケティングコンサル事業
シェアオフィス及びコワーキングスペースの運営