コンテンツにスキップ

Content Editor入門:テキスト・画像・リンクを安全に更新する

Content Editor入門:テキスト・画像・リンクを安全に更新する

Content editor roleは、Webflowサイトの見た目を確認しながら、文章・画像・リンクなどのコンテンツを更新するための役割です。サイトの構造やデザインを変更せずに作業できるため、日常的な更新はContent editor roleで行うのが安全です。

従来のLegacy Editorは2026年8月4日から利用できなくなる予定です。この章では、公開版として最新のContent editor roleを前提に説明します。 実画面例: 実際のサイト画面を見ながら、対象の文章・画像・リンクを確認して更新します。

作業全体の流れ

  1. Content editor roleでWebflowを開きます。
  2. 更新したいテキストを編集します。
  3. 必要に応じて画像を差し替えます。
  4. ボタンや文章のリンク先を確認・変更します。
  5. 変更内容を確認します。
  6. 問題がなければPublishします。

画像差し込み枠

この章は、実際の画面キャプチャーが多いほど初心者に伝わりやすくなります。後でBOOSTのWebflow画面を使って、以下の位置に画像を差し込んでください。実際の顧客名、メールアドレス、非公開URL、フォーム送信内容は写さないでください。

No.対象ページ撮影する画面強調する箇所
B-01Content Editor入門Dashboardで対象サイトのカードが見えている状態サイトカード、Editorまたは編集入口
B-02Content Editor入門対象サイトを開いた直後の画面画面上部のバー、編集可能エリア
B-03Content Editor入門編集できるテキストにカーソルを合わせた状態青い枠、編集アイコン
B-04Content Editor入門テキストをクリックして編集状態になった画面入力カーソル、編集対象の文章
B-05Content Editor入門画像にカーソルを合わせた状態画像編集アイコン、選択中の画像
B-06Content Editor入門画像アップロードまたは選択画面Upload、Replace、Choose Imageのボタン
B-07Content Editor入門ボタンやテキストリンクを選択した状態リンク設定アイコン、対象リンク
B-08Content Editor入門リンクURLの入力欄が開いた状態URL欄、新しいタブ設定
B-09Content Editor入門Publish前にページ全体を確認している状態修正済みのテキスト、画像、リンク
B-10Content Editor入門Publishボタンまたは公開確認画面Publish、公開対象ドメイン
B-11Content Editorを開く?update 付きURLで編集画面を開いた状態URL末尾の ?update、ログイン後の編集画面
B-12Content Editorを開く編集権限がない、または編集アイコンが出ない例Editor入口が出ない状態、確認すべき場所
B-13テキスト編集短い見出しを編集している画面変更前後が分かる見出し
B-14テキスト編集長い本文を編集している画面改行位置、貼り付け後の本文
B-15太字設定テキスト選択後にツールバーが出ている画面Boldボタン、選択範囲
B-16リンク設定外部リンクを入力している画面URL欄、Open in new tab
B-17画像差し替え差し替え前の画像と編集アイコン対象画像だけを選ぶこと
B-18画像差し替え差し替え後の表示確認画面画像の縦横比、切れ、ぼやけ
B-19破棄・戻す保存せず閉じる、または変更破棄の確認画面Discard、Cancelなどの選択肢
B-20公開前チェック公開サイトを別タブで確認している画面公開URL、変更後の表示

Webflowを開く

WebflowにログインしてDashboardから対象サイトを開く方法と、サイトURLの末尾に ?update を付けて直接開く方法があります。サイトごとに権限や案内URLが異なる場合があるため、初回は制作担当者から共有された方法を優先してください。

詳しい手順は No.9 Content editor roleでWebflowを開く方法 を確認してください。

テキストを編集する

  1. 編集したい文章にマウスを合わせます。
  2. 編集アイコン、または編集可能なテキスト部分をクリックします。
  3. 文章を直接入力・削除します。
  4. 長い文章は、先にGoogle Docsやメモ帳で作ってから貼り付けると安全です。

詳しい手順は No.10 サイトの文字を書き換える方法 を確認してください。

画像を差し替える

  1. 差し替えたい画像にマウスを合わせます。
  2. 画像編集アイコンをクリックします。
  3. 新しい画像ファイルを選択またはドラッグしてアップロードします。
  4. 公開前に、画像が粗くないか、縦横比が崩れていないか確認します。

画像がアップロードできない場合は 画像アップロードのトラブル も確認してください。

リンクを編集する

ボタンや文章リンクのリンク先を変更する場合は、リンク設定画面でURLを確認します。外部サイトへ飛ばすリンクは、必要に応じて新しいタブで開く設定にします。

リンク作成は No.12 文章にリンクを設定する方法、リンク先変更は No.14 リンク先URLを変更する方法 を確認してください。

Publish前に確認する

  • 文章に誤字脱字がない
  • 元の意味と違う文章になっていない
  • 画像が正しく表示されている
  • ボタンやリンクをクリックしたときの遷移先が正しい
  • スマートフォン表示で文字や画像が崩れていない
  • 変更してはいけない共通パーツを触っていない

詳しい確認項目は Editor公開前チェックリスト を使ってください。

Publishする

編集内容は、Publishするまで一般の閲覧者には反映されません。内容を確認したら、Publish権限がある担当者が公開します。公開後は実際のWebサイトを開き、変更が反映されているか確認してください。

詳しい手順は No.15 変更を保存してサイトに反映させる方法 を確認してください。

よくあるつまずき

症状確認すること
編集アイコンが出ないログイン状態、Content editor role、編集不可エリアを確認する
Publishしたのに反映されないブラウザのキャッシュを削除、または強制再読み込みする
画像が大きすぎる画像サイズを調整してからアップロードする
リンク先が違うURLの入力ミス、外部リンク設定、新しいタブ設定を確認する

理解度チェック

  1. Content editor roleでの作業として適切なものはどれですか?
    • A. サイト全体のレイアウトを作り直す
    • B. 既存の文章、画像、リンクを更新する
    • C. DNS設定を変更する
答えを見る

正解: B

Content editor roleは、完成済みページのコンテンツ更新に向いています。構造変更やドメイン設定は担当者に確認してください。

  1. 外部サイトへのリンクを設定するとき、確認した方がよいことはどれですか?
    • A. URLが正しいか、新しいタブで開く必要があるか
    • B. リンク文字の色だけ
    • C. 画像サイズだけ
答えを見る

正解: A

外部リンクはURLの入力ミスが起きやすいため、クリックして遷移先を確認します。必要に応じて新しいタブで開く設定も確認します。

  1. 変更内容が一般公開サイトに反映されるタイミングとして正しいものはどれですか?
    • A. 文字を入力した瞬間
    • B. Previewで見た瞬間
    • C. Publishが完了した後
答えを見る

正解: C

編集内容はPublishするまで一般の閲覧者には反映されません。Publish後は公開サイトで確認します。

次に進む

具体的な操作を順番に確認する場合は No.9 Content editor roleでWebflowを開く方法 から進んでください。