Webflow CMS完全ガイド2026｜料金・ページ作成手順・6年使って見えたバグ

Webflow CMSとは

Webflow CMSとは、同じデザインのページを量産できるWebflowの機能です。ブログやお知らせなど更新型ページの作成に使い、利用にはPremiumプラン（2026年5月改定後・年払い$25/月）が必要で、CMSアイテム20,000件・40コレクションまで扱えます。

結論から。Webflow CMSは「同じデザインのページを量産する機能」で、ブログ・お知らせ・実績などの更新型ページを作れます。2026年5月の料金改定後、CMSを使うにはPremiumプラン（年払い$25/月・月払い$39/月）が必要です。

今回はWebflowのCMSについて解説していきます。Web春でも使用しているCMSのテクニックや反対にWebflow CMSで「不便だな」と感じることなど実際の経験に基づいても紹介していきます。是非ご覧ください。

それではWebflow CMSでできることを見ていきましょう。

Webflow CMSでできること一覧【2026年版】

Webflow CMSでできることをリストでまとめました。

• ブログ、ニュースなどを作成
• HTMLタグに沿ったWeb制作
• 自動簡易SEO作成
• パンくずリスト自動作成
• 記事内にYoutubeの埋め込み掲載
• 記事ごとにライターを表記する、ライターの登録
• ジャンル分け、ジャンルごとの色分け

などが主に使う機能です。基本のページ作成のやり方は、後述の「WebflowでCMSページを作る基礎手順」で解説します。ここでは上記の機能をもう少し詳しく解説していきます。

Webflow CMSでブログ、ニュースなどを作成できる

CMSとは簡単に言うと｢同じデザインのページを量産する機能」です｡定期的に更新するブログやニュースページなどを作成するのに使います。Webflowでは自由にCMSを構築することができ、個人に合わせた無駄のないCMSを作成できます。

Webflow CMSは３つの工程で導入可能

Webflow CMSでは「CMSフィールド」「CMSページのデザイン」「デザインとCMSフィールドの連携」という3つの工程で導入することができます。具体的な操作は次の「WebflowでCMSページを作る基礎手順」で解説します。

Webflow CMSは複数のCMSフィールドを連携して高度なCMS運用が可能

ジャンル分け、ライターの登録などは他のCMSを作成してリンクつけすることで使用できます。CMSは複数使うのが定番です。ジャンルごと色分けする、ライターを登録する、オススメの記事を表示するなどを行うことで効率アップだけでなくSEO対策も簡単にできます。

WebflowでCMSページを作る基礎手順【5ステップ】

結論：WebflowのCMSページは「①コレクション作成→②フィールド設計→③アイテム登録→④テンプレートページのデザイン→⑤フィールド接続・公開」の5ステップで作れます。管理画面のUIは更新が続いているため、スクリーンショットではなくテキストで手順を示します（2026年時点のUI準拠）。

1. コレクションを作成する：Designer左パネルのCMSアイコンから「New Collection」を選びます。Blog Postsなどのテンプレートを選ぶと、タイトル・本文・サムネイルといった定番フィールドが最初から用意されます。
2. フィールドを設計する：Plain Text（タイトル）・Rich Text（本文）・Image（サムネイル）・Date（公開日）・Reference（カテゴリやライターとの連携）など、必要な型のフィールドを追加します。ジャンル分けやライター表記は、別コレクションを作ってReferenceで繋ぐのが定番です。
3. アイテムを登録する：作ったコレクションに記事を2〜3件入れます。デザイン確認用のダミーで構いません。
4. テンプレートページをデザインする：コレクションを作ると「Collection Template Page」が自動生成されます。この1ページをデザインすれば、全アイテムに同じデザインが適用されます。
5. フィールドを接続して公開する：見出しや画像などの各要素で「Get text from」（バインド設定）からコレクションのフィールドを選んで接続します。一覧ページにはCollection Listを置いてアイテムを並べ、Publishで公開します。

Webflowの操作を体系的に学びたい方は21日でWebflow習得コース（Webflow大学の日本語解説）もどうぞ。

Webflow CMSの不便な所、できないこと。【毎日使うからこそ見える小さなバグ】

Webflowは高度な機能が多く存在しますが、100％満足というわけではありません。ここではWebflow CMS導入前に気をつけておくべき事項を実際に使用している経験から紹介していきます。

• 【バグ】文字が反映されない時あり
• スライダーにCMSは使えない
• 目次が簡単につくれない
• コード出力時は別で対応する必要がある。
• CMSでWebp変換がない

以上の内容を順番に解説します。

【バグ】Webflow CMSでライティングすると約10%の確率でバグる（実体験）

Webflow CMSで直接ライティングをしているとたまに保存されなくなったり、文字が反映されない時があります。一度バグが起きたらリロードすれば解決しますが保存はされません。こまめな保存とライティングした内容を保存しておけるクローム拡張機能を使用して対策しましょう。一番は他のメモアプリなどでライティングすることです。

バグが起こりやすいタイミング（独自）

リンク使用時、リスト使用時、画像挿入時の後にはすぐに保存しましょう。Hタグの使用ではバグが起きませんが、その他の機能を使うと10％ぐらいの確率でバグが起きます。一見バグってなくても保存されてない時もありました。10％ぐらいの確率だからこそ油断します。

保存されてないと本気で萎えるのでメモ帳やテキストエディターを使用してください。Webflow CMSではHタグやリンクタグの情報をそのまま読み取ってくれるのでメモで作成→コピペでうまくいきます。

Webflow CMSはスライダーで使用できない

Webflowには標準装備でスライダーを作成できる機能があります。しかしCMSの画像をスライダーに使用することはできません。不便ですね。カスタムコードを使用したCMSスライダーなどがテンプレートで共有されているのでそちらを使用すれば対策可能です。

Web春ではより簡単な方法としてスライダーではなくスクロールで見れる物を使用しています。こんな感じ↓

Webflow CMSを連携して目次を作るのが面倒

長文の記事を書く際に導入したいのが目次の機能ですよね。WordPressなどではプラグインなどで目次を作れるようですが、Webflowではそうもいきません。Webflowで目次を作るにはコードで目次を作るか各セクションごとにIDを付けてリンクを飛ばすという少し面倒な使い方が必要になります。

Web春で導入している目次の作り方は以下の記事で紹介しています。
>> 【カスタムコード無し】Webflowを使った､一番簡単な目次の作り方

コードをコピペして目次を作りたい方はこちらの記事からどうぞ
>>Webflowで作成したブログページに自動生成される目次を追加する方法

Webflow CMSではWebp変換がない

挿入した画像がWebPに変換できないのが少し面倒です。毎回サルワカさんのWebP変換ツールでWebPに変換しています。静的ページでは全て変換できるのでCMSでも変換できるようになってほしいです。
>>サルワカさんのWebpツールはこちら

コード出力時は別で対応する必要がある。

Webflowはコード出力時にCMSのデータは一緒には出力できません。そのためCMSの箇所は何も表示がされず、穴が空いた状態で出力されます。コードを見たい方は下記からどうぞ。
>>Webflowで出力した実際のコードを見る

CMSはCSVという形式で別で出力できます。CSVで出力し、WordPressやその他ノーコードにインポートさせましょう。

Webflow専門家が使うWebflow CMSの便利機能

実際にWeb春でWeb制作を依頼された際によく使用しているWebflow CMSの機能を紹介します。

• CMSの記事作成のみで色分け〜SEO対策まで自動作成
• WebflowCMSの記事を見たまま編集
• カスタムコードにCMSを組み込み

順番に解説していきます。

CMSの記事作成のみで色分け〜SEO対策まで自動作成

WebflowではCMSを上手く使うことで、ジャンルごとの色分けから、SEO対策まで自動作成できます。SEO対策自動化ではTitleタグ、descriptionタグ、構造化、パンくずリストを自動化できます。またCMSを連携することで内部リンクの対策も簡単です。

Web春ではこれらの知識を使って内部SEOを自動化した上でキーワード戦略や市場リサーチ、順位計測、記事作成を行っています。そのため通常のSEOコンサルとは異なり、低価格でSEOコンサル、アドバイスなどを行うことができるというわけです。

Webflow CMSの記事を見たまま編集する

Webflowには「セッティング」「デザイナー」「エディター」という3つの機能があります。作成した記事をそのまま編集するにはエディターを使用します。エディターは2023年になり、大幅に機能改善されリロードが早くなりました。2025年時点ではデザイナー機能を使用したまま記事を直接リライトできるようになりました。

しかしエディターは少しクセが強く、一度作成した内容を読み込むのに数秒のラグがあります。ラグが多いというのはつまりはこんな感じです↓

カスタムコードにWebflow CMSを組み込む

WebflowのCMSを上手く利用することでカスタムコードにCMSの情報を組み込むことができます。まずは以下をご覧ください。

右上の「＋Add Field 」からCMSのアイテムを選択することでCMSの記事ごとに入力された情報をコードに落とし込むことができます。当社への依頼やプログラマーを雇うことでより高度な自動化された機能を開発できます。

Webflow CMSを使うための費用と料金プラン【2026年5月改定】

結論：2026年5月の料金改定後、WebflowでCMSを使うにはPremiumプラン（年払い$25/月・月払い$39/月）が必要です。旧CMSプラン（$23/月）は廃止されました。CMSが要らないサイトはBasic（年払い$15/月・静的300ページ）、無料のStarterはwebflow.ioドメインでCMSを制限付きで試せます。Premiumで扱えるのはCMSアイテム20,000件・40コレクションまでです。

プランごとの詳しい中身と選び方はWebflowの料金プラン解説【2026年5月改定版】にまとめています。

【実体験】無料→有料に切り替えたら、リダイレクトできず獲得した順位を全て破棄した

僕は最初の30記事まで無料で運用していました。しかしその後有料に変えてからリダイレクトができなくて、獲得した順位を全て破棄することに、。ドメインを育てていきたい方は1記事目から有料プランで制作していきましょう。
※ちなみに今の僕なら20記事ぐらいまで書いて上手く行けば、JSリダイレクトを設定して無料で０＞１を達成すると思います。順位は引き継げるか微妙ですが。

WebflowのCMSは高い？安い？

Twitterで以前、日本製のノーコードSTUDIOとWebflowの料金比較を投稿しました。それがこちら↓

正直WebflowはSTUDIOと比べると高価であることがわかります。そのため安価で小規模のサイトを作成するのであればSTUDIOという選択もありだと思います。

（2026年追記: 上のポストの金額は2023年当時の旧プランのものです。2026年5月改定後のWebflowは、CMSありのPremiumが年払い$25/月・CMSなしのBasicが年払い$15/月。STUDIO側も料金改定が続いているため、最新の金額は各公式の料金ページで確認してください。両ツールの詳しい比較はWebflowとSTUDIOの比較ページにまとめています。）

最近では「Webflowでサイトを作りたい」という方の中にSTUDIOからの移行者やWordPressの移行者がいます。それらの方は「サイトを大規模にしたい」「ECサイトを併設したい」という方が多く、これらの背景からWebflowは大規模サイトに向いており、高い値段を払う価値があると捉えることができます。

2023年の最新ニュースではWebflowはfigmaのデザインをコピペできるようになりました。今後どのツールが生き残るかわからないので出力機能を持ったツール選びは必須だと思います。その点でWebflowはいつでも変更できるので強いですね。

「更新はブログとお知らせだけ」ならハルCMSという選択肢も

Webflow CMSは強力ですが、サイトを持っている限りPremiumのサブスク費用（年払いで年$300）がかかり続けます。更新するのがブログとお知らせ程度の中小規模サイトなら、当社が開発した国産CMS「ハルCMS」＋静的サイトという構成で、デザインの自由度を保ったまま維持費を抑える方法もあります。当サイト自体もWebflowから静的サイトへ移行して、この構成で運用しています。

Web春「プログラマー不要のWebflow CMS構築」で行っていること。

最後にWeb春が行う「プログラマー不要のWebflow CMS構築」で行っていることを紹介します。一見単純に見えますが、以下を行うとプログラマーいらずのサイトができます。多少専門的な知識が無いとうまくできないので一つ一つの機能を覚えてから実装するようにしましょう。

• 全項目に日本語の注釈を作成する
• 名前をわかりやすくつける
• 作成後にWebflow CMSの使い方サポートをする

見たほうが早いと思うので一部公開します。

実際にクライアントに納品したWebflow CMSの一部を公開

上記のようにフィールドの名前や注釈を記入することでプログラマーや専門家ではなくとも見ただけで何を記入したらいいか分かるCMSを作成できます。上記の写真はほんの一部ですが、見ただけでなんの情報を入れるべきかすぐにわかりますよね。そのため、当社でご依頼頂いたお客様は使い方サポートすらも30分ほどで満足していただけます。

あとは実際に運用していく上で、「ここに画像を入れたい」「やっぱこの情報はいらない」など調整してCMSを完成させていきます。また独自でカスタムする方法もサポートさせていただいています。

未経験からCMSを作成すると、アイテムのリンク先や名前、機能などゴチャゴチャしてしまいがちです。個人でCMSを作成する際は名前、注釈、リンク先などをしっかり把握して作成するようにしましょう。

Web春ではWebflowサイトの作成を行っています。

当社ではプログラマーの必要ないWebサイト作りをモットーにWebflowサイトの作成を行っています。もしご興味あればまずはご相談ください。

以上Webflow CMS完全理解ガイドでした。不明点、ご相談はお問い合わせフォームから受け付けています。

よくある質問

Webflow CMSを使うにはいくらかかりますか？

2026年5月の料金改定後は、Premiumプラン（年払い$25/月・月払い$39/月）が必要です。CMSアイテム20,000件・40コレクションまで扱えます。CMSが要らないサイトはBasic（年払い$15/月）、無料のStarterは制限付きでCMSを試せます。

WebflowでCMSページを作る手順は？

5ステップです。①CMSパネルでコレクションを作成②Plain Text・Rich Text・Image・Referenceなどのフィールドを設計③アイテムを2〜3件登録④自動生成されるCollection Template Pageをデザイン⑤各要素にフィールドを接続してPublishで公開、の順に進めます。

Webflow CMSでできないことはありますか？

スライダーにCMSの画像を使用できない、目次が簡単に作れない、CMSでWebPへの変換ができない、コード出力時にCMSのデータは一緒に出力できない、といった制限があります。CMSデータはCSV形式で別に出力できます。

Webflow CMSで文字が保存されないバグの対策はありますか？

リンク・リスト・画像挿入を使うと約10%の確率で保存されないバグが起きます（Hタグのみでは起きません）。一度バグが起きたらリロードで解決しますが保存はされないため、メモアプリなど他のエディターで書いてコピペする方法が確実です。

Webflowの無料プランでブログを始めても大丈夫ですか？

おすすめしません。無料で30記事まで運用したあと有料に切り替えた際、リダイレクトができず獲得した順位を全て破棄した実体験があります。ドメインを育てたい方は1記事目から有料プランでの制作が安全です。

Webflow CMSとハルCMSはどちらを選ぶべきですか？

デザインの自由度と大規模なCMS運用を求めるならWebflow（Premium年払い$25/月）。更新がブログ・お知らせ中心の中小規模サイトなら、静的サイト＋ハルCMSの構成のほうが維持費を抑えられます。当サイト自体も静的サイト＋ハルCMS側の構成で運用しています。