自社サイトの表示速度が遅くて、読者が離脱していないか心配・・・
セキュリティ対策をしたいけど、お金はかけられない・・・
このような悩みを解決できるのが、「Cloudflare（クラウドフレア）」です。
また、セキュリティ対策にも効果的で、世界中の多くのサイトで利用されています。
そこで、この記事では、Cloudflareについて具体的な導入手順を中心に詳しく紹介します。
サイトを無料で高速化・セキュリティ強化したい方は、ぜひ最後までお読みください。
こちらの記事は、プログラミング・Web制作歴15年以上、ブログ歴10年以上のプログラマーが書いています。
プライベートでも仕事でも多くのレンタルサーバーを利用してきた経験から、サーバーに関する豊富な知識をもとに書いています。
>> プロフィール
Cloudflare（クラウドフレア）とは？何ができる？
Cloudflareとは、アメリカのCloudflare社が提供するCDN（コンテンツデリバリーネットワーク）を中心としたWebサービスです。
これにより、サイトの表示速度が向上し、元のサーバー（レンタルサーバー）への負荷も減らせます。
イメージ図にするとこのような感じになります。
キャッシュサーバーからコンテンツを送信するため、サーバーリソースの節約にもなります。
特にアクセス数の多いサイトでは、毎回オリジナルサーバーからコンテンツを配信する必要がないので、サイトの高速化にも有効です。
さらに、訪問者の一番近いサーバーからコンテンツを配信する点にも注目してください。
海外に向けたWebサイトを運営している場合、日本国内にあるオリジナルサーバーではなく物理的に最も近いサーバーから配信されることになります。
そのため、海外からのアクセスにおいても、サイトの表示速度改善を期待できます。
Cloudflareでできること
Cloudflareを導入すると、主に以下のことができるようになります。
- CDNによるサイトの高速化
- キャッシュによるサーバー負荷の軽減
- DDoS攻撃（大量アクセスによる攻撃）からの保護
- 無料SSL（HTTPS化）の提供
- 不正なアクセス・ボットのブロック
注目すべきは、これらの機能が無料プランでも使えるという点です。個人ブログや小規模サイトであれば、無料プランで十分すぎる内容です。
無料プランと有料プランの違い
Cloudflareには、無料のFreeプランのほかに、有料のProプラン・Businessプランがあります。
主な違いを表で比較してみましょう。
| Free | Pro | Business | |
|---|---|---|---|
| 料金（月額） | 無料 | $20～ | $200～ |
| CDN・高速化 | ◎ | ◎ | ◎ |
| DDoS対策 | ◎ | ◎ | ◎ |
| 無料SSL | ◎ | ◎ | ◎ |
| WAF | △ 基本的な機能 | ○ | ◎ より高度な機能 |
| 画像最適化 | × | ◎ | ◎ |
| サポート | × フォーラムのみ | ○ チケット | ◎ チケット + チャット |
上記以外にもEnterprise向けのプランも用意されています。
このプランはカスタムとなっており、費用は要見積もりとなっています。
CDNも完全無料で使用することができ、この点がCloudflareを導入する大きなメリットの一つになります。
※この記事でも、Freeプランを前提に導入手順を解説していきます。
Cloudflareの導入前に知っておきたい注意点
Cloudflareを導入するにあたっての注意点は、この3つです。
- ネームサーバーの変更が必要
- 反映までに時間がかかる場合がある
- キャッシュで修正内容が即時反映されない
①、ネームサーバーの変更が必要
Cloudflareを利用するためには、ドメインのネームサーバーをCloudflare指定のものに変更する必要があります。
設定自体は難しくありませんが、設定を間違えるとサイトが表示されなくなるため、慎重に作業しましょう。
②、反映までに時間がかかる場合がある
ネームサーバー変更後、その変更した内容がインターネット全体に浸透するまでに時間がかかります。
ただ、反映を待っている間も、途中で設定を間違えていなければ、基本的にはサイトは問題なく表示されます。
ネームサーバーが完全に反映されるまでに時間はかかりますが、
サイト自体が長時間落ちてしまうことはないので安心してください。
③、キャッシュで修正内容が即時反映されない
Cloudflareを利用する上で一番のデメリットは、キャッシュによるトラブルです。
例えば、CSSやJavascript、画像はCloudflare側にキャッシュされるため、修正内容が即時反映されず、モヤモヤすることも多いです。
そのため、開発時には、都度キャッシュを削除するか、一時的に開発モードに変更する必要があります。
Cloudflareの導入手順【画像付き】
それでは、Cloudflareの導入手順を解説していきます。
手順は大きく分けて、以下の6ステップです。
- アカウントを登録する
- ドメインを接続する
- プランを選択する（Freeを選ぶ）
- DNSレコードを確認する
- ネームサーバーを変更する
- 反映を確認する
作業時間は、待ち時間を除けば15～30分ほどです。1つずつ順番に進めていきましょう。
手順①：アカウントを登録する
まずは、Cloudflareの公式サイトにアクセスして、アカウントを登録します。
>> Cloudflare公式サイトはこちら
公式サイトを開くと「無料で始める」などのボタンやリンクがあるはずなので、そちらをクリックしてください。
Cloudflareのアカウント作成画面が開きます。
メールアドレスとパスワードを入力してアカウントを作成できますが、Google、Apple、GitHubのアカウント登録することもできます。
今回は、Googleアカウントで続けます。
※皆さんは自身の状況に合わせて登録してください。
↓
ログインに使用するGoogleアカウントを選択します。
次の画面からはいくつかの質問画面が出てくるのですが、「スキップ」してOKです。
これでアカウント登録が完了し、Cloudflareの管理画面トップ（アカウントホーム）へ移動します。
手順②：ドメインを接続する
アカウントを登録したら、Cloudflareの管理画面にアクセスします。
管理画面の「アカウントホーム」から「追加」をクリックします。
いくつかのメニューが出てくるので「ドメインを接続する」を選択します。
ドメインの接続画面に移動するので、ドメイン名を入力して作業を続けます。
ドメインは「https://」や「www.」を付けずに、「example.com」の形式（ルートドメイン）で入力してください。
手順③：プランを選択する（Freeを選ぶ）
ドメインを設定すると、プランの選択画面が表示されます。
今回は、CDNのみの利用になるので、無料プランを選択します。
有料プランが目立つように表示されていますが、誤ってProプランを選択しないようにしてください。
手順④：DNSレコードを確認する
プランを選択すると、DNSレコードの確認画面へ移動します。
この確認画面では、Cloudflare側で現在設定中のDNSレコードが自動でスキャンされます。
画面を下へスクロールしてください。
自動スキャンされたDNSレコードが表示されているはずなので、表示されたDNSレコードが現在の設定内容と合っているかを確認しましょう。
↓
ここでチェックするポイントは、以下の2つです。
- AレコードやCNAMEレコード（設定している場合）が「プロキシ済み」になっているか
- DNSレコードが漏れていないか
問題がなければ、「アクティベーションに進む」をクリックして次に進みます。
手順⑤：ネームサーバーを変更する
次の画面で、Cloudflare指定のネームサーバーが2つ表示されます。
この2つのネームサーバーを、ドメインを管理しているサービスの管理画面で設定します。
例えば、お名前.comでドメインを管理している場合は、次のような手順でネームサーバーを設定します。
お名前.com Naviにログイン →「ネームサーバー/DNS」→「ネームサーバー設定」→ 対象ドメインを選択 →「その他のサービス」タブをクリック
↓
上記のCloudflareの画面で指定されたネームサーバーを設定し登録を行います。
他の主要なドメインサービスの変更方法は、以下にまとめておきます。
参考にしてください。
Xserverアカウントにログイン →「ドメイン」→ 対象ドメインの「ネームサーバー設定」→「その他のネームサーバーを使用する」を選び、Cloudflareのネームサーバーを2つ入力して保存します。
【ムームードメインの場合】
コントロールパネルにログイン →「ドメイン操作」→「ネームサーバ設定変更」→ 対象ドメインの「ネームサーバ設定変更」→「GMOペパボ以外のネームサーバを使用する」を選び、Cloudflareのネームサーバーを2つ入力して保存します。
【ConoHa WING（ConoHaドメイン）の場合】
コントロールパネルにログイン →「ドメイン」→ 対象ドメインを選択 →「ネームサーバー設定」→「カスタム」を選び、Cloudflareのネームサーバーを2つ入力して保存します。
ネームサーバーの変更は、レンタルサーバーの管理画面ではなく、ドメインを契約・管理しているサービス側で行います。
例えば、レンタルサーバーは「エックスサーバー」、ドメインは「お名前.com」のように分かれている場合は、お名前.com側で変更します。
手順⑥：反映を確認する（Activeになるまで）
ネームサーバーの変更が完了したら、Cloudflareのダッシュボードに戻り、「ネームサーバーを更新しました」をクリックします。
このような画面が表示されたら、上記で設定したネームサーバーがまだ完全に反映されていない状態です。
この場合、しばらく待ってから再度チェックしてください。
ネームサーバーの反映が完了すると、ダッシュボード上のステータスが「アクティブ（Active）」に変わります。
ネームサーバーの反映は、1時間以内に完了することが多いですが、数時間～最大24時間ほどかかる場合もあります。
すぐにアクティブにならなくても、慌てずに待ちましょう。
また、反映を待っている間も、設定にミスがなければ、サイトは通常どおりに表示されているはずです。
ステータスがアクティブになれば、Cloudflareの導入は完了です！ただ、このあとの初期設定がとても重要なので、続けて設定しておきましょう。
導入後にやっておきたい初期設定
Cloudflareの導入が完了したら、あわせてやっておきたい初期設定を紹介します。
①、SSL/TLSの設定【最重要】
SSL/TLSに関する設定は、ダッシュボードの「SSL/TLS」→「概要」→「設定」から行います。
設定をクリックすると、暗号化モードの設定画面が開きます。
暗号化モードは、以下の5つから選択できます。
| モード | 内容 | 推奨度 |
|---|---|---|
| 自動 SSL/TLS （推奨） |
Cloudflareが配信元をスキャンし、サーバーがサポートする最も安全なモードを自動で適用（デフォルト） | ◎（基本はこのまま） |
| フル（厳格） | Cloudflare～サーバー間のトラフィックを暗号化。サーバー側に信頼できる認証局（CA）で署名された有効な証明書が必要 | ◎（手動設定ならこれ） |
| フル | Cloudflare～サーバー間のトラフィックを暗号化。証明書の検証は行わず、自己署名証明書も受け入れる | ○ |
| フレキシブル | 訪問者～Cloudflare間のみ暗号化。Cloudflare～サーバー間は暗号化されない | ×（トラブルの元） |
| オフ （安全でない） |
すべての区間で暗号化されない | ×（非推奨） |
基本的には、推奨の「自動 SSL/TLS」でOKです。
サーバー側に有効なSSL証明書があれば、最も安全な「フル（厳格）」相当が自動で選ばれます。
設定画面では、現在どのモードが適用されているかが「現在実行中：フル」のように表示されます。
ただ、適用されるモードを自分で固定したい場合は、「フル（厳格）」を選んでください。
エックスサーバーやConoHa WINGなど、国内の主要レンタルサーバーは無料SSLが用意されているため、ほとんどの場合「フル（厳格）」で動作します。
サイトがすでにHTTPS化されている状態で「フレキシブル」を選ぶと、リダイレクトループ（ERR_TOO_MANY_REDIRECTSエラー）が発生して、サイトが表示できなくなります。
Cloudflare導入後のトラブルで最も多いのがこのモードなので、注意して設定してください。
②、Always Use HTTPSの有効化
次に、「SSL/TLS」→「エッジ証明書」にある「常にHTTPSを使用（Always Use HTTPS）」をオンにします。
SEOやセキュリティの面でも、HTTPSへの統一は必須なので、必ずオンにしておきましょう。
③、キャッシュ設定
Cloudflareは、初期状態でCSS・JavaScript・画像などの静的ファイルを自動でキャッシュしてくれます。
基本的にはデフォルト設定のままで問題ありません。
ただ、キャッシュに関しては次の2点は抑えておきましょう。
- キャッシュのパージ（削除）：「キャッシング」→「構成」→「すべてをパージ」で、キャッシュを手動で削除できます。デザイン変更が反映されないときに使います
- 開発モード：オンにすると一時的（3時間）にキャッシュが無効になります。サイトのカスタマイズ作業をするときに便利です
例えば、「CSSを修正したのにサイトに反映されない！」というときは、まずキャッシュのパージを試してみてください。
キャッシュのパージや開発モードの設定は、ダッシュボードの「キャッシング」→「構成」から行えます。
画面を開くと、一番上に「キャッシュをパージ」という項目があるので、そこからキャッシュを削除できます。
また、画面を下へスクロールすると、「開発モード」という項目があるはずです。
開発モードを使用する場合は、ここをオンにしてください。
④、速度系の設定（Rocket Loaderなど）
「速度」メニューには、サイトをさらに高速化するための機能が用意されています。
こちらもデフォルトのままでも問題ないですが、以下の2点は有効化しておくことをおすすめします。
- Early Hints：ブラウザの読み込みを先回りして高速化する機能。オンにしておいて問題ありません
- Rocket Loader：JavaScriptの読み込みを後回しにして表示を高速化する機能
JavaScriptの実行タイミングが変わるため、広告コードや計測タグ、スライダーなどが正常に動作しなくなることがあります。
オンにする場合は、サイトの表示や広告が正しく動いているか必ず確認してください。問題があればオフに戻しましょう。
速度関連の設定は、ダッシュボードの「Speed」→「設定」→「コンテンツの最適化」タブから行えます。
「コンテンツの最適化」タブを開いて少し下へスクロールすると、「Early Hints」の項目があります。
さらに画面を下へスクロールすると「Rocket Loader」の項目もあるので、必要であれば設定をオンにしてください。
⑤、WordPressなら公式プラグインも入れておくと便利
WordPressでサイトを運営している場合は、Cloudflareの公式プラグインもあわせて導入しておくと便利です。
ただ、プラグインを入れることで運用が楽になるので、余裕のある方は設定してみてください。
公式プラグインでできることは、以下の通りです。
- WordPressの管理画面から直接キャッシュを削除できる（Cloudflareにログインする手間が不要）
- 記事の更新時に自動でキャッシュを更新してくれる
- WordPress向けの推奨設定をワンクリックで適用できる
- リダイレクトループを防ぐヘッダーの書き換え機能
導入手順は、以下の通りです。
- Cloudflareのダッシュボードで「APIトークン」を作成する
- WordPress管理画面の「プラグイン」→「新規追加」で「Cloudflare」を検索してインストール・有効化
- プラグインの設定画面でメールアドレスとAPIトークンを入力して連携する
プラグインをインストールすると、WordPress管理画面の左メニューの中に「Cloudflare」が追加されます。
そちらのメニューをクリックすると、Cloudflareの設定画面が開きます。
↓
Cloudflareのアカウントは既に作成済みのはずなので、「Sign in」をクリックしてください。
Sign inの画面が開くので、メールアドレスとAPIトークンを入力すると、WordPressとCloudflareの連携が完了します。
連携が完了すると、Cloudflareの設定画面が開きます。
この画面上で様々な設定を行うことができます。
当記事では細かくは説明しないですが、難しい設定ではないので、いろいろ触ってみてください。
なお、WP Super Cacheなどのキャッシュ系プラグインをすでに使っている場合は、機能が重複することがあります。機能を整理して、不要なプラグインは停止しておくとトラブルを減らすことができます。
Cloudflare導入でよくあるトラブルと対処法
こちらのセクションでは、Cloudflare導入後によくあるトラブルとその対処法を紹介します。
①、リダイレクトループが発生してサイトが表示されない
Cloudflare導入後のトラブルで最も多いのが、「ERR_TOO_MANY_REDIRECTS」というエラーでサイトが表示されなくなるケースです。
サーバー側でHTTPS化済みのサイトでフレキシブルを選ぶと、リダイレクトが無限に繰り返されてしまいます。
対処法は、「SSL/TLS」→「概要」から暗号化モードを「フル（厳格）」に変更することです。
変更後はキャッシュをパージして、ブラウザのキャッシュも削除してから確認しましょう。
②、サイトの変更内容が反映されない
CSSやJavascript、画像を修正しても、その変更内容がサイトに反映されない場合もよくあります。
Cloudflare側に古い内容がキャッシュされたままになっていることが原因なので、次の対応を意識してください。
- 「キャッシング」→「構成」→「すべてをパージ」でキャッシュを削除する
- カスタマイズ作業中は「開発モード」をオンにしておく
③、ネームサーバーを変更したのにアクティブにならない
ネームサーバーの変更後、なかなかアクティブにならない場合は、以下を確認してみてください。
- ネームサーバーの入力ミスがないか（スペルを再確認）
- 変更したのはドメイン管理サービス側か（レンタルサーバー側ではない）
- 変更から24時間以上経過しているか
24時間以上待ってもアクティブにならない場合は、入力ミスの可能性が高いです。ドメイン管理サービス側の設定をもう一度見直してみましょう。
Cloudflareに関するよくある質問
Cloudflareに関するよくある質問もまとめておきます。
個人ブログやアフィリエイトサイトであれば、無料のFreeプランで全く問題ありません。
CDNによる高速化・DDoS対策・無料SSLといった主要な機能は、無料プランでもすべて利用できます。サイトの規模が大きくなり、画像最適化や高度なWAFが必要になったタイミングで、有料プランを検討すれば十分です。
Freeプランには契約や解約という概念がないため、ネームサーバーを元に戻すことでCloudflareの利用を停止できます。
ドメイン管理サービスの管理画面で、ネームサーバーを元の設定（レンタルサーバー指定のネームサーバーなど）に戻してください。その後、Cloudflareのダッシュボードからサイトを削除すれば完了です。
元のネームサーバーがわからない場合は、利用中のレンタルサーバーの公式サイトやマニュアルを確認してください。
APO（Automatic Platform Optimization）は、通常はキャッシュされないHTMLページ自体をCloudflareのサーバーにキャッシュして、WordPressサイトを劇的に高速化するオプション機能です（Freeプランでは月額$5）。
表示速度を追求したい場合にはおすすめですが、まずは無料の範囲で運用してみて不満があれば検討するという運用で十分です。
サイトの構成や利用中のサーバーによって効果は異なるため、一概には言えません。
画像やCSSなどの静的ファイルが多いサイトほど、CDNキャッシュの効果が出やすい傾向にあります。導入前後でPageSpeed Insightsなどの計測ツールを使って、実際の数値を比較してみるのがおすすめです。
また、速度面だけでなく、DDoS対策などのセキュリティ強化やサーバー負荷の軽減といったメリットも大きいため、速度の変化が小さくても導入する価値は十分にあります。
まとめ
今回は、無料で使えるCDNサービス「Cloudflare（クラウドフレア）」について導入手順、導入後の初期設定を中心に詳しく紹介しました。
そのため、小規模サイトから企業サイトにまで有効で、日本国内でも幅広く使用されているサービスです。
もちろんCloudflareにもデメリットはあります。
ですが、サイトの高速化・セキュリティ対策として活用できるので、この機会にぜひ導入を検討してみてください。
→ Cloudflare公式サイトはこちら
