Cloudflare Turnstileの設定方法を徹底解説!初心者でもできる導入手順
Google reCAPTCHAの有料化に伴い、代替サービスとして注目を集めているのがCloudflare Turnstileです。「そもそもCloudflare Turnstileって何?」という方は、先にこちらの記事(https://biz-labo.biz/2025/08/085027.html)をご確認ください。
この記事では、Cloudflare Turnstileの具体的な設定方法を、初心者の方でも簡単にわかるように解説します。
Cloudflare Turnstileの基本的な設定方法
Cloudflare Turnstileの導入は、以下の流れで進めます。特別な専門知識は必要ありません。
1. Cloudflareアカウントの作成とログイン Cloudflareの公式サイトでアカウントを作成し、ログインします。すでにアカウントをお持ちの方は、この手順はスキップできます。
2. Turnstile ダッシュボードでウィジェットを追加 Cloudflareダッシュボードの左メニューから「Turnstile」を選択し、「ウィジェットを追加」をクリックします。ウィジェット名、ホスト名(自身のサイトのドメイン)、モード(通常はデフォルトで問題ありません)などを入力します。
3. サイトキーとシークレットキーを取得 ウィジェットの作成が完了すると、「ウィジェットを管理」画面に移行します。ここで表示される「サイトキー」と「シークレットキー」をコピーしておきましょう。この2つのキーが、サイトとTurnstileを連携させるために必要になります。
4. CMSやフォーム、アプリへの連携設定 取得したキーを、お使いのCMSやフォーム、アプリケーションに連携させます。
WordPressの場合 「Simple Cloudflare Turnstile」や「WPForms」など、Turnstileに対応しているプラグインをインストールし、設定画面で取得したサイトキーとシークレットキーを入力して保存します。どのフォームや画面でTurnstileを使うかを、プラグインで細かく指定できるものがほとんどです。
Next.jsなどのフレームワークの場合 .env
ファイルに以下のようにキーを記載し、コンポーネントやバックエンドで呼び出して使用します。 NEXT_PUBLIC_TURNSTILE_SITEKEY=ここにサイトキー TURNSTILE_SECRETKEY=ここにシークレットキー
5. 設置確認とカスタマイズ 実際にフォームにTurnstileのウィジェットが表示されていれば、導入は完了です。ウィジェットの位置やサイズ、テーマ、言語などは、プラグインやショートコードを使ってカスタマイズできます。
設定時の重要なポイント
- キー、特にシークレットキーは、ウェブサイトのサーバー側で厳重に管理し、絶対に他人に見せないようにしてください。
- 各プラグインやフレームワークごとの細かい手順は、公式ドキュメントや最新の導入記事を参照することをおすすめします。
代表的な設置手順やカスタマイズ例など、具体的なCMSや用途に応じてさらに詳細な設定が必要な場合があります。ビズラボでは、お客様のサイト環境に合わせたTurnstileの導入から設定までサポートしております。お気軽にご相談ください。
参考情報
- https://www.value-domain.com/media/cloudflare-turnstile-about/
- https://zenn.dev/localer/articles/335602817265d3
- https://seory.co.jp/contact-form-7-cloudflare-turnstile/
- https://docs.logto.io/ja/security/captcha/turnstile
- https://r-dsgn.net/278/
- https://kanrekigg.com/archives/10364
- https://wpforms.com/ja/docs/setting-up-cloudflare-turnstile/
- https://www.wpbeginner.com/ja/plugins/how-to-add-cloudflare-turnstile-captcha-in-wordpress/