Google reCAPTCHA v3の導入とContact Form7への設定方法を完全解説

WordPress超入門 Google recapture 設定方法

本サイト内のコンテンツはNORILOGが独自に制作しています。メーカー等から商品提供を受けることもありますが、その場合は記事内に明記しております。コンテンツの内容や評価に関するランキングの決定には一切関与していません。メーカー等の指示による表示部分にはPRを表記します。記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。詳しくはサイト運営ポリシーをご覧ください。

WordPressをご利用のみなさんこんにちは、NORI(@norilog4)です。

Google reCAPTCHA v3は、ウェブサイト上のフォームにおいてスパムや自動ボットからの送信を防ぐために使用されるセキュリティシステムです。

Contact Form 7は、WordPressで広く利用されているフォームプラグインです。この記事では、Google reCAPTCHA v3の導入とContact Form 7への設定方法について、最新情報を含めてご紹介します。

特にContact Form 7などのお問い合わせフォームを入れてからスパムメールが届くようになった方はチェックしてみて下さい。

この方法でほとんどのスパムメールは撃退できるはずです!

NORI

ちゃんと設定すればセキュリティ強化につながるよ!
この記事を書いた人

Google reCAPTCHA(リキャプチャ)とは

reCAPTCHA種類

いろいろなホームページを見ていると、サイトのお問い合わせフォームやログインフォームで、「●●の画像を選択してください。」と指定された画像を選択したり、「わたしはロボットではありません。」といったボックスにチェックを入れた経験ありませんか?

それが「reCAPTCHA」と呼ばれる仕組みです。

reCAPTCHAの具体的な機能

reCAPTCHAは、Webフォーム・ログインフォームなどに登録する際、不正アクセスをするような悪質なbot等からWebサイトを守るための機能となります。

最新版のreCAPTCHA v3とは

reCAPTCHA v3」の機能については、以下のYouTube動画で説明されています。特にWordPressはセキュリティーが甘いとサイトを乗っ取られたり、スパムメールを送られたり、改ざんされやすいので注意が必要です。

2018年10月29日に、GoogleからreCAPTCHAの新バージョンreCAPTCHA v3が正式に公開されています。

このreCAPTCHA v3の最大の特徴は、「●●の画像を選択してください。」と指定された画像を選択したり、「わたしはロボットではありません。」といったボックスにチェックを入れたりすることが完全に無くなり、サイトを訪問した人がなにかアクションを起こす必要もなく、もっと自然にセキュリティーを強化できることです。

reCAPTCHA v3はGoogleのAIがユーザーのページ内での行動をスコアとして算出することで、そのスコアを元にbotか人間かを判別します。さらに、reCAPTCHA v3を配置したページでのユーザーの動きを学習し、利用が増えるとともに行動スコアの精度が高まっていくこともv3の特徴です。

reCAPTCHAの管理画面

reCAPTCHA を設置することで管理画面上では以下のように不審なトラフィックや、リスクが高いアクセスがどのくらいあるのかチェックすることができるのが特徴です。

reCAPTCHA 管理画面
リスクのあるリクエストが確認可能
reCAPTCHA 管理画面
不審なトラフィックがあるか確認可能

Google reCAPTCHA 導入のメリット・デメリット

reCAPTCHA 導入の最大のメリットは、botによる攻撃を防げること(スパム対策になること・セキュリティー強化につながること)です。また設置する reCAPTCHAのバージョンによってはデメリットも出てきます。

メリット
  • botによる攻撃を防ぐ
  • スパムメール対策
  • 簡単に導入可能(v3)
デメリット
  • 確認を求める(v1・v2)
  • 設定が面倒(v1・v2)
  • ユーザビリティを損なう

会社のホームページなどをWordPressで作ってお問い合わせフォームを作っていた場合、お問い合わせのメールボックスがbotによる問い合わせで埋まってしまい、本当に確認すべきメールを探すのに手間取ってしまいます。こういう経験ありませんか?

お問い合わせフォームへ英文メールがよく届き、本当に重要なお問い合わせメールがわからなくなってしまって…

お客様担当者

NORI

こんなときでもreCAPTCHAを設置すれば大丈夫!

Google reCAPTCHA の種類

現在、 reCAPTCHAには3種類のバージョンがあります。その中でも最新版と呼ばれるものは v3 になります。

Google reCAPTCHA v3の概要

2018年10月29日に公開された reCAPTCHA v3は、最新版のreCAPTCHAです。reCAPTCHA v3は、ユーザーが人間かBot(ボット)かどうかを判断するために、ユーザーに何らかのアクションを求めることがなくなります。ホームページを訪れたユーザーに煩わしい画像認証や、チェックボックスへのチェックなどは一切必要が無くなります。

reCAPTCHA v3は、ユーザービリティを一切損なうことなく、botを検知することができるのでおすすめです。特別な理由がない限り、これからreCAPTCHA導入を考えている方は、reCAPTCHA v3の導入をおすすめします。

Google reCAPTCHA v2の概要

reCAPTCHA v2の仕組み

reCAPTCHA v2は、「私はロボットではありません」と記載されたチェックボックスです。いまでも多くのサイトで見かけることが多いreCAPTCHAのひとつです。

reCAPTCHA v2の挙動は、チェックボックスにチェックを入れたのち、2つのパターンに分岐します。1つ目が、そのまま人間と判断されるパターンです。もう1つが、人間かどうかの試験を課されるパターンです。

怪しい動きがあった場合には、質問で指定された画像を選択する必要があります。質問が難しく画像を選ぶまでに時間がかかってしまい、ユーザビリティを損なうため、ここで離脱してしまう可能性も少なくありません。

Google reCAPTCHA v1の概要

reCAPTCHA v1の仕組み
出典:Google reCAPTCHA Help

reCAPTCHA v1は、2018年 3月に提供が終了している為、現在は利用できません。2018年に終了したため、いまでは見かけることはなくなりましたが、上の画像のように歪んだ英数字をユーザーに提示し、入力させるものです。

一昔前までは、「botが歪んだ文字を認識するのは難しいだろう」と言われていましたが、最近はAIなどを使った画像認識精度もあがってきた為に、reCAPTCHA v1は破られるようになりました。

最新版 Google reCAPTCHA v3の導入方法

Googleのアカウントがあれば誰でも利用が可能なサービスです。お手持ちの「Googleのアカウント」を使ってログインしましょう

Google reCAPTCHA v3 導入方法

Google reCAPTCHA v3

ログイン後 reCAPTCHA v3 を新規作成

Google reCAPTCHA v3 新規追加
+をクリックして新しいサイトを登録

reCAPTCHAにGoogleアカウントログイン後、新規追加ボタンクリックすると、新しいサイトを登録するという以下の画面がでてくるので、以下の内容を入力します。

reCAPTCHA v3 設定項目

ラベル(自分のブログ名など分かりやすい名前を入力)
reCAPTCHA タイプ(reCAPTCHA v3を選択)
ドメイン(設定したいブログのドメインを入力)
オーナー(ログインしたGoogleのメールアドレスが表示される)
reCAPTCHA 利用条件に同意する(チェックを入れる)
アラートをオーナーに送信する(チェックを入れる)

reCAPTCHA v3 設定項目の参考

Google reCAPTCHA v3 サイトの設定
この画像を参考に各項目を設定

reCAPTCHA v3のサイトキー&シークレット キー

送信ボタンを押すと、以下の画面のように reCAPTCHA v3 をWordPress(ワードプレス)へ設定するのに必要なキーが表示されます。このキーを使ってプラグインへの実装 & セキュリティー強化を行います。

Google reCAPTCHA v3 追加
プラグインの設定に必要なキー

NORI

reCAPTCHA v3は一旦ここで終了!次はContact Form 7の設定です

Contact Form 7の設定

WordPress上で、お問い合わせフォーム設置に必須プラグインである Contact Form 7(コンタクトフォーム セブン)へ、reCAPTCHA v3の管理画面で生成されたサイトキー&シークレット キーを入力します。インストールしていない方は、Contact Form 7のプラグインをインストールしましょう。

Contact Form 7
Contact Form 7
開発者: Takayuki Miyoshi
金額: 無料

プラグインのインストール方法がわからない方は、WordPress(ワードプレス)の初心者でもわかるプラグインのインストール方法をチェックしてみてね!

WordPress 超入門 【初心者でも安心】WordPress プラグインのインストール方法を動画で解説

Contact Form 7 インテグレーションへの設定

Contact Form 7のプラグインをインストールし有効後に、ダッシュボード内に表示されている「お問い合わせインテグレーション」をクリックし、さきほど取得したreCAPTCHA のサイトキー&シークレット キーを入力します。

Contact Form 7 インテグレーションへの設定 Google reCAPTCHA v3
Contact Form 7 のインテグレーションへ設定

これでお問い合わせフォームからのスパムメッセージなどを排除することができます。

Google reCAPTCHA v3の応用設定

このまま設置すると、サイトの右下にreCAPTCHAのロゴ(Badge : バッジ)が表示されます。PC表示などで「TOPへ戻る」ボタンを表示している場合、表示位置が完全にかぶってしまい邪魔になってしまいます。

プラグインなどを入れて消す方法や function.php にコードを追加してこのロゴを消す方法もありますが、今回紹介するのはreCAPTCHA v3のバッジをGoogle公認の方法で非表示にする方法です。

Google reCAPTCHA v3 ロゴ アイコン表示設定

Google公認 reCAPTCHA v3のロゴを消す方法

英語での案内なのでどうしても見落としがちですが、reCAPTCHA の サポートページのよくある質問にGoogle公認の非表示設定方法が案内されています。

非表示するには、サイト内にGoogleから指定された文言を記述することと、CSSへのソースコードの追記が必要となります。

この記事のフッター部分をチェックしてみてね!

NORI

reCAPTCHA サポート – よくある質問

reCAPTCHA のブランドを視覚的にサイト内へ表示

ブログで「TOPへ戻るボタン」を設定している場合、スマホ表示でもパソコン表示でも、このreCAPTCHAのアイコンがかぶってしまう場合がありますが、これから紹介する方法で回避することもできます。

お問い合わせフォームやフッター等に以下の情報(ソースコード)をサイト中に表示することで、reCAPTCHA v3のロゴ(バッジ)を非表示にすることが可能です。

HTML
このサイトはreCAPTCHAによって保護されており、Googleの<a href = "https://policies.google.com/privacy">プライバシーポリシー</a>と<a href = "https://policies.google.com/terms">利用規約</a>が適用されます。 

reCAPTCHAバッジをCSS追記で非表示にする

reCAPTCHAバッジを非表示にするには、CSSへ以下のコードを追記します。

CSS
.grecaptcha-badge { visibility: hidden; }

このサイトでの設定参考例

このサイトのお問い合わせフォームで以下のように表示することで、reCAPTCHA v3のロゴ(バッジ)を非表示にしています。デザイン面も意識して保護されているイメージで、Fontawsomeを利用して鍵アイコンを文章の先頭に表示させています。

reCAPTCHA 設定参考例

Google reCAPTCHA v3の導入方法・応用設定のまとめ

本記事は、Google reCAPTCHA v3の導入とContact Form7への設定方法を徹底解説した完全ガイドのまとめ記事です。

Googleで案内されている方法などを守ればフッター下に表示されるreCAPTCHA v3のロゴを非表示にでき、サイトのセキュリティーを強化することができます。

ブログを書くことを優先してセキュリティー対策を甘く見ていると、あなたのWordPressサイトがハッキング(乗っ取り)されたり、スパムの踏み台などにされてしまう危険性もあることに注意してください。

せっかく一生懸命作ったブログが改ざんされてしまう前にこの解説記事を見て対応してしまいましょう!

もしも設定がうまく行かなかった場合などがありましたら、この記事の一番下にあるコメント欄から質問していただけると助かります。

NORI

素敵なお問い合わせフォームを作ってくださいね!

以上、NORI(@norilog4)でした。

コメントの通知/購読設定
受け取る通知
guest

12 件のコメント
古い順
新しい順 評価順
Inline Feedbacks
全てのコメントを見る
trackback
Contact Form 7のスパム対策決定版! 僕が迷惑メールを撲滅した秘策をご紹介 | ひよこは旅をする
3 年 ago

[…] こちらのサイトを参考に導入しました。 […]

trackback
WordPressサイトでreCAPTCHA v3のバッジロゴが表示されない?! | 愛知県一宮市のホームページ制作会社【Dagaya.(ダガヤ)】
3 年 ago

[…] ・reCAPTCHA v3+WordPressの設定方法、フォームへの設置手順・Google reCAPTCHA v3の導入とContact Form7への設定方法 完全ガイド 2020年版 […]

trackback
★コンタクトフォーム7 カスタマイズ
3 年 ago

[…] 【2021年版】Google reCAPTCHA v3の導入とContact Form7への設定方法を完全解説 […]

trackback
WordpressにおいてプラグインなしでBasic認証をかける方法! | 愛知県一宮市のホームページ制作会社【Dagaya.(ダガヤ)】
3 年 ago

[…] ・reCAPTCHA v3+WordPressの設定方法、フォームへの設置手順・Google reCAPTCHA v3の導入とContact Form7への設定方法 完全ガイド 2020年版 […]

ninini
ninini
3 年 ago

上記方法でPC画面からはリキャプチャロゴが消えたのですが、モバイルには残っています。何がいけないのでしょうか?

trackback
お問合せフォームを保護するreCAPTCHA(リキャプチャ)をワードプレスのコンタクトフォーム7に設定してみる | めも352
2 年 ago

[…] 参考サイト:【2021年版】Google reCAPTCHA v3の導入とContact Form7への設定方法を完全解説 わかりやすい記事、ありがとうございますm(_ _)m […]

trackback
2022年版 問い合わせフォームのプラグインにreCAPTCHAを設定する方法 | つつにいの楽活ブログ
2 年 ago

[…] ⇒ https://noripon.blog/2020/03/07/google-recaptcha-v3-setting-for-contact-form7/ […]

trackback
Xサーバーより【注意喚起】スパムメールの対策はしていますか | ゆりはぴ
2 年 ago

[…] 私はこちらのサイトを参考にさせていただきました (他の方のサイトに飛びます) ↓↓ https://noripon.blog/2020/03/07/google-recaptcha-v3-setting-for-contact-form7/ […]

trackback
WordPressのお問い合わせ(Contact Form7)のスパム対策 | www1
2 年 ago

[…] 下記のサイトを読むと簡単に設置出来ました。 【2021年版】Google reCAPTCHA v3の導入とContact Form7への設定方法を完全解説 […]

trackback
スパムメール対策reCAPTCHAの設定してますか? | 在宅ワークで稼ぐ子育てママの実践記ブログ
2 年 ago

[…] 【2021年版】Google reCAPTCHA v3の導入とContact Form7への設定方法を完全解説2021年… […]

trackback
WordPressのお問い合わせ(Contact Form7)のスパム対策 | 制御設計株式会社
2 年 ago

[…] 下記のサイトを読むと簡単に設置出来ました。 【2021年版】Google reCAPTCHA v3の導入とContact Form7への設定方法を完全解説 […]