reCAPTCHAバッジを非表示にしても利用可能!CSSでの設定方法と明記が必要な注意点とは?

多くのウェブサイトでセキュリティを強化するために導入されているreCAPTCHA。しかし、サイト運営者の中には、reCAPTCHAバッジがページに表示されることで、デザインやユーザー体験に影響を与えるのでは?と心配される方も少なくないでしょう。そんな方に朗報です。GoogleのreCAPTCHA Enterpriseを利用すれば、バッジを非表示にすることが可能です。

バッジを非表示にする方法

reCAPTCHAバッジを画面から隠すための手軽な方法として、CSSを使った調整が挙げられます。以下のCSSコードをサイトのスタイルシートに追加するだけで、バッジが非表示になります。

.grecaptcha-badge {
    visibility: hidden;
}

このコードを適用することで、ユーザーの画面上にバッジが表示されなくなります。特にデザインの統一感を保ちたいサイトや、ユーザー体験を優先したい場合に役立ちます。

明記が必要な注意点

ただし、バッジを非表示にする場合には注意が必要です。Googleの規約に従い、reCAPTCHAの存在を明示することが義務付けられています。具体的には、プライバシーポリシー利用規約のページに、次の内容を記載することが推奨されています。

  • reCAPTCHAがサイトに実装されていること
  • Googleのプライバシーポリシーおよび利用規約に従うこと

これにより、ユーザーに対して透明性を保つことができ、規約違反を避けることができます。デザインの自由度を高めつつも、しっかりとルールを守り、reCAPTCHAの使用について適切に表記することを忘れないようにしましょう。

まとめ

reCAPTCHAバッジを非表示にすることで、ウェブサイトの見た目や操作性を向上させることができます。しかし、Googleの規約に従い、reCAPTCHAの利用を明確に記載することが不可欠です。しっかりと規約を守りつつ、ユーザー体験を最適化することを心がけましょう。

参考リンク: Google reCAPTCHA FAQ

この記事を書いた人

田島 佑清

2児の父 / ネクストメディア株式会社のエンジニア