「Contact Form 7」というプラグインを使用してお問い合わせフォームを作り、スパム対策として「reCAPTCHA」というツールを「Contact Form 7」自体に備わっている機能を使い、簡単に導入することができました。
「reCAPTCHA」を導入すると、通常左下に「reCAPTCHA」の“バッジ”が表示されます。しかも「Contact Form 7」を使用して導入すると全ページに表示されてしまいます。それ自体は実際には問題ないのですが、“ページトップに戻るボタン”を右下に表示されるように設定していると、“バッジ”と“ボタン”重なってしまい、とても不格好です。そのため“バッジ”のほうが Google 公認で非表示にすることが可能なのでやり方を調べてみました。
こうなると最悪ですね。
reCAPTCHA とは
かんたんに言えば、Google が提供する人間とボットを区別するためのツールです。お問い合わせページやコメントのフォームなどに導入されて、スパムや不正アクセスを防止してくれます。よく見かける「私はロボットではありません」にチェックしたり、「バスのパネルを選択してください」みたいなアレです。
reCAPTCHA は、フリクションを発生させることなく、詐欺や悪用から Web サイトを保護します。
Google
reCAPTCHA は、高度なリスク分析エンジンと適応チャレンジを使用して、悪意のあるソフトウェアが Web サイトで不正行為に関与するのを防ぎます。一方、正当なユーザーはログイン、購入、ページの閲覧、アカウントの作成が可能で、偽のユーザーはブロックされます。
個人向けでは現在「reCAPTCHA v3」と「reCAPTCHA v2」のバージョンあります。
「reCAPTCHA v2」は、ユーザーに直接アクション（チェックやパネルを選択）をしてもらいボットではないということを証明します。
「reCAPTCHA v3」は、ユーザーのサイトでの動き計測して、ボットか人かを判断するみたいです。
セキュリティ的にはv2のほうが安心感はありますが、ユーザーにアクションしてもらうという点がユーザーフレンドリーではないですので、導入するサイトの特性によって使い分けが大切になってきます。
ただし、「Contact Form 7」のプラグインを使用している場合、「reCAPTCHA v3」しか使用できません。
そもそも reCAPTCHA のバッジを非表示にしていいの？
Googleの公式として、バッジを非表示にする方法を公開していますので、とくに問題ないと考えられます。ただし、ルールとして下記のようにテキストを表記する必要があります。
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.
See the Pen reCAPTCHA_text by MATSUDAI (@matsudai) on CodePen.
日本語訳は下記です。
このサイトはreCAPTCHAによって保護されており、Googleのプライバシー ポリシーと利用規約が適用されます。
See the Pen reCAPTCHA_テキスト by MATSUDAI (@matsudai) on CodePen.
英語のまま入れても問題はないようですが、やはり日本語向けサイトには日本語で入れるのがユーザーフレンドリーだと思います。(※公式で日本語テキストは見つけられませんでしたが、多くのサイトで同じテキストを使用しているので私もそれに倣いました。)
非表示のやりかた
公式で紹介されているコードをCSSファイルに追加します。とても簡単ですね。
See the Pen Untitled by MATSUDAI (@matsudai) on CodePen.
「Contact Form 7」を使用すると全ページに導入されてしまう
「Contact Form 7」を使用してreCAPTCHAを導入すると全てのページにreCAPTCHAが導入されてしまいます。reCAPTCHAはスパム対策として導入したいので、フォームのないページだと単に読み込みが遅くなるだけなので、入れなくても良いのかなと思います。
ですが、本サイトはブログ形式なので、フォームのないページの方が少ないため、今はひとまず全ページにreCAPTCHAが導入されている状態にしてあります（将来的には各記事のコメントフォームを開放予定）。もっと知識が深まってきたら、改めてreCAPTCHAの有無を設定できるようにできるように調べたいと思います。
まとめ
reCAPTCHAを非表示にするのは公式で認められいます。ただし、公式のテキスト（日本語訳でも問題なさそう）を記載すること。
出典
Google. 「reCAPTCHA」. https://www.google.com/recaptcha/about/, 2023年3月29日閲覧。
