1. 入力エラーと、送信後の不達を分ける
最初に、利用者がどこで止まったかを確認します。「問い合わせできない」という連絡だけでは、入力の問題か、送信処理の問題かを決められません。
| 起きたこと | 最初に確認すること |
|---|---|
| 欄が赤くなるが、直し方が分からない | 欄の名前、表示された文、入力条件の説明 |
| ボタンが押せず、理由も分からない | 未入力の必須欄や同意欄の案内、操作できない理由の表示 |
| 送信操作の後に通信エラーが出る | 入力ミスと決めず、制作担当へ受付の記録と処理結果の調査を依頼 |
| 完了画面は出たが、通知が届かない | 受付・通知送信・受信の記録を分けて確認 |
最後の二つでは、受付済みの可能性があります。送り直しを繰り返す前に、通知メールが届かないときの確認手順に沿って記録を調べます。
不具合の連絡には、対象URL、発生日時、端末・ブラウザー、操作した欄、表示文を残します。画面を共有する場合は、名前・メールアドレス・問い合わせ本文を隠し、制作会社と合意した経路で渡してください。認証情報や顧客情報を公開の掲示板や外部AIへ貼り付けません。
2. 「条件・場所・直し方」の三つで確かめる
WCAG 2.2の入力支援の基準では、自動検出した入力エラーの箇所と内容を文字で示すこと(3.3.1)、入力にラベルや指示を用意すること(3.3.2)、修正案が分かる場合に示すこと(3.3.3)を扱っています。修正案には、安全性や目的を損なう場合の例外があります。
次の表は、この観点を担当者の確認に使うためのhirostaの提案です。これだけでサイト全体のWCAGへの適合を判定するものではありません。
| 観点 | つまずきの例 | 制作担当と確かめること |
|---|---|---|
| 入力前の条件 | 入力してから初めて「必須」と分かる | 欄の名前の近くに要否を示し、条件と例を入力前から読めるか |
| 誤りのある場所 | ページ上部に「入力エラー」とだけ出る | どの欄の何が問題かを、文字で特定できるか |
| 直し方 | 「正しく入力してください」とだけ出る | 空欄なのか、形式が違うのかを分け、次の操作を示せるか |
| 説明の残り方 | 入力を始めると欄内の説明が消える | 条件を欄外にも置き、入力中・エラー時にも見返せるか |
デジタル庁の入力欄の使い方も、入力条件の事前説明と、具体的な訂正方法を示しています。アクセシビリティの説明では、入力すると消えるプレースホルダーを、条件や入力例の説明に使わないよう案内しています。
文字種の制限も見直す対象です。既存システムの制約があるなら理由と対応範囲を確かめ、画面だけ条件を緩めて受付側と食い違わせないようにします。AIに文案を作らせる場合も、実際には受け付けられない入力方法を案内していないか、人が仕様と比べて確認します。
3. 想定シナリオ:電話番号のエラーから戻れない
以下は架空の設備会社の例で、実際のフォームの診断・改修・効果測定は行っていません。
フォームの電話番号欄には「電話番号」とだけあり、ハイフン付きで入力するとページ上部に「入力内容を確認してください」と出る設定を想定します。受付側は数字だけを受け付けますが、画面にその説明がありません。
- Web担当者が条件を確かめる:電話番号を必須にする業務上の理由と、受付先システムの制約を制作担当に聞きます。エラーを消すためだけに必須を外しません。
- 制作担当が修正範囲を提示する:数字だけに限定する必要があるなら、入力前に条件を説明する案を出します。ハイフンを除く処理を設ける案なら、受付側との整合と、変換結果を利用者が確認できるかまで検討します。
- 画面の案を確認する:数字だけを受け付ける案では、欄の近くに「電話番号(必須)」「数字のみで入力してください」を置きます。ハイフン付きでエラーになる場合の文は「電話番号のハイフンを除いて入力してください」など、原因と操作が分かる形にします。これはこの設定に限った文案例です。
- 公開候補で修正できるかを確かめる:実在する連絡先を使わず、合意した確認用の環境で担当者が操作します。エラーの欄へ戻れ、説明どおりに直すと次へ進めるかを確認します。
AIの役割は説明文の下書きなどに限れます。受付条件の決定や、実画面で直せることの確認を、文案の作成で代えることはできません。
4. 制作会社へは、文言と受付条件を一緒に確認してもらう
「フォームを分かりやすくしてください」だけでは、文字の修正で済むのか、受付処理まで直すのかが曖昧です。次のように依頼範囲を分けます。
対象URLと、入力エラーが出た欄・操作・表示文を共有します。必須項目と入力形式について、画面の説明と受付側の条件が一致しているか確認してください。修正する文言、入力欄とエラーの関連付け、受付処理への影響を分けて提示してください。PC・スマホ・キーボードで、エラー箇所を見つけて直せることまで確認したいです。送信を伴う確認は、環境・通知先・実施日時を事前に調整してください。
自社の担当者は、何を必須にするか、問い合わせ対応で本当に必要な情報は何かを決めます。制作担当は実装と受付処理の整合を確認します。読み上げソフトでの案内が必要な場合は、入力欄と説明・エラーの関連付けを含め、確認できる担当と方法を相談します。
役割や成果物が契約で曖昧なら、HP制作の発注範囲を整理する手順も参考にしてください。
5. 修正後は、エラーを出すだけでなく直せるかを見る
自社サイトを点検した検証ラボでは、2026年10月21〜22日にフォームの枠線や入力中の表示、Tab移動時の位置を示す表示などを点検・修正しました。入力欄の枠線の薄さと入力中の表示の弱さは、色がCSS変数で指定されていたため機械では検出できず、画面を見て気付いたと記録しています。
この点検では、機械がHTML・CSSから候補を集め、ブラウザーで実際の見え方やTab移動を確かめ、人が変更を採用する分担にしました。静的な点検ではCSSの継承・変数・透過・計算後の表示を解決できないため、候補が出なくても、画面や操作に問題がないとは判断できません。
この観察を踏まえ、フォーム修正後は機械の結果に加えて、次の二つを確認することを提案します。制作担当と確認環境・対象を決めて進めます。
- PCとスマホの実表示:枠線や入力中の表示が見えるか、条件・欄・エラー文の対応が分かるかを画面で確かめます。スマホではキーボードを出した状態で修正箇所が隠れないかも見ます。
- Tab移動:マウスを使わずTabキーで欄へ移動し、現在の位置を示す表示が見えるか、修正する欄へ戻れるかを確かめます。
一方、次の三つは元ラボで検証した結果ではなく、入力エラーを直せるか判断するために別途必要な確認の提案です。
- エラーからの復帰:必要な説明が残り、直した欄のエラーが解消するかを確認します。ほかの欄が消えて最初から入力し直すことにならないかも見ます。
- 受付処理との一致:画面を通過した入力が受付側で拒否されないか、制作担当に確認してもらいます。送信を伴う場合は通知先と実施を調整し、受付記録と受信までを別に確認します。
- 支援技術での案内:読み上げで欄の名前・説明・エラーが伝わるかは、画面の目視と分けて確認します。
公開中のフォームへ無断で確認用の送信をせず、送信が必要な項目は環境・通知先・実施日時を事前に調整してください。
6. 費用と期間は、文章・画面・受付処理を分けて考える
文言の修正、フォーム部品の改修、受付側の条件変更、PC・スマホや読み上げでの確認を分けて見積りを依頼します。同じ一文の変更でも、CMSの設定で直せるか、外部フォームや連携先まで変更が必要かで範囲が変わります。
期間も、実装の作業時間と、自社の条件決定・制作担当への確認待ちを分けます。まず困っている一つのフォームと欄を選び、現在の条件、直す範囲、確認担当をそろえましょう。この記事の例から固定の料金や納期は約束できません。
受付後の分類・担当振り分けも含めて整理する場合は、問い合わせ対応のガイドと業務の支援内容をご覧ください。支援範囲と料金はサービス案内、現在の困りごとの相談はお問い合わせで受け付けています。