WEBサポ平井
対応事例
結果だけでなく「どうやって原因を調べるか」を見ていただくためのページです。よくある不具合を検証環境で再現し、実際のご依頼と同じ手順で調査・修正した過程を公開しています。
- Web開発7年現役エンジニアが対応
- 4つの検証事例調査・原因・対応まで掲載
- 報告サンプル付き納品時の説明内容を確認可能
掲載している事例は、守秘義務のある実案件ではなく、典型的な症状を検証環境で再現・想定した対応デモです。調査の進め方と報告の形式は、実際のご依頼と同じです。実際のご依頼については、ご了承をいただけたものから固有名詞を伏せた形で掲載していきます。
CASES
CASE 01
検証環境デモ
フォームは送信できるのに、メールが届かない
症状
「送信ありがとうございました」と表示されるのに、管理者宛の通知メールが届かない。
調査
Contact Form 7「メール」タブの送信先・送信元を確認。テスト送信で迷惑メールフォルダへの振り分けを確認し、送信元アドレスがサーバーのドメインと一致していないことを特定。
原因
送信元（From）がサイトのドメインと異なるアドレスになっており、受信側で「なりすまし」と判定されて迷惑メールに振り分けられていた。
対応
送信元をサイトと同じドメインのアドレスに変更し、SPFレコードの設定を確認。テスト送信を繰り返し、受信トレイへの到達を確認。あわせて「プラグインやサーバーの変更後はテスト送信を1回行う」運用を提案。
WordPressContact Form 7メール認証（SPF）
CASE 02
検証環境デモ
スマホで見ると、ページが横に揺れる・横スクロールが出る
症状
PCでは問題ないのに、スマホで見るとページが横に動き、右側に不自然な余白が出る。
調査
Chrome DevToolsのデバイスモード（幅375px）で症状を再現。ページ全体の幅（scrollWidth）と画面幅を比較してはみ出しを数値で確認し、セクションを順に切り分けて、はみ出している要素を特定。
原因
固定幅（px）で指定された画像と、画面幅いっぱい（100vw）を指定したセクションが、画面からはみ出していた。
対応
画像に max-width を指定し、100vw の使い方を修正。修正後にページ全体の幅が画面幅と一致することを実測で確認。
CSSレスポンシブ対応Chrome DevTools
CASE 03
検証環境デモ
ボタンとメニューが、クリックしても反応しない
症状
ナビゲーションメニューとアコーディオンが、ある時期から開かなくなった。
調査
ブラウザのコンソールでJavaScriptエラーを確認し、エラーの発生元ファイルからプラグインを特定。プラグインを1つずつ切り分けて、競合の組み合わせを確認。
原因
プラグインが読み込む古いjQueryとテーマ側のスクリプトが競合し、メニューの初期化処理が途中で停止していた。
対応
jQueryの重複読み込みを解消して依存関係を整理。メニュー・アコーディオンの動作を確認し、プラグイン更新前に確認するポイントを共有。
JavaScriptjQueryChrome DevTools
CASE 04
検証環境デモ
AIで作ったページの、フォームが動かない
症状
AIツールで生成したLP。見た目は完成しているが、フォームの送信ボタンを押しても何も起きない。
調査
コンソールのエラーを確認したうえでコードをレビュー。存在しない要素IDを参照している箇所と、送信先の処理が雛形のまま実装されていない箇所を発見。
原因
AIが生成したコードが「動く前提の雛形」のままで、HTML側のIDと送信処理が噛み合っていなかった。見た目の完成度と動作の完成度が別物になっている、AI生成コードで最も多いパターン。
対応
IDの対応関係を修正し、送信処理を実装。送信成功・失敗それぞれの表示も追加して、実際に送信できることを確認。
HTMLJavaScriptAI生成コードのレビュー
REPORT
作業完了時には、次のような形式で「原因・対応内容・今後のために」をご報告します。
ご相談内容
お問い合わせフォームから送信しても、メールが届かないことがある。
調査結果
原因は、送信元メールアドレスの設定がサーバーのドメインと一致しておらず、迷惑メール判定されていたことでした。
対応内容
- 送信元アドレスをドメインと一致するものに変更
- SPFレコードの設定を確認・修正
- テスト送信5件で受信を確認
今後のために
プラグイン更新後は、テスト送信を1回行うことをおすすめします。