WebflowでCloudflareを使うべき理由と完全連携ガイド（DNS・サブドメイン・CDN）

Webflowでサイトを公開するとき、「Cloudflareもあわせて設定したほうがいいのだろうか」と迷ったことはないでしょうか。Webflowにはホスティング、SSL、CDNが標準で備わっているため、Cloudflareは一部の上級者だけが使う追加ツールのように見えるかもしれません。しかし実際には、独自ドメインで運用する以上、Cloudflareを視野に入れずに考えるほうが難しくなってきています。

その理由は、WebflowとCloudflareの連携が「自己流の裏技」ではなく、両社が公式に案内している構成だからです。Webflow公式のCloudflare連携ページでは、CloudflareによってDNS管理やセキュリティレイヤー、エッジでのサーバーサイド処理をWebflowサイトに追加できると説明されており、CloudflareドメインをWebflowへ接続する公式手順も用意されています。Cloudflare側にもWebflow向けの公式ガイドがあり、Orange-to-Orange（O2O）と呼ばれる構成が解説されています。この記事では、これらの公式情報とBooostの実務知見をもとに、WebflowでCloudflareを使う理由、設定の進め方、つまずきやすいポイントまでを順番に整理します。

なぜWebflowサイトでCloudflareを使うのか

Webflow単体でもサイトは問題なく公開できます。それでもCloudflareを組み合わせる価値があるのは、大きく3つの理由からです。まず、DNS管理を一箇所に集約できる点です。Webflowのカスタムドメイン接続ではAレコードやCNAME、TXTレコードを正しく設定する必要がありますが、CloudflareでDNSを管理しておけば、Webflow向けのレコードだけでなく、メールや認証用TXT、サブドメイン、広告・分析ツールの検証レコードまで同じ画面で扱えます。次に、Webflowの標準機能だけでは触れないセキュリティやネットワーク制御を足せる点です。Webflow公式のCloudflare連携ページでも、WAFやBot対策、エッジキャッシュ、Workersによる処理など、標準ホスティングでは直接公開されていない機能をCloudflare側で補えると説明されています。そして3つ目が、ルートドメインやサブドメインの運用を整理しやすくなる点です。example.com のようなルートドメインの接続はDNSの仕様上CNAMEの扱いに制約がありますが、Cloudflareを使えばCNAMEフラットニングのような仕組みでこの問題を回避しやすくなります。

こうして整理すると、Cloudflareは単に表示を速くするためのCDNツールというより、Webflowサイトのドメインとセキュリティを安定して運用するための土台と捉えたほうが、実態に近いことがわかります。

まずは2つの接続方式を理解する

WebflowとCloudflareをつなぐ方法には、大きく分けて2つの方式があります。最初にこの違いを押さえておくと、後の設定でつまずきにくくなります。

方式概要向いているケースDNS onlyCloudflareをDNS管理だけに使い、SSLと配信はWebflowに任せるほとんどの通常サイト、初めての接続Orange-to-Orange（O2O）Cloudflareのプロキシを通してWebflowへ接続するWAF、Bot対策、Workers、詳細なキャッシュ制御を使いたいサイト

一般的なコーポレートサイトやブログであれば、まずはDNS onlyで十分です。Webflow Help CenterのCloudflare接続手順でも、標準的な接続ではCloudflare側のプロキシ状態をDNS only（グレーの雲）にする流れが案内されています。一方のO2Oは、CloudflareのWAFやWorkersといった機能を積極的に使いたい場合の構成で、Cloudflare公式のWebflowガイドによれば、有効にするとWAF、Bot Management、Waiting Room、Caching、Workers、RulesなどをWebflowへのトラフィックに適用できるようになります。ただし、いきなりO2Oから始めるのは避けたほうが無難です。通常接続のままCloudflareのオレンジ雲を有効にすると、Webflowと正しく連携できず、525 Handshake Errorやリダイレクトループの原因になります。まずはDNS onlyで接続し、必要になってからO2Oへ移行する、という順番が安全です。

Webflow公式手順に沿ったDNS設定の流れ

実際の接続は、Webflow公式のConnect your Cloudflare domain to Webflowに沿って進めます。Cloudflareを初めて使う場合は、先にCloudflareのアカウント作成とネームサーバーの変更を済ませておきます。CloudflareでDNSを管理しているドメインをWebflowへつなぐ場合、基本の流れは次のようになります。

1. Cloudflareで対象ドメインを管理できる状態にする
2. ドメイン取得元でネームサーバーをCloudflare指定のものに変更する
3. Webflowの Site settings > Publishing > Production を開く
4. Webflowに表示されているAレコード、CNAME、TXTなどの最新値を確認する
5. Cloudflareの DNS > Records に必要なレコードを追加する
6. 標準接続ではプロキシ状態をDNS onlyにする
7. Webflow側でドメインを検証し、デフォルトドメインを設定して公開する

ここで何より大事なのは、古い記事や他サイトに書かれたDNS値をそのままコピーしないことです。Webflow側のインフラやレコードは変わることがあるため、入力する値は必ずWebflowの管理画面（Site settings > Publishing > Production）に表示される最新のものを正とします。Webflow側のDNS値には近年の仕様変更もあり、古い値のまま運用しているとドメイン接続やSSLでつまずく原因になります。

ルートドメイン接続でCloudflareが役立つ理由

Webflowで特につまずきやすいのが、www.example.com ではなく example.com をメインのアドレスにしたいケースです。www 付きのサブドメインはCNAMEを使いやすいのに対し、www なしのルートド
メインはDNSの仕様上、CNAMEをそのまま置きにくいという制約があります。ルートドメインにはSOAやNSといった重要なレコードが必要で、そこにCNAMEを加えると衝突する可能性があるためです。Cloudflareはこの問題を、CNAMEフラットニングと呼ばれる仕組みで吸収します。これによってルートドメインでもCNAMEに近い感覚で運用でき、Webflowのルートドメイン接続が扱いやすくなります。

とはいえ、読者がDNSの細かい仕様を逐一意識して手作業する必要はありません。実務上は、WebflowのPublishing画面に表示される値をCloudflareへ正しく入力すること、そして www ありとなしのどちらをメインにするかを決め、SEOと運用の観点からどちらか一方に統一することを優先すれば十分です。

O2Oを使うべきケース、使わなくてよいケース

Cloudflare公式ドキュメントでは、Webflowユーザーが自分のCloudflareゾーンを使い、Webflowの前段にCloudflareを置くO2O構成が案内されています。なお、O2Oを使えるのは、対象サイトがWebflowの新しいDNS（Cloudflare）へ移行済みの場合に限られます。2025年4月21日以降に作成されたサイトは移行済みで、それ以前のサイトは先にDNSを更新しておく必要があります。O2Oにすると、Webflowへ向かう通信にCloudflareの機能をそのまま重ねられるようになります。具体的には、WebflowサイトへのWAFの適用、Bot ManagementやWaiting Roomの利用、Cloudflare Workersによるリダイレクトや軽い処理の追加、Cache Rulesでの配信制御、複数サービスを同じドメイン配下で扱う、といった用途が当てはまります。

逆に、通常のコーポレートサイトやLP、ブログ、採用サイトのように、DNS接続と公開ができれば十分なケースでは、O2Oは必須ではありません。まずはDNS onlyで接続し、こうした機能が本当に必要になった段階でO2Oを検討するほうが、トラブルを避けやすくなります。なお、Cloudflare公式ドキュメントでも、O2Oを有効にしたホスト名ではCloudflare側の設定がそのままトラフィックに影響するため、運営者側の責任も増えると説明されています。便利な反面、WAFやキャッシュの設定を誤るとフォーム送信や表示内容に影響が出る点は、あらかじめ意識しておきましょう。

SSLとリダイレクトで失敗しないための確認

WebflowとCloudflareの連携でよく起きるトラブルが、SSLとリダイレクト周りです。仕組みを押さえておけば、その多くは未然に防げます。標準的なDNS only接続では、SSLと配信はWebflow側が管理するため、CloudflareのレコードはDNS onlyのままにしておくのが基本です。標準ホスティングのままCloudflareのプロキシを有効にすると、CloudflareとWebflow間でTLSハンドシェイクが成立せず、525 Handshake Errorが起きる可能性があります。一方、O2Oを使う場合は、Cloudflare側のSSL/TLSモードを「Full」または「Full (strict)」に設定します。ここで「Flexible」を選ぶと、CloudflareからWebflowへの通信がHTTPになり、WebflowのHTTPSリダイレクトと衝突して ERR_TOO_MANY_REDIRECTS（リダイレクトループ）を招くことがあるため、避けてください。

もう一点、CloudflareのZone Hold（主にEnterpriseで使う設定）を有効にしている場合は注意が必要です。Cloudflare公式のWebflowガイドによれば、Zone Holdが有効だとWebflowにオンボードしたカスタムホスト名を有効化できず、Webflow側に「保留中のゾーンに関連付けられている」旨のエラーが表示されます。カスタムホスト名が有効にならなければSSL証明書の発行もそこで止まるため、企業サイトや大規模な運用では、いったんZone Holdを解除してからカスタムホスト名を再有効化する流れになります。小規模なサイトでは通常触らない設定なので、大きめの構成を扱うときだけ頭の片隅に置いておけば十分です。

WebflowとCloudflareでできることを整理する

ここまでの内容を踏まえ、CloudflareとWebflowの組み合わせで実際にできることを整理しておきます。Webflow制作者やマーケティング担当者にとって押さえておきたいのは、次の4つの使い方です。

DNS設定でWebflowへ安全に接続する

もっとも基本的な使い方です。CloudflareでDNSを管理し、WebflowのPublishing画面に表示される値をCloudflareへ設定するだけで、独自ドメインを安定して運用できます。コードは不要で、Cloudflareの無料プランからでも始めやすい構成です。

WAFやBot対策でフォームやLPを守る

Webflowサイトでは、問い合わせフォームや資料請求フォーム、採用応募フォームなどがスパムや攻撃の対象になることがあります。Cloudflareを使えば、こうした入口にWAFやBot対策を追加できます。ただし、防御を強くしすぎると正規ユーザーの送信まで止めてしまうことがあるため、CloudflareのSecurity Eventsを見ながら強度を調整するのが現実的です。

Workersでリダイレクトや軽い処理を追加する

Cloudflare Workersを使うと、Webflowサイトの前段でURL処理やAPI連携を実行できます。たとえば、特定のパスだけ別サービスに振り分けたり、フォーム送信の前後に処理を挟んだり、Webflow CMSの公開イベントに合わせてキャッシュを削除したりといった拡張が考えられます。Webflow標準では難しい細かな制御を、コードで補える領域です。

TurnstileやWeb Analyticsを追加する

Cloudflare TurnstileやWeb Analyticsは、Webflowのカスタムコードから追加できます。フォームのスパム対策や、Cookieに依存しにくいアクセス解析を導入したい場合の選択肢になります。ただし、Turnstileを本格的に使うならサーバー側の検証まで設計する必要があり、コードを貼っただけですべて守れるわけではない点には注意が必要です。

トラブル時の切り分けチェックリスト

設定後にサイトが表示されない、SSLエラーが出る、フォームが動かないといった場合は、闇雲に設定を触らず、症状ごとに確認場所を絞り込むのが近道です。

DNSの変更は、すぐ反映されることもあれば、最大で48時間ほどかかることもあります。表示されないからといって何度もレコードを書き換えると、かえって原因の切り分けが難しくなります。まずは落ち着いて、WebflowのPublishing画面に表示される値とCloudflare側のDNS値が一致しているかを確認し、そのうえでプロキシ状態、SSL/TLSモードの順に見ていくと、原因にたどり着きやすくなります。

解説動画のご紹介

今回のこちらの記事の内容に関して、Youtube動画でもご覧いただけますので、気になる方はぜひご確認ください。
▼動画はこちらから

まとめ

WebflowでCloudflareを使う意味は、単なる表示速度の改善にとどまりません。Webflow公式もCloudflare公式も連携方法を案内しており、ルートドメイン接続やDNS管理、SSL、セキュリティ、将来的な拡張まで含めて考えると、Cloudflareを理解しておく価値は大きいといえます。まずはWebflowのPublishing画面で最新のDNS値を確認し、Cloudflare側はDNS onlyで安全に接続するのが基本の形です。そのうえで、WAFやBot対策、Workers、キャッシュ制御といった機能が必要になった段階でO2Oへ進めば、無理なく拡張できます。

正しく順番を踏めば、WebflowとCloudflareはDNS管理・セキュリティ・拡張性をまとめて底上げできる、相性のよい組み合わせです。逆に、プロキシやSSLの設定を一つ誤るだけで、サイトが表示されない、SSLエラーが出る、フォームが動かないといった公開トラブルにつながります。自社のWebflowサイトでDNS設定やCloudflare連携に不安がある場合は、Booostまでお気軽にご相談ください。