2025.08.04 俺の勉強会 #3「ほんとにあった怖いフォーム2025」

ほんとにあった 怖いフォーム 2025 2025年8月4日 株式会社メタップスホールディングス テクノロジー戦略部 宇田川 海人 © Metaps Holdings, Inc. 1

自己紹介 株式会社 メタップスホールディングス フロントエンドエンジニア/UXデザイナー 宇田川 海人（Kaitou） 2019年より株式会社メタップス（現・株式会社メタップス ホールディングス）、最近は社内ツールを作りつつ、エンジ ニア採用や採用広報に力を入れている。 休日はキャンプとワカサギ釣りを画策中。 𝕏 @Kaitou1192 Profile Cardで交換お願いします！ © Metaps Holdings, Inc. 2

本編 © Metaps Holdings, Inc. 3

基本 © Metaps Holdings, Inc. 4

SSL証明書切れ ⚠保護されていない通信｜https: この接続ではプライバシーが保護されません SSL証明書が切れている警告画面が出てしまう。 © Metaps Holdings, Inc. 5

デザイン編 © Metaps Holdings, Inc. 6

インプットがやらだデカい 姓 名 各項目が物凄く大きくて一望性が無い。 © Metaps Holdings, Inc. 7

1行ずつの表示、そしてアニメーション ✕ 姓 次 ステップごとにEnter、マウスのクリックが必要になる。 © Metaps Holdings, Inc. 8

複数行入力かと思いきや単一行入力 本文 ｜ 見た目の枠と実際の入力欄が違うので戸惑う。 © Metaps Holdings, Inc. 9

マウスポインタが凝っている 姓 名 メール 電話 本文 ポインターの細かい場所がわからない。遅延処理がある場合も。 © Metaps Holdings, Inc. 10

インプット編 © Metaps Holdings, Inc. 11

すべて全角しか受け付けない 郵便番号（全角） 住所（全角） 電話番号（全角） メール（半角） さすがにメールアドレス全角は見たことがない。 © Metaps Holdings, Inc. 12

電話番号が携帯しか許容されていない 電話 03-3333-8888 ※正しい形式でご入力ください 11桁のみの想定で、10桁の電話番号が許容されない。 © Metaps Holdings, Inc. 13

FAX番号が入力必須 FAX（必須） 昨今はFAXを持っていない人も多そう。 © Metaps Holdings, Inc. 14

漢字入力なのに順番が海外仕様 名 姓 メール 電話 本文 よっぽど注意深くないと入力を間違う。 © Metaps Holdings, Inc. 15

必要ない入力をさせる 生年月日（必須） 性別（必須） 男 女 採用では男女雇用機会均等法、労働施策総合推進法で危うい。 © Metaps Holdings, Inc. 16

ラベル プレースホルダー 編 © Metaps Holdings, Inc. 17

プレースホルダーにラベルを入れている 東京都千代田区1-1-X あ｜ メールアドレス 電話番号 入力を開始した瞬間に入力して欲しい情報が消える。 © Metaps Holdings, Inc. 18

ラベルとプレースホルダーが違う フリガナ やまだ たろう カタカナを期待しているのか？ひらがなを期待しているのか？ © Metaps Holdings, Inc. 19

ラベルと期待される入力が違う 電話 03-3333-8888 ※メールアドレスをご入力ください メールアドレスを入力すると送信できました。 © Metaps Holdings, Inc. 20

日本語のラベルと英語のラベルが異なる 市区町村 Country 何でこんなことが起こるのか……。 © Metaps Holdings, Inc. 21

文字数制限編 © Metaps Holdings, Inc. 22

タイトルが必須なのに15文字制限 件名（必須） 0/15 書けなくは無いけれど短い。 © Metaps Holdings, Inc. 23

本文が100文字制限 本文（必須） 0/100 ちゃんとしたことは書けないので失礼な文章になりがち。 © Metaps Holdings, Inc. 24

制限文字数と実際の制限が違う 本文（必須） テキストテキストテキストテキストテキスト テキストテキストテキストテキストテキスト テキストテキストテキストテキストテキスト テキストテキストテキストテキストテキスト テキストテキスト ※文字数オーバーで送信できません 498/2000 一瞬バイト数換算かと思いました。 © Metaps Holdings, Inc. 25

制限にひっかからないのに送信は途中まで 本文（必須） いろはにほへと ちりぬるを わかよたれそ つねな らむ うゐのおくやまけふこえて あさきゆめみし ゑ ひもせす ■本文 いろはにほへと ちりぬる を わかよ 「違うんです、そういうつもりじゃなかったんです。」と言いたくなる。 © Metaps Holdings, Inc. 26

ボタンが押せない編 © Metaps Holdings, Inc. 27

ヒットエリアが重なっている 送信 ボタンを置くためにラップしているものにヒット判定がある。 © Metaps Holdings, Inc. 28

iframeの指定がおかしい 名前 メール スクロール不可 本文 iframeの高さ固定、スクロール不可で「送信」にたどり着けない。 © Metaps Holdings, Inc. 29

チェックボックスが奇想天外な位置にある 本文 プライバシー 今までの視線移動から想定できない位置は気付けない。 © Metaps Holdings, Inc. 30

CAPTCHA編 © Metaps Holdings, Inc. 31

独自CAPTCHAが難しすぎる o O 0 ◯ Θ o O 0 ◯ Θ ・読めない ・大文字・小文字が判別つかない ・ノイズが強すぎる ・おそらく合っているのに駄目 AIを使ったBotの方が突破率が高い可能性がある。 © Metaps Holdings, Inc. 32

CAPTCHAの気持ちがわからない ここのタイルは バスなのか？ 教師データを作った人々との心理戦がはじまる。 © Metaps Holdings, Inc. 33

エラー編 © Metaps Holdings, Inc. 34

CAPTCHAの実装エラーで進めない 本文 ※CAPTCHAの設定エラーが出ています 送信 インプットへの入力が終わったあとに発覚する詰みエラー。 © Metaps Holdings, Inc. 35

何のエラーかわからない 本文 ※重大なエラーが発生しています 送信 頑張って試行錯誤するが、やはりなかなか通らない。 © Metaps Holdings, Inc. 36

エラーの位置が奇想天外 ※重大なエラーが発生しています。修正してください。 本文 送信 視線と予想の外にあるものは気付けない。 © Metaps Holdings, Inc. 37

確認画面編 © Metaps Holdings, Inc. 38

確認項目が真っ白 確認画面 郵便番号（全角） 住所（全角） 電話番号（全角） メール（半角） 送信 表示だけの場合もあるし、データ自体が無い場合もある。 © Metaps Holdings, Inc. 39

文字がたくさん入力されることが考慮外 名前 メール 本文 山田 太郎 [email protected] テキストテキストテキス トテキストテキストテキ ストテキストテキストテ キストテキストテキスト テキストテキストテキス トテキスト スクロール不可 iframe 中身の分量が可変の要素に幅と高さを固定する際は計画的に。 © Metaps Holdings, Inc. 40

入力時はメールなのに、確認画面では電話 名前 山田 太郎 電話 [email protected] ※正しい電話番号を入れてください。 本文 テキストテキストテキストテキストテキストテ キストテキストテキストテキスト 送信 確認画面でもバリデートを入れている丁寧さ。 © Metaps Holdings, Inc. 41

送信完了編 © Metaps Holdings, Inc. 42

いきなりトップページに遷移 トップページ 突然でびっくりしてしまう。 © Metaps Holdings, Inc. 43

いきなり未入力のフォームに戻る 入力ページ 姓 名 メール 電話 本文 エラーなのか？正常に送れているのか？が判別できない。 © Metaps Holdings, Inc. 44

完了画面にエラー表示 Error 送信 ありがとうございました Error Error エラーなのか？正常に送れているのか？が判別できない。 その② © Metaps Holdings, Inc. 45

完了画面が404 404 NOT FOUND 送信完了していて欲しい。 © Metaps Holdings, Inc. 46

完了画面が真っ白 なぜこうなった。 © Metaps Holdings, Inc. 47

まとめ © Metaps Holdings, Inc. 48

まとめ ● 入力フォームはちゃんとテストしましょう。 ● 特に企業の問い合わせフォームは不備が目立ちま す。 ● IT企業にとって、問い合わせフォームに不備がある のは「紺屋の白袴」です。 © Metaps Holdings, Inc. 49

最後に © Metaps Holdings, Inc. 50

ちゃんと 定期的に 動作確認しましょう © Metaps Holdings, Inc. 51

ご清聴ありがとうございました！ © Metaps Holdings, Inc. 52