初心者向け解説|reCAPTCHAの説明と導入方法

ウェブサイトを運営する際に避けて通れないのが、スパムやボットからの攻撃です。これらを防ぐためにGoogleが提供する「reCAPTCHA」は非常に効果的なツールです。本記事では、初心者にもわかりやすく、reCAPTCHAの仕組みや導入方法をステップごとに説明します。

スポンサーリンク

目次

reCAPTCHAについて

reCAPTCHAとは?
reCAPTCHAは、Googleが提供する無料のスパム防止サービスです。ボットによる不正アクセスやスパム送信を防ぐために、ユーザーが人間かどうかを判別します。
従来のreCAPTCHA v2では「私はロボットではありません」というチェックボックスや画像選択が求められましたが、v3ではユーザー操作が不要で、スコアベースで自動判定。
これにより、ユーザーの利便性を損なうことなくセキュリティを強化できます。

Googleのアカウントを持っていれば、1アカウントにつき最大10,000件/月まで無料で利用できます。

reCAPTCHA v2の特徴

ユーザーに「私はロボットではありません」のチェックボックスのクリックロボットではないことを示すチェックボックスをユーザーが直接操作する必要があります。認証が目に見える形で行われセキュリティアピールとしても利用されます。主にフォーム送信や、ログインページなど特定の操作時に使用されます。

reCAPTCHA v3の特徴

reCAPTCHA v3 はユーザーの操作を必要としないため、ページの見た目や操作性に影響を与えません。
行動データをもとに自動でスパムかどうかを判定。シームレスに動作します。
フォーム送信時だけでなく、ログインやコメントなど、さまざまな場面で活用できます。

主な違い

特徴reCAPTCHA v2reCAPTCHA v3
ユーザー操作必要(チェックボックスなど)不要(自動判定)
判定方法明確な認証プロセススコアベース
適用範囲特定の操作時ページ全体または複数操作
ユーザー体験への影響中程度低い

Contact form 7」についてはWordPressで簡単にメールフォーム作成ガイド!こちらのページに設定を解説しています。

reCAPTCHAの導入方法

以下では、Google reCAPTCHAをサイトに導入するための具体的な手順を説明します。

1. Google reCAPTCHAサイトでAPIキーを取得

STEP
Google reCAPTCHA公式サイトにアクセスします。

Googleアカウント」でログインし「v3 Admin Console」をクリックします。

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

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

STEP
Contact Form 7にreCAPTCHAを組み込む

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

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

HTMLにスクリプトを追加
以下のコードをサイトの<head>タグ内に追加します。

<script src="https://www.google.com/recaptcha/api.js?render=YOUR_SITE_KEY"></script>

YOUR_SITE_KEY を先ほど取得した「サイトキー」に置き換えてください。

Cocoon
ダッシュボード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は、ユーザーがチェックを入れたりする手間が無く、ウェブサイトをボットやスパムから守る効果的なツールです。ホームページ制作が初心者の方でも簡単に設定できますのでぜひ試してみて、あなたのウェブサイトのセキュリティを向上させてくださいね!

スポンサーリンク

目次