送信完了メッセージ（チェックアニメ付き）

解説

フォーム送信後に表示する完了画面です。中央のチェックマークは画像ではなくインライン SVG で、stroke-dasharray と stroke-dashoffset を使った線描きアニメーションで描かれます。円が一周描かれてから、少し遅れてチェックの線が引かれる二段構成にすることで、「受け付けられた」という安心感を演出しています。動きは @keyframes による CSS のみで完結し、JavaScript は使いません。

使う場面

• お問い合わせフォームや申込フォームの送信完了画面
• 会員登録・予約完了など、操作が確実に終わったことを伝えたい場面
• モーダル内のサンクスメッセージ

チェックの色は stroke の値を1か所変えるだけでブランドカラーに合わせられます。描画の速さは animation の秒数で、チェックの開始タイミングは遅延の .8s で調整します。動きに敏感な利用者へ配慮し、prefers-reduced-motion 指定時はアニメーションを止めて最終状態のチェックだけ見せると親切です。完了文には「3営業日以内に連絡」など次にどうなるかを書き添えると離脱を防げます。

使用例・適したシーン

• お問い合わせフォーム
• ニュースレター登録
• 資料請求フォーム
• ログイン・新規登録