- reCAPTCHAとは
- reCAPTCHAとは、「私はロボットではありません」のチェックなどでお問い合わせフォームへの不正アクセスを対策する、Googleが無料で提供している機能です。
※本記事の手順・画面は2021年10月時点のものです。（2026年追記: WebflowとGoogle reCAPTCHAの現行UIでは名称・配置が変わっている場合があります）
先に結論｜reCAPTCHA設定の要点
- WebflowのフォームにreCAPTCHA要素を置き、Google reCAPTCHA（無料）でサイトキーを取得して、Project Settingsの「Forms」に登録する（3ステップ・目安15分）
- reCAPTCHAタイプは「v2」を選ぶ（Webflowのフォームはv2のKeyのみ対応）
- サイズは直接変更できないため、親のDivブロックを作りScaleを縦横0.7に設定して縮小する
10日目はセキュリティー面の強化を目的としたGoogle『reCAPTCHA』の導入方法を解説します。まずはreCAPTCHAについて少しご紹介します｡
reCAPTCHAとは？
「□私はロボットではありません」
この文章を一度は見たことありませんか？場合によっては写真を選択したり、質問に答えたり…なにかとめんどうくさい「あれ」をreCAPTCHAと呼びます｡
reCAPTCHAを導入する理由
不正アクセスを対策するために必要です｡お問い合わせフォームに実装することで変なメールを送ってくるウイルスからWebサイトを守ることができます。
お金はかかるのか
Googleで提供されている機能で無料で導入可能です。
導入は簡単か
この記事でイチから手順を紹介しているので簡単に導入できます。
導入の目安時間は15分です。
それではさっそく導入していきましょう！
WebflowにreCAPTCHAを導入する
以下の手順でreCAPTCHAを導入していきます｡
- 【手順1】お問い合わせに設置
- 【手順2】Googleで登録しよう
- 【手順3】WebflowとGoogleを連携
たったの3ステップです｡ちゃちゃっと終わらせましょう｡
【手順1】お問い合わせに設置
Webflowには最初から『reCAPTCHA』のテンプレートが用意されています。まずはこれをコンタクトフォームに入れてみましょう。
- コンタクトフォームを選択
- 送信ボタンの上に入れましょう。
これでOK。めっちゃ早いですね。
【手順2】Googleで登録しよう
（2026年追記: Google reCAPTCHAの登録画面は現行UIでは変わっている場合があります）
実際に使用するためにはGoogleと連携する必要があるので「Project Settings」を開いて設定画面に進みます｡
『Forms』の項目から、reCAPTCHAまでスクロールします。写真の赤丸部分をクリックして、GoogleのreCAPTCHA登録ページを開きましょう。
✓Googleページから新規登録をする
各項目を埋めて初期設定を完了させましょう。
上から順番に解説していきます。
- ①ラベル 後で見た時に、どのサイトのreCAPTCHAかすぐに分かるように名前をつけましょう。
- ②reCAPTCHA タイプ v3とv2、2つ選択できますが今回は「v2」を選択します。理由はWebflowのフォームにはv2のKeyしかないからです。v3も導入できると思いますが、まずは一旦v2でいいでしょう。
- ③ドメイン設定 reCAPTCHAを導入したいサイトのドメインを入力します。
入力して送信したら作成完了です｡
【手順3】WebflowとGoogleを連携
登録が正常に完了すると画面が切り替わり、サイトキーが表示されます｡表示されたサイトキーをWebflowの設定画面で登録したらreCAPTCHAの設定は終了です。
保存前には「reCAPTCHAを有効にする」を「Yes」にしましょう。
保存をすると・・・
「すべてのコンタクトフォームにreCAPTCHAがありますか？必要ですよ？」みたいな警告が出てきます。最初にコンタクトフォームのシンボルにreCAPTCHAを入れたので、問題ありませんね。
WebflowのreCAPTCHAをサイズ変更する
reCAPTCHAの導入が完了したので、コンタクトページのレスポンシブデザインを作成していきます。
ポートレートサイズを確認しよう
ポートレートサイズではreCAPTCHAが横幅を飛び出しているので調整が必要です。しかしreCAPTCHAは直接変更することができません。
新たにDivブロックを作成してそのDivを親にして､その中にreCAPTCHAを入れることで対応します。
- Divブロックを作成 ・クラス名「reCAPTCHA wrap」
- reCAPTCHAを中に入れる
- reCAPTCHA wrapを選択 ・2D＆3Dtransforms「･･･」をクリック。下記画像①が表示される。 ・画像の①を参考にコンテンツを「左上」に配置 ・「＋」をクリック｡ ・Scaleから縦と横0.7に設定
reCAPTCHAを小さく表示することができました。一番小さいサイズでは少し飛び出ていますが、ニンテンドーのデバイスでサイトを閲覧する人はいないと判断し、このままにしておきます。
また仮にいたとしてもなんとか利用はできそうですね。
まとめ
10日目ではreCAPTCHAの導入方法を学ぶことができました。今回はWebflow設定をいじる時間のほうが長かったかもしれませんね。
Webflowに用意された『reCAPTCHA』は英語表現しかないのが少し残念です。しかし実際に公開するとユーザーの言語設定によって表示言語が変わるので特に問題はないです｡
次回は【SEO】についてWebflowでどのように設定するか解説します。Twitterやインスタなどでシェアする時の画像などを設定することもできますよ！
それでは次回はまた頑張りましょう。お疲れ様でした。
よくある質問
WebflowへのreCAPTCHA導入にお金はかかりますか？
かかりません。reCAPTCHAはGoogleで提供されている機能で、無料で導入可能です。不正アクセス対策として、お問い合わせフォームへの実装がおすすめです。
WebflowのreCAPTCHAはv2とv3どちらを選べばいいですか？
v2を選択します。理由はWebflowのフォームにはv2のKeyしかないからです。v3も導入できると思われますが、まずは一旦v2でよいでしょう。
WebflowにreCAPTCHAを導入する手順は？
3ステップです。①コンタクトフォームの送信ボタンの上にWebflowのreCAPTCHAテンプレートを設置、②GoogleのreCAPTCHA登録ページでラベル・タイプ・ドメインを設定、③表示されたサイトキーをWebflowの設定画面に登録して連携します。導入の目安時間は15分です。
reCAPTCHAのサイズは変更できますか？
reCAPTCHAは直接変更できません。新たにDivブロックを作成して親にし、その中にreCAPTCHAを入れて、Scaleから縦と横を0.7に設定すると小さく表示できます。
WebflowのreCAPTCHAは英語表示のままですか？
Webflow上では英語表現しかありませんが、実際に公開するとユーザーの言語設定によって表示言語が変わるので特に問題はありません。
