Webflow の料金プラン解説｜Free・Basic・CMS・Businessの違い

※ 本記事にはアフィリエイトリンクが含まれています。

はじめに

ノーコードでWebサイトを制作できるWebflowは、デザイナーや中小企業から注目を集めているプラットフォームです。しかし、複数の料金プランがあり「結局どのプランを選べば良いの？」と悩む方が多いのが現実です。

この記事を読めば以下のことが分かります：

• 各プランの詳細機能と最適な利用者
• 実際の運用コストと隠れた費用
• 競合他社との料金比較と選択基準

Webflowとは？

Webflowは、デザイナーがビジュアル操作でプロフェッショナルなWebサイトを構築できるノーコードSaaSツールです。 2013年にアメリカで設立され、現在では世界中で350万人以上のユーザーに利用されています。

競合のWixやSquarespaceとの最大の差別化ポイントは、CSSやHTMLを直接操作する感覚でデザインできる自由度の高さです。テンプレートに縛られず、完全オリジナルのデザインを実現できます。

Webflowの主な特徴：

• ビジュアルエディターでCSS/HTMLを自動生成
• レスポンシブデザインの直感的な調整
• CMS機能によるブログや商品ページの管理
• SEO最適化機能の標準搭載
• 高速なホスティングとCDN配信

Webflowは単なるWebサイトビルダーではなく、デザインツールとCMSとホスティングを統合したオールインワンプラットフォームです。

Webflowの主要機能詳細解説

ビジュアルデザイナー（Visual Designer）

Webflowの核となる機能で、ドラッグ&ドロップでWebページをデザインできます。Photoshopのようにレイヤーを重ね、要素の配置や装飾を視覚的に調整可能です。

例えば、企業のランディングページを制作する際、ヘッダー画像の上にテキストを重ね、ホバー時のアニメーション効果まで設定できます。従来なら数十行のCSSが必要な複雑なレイアウトも、マウス操作だけで実現できます。

CMS機能（Content Management System）

ブログ記事や商品情報など、動的コンテンツを効率的に管理できる機能です。カスタムフィールドを自由に設定し、データベースのような使い方ができます。

例えば、不動産会社のWebサイトで物件情報を管理する場合、「価格」「間取り」「立地」などのフィールドを作成し、各物件データを一覧表示や詳細ページに自動展開できます。WordPressのような複雑な設定は不要で、直感的に操作できるのが強みです。

Eコマース機能（E-commerce）

オンラインショップの構築から決済処理まで、EC運営に必要な機能を包括的に提供します。商品カタログの管理、在庫追跡、注文処理を一元化できます。

例えば、ハンドメイド商品を販売するクリエイターが、商品写真のギャラリー表示、サイズ・カラーバリエーションの選択、PayPalやStripe決済の導入まで、コードを書かずに実現できます。

SEO・パフォーマンス最適化

メタタグの設定、サイトマップ生成、画像最適化など、検索エンジン対策の機能が充実しています。また、CDN（コンテンツデリバリーネットワーク）による高速配信も標準搭載です。

例えば、ブログ記事の投稿時に、タイトルタグやOGP画像を自動設定し、GoogleのPageSpeed Insightsで高スコアを獲得できるよう最適化されたHTMLが出力されます。

インタラクション・アニメーション

スクロールに連動したアニメーションや、クリック時のエフェクトなど、動的なWebサイトを簡単に作成できます。JavaScriptの知識がなくても、プロ級のインタラクティブサイトを構築可能です。

例えば、スクロールするたびに要素がフェードインしたり、マウスカーソルに追従する装飾効果など、ユーザーの注意を引くWebサイトを制作できます。

Webflowの料金プラン

Webflowの料金体系は、個人向けの「Site Plans」と、フリーランサー・代理店向けの「Workspace Plans」に分かれています。ここでは、一般的に利用されるSite Plansの料金プランを詳しく解説します。

プラン名	月額料金（年払い）	月額料金（月払い）	主な機能・制限	こんな人向け
Free	無料	無料	webflow.ioドメイン、2サイトまで、Webflowブランディング表示	学習・テスト目的
Basic	$12/月	$18/月	カスタムドメイン、100GB帯域幅、CMS 50項目	個人サイト・小規模ビジネス
CMS	$16/月	$29/月	CMS 2,000項目、Google Analytics連携、フォーム送信1,000件/月	ブログ・中規模サイト
Business	$36/月	$49/月	CMS 10,000項目、サイト検索機能、優先サポート	大規模サイト・企業向け

各プランの詳細：

Freeプランは学習目的に最適ですが、「webflow.io」のサブドメインのみ利用可能で、Webflowのブランディングが表示されます。商用利用には不向きです。

Basicプランでは独自ドメインが利用でき、月100GBの帯域幅が提供されます。シンプルなコーポレートサイトや個人ポートフォリオに適しています。

CMSプランはブログやニュースサイトに最適で、CMS項目を2,000件まで保存できます。Google Analyticsとの連携も可能になります。

Businessプランは企業サイトや大規模なメディアサイト向けで、CMS項目10,000件、サイト内検索機能、優先的な技術サポートが利用できます。

初心者にはCMSプランがおすすめです。 将来的なコンテンツ拡張を考慮すると、Basic→CMSへの移行コストよりも、最初からCMSプランを選択した方が効率的です。

年払いを選択すると約25-30%の割引が適用され、月払いよりもお得になります。

Webflowの具体的な使い方・操作手順

Webflowでシンプルな企業サイトを作成する手順を、実際の画面操作に沿って説明します。

1. アカウント作成とプロジェクト開始

Webflow公式サイトにアクセスし、「Get started for free」をクリックしてアカウントを作成します。メールアドレスとパスワードを設定後、ダッシュボードが表示されます。

「Create new site」 ボタンをクリックし、テンプレートを選択するか「Blank Site」で白紙から開始できます。初心者の場合、業界に適したテンプレートを選択することで、デザインの基礎構造を理解しやすくなります。

2. デザイナー画面の基本操作

プロジェクトを作成すると、Webflowのビジュアルデザイナーが開きます。画面左側に「Elements Panel」、右側に「Style Panel」が配置されています。

左のElements Panelから「Text Block」や「Image」などの要素をドラッグし、中央のキャンバスにドロップします。例えば、ヘッダー部分を作成する際は、「Section」→「Container」→「Text Block」の順にドラッグし、階層構造を作ります。

コツ： 最初にWireframe（線図）を意識して、大きなレイアウトから細部へと進むと効率的です。

3. レスポンシブデザインの設定

画面上部のデバイスアイコン（Desktop, Tablet, Mobile）をクリックして、各画面サイズでの表示を調整します。

例えば、デスクトップでは横並びの3カラムレイアウトを、モバイルでは縦積みの1カラムに変更する場合、Mobile viewで「Display: Flex」を「Display: Block」に変更し、各要素の幅を100%に設定します。

Webflowの強みは、各ブレイクポイントで個別にスタイルを設定でき、自動的にCSSメディアクエリが生成される点です。

4. CMS機能の設定

動的コンテンツ（ブログ記事など）を管理するため、左パネルから**「CMS Collections」**を選択し、「Create New Collection」をクリックします。

「Blog Posts」という名前でコレクションを作成し、以下のフィールドを追加します：

• Title（テキスト）: 記事タイトル
• Slug（スラッグ）: URL用の文字列
• Featured Image（画像）: アイキャッチ画像
• Content（リッチテキスト）: 記事本文

各フィールドの設定で「Required」にチェックを入れると、必須項目として設定できます。

注意点： Freeプランでは CMS項目を20件までしか作成できないため、本格運用前に有料プランへのアップグレードが必要です。

5. ページテンプレートの作成

CMS データを表示するページテンプレートを作成します。「Pages」パネルから「Create New Page」→「Collection Page」を選択し、先ほど作成した「Blog Posts」コレクションを指定します。

テンプレートページで、左パネルから「Text Block」をドラッグし、右パネルの「Get text from」から「Title」を選択します。これにより、CMSデータが自動的にページに表示されるようになります。

同様に、画像要素には「Featured Image」を、本文部分には「Content」フィールドを連携させます。

6. フォームの設置

お問い合わせフォームを設置する場合、Elements Panelから**「Form Block」**をドラッグします。デフォルトで「Name」「Email」「Message」フィールドが含まれています。

フォーム送信後のサンキューページを設定するため、Form Settings で「Redirect」を指定し、送信完了ページのURLを入力します。また、「Notification Email」に管理者のメールアドレスを設定することで、フォーム送信時に通知を受け取れます。

重要： フォーム機能は有料プランでのみ動作し、送信件数に月間制限があります（CMSプランで1,000件/月）。

7. 公開とドメイン設定

サイトが完成したら、右上の**「Publish」**ボタンをクリックして公開します。初回公開時は「webflow.io」のサブドメインが自動生成されます。

独自ドメインを使用する場合（Basic プラン以上）、「Project Settings」→「Hosting」から「Add Custom Domain」を選択し、取得済みのドメイン名を入力します。DNS設定でCNAMEレコードまたはAレコードを設定し、ドメインとWebflowサーバーを紐付けます。

Webflowの活用事例・ユーザーの声

事例1：デザイン代理店のポートフォリオサイト

東京のWeb制作会社が、従来のWordPress制作から Webflow に移行しました。導入前は、クライアントへのデザイン提案から実装まで平均2-3週間かかっていましたが、Webflowのビジュアルデザイナーにより 制作期間を1週間に短縮 できました。

特に、クライアントとのデザイン確認プロセスで威力を発揮し、「この部分をもう少し大きく」といった修正を、その場で即座に反映できるようになりました。月間の案件処理数が 1.5倍に向上 し、売上アップに直結しています。

「Webflowを導入してから、デザインから実装までのワークフローが劇的に改善されました。クライアントも『こんなに早くできるの？』と驚いています。コーディング時間が大幅に削減され、よりクリエイティブな部分に時間を割けるようになりました。」 — Capterra掲載のデザイン会社レビューより

事例2：SaaS企業のマーケティングサイト

人事管理SaaSを提供するスタートアップが、リード獲得を目的としたWebサイトをWebflowで構築しました。導入前は外注制作で修正に時間とコストがかかっていましたが、内製化により ランディングページの A/B テストが週単位で実行 できるようになりました。

CMS機能を活用して導入事例やブログコンテンツを頻繁に更新した結果、オーガニック検索からの 月間リード数が3倍 に増加。特に、「料金ページ」や「機能比較ページ」などの重要ページを、マーケティングチームが直接編集できる体制が構築できました。

「従来は Web制作会社に修正依頼を出すたびに数万円のコストと1週間の時間がかかっていました。Webflowなら社内のマーケターが直接編集でき、施策の PDCA サイクルが格段に早くなりました。」 — G2掲載のマーケティング担当者レビューより

事例3：EC事業者のブランドサイト

ハンドメイドアクセサリーを販売する個人事業主が、ShopifyからWebflowのEコマース機能に移行しました。導入前はテンプレートの制約で理想的なブランド表現ができませんでしたが、Webflowの自由度の高いデザイン機能により ブランドの世界観を完全に表現 できるサイトを構築しました。

商品詳細ページでのビジュアル表現が向上した結果、コンバージョン率が1.8倍 に改善。また、Instagram風のギャラリー表示やスクロールアニメーションにより、サイト滞在時間も大幅に延長されました。

「Webflowは『デザイン』に対する制約が本当に少ない。私のアクセサリーブランドの繊細な世界観を、コードを一行も書かずに表現できました。お客様からも『サイトがとても美しい』とよく言われます。」 — TrustRadius掲載のEC事業者レビューより

Webflowのメリット・デメリット

メリット

• ✓ コード不要でプロ級デザイン: HTML/CSSの知識がなくても、デザイン会社レベルのWebサイトを制作できる
• ✓ 完全レスポンシブ対応: デスクトップ・タブレット・モバイルの表示を個別に最適化可能
• ✓ SEO機能が充実: メタタグ設定、サイトマップ生成、高速ホスティングが標準搭載
• ✓ CMSとEコマースを統合: ブログ運営からオンラインショップまで一つのプラットフォームで完結
• ✓ アニメーション機能が豊富: JavaScriptなしで動的なWebサイトを構築可能

デメリット

• ✗ 学習コストが高い: 他のWebサイトビルダーと比較して、習得に時間がかかる
• ✗ 日本語情報が少ない: 公式ドキュメントや解説記事の多くが英語で、日本語でのサポートが限定的
• ✗ 料金が高めに設定: 競合のWixやSquarespaceと比較して月額費用が割高
• ✗ テンプレート数が限定的: WordPress等と比べると、利用できるテンプレート数が少ない
• ✗ プラグイン生態系が未発達: WordPressのような豊富なプラグインエコシステムが存在しない

競合ツールとの簡易比較

項目	Webflow	Wix	Squarespace
月額料金	$12-$36	$4.50-$24.50	$12-$40
デザイン自由度	★★★★★	★★★☆☆	★★★★☆
学習しやすさ	★★☆☆☆	★★★★★	★★★★☆
CMS機能	★★★★★	★★★☆☆	★★★★☆
日本語対応	△（一部）	○（フル対応）	△（一部）

使い分けの目安:

• デザインの自由度を重視 → Webflow
• 手軽さと日本語サポート重視 → Wix
• 美しいテンプレートを活用したい → Squarespace

Webflowは学習コストが高い分、習得後の制作効率とデザイン品質が圧倒的に優れています。

よくある質問（FAQ）

Q. 日本語に対応していますか？

A. UI（管理画面）は英語のみですが、作成するWebサイト自体では日本語のコンテンツを問題なく使用できます。CMS機能やフォーム機能も日本語文字列に対応しており、日本語SEOにも影響はありません。ただし、サポートドキュメントの多くが英語のため、初心者には学習ハードルがやや高めです。

Q. 無料プランでできることは？

A. Freeプランでは最大2つのプロジェクトを作成でき、webflow.ioのサブドメインで公開できます。ただし、Webflowのブランディングが表示され、CMS項目は20件まで、フォーム機能は利用できません。学習やテスト目的には十分ですが、商用利用には Basic プラン以上が必要です。

Q. 解約方法と返金ポリシーは？

A. サブスクリプションの解約は、ダッシュボードの「Billing」から簡単に手続きできます。年間プランでも途中解約が可能ですが、基本的に返金はありません。ただし、技術的な問題でサービスを利用できない場合は、サポートに連絡することで個別対応される場合があります。

Q. セキュリティとデータ保護は大丈夫？

A. WebflowはSSL証明書を全サイトに標準提供し、AWS（Amazon Web Services）の堅牢なインフラストラクチャーを使用しています。GDPR（EU一般データ保護規則）にも準拠しており、定期的なセキュリティ監査を実施しています。サイトデータは自動的にバックアップされ、99.9%のアップタイム保証があります。

Q. 他のツールとの連携はできますか？

A. Google Analytics、Google Tag Manager、Facebook Pixel などの主要な解析・広告ツールとの連携が可能です。また、Zapier を通じて 3,000 以上のアプリとの連携も実現できます。ただし、WordPressのような豊富なプラグイン生態系はないため、特殊な機能が必要な場合はカスタムコードの追加が必要です。

Q. 導入にどのくらい時間がかかりますか？

A. 基本的な企業サイト（5-10ページ）であれば、Webflowの操作に慣れた状態で 2-3日 で制作可能です。ただし、初心者の場合は操作習得に1-2週間、実際の制作に1-2週間で、合計 3-4週間 程度を見込んでおくと良いでしょう。複雑なアニメーションや高度なCMS設計が必要な場合は、さらに時間がかかります。

---

まとめ：Webflowは本格的なWebサイトを内製化したい方におすすめ

• 高いデザイン自由度でブランドの世界観を完全に表現できる
• 年額換算で月12-36ドルと、制作会社への外注費と比較すれば圧倒的に低コスト
• デザイナーやマーケターなど、ビジュアル重視の職種に最適

→ 今すぐWebflowを無料で試してみる

---

参考・情報ソース

• Webflow 公式サイト
• Webflow 料金ページ
• Webflow - G2レビュー
• Webflow - Capterra
• Webflow - TrustRadius