送信ボタンは押した直後に「送信中…」へ変えて押せなくし、二度押しと不安を防ぐ

どんな問題を解決するか / いつ使うか

問い合わせ・申し込み・決済・コメント投稿など、送信に1秒以上かかるフォーム全般。サーバーの応答待ちの間にボタンが元のままだと、利用者は反応がないと感じて二度押しし、同じ問い合わせが2通届く・二重に申し込まれるといった問題が起きる。

やり方

1. 押した瞬間にボタンの文言を「送信中…」に変える（スピナーを添えてもよい）。
2. 同時にボタンを押せない状態にする。disabled を付けるか、aria-disabled="true" にしてスクリプト側で二度目の送信を無視する。
3. 読み上げ環境にも伝わるよう、aria-busy="true" を付けるか、近くの aria-live="polite" の領域に「送信しています」と出す。
4. 成功したら「送信しました」と次にすることを表示し、失敗したらボタンを元に戻して、理由とやり直し方を1行で出す。

<button type="submit" id="send">送信する</button>
<p id="status" aria-live="polite"></p>
<script>
  form.addEventListener('submit', () => {
    send.disabled = true;
    send.textContent = '送信中…';
    status.textContent = '送信しています';
  });
</script>

注意点

• ボタンを押せなくするだけでは不十分。通信が遅いと再読み込みや戻る操作で送り直されることがあるので、サーバー側でも同じ内容の二重登録を防ぐ（決済なら必須）。
• 失敗時にボタンを押せないままにしない。原因が分からないまま操作が止まる。
• 押した後に起きることが分かる文言にしておくと、押す前の不安も減る：CTAボタンは「送信する」ではなく、押した後に起きることの言葉にする
• 動きで見せたい場合は「送信中→完了」の見本がある：ホバーやクリックの小さな動きは、番号つきのカタログのURLを貼って「◯番の動き」とAIに頼む
• AIに点検させるなら、壊し屋役にボタン連打を試させるとよい：公開前に、4タイプの「初めての利用者」役のサブエージェントにLPから最初の成功まで通しで触らせ、詰まった場所をスクショ付きの表にする

出典

• 投稿者: @wokobo_net
• 投稿: @wokobo_net · 2026-10-19
• 収集日: 2026-10-20（JST）