---
title: 2025.08.04 俺の勉強会 #3「ほんとにあった怖いフォーム2025」
tags: 
author: [Kaito UDAGAWA](https://image.docswell.com/user/Kaitou)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/GJ89NNMGED.jpg?width=480
description: 俺の勉強会 #3 https://ore-no-benkyoukai.connpass.com/event/361911/
published: August 04, 25
canonical: https://image.docswell.com/s/Kaitou/KVM97L-2025-08-04-151709
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/GJ89NNMGED.jpg)

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


# Page. 2

![Page Image](https://bcdn.docswell.com/page/LJLWPP3X7R.jpg)

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


# Page. 3

![Page Image](https://bcdn.docswell.com/page/47M944D3JW.jpg)

本編
© Metaps Holdings, Inc.
3


# Page. 4

![Page Image](https://bcdn.docswell.com/page/P7RGWW4RJ9.jpg)

基本
© Metaps Holdings, Inc.
4


# Page. 5

![Page Image](https://bcdn.docswell.com/page/PJXXPP2YJX.jpg)

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


# Page. 6

![Page Image](https://bcdn.docswell.com/page/3JKWDDM4JD.jpg)

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


# Page. 7

![Page Image](https://bcdn.docswell.com/page/LE31RRYD75.jpg)

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


# Page. 8

![Page Image](https://bcdn.docswell.com/page/8EDXYY52JG.jpg)

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


# Page. 9

![Page Image](https://bcdn.docswell.com/page/V7PP66GL78.jpg)

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


# Page. 10

![Page Image](https://bcdn.docswell.com/page/2JV23366JQ.jpg)

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


# Page. 11

![Page Image](https://bcdn.docswell.com/page/5EGR33N2JL.jpg)

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


# Page. 12

![Page Image](https://bcdn.docswell.com/page/4JQV55Q97P.jpg)

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


# Page. 13

![Page Image](https://bcdn.docswell.com/page/K74M99YRJ1.jpg)

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


# Page. 14

![Page Image](https://bcdn.docswell.com/page/LJ18KK6VEG.jpg)

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


# Page. 15

![Page Image](https://bcdn.docswell.com/page/GJWZDDW3J2.jpg)

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


# Page. 16

![Page Image](https://bcdn.docswell.com/page/4EZ1GG5G73.jpg)

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


# Page. 17

![Page Image](https://bcdn.docswell.com/page/Y76LYY9QJV.jpg)

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


# Page. 18

![Page Image](https://bcdn.docswell.com/page/G751GGN2E4.jpg)

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


# Page. 19

![Page Image](https://bcdn.docswell.com/page/9J21YY517R.jpg)

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


# Page. 20

![Page Image](https://bcdn.docswell.com/page/DEYZGGK47M.jpg)

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


# Page. 21

![Page Image](https://bcdn.docswell.com/page/VJN3GGR6J8.jpg)

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


# Page. 22

![Page Image](https://bcdn.docswell.com/page/YE99WWMRE3.jpg)

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


# Page. 23

![Page Image](https://bcdn.docswell.com/page/GE89NNLG7D.jpg)

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


# Page. 24

![Page Image](https://bcdn.docswell.com/page/LELWPPLXJR.jpg)

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


# Page. 25

![Page Image](https://bcdn.docswell.com/page/4JM944M3EW.jpg)

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


# Page. 26

![Page Image](https://bcdn.docswell.com/page/PJRGWWVRE9.jpg)

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


# Page. 27

![Page Image](https://bcdn.docswell.com/page/PEXXPPZYEX.jpg)

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


# Page. 28

![Page Image](https://bcdn.docswell.com/page/3EKWDD84ED.jpg)

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


# Page. 29

![Page Image](https://bcdn.docswell.com/page/L731RR2DJ5.jpg)

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


# Page. 30

![Page Image](https://bcdn.docswell.com/page/87DXYYZ2EG.jpg)

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


# Page. 31

![Page Image](https://bcdn.docswell.com/page/VJPP66DLJ8.jpg)

CAPTCHA編
© Metaps Holdings, Inc.
31


# Page. 32

![Page Image](https://bcdn.docswell.com/page/2EV23316EQ.jpg)

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


# Page. 33

![Page Image](https://bcdn.docswell.com/page/57GR3322EL.jpg)

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


# Page. 34

![Page Image](https://bcdn.docswell.com/page/4EQV55P9JP.jpg)

エラー編
© Metaps Holdings, Inc.
34


# Page. 35

![Page Image](https://bcdn.docswell.com/page/KJ4M99XRE1.jpg)

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


# Page. 36

![Page Image](https://bcdn.docswell.com/page/LE18KKNV7G.jpg)

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


# Page. 37

![Page Image](https://bcdn.docswell.com/page/GEWZDD43E2.jpg)

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


# Page. 38

![Page Image](https://bcdn.docswell.com/page/47Z1GG2GJ3.jpg)

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


# Page. 39

![Page Image](https://bcdn.docswell.com/page/YJ6LYYVQEV.jpg)

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


# Page. 40

![Page Image](https://bcdn.docswell.com/page/GJ51GGD274.jpg)

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


# Page. 41

![Page Image](https://bcdn.docswell.com/page/LE31RRM175.jpg)

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


# Page. 42

![Page Image](https://bcdn.docswell.com/page/8EDXYY6KJG.jpg)

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


# Page. 43

![Page Image](https://bcdn.docswell.com/page/V7PP66Y378.jpg)

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


# Page. 44

![Page Image](https://bcdn.docswell.com/page/2JV233GNJQ.jpg)

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


# Page. 45

![Page Image](https://bcdn.docswell.com/page/5EGR3385JL.jpg)

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


# Page. 46

![Page Image](https://bcdn.docswell.com/page/4JQV559L7P.jpg)

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


# Page. 47

![Page Image](https://bcdn.docswell.com/page/K74M99X5J1.jpg)

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


# Page. 48

![Page Image](https://bcdn.docswell.com/page/LJ18KKN2EG.jpg)

まとめ
© Metaps Holdings, Inc.
48


# Page. 49

![Page Image](https://bcdn.docswell.com/page/GJWZDD42J2.jpg)

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


# Page. 50

![Page Image](https://bcdn.docswell.com/page/4EZ1GG2473.jpg)

最後に
© Metaps Holdings, Inc.
50


# Page. 51

![Page Image](https://bcdn.docswell.com/page/Y76LYYVGJV.jpg)

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


# Page. 52

![Page Image](https://bcdn.docswell.com/page/G751GGDXE4.jpg)

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


