
ウェブサイトを運営する際に避けて通れないのが、スパムやボットからの攻撃です。これらを防ぐためにGoogleが提供する「reCAPTCHA」は非常に効果的なツールです。本記事では、初心者にもわかりやすく、reCAPTCHAの仕組みや導入方法をステップごとに説明します。
reCAPTCHAについて
reCAPTCHAとは?
reCAPTCHAは、Googleが提供する無料のスパム防止サービスです。ボットによる不正アクセスやスパム送信を防ぐために、ユーザーが人間かどうかを判別します。
従来のreCAPTCHA v2では「私はロボットではありません」というチェックボックスや画像選択が求められましたが、v3ではユーザー操作が不要で、スコアベースで自動判定。
これにより、ユーザーの利便性を損なうことなくセキュリティを強化できます。
Googleのアカウントを持っていれば、1アカウントにつき最大10,000件/月まで無料で利用できます。
reCAPTCHA v2の特徴
ユーザーに「私はロボットではありません」のチェックボックスのクリックロボットではないことを示すチェックボックスをユーザーが直接操作する必要があります。認証が目に見える形で行われセキュリティアピールとしても利用されます。主にフォーム送信や、ログインページなど特定の操作時に使用されます。

reCAPTCHA v3の特徴
reCAPTCHA v3 はユーザーの操作を必要としないため、ページの見た目や操作性に影響を与えません。
行動データをもとに自動でスパムかどうかを判定。シームレスに動作します。
フォーム送信時だけでなく、ログインやコメントなど、さまざまな場面で活用できます。
主な違い
特徴 | reCAPTCHA v2 | reCAPTCHA v3 |
---|---|---|
ユーザー操作 | 必要(チェックボックスなど) | 不要(自動判定) |
判定方法 | 明確な認証プロセス | スコアベース |
適用範囲 | 特定の操作時 | ページ全体または複数操作 |
ユーザー体験への影響 | 中程度 | 低い |
「Contact form 7」についてはWordPressで簡単にメールフォーム作成ガイド!こちらのページに設定を解説しています。

reCAPTCHAの導入方法
以下では、Google reCAPTCHAをサイトに導入するための具体的な手順を説明します。
1. Google reCAPTCHAサイトでAPIキーを取得
- ラベル: サイトを識別するための名前を入力します。(例:
○○○サイト用
など
複数のサイトを登録する場合には後でわかるように入力します。) - reCAPTCHAタイプ: 「reCAPTCHA v3」を選択します。
- ドメイン: 設定するサイトのドメインを入力します。
(https:// もしくは http:// を除いたドメイン部分example.com
/最後のスラッシュは不要)
利用規約に同意し、「送信」をクリックします。

表示される「サイトキー」と「シークレットキー」をメモ帳などに控えておきます。

次に、WordPressの管理画面「お問い合わせ」「インテグレーション」をクリックします。
「reCAPTCHA」のセクションから「インテグレーションのセットアップ」をクリックします。

ここに、先ほど取得したサイトキーとシークレットキーをコピー&ペーストし「変更を保存」をクリックします。

HTMLにスクリプトを追加
以下のコードをサイトの<head>
タグ内に追加します。
<script src="https://www.google.com/recaptcha/api.js?render=YOUR_SITE_KEY"></script>
※ YOUR_SITE_KEY
を先ほど取得した「サイトキー」に置き換えてください。
「ダッシュボード」 「Cocoon設定」 「アクセス解析・認証」 「その他アクセス解析・認証子度設定」


reCAPTCHAの保護マークを調整する方法
reCAPTCHAを導入すると、ページ右下にGoogleの保護マーク(バッジ)が表示されます。このバッジは利用規約に従い削除はできませんが、CSSを使って位置の変更やスタイリングの調整は可能です。
スマートフォンサイトでreCaptchaバッチがデザインやクリックの妨げになるような場合など、カスタムCSSで「バッジを移動」または「バッジを非表示」にして調整できます。

1. バッジの位置を変更
バッジの位置を画面の「左下」に移動する例
.grecaptcha-badge {
bottom: 10px !important;
left: 10px !important;
right: auto !important;
}
上記コードをサイトのスタイルシート (css)
タグ内に追加してください。
「ダッシュボード」 「外観」 「カスタマイズ」 「追加CSS」
2. カスタムスタイルで目立たなくする
サイズを85% 縮小し不透明度を50%に設定しました。
これでバッジが目立ち過ぎず自然にデザインに溶け込んでみえます。


<style>
.grecaptcha-badge {
transform: scale(0.85);
opacity: 0.5;
transition: opacity 0.3s;
}
.grecaptcha-badge:hover {
opacity: 1;
}
</style>
3. フローティングバッジの代わりに固定リンクを設置
非表示するには reCAPTCHA ブランドを目に見える形で表示している場合に限り、バッジを非表示にできるため、「This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.」の表示が必須となります。
HTMLでリンクを追加する:
以下のコードをサイトのHTML
を必要な場所に追加してください。
This site is protected by reCAPTCHA and the Google
<a href="https://policies.google.com/privacy">Privacy Policy</a> and
<a href="https://policies.google.com/terms">Terms of Service</a> apply.
コンタクトフォームの下に以下の文章を追加します。
「ダッシュボード」 「固定ページ」 「コンタクトフォーム」など設置したコンタクトフォームの下にHTML
を追加します。

お問い合わせフォームの下に「カスタムHTML」ブロックを挿入しコードをペーストします。

サイトを確認して、メッセージフォームの下に表示されているのを確認しましょう。

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.
日本語で、「このサイトは reCAPTCHAとGoogleによって保護されており、Google のプライバシーポリシーと利用規約が適用されます。」という内容が記載されています。
CSSでバッジを非表示にする:
そして、次にreCAPTCHAバッジを非表示にするために以下のコードをサイトのスタイルシート (css)
タグ内に追加してください。
「ダッシュボード」 「外観」 「カスタマイズ」 「追加CSS」


以下のCSSを追加し、「公開」をクリックします。
.grecaptcha-badge { visibility: hidden; }
これで、reCAPTCHA バッジが非表示になりました。
サイトを開いてreCAPTCHAバッジが非表示になっているのか確認しましょう。
まとめ
reCAPTCHA v3は、ユーザーがチェックを入れたりする手間が無く、ウェブサイトをボットやスパムから守る効果的なツールです。ホームページ制作が初心者の方でも簡単に設定できますのでぜひ試してみて、あなたのウェブサイトのセキュリティを向上させてくださいね!