【無料】Webflow CMSを完全理解ガイド2023

くりたまさと
Masato Kurita
栗田将人
【無料】Webflow CMSを完全理解ガイド2023

Webflowを導入したいけど管理しやすいって本当かな?実際にはWordPressと対して変わらないんじゃないかな?

今回はこんな疑問を解決していきます。

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

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

目 次

Webflow CMSを完全理解ガイド2023【Webflow CMSでできること】

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

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

などが主に使う機能です。以上の全ての実装方法は今後WebflowCMSの使い方という記事で紹介していきます。興味のある方はTwitterで告知するのでフォローしていただけるとすぐに告知が行き届きます。ここでは上記の機能をもう少し詳しく解説していきます。

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

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

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

Webflow CMSでは「CMSフィールド」「CMSページのデザイン」「デザインとCMSフィールドの連携」という3つの工程で導入することができます。Webflowの導入方法が知りたい方は以下の記事で紹介しています。
>Webflow専門家がWebflow CMSの導入方法を解説
「公開2月末予定、Twitterにて告知」

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

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

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

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

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

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

【バグ】Webflow CMSでライティングするとたまにバグる

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

バグが起こりやすいタイミング(独自)

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

保存されてないと本気で萎えるのでメモ帳やテキストエディターを使用してください。Webflow CMSではHタグやリンクタグの情報をそのまま読み取ってくれるのでメモで作成→コピぺでうまくいきます。
>>おすすめのメモアプリなどあれば教えて下さい😂今は純正MACのメモアプリを使ってます。

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でのCSVインポートについては別記事で解説しています。
>>WebflowのCSVインポートについて

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

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

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

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

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

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

Web春ではこれらの知識を使って内部SEOを自動化した上でキーワード戦略や市場リサーチ、順位計測、記事作成を行っています。そのため通常のSEOコンサルとは異なり、低価格でSEOコンサル、アドバイスなどを行うことができるというわけです。とはいっても現在は少数の希望者にしか対応していません。TwitterでリクエストがあればゆくゆくはSEO対策についても記事を書いていくかもしれません。

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

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

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

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

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

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

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

Webflow CMSを使うための費用と料金プラン

Webflow CMSを使うための費用と料金プラン

WebflowでCMSを使用するにはサイトプランCMS$23/月使用する必要があります。無料版でも50記事分まで作成できます。

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

WebflowのCMSは高い?安い?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

以上Webflow CMS完全理解ガイドでした。不明点、質問などは下記のTwitterから受け付けています。

無料メルマガで追加情報を告知します。

WEBFLOW専門家として事業を行っている栗田自身が実際に使用し、便利だと感じたWebflowの使い方を共有します。またノマドライフや、事業計画、経験と過程について発信しています。これは僕からあなたへの手紙です。ここでしか贈らない言葉があります。それでは限定メルマガでお会いしましょう。

ご登録ありがとうございます。次回の更新まで少々お待ちください。
なにかしらエラーがでています。治らない場合はXまでご連絡ください。

併せて読むとおすすめの記事▼

Webflow専門フリーランスの2022年の実績を公開します

Webflowを使用して2022年にこなした案件数や、収益などを紹介します。これからフリーランスになる方やノーコードある方に興味は実際の数値を見ることで独立する参考になると思います。

Read more...

【無料】ノーコードWebflowにInstagramを埋め込む方法

WebflowにInstagramを埋め込む方法と埋め込んだInstagramを自動更新させる方法を実践解説しています。今回は完全無料で行えるカスタムコードを使った方法を解説していきます。ぜひご覧ください。

Read more...

【2024年最新版】Webflowの使い方を項目別にまとめました

Webflowの使い方で迷っていませんか?本記事ではWebflowの使い方をCMSやリッチテキスト、独自ドメイン、フォントの追加方法など項目別にまとめました。Webflowの使い方で悩むことがある方は必見です。

Read more...
🎉【期間限定】無料キャンペーン実施中9/1まで
Beta

無料のWebflow
30分間レクチャー実施中!!

期間限定‼️
Webflowでこのポップアップの作り方わかりますか?このレクチャーではWebflowの使い方、Webflow導入後のサポートなどWebflowに関する質問はOK!完全無料で実施しているのでお気軽にお申し込みください。9月1日まで実施中
※ビデオ通話(Google meet)を使用します。
※予告なく、内容の変更やキャンペーンが終了する場合がございます。
※機密事項などを取り扱う際は事前にお申し付けください。内容はYoutubeなどSNSに 露出する場合がございます。お申し付けいただければ露出はしません。
※レクチャー時間は一組30分までとさせていただきます。それ以上は別途ご相談、ご依頼ください。30分の中に自己紹介や案件の相談時間などは含まれていませんので慌てずまずは自己紹介から行いましょう。
※自己紹介など含め45分を想定しています。
※ご予約機能はGoogleカレンダーで作成しています。
※こちらはベータリリースとして行っています。
※Webflowを学ぶ目的、サイト制作依頼の相談、Webflowサポートのお試し、以外の目的でのお申し込みはおやめください。
以上の注意事項の他に必要な情報は都度更新、変更していきます。
Dashboard mockup