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

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

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

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

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

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

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

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

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の情報を組み込むことができます。まずは以下をご覧ください。

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

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

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

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

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の一部を公開

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

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

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

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

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

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

‍

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

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