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

1.2K Views

August 04, 25

スライド概要

俺の勉強会 #3
https://ore-no-benkyoukai.connpass.com/event/361911/

profile-image

よろしくお願いします! 第3木曜LT会 https://work.re-shine.jp/lt Voicy https://voicy.jp/channel/820892

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

ダウンロード

関連スライド

各ページのテキスト
1.

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

2.

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

3.

本編 © Metaps Holdings, Inc. 3

4.

基本 © Metaps Holdings, Inc. 4

5.

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

6.

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

7.

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

8.

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

9.

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

10.

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

11.

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

12.

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

13.

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

14.

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

15.

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

16.

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

17.

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

18.

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

19.

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

20.

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

21.

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

22.

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

23.

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

24.

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

25.

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

26.

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

27.

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

28.

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

29.

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

30.

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

31.

CAPTCHA編 © Metaps Holdings, Inc. 31

32.

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

33.

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

34.

エラー編 © Metaps Holdings, Inc. 34

35.

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

36.

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

37.

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

38.

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

39.

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

40.

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

41.

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

42.

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

43.

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

44.

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

45.

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

46.

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

47.

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

48.

まとめ © Metaps Holdings, Inc. 48

49.

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

50.

最後に © Metaps Holdings, Inc. 50

51.

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

52.

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