コンテンツにスキップ
IGNITE Webflow更新マニュアル

ブログ記事を新規投稿する完全ガイド

ブログ記事を新規投稿する完全ガイド

ブログ、お知らせ、導入事例など、同じ形式の記事を追加していく機能は CMS で管理します。CMSは「Content Management System」の略で、記事のタイトル、本文、画像、カテゴリー、公開日などを入力して管理する仕組みです。 実画面例: CMSで更新した記事は、公開後に実際のページや一覧で表示を確認します。

作業全体の流れ

  1. Collectionsを開きます。
  2. 対象のCollectionを選びます。
  3. New ItemまたはNew Blogなどの新規作成ボタンを押します。
  4. タイトルとSlugを入力します。
  5. サムネイル画像、カテゴリー、概要、公開日を設定します。
  6. 本文を入力し、見出し・画像・リンクを整えます。
  7. 下書き保存、予約公開、即時公開のいずれかを選びます。
  8. 公開後に実際のページを確認します。

画像差し込み枠

CMS更新は入力項目が多いため、画面キャプチャーがあるほど操作ミスを減らせます。後でBOOSTのWebflow画面を使って、以下の位置に画像を差し込んでください。実際の顧客名、問い合わせ内容、非公開URL、個人情報は写さないでください。

No.対象ページ撮影する画面強調する箇所
C-01CMS完全ガイドDashboardまたは編集画面からCMSに入る前の状態CollectionsまたはCMS入口
C-02CMS完全ガイドCollections一覧が表示された状態Blog、News、お知らせなど対象Collection
C-03CMS完全ガイド対象Collectionを選択した直後既存記事一覧、検索欄
C-04CMS完全ガイドNew Itemを押す直前New Item、New Blogなど新規作成ボタン
C-05CMS完全ガイド新規記事フォームが開いた状態入力欄全体、保存ボタン
C-06CMS完全ガイドNameまたはTitleを入力している状態タイトル欄、必須項目
C-07CMS完全ガイドSlug欄を入力している状態半角英数字、ハイフン、URL末尾
C-08CMS完全ガイドサムネイル画像欄が見えている状態Thumbnail Image、Uploadボタン
C-09CMS完全ガイドカテゴリー選択欄が開いている状態Category、選択中のカテゴリー
C-10CMS完全ガイドSummaryまたはDescription欄を入力している状態一覧ページに出る説明文
C-11CMS完全ガイドRich Text本文欄が見えている状態Body、Rich Text、本文入力エリア
C-12CMS完全ガイドGoogle Docsなどから本文を貼り付けた直後改行、余計な装飾がないか
C-13CMS完全ガイド本文中の見出しを設定している状態Heading 2、Heading 3
C-14CMS完全ガイド本文中の太字・斜体メニューBold、Italic、選択範囲
C-15CMS完全ガイド箇条書きメニューを開いた状態Bullet list、Numbered list
C-16CMS完全ガイド本文中に画像を挿入する直前+ ボタン、Image
C-17CMS完全ガイド画像アップロード画面Choose Image、Upload
C-18CMS完全ガイド挿入後の本文画像画像の位置、余白、見切れ
C-19CMS完全ガイド画像サイズ変更メニューSmall、Medium、Full widthなど
C-20CMS完全ガイドYouTube埋め込みURLを入力している状態Embed、YouTube URL
C-21CMS完全ガイド本文リンク設定画面リンクURL、Open in new tab
C-22CMS完全ガイド公開日フィールドを入力している状態Published On、Date
C-23CMS完全ガイドSave as Draftを押す直前Save as Draft、下書き状態
C-24CMS完全ガイドPublishを押す直前Publish、公開確認
C-25CMS完全ガイドSchedule公開を設定している状態日時指定、Schedule
C-26CMS完全ガイド下書き記事一覧Draft表示、対象記事
C-27CMS完全ガイド公開済み記事を再編集している状態Published、編集対象項目
C-28CMS完全ガイドArchiveまたはUnpublish操作の確認画面Archive、Unpublish、Cancel
C-29CMS完全ガイド公開後の記事ページタイトル、本文、画像、リンク
C-30CMS完全ガイド一覧ページで記事が表示された状態サムネイル、タイトル、公開日

投稿前に用意するもの

  • 記事タイトル
  • 記事本文の原稿
  • アイキャッチ画像またはサムネイル画像
  • カテゴリー
  • 記事概要またはDescription
  • 公開日
  • 本文中で使う画像、動画URL、リンク先URL

新規記事を作成する

まずEditorまたはDesigner内のCollectionsを開き、ブログ・お知らせなどの対象Collectionを選びます。表示名はサイトによって Blog Posts、News、お知らせ など異なります。

詳しい手順は No.17 CMSの場所 と No.18 新しい記事を追加する方法 を確認してください。

基本情報を入力する

Name または Title には記事の正式タイトルを入れます。Slug はURLの末尾に使われる文字列です。日本語ではなく、半角英数字とハイフンで、内容が分かる短い文字列にします。

例:

  • summer-campaign-2026
  • how-to-use-webflow-editor
  • new-service-announcement

公開後にSlugを変更するとURLが変わるため、公開前に必ず確認してください。

本文を作成する

本文は、直接入力するよりもGoogle Docsなどで下書きしてから貼り付けると安全です。貼り付け後は、見出し、太字、箇条書き、画像、リンクを整えます。

操作詳細ページ
本文を書くNo.22 本文を書き込む
太字・斜体No.23 太字・斜体にする
見出しNo.24 見出しを付ける
箇条書きNo.25 箇条書きにする
画像挿入No.26 本文に画像を入れる
YouTube埋め込みNo.28 YouTube動画を埋め込む
本文リンクNo.29 本文にリンクを貼る

メタ情報を設定する

記事の表示やSEOに関わる項目です。サイトによって項目名は異なりますが、以下は公開前に必ず確認してください。

  • サムネイル画像またはアイキャッチ画像
  • カテゴリー
  • Post summaryまたはDescription
  • 公開日
  • 画像のaltテキスト
  • 関連記事や一覧ページでの表示

公開前の抜け漏れ確認には CMS記事の公開前チェックリスト を使ってください。

公開方法を選ぶ

すぐに公開する場合はPublish、後で公開する場合はSchedule、まだ完成していない場合はSave as Draftを使います。誤って公開しないよう、公開ボタンを押す前に内容を再確認してください。

公開方法詳細ページ
公開日を設定するNo.30 公開日を設定する
予約公開するNo.31 公開を予約する
下書き保存するNo.32 下書きで保存する
下書きを公開するNo.33 下書きを公開する

公開後チェック

  • 記事ページが表示される
  • 一覧ページにも表示される
  • タイトルと画像が正しい
  • リンクが切れていない
  • スマートフォンで読みやすい
  • SNSで共有する場合、タイトル・説明文・画像が意図通りになっている

表示されない場合は トラブル時にまず確認するチェックリスト を確認してください。

理解度チェック

  1. Slugの説明として正しいものはどれですか？
    • A. 記事URLの末尾に使われる文字列
    • B. 記事本文の文字数
    • C. 画像のファイルサイズ
答えを見る

正解: A

Slugは記事URLに使われます。公開後に変更するとURLが変わるため、公開前に確認します。

  1. 記事がまだ完成していない場合に選ぶべき状態はどれですか？
    • A. Publish
    • B. Save as Draft
    • C. Delete
答えを見る

正解: B

未完成の記事は下書きとして保存します。Publishは一般公開する操作、Deleteは削除です。

  1. CMS記事の公開前に確認するものとして正しい組み合わせはどれですか？
    • A. タイトル、Slug、本文、画像、リンク、スマートフォン表示
    • B. タイトルだけ
    • C. 公開日だけ
答えを見る

正解: A

記事は一覧ページ、詳細ページ、SNS共有にも影響するため、複数の項目をまとめて確認します。

次に進む

実際の操作に入る場合は No.17 CMSの場所 から進んでください。