ホームページの不具合は、管理画面からは見えない

8年動いていたサイトを点検して見つけた4件

2026年8月29日／新田雄三

2026年8月、千葉県八千代市のゴルフスクール KKGA 様のサイトを点検して直しました。2018年からお付き合いのある、8年動き続けているサイトです。支援の全体像は実績ページにまとめています。

見つかったのは4件でした。ロゴが消えていたこと、送ったメールが届かなかったこと、料金の書き方がページごとに食い違っていたこと、文字と背景の明暗差が足りていなかったこと。

4件に共通していたのは、管理画面にログインしている限り、どれも気づけないという点です。これはこのサイトに特有の話ではありません。同じ作りのサイトなら、どこでも起こります。何が起きていたのかと、ご自身で確認する手順まで書きます。

1. ロゴが消えていた ― 画面が広いときだけ

トップページの一番上、ヘッダーに置いた白いロゴが、白い背景の上に乗って見えなくなっていました。ただし常にではありません。ブラウザの幅が1200ピクセルを超えたときだけです。

原因は、見た目を指定するルールが2本ぶつかっていたことでした。片方は「トップページの背景色」、もう片方は「サイドバーのないページの背景色」。条件の書き方が細かいほうが優先されるという規則があり、あとから入ったルールが勝って、背景が白に塗り替えられていました。

やっかいなのは原因ではなく、見つけ方でした

管理画面の編集画面では正しく表示されます。プレビューでも出ます。編集画面もプレビューも、実際のブラウザの幅で描いていないからです。公開されているページを、本当の横幅で書き出して目で見るまで、この不具合には辿り着けませんでした。

普段サイトを確認するのは、ノートパソコンかスマートフォンだと思います。どちらも1200ピクセルには届きません。つまり大きな外部モニターで見ている人にだけ、ロゴが消えていたことになります。運営する側が見ている画面と、来訪者が見ている画面は同じではありません。

2. フォームを置いただけでは、メールは届かない

同じ日に、お問い合わせフォームを新しく設置しました。設置してすぐ、自分で1通送ってみました。届きませんでした。

画面の上では正常です。送信ボタンは押せて、「送信しました」も出ます。エラーも表示されません。裏側だけで、メールの送信が認証に失敗して止まっていました。

理由は少し意地の悪いものでした。レンタルサーバー側が「この認証方式に対応しています」と名乗るのに、実際にはその方式では通りません。そして送信する側のプログラムは、 最初に見つけた方式で失敗すると、残りの方式を試さずに終了します。対応していると書いてある方式を信じて突き当たり、通るはずの方式に辿り着かないまま止まっていたわけです。認証方式を1つに固定する小さなプログラムを足して解決しました。

設置中に、もう1つ見つかりました

選択欄の先頭に置いた「選んでください」という案内文が、選択肢の1つとしてそのまま送信されていました。空欄用の設定を使えば防げます。フォームを作ったら、必ず何も選ばずに送ってみてください。

フォームは「設置した」で終わりにできません。自分の受信箱に1通届いて、はじめて完了です。迷惑メールフォルダに入っていないかまで見てください。問い合わせが来ていないのか、来ているのに届いていないのかは、外からは区別がつきません。

3. 料金の書き方が、ページごとに食い違っていた

料金に関する記述を全ページ並べて照らしたところ、直すべき箇所が7つ出ました。金額そのものの誤りではなく、書き方の食い違いです。

・同じ対象を、1つのページの中で3通りの呼び方で書いていた
・同じ物が、ページによって別の名前で呼ばれていた
・同じ金額が同じページに2回出てきて、末尾の表記だけ違っていた
・開講時間が、トップページと他のページで食い違っていた（しかも同じページに「お仕事帰りにも通えます」と書いてあった）
・月額の隣に、毎回かかる実費の断りがなかった。実際に毎月払う額は、月額表示より上がる
・「◯◯円〜」の下限が3人で割ったときの額だった。1人で受けると2.2倍になる
・在籍している指導者2名分の料金が、そもそも載っていなかった

責める話ではありません。料金は一度に決まらないから、こうなります。改定のたびに、そのとき開いたページだけを直す。数年それを繰り返すと、どのページが最新なのか誰にも分からなくなります。 1ページずつ見ている限り、どれも正しく見えるのが厄介なところです。並べて初めて食い違いが見えます。

とくに注意したいのが下から2つ、「安く見える書き方」です。悪気なくそう書いてしまうのですが、来店してから聞いていた額と違うと、その1件が失われるだけでは済みません。

4. 読めるかどうかは、好みではなく数値で決まる

文字と背景の明暗差には、国際的な基準があります。WCAG 2.1 という指針で、本文の文字は背景との比が4.5:1 以上、大きな文字やボタンなどの部品は3:1 以上とされています。好き嫌いではなく、測れば合否が出ます。

対象	修正前	修正後
金色の地に黒い文字	7.33:1 合格	変更なし
金色と白地の境目	2.38:1	縁を濃くして 3.25:1
LINEの緑に白い文字	2.26:1	文字を黒にして 7.71:1
LINEボタンを薄いグレーの上に置く場合	輪郭が消える	縁を付けて 3.53:1

ここで大事なのは、ブランドの色そのものは1つも変えていないことです。変えたのは文字の色と、縁の色だけ。ロゴの金も、LINEの緑も、指定された色をそのまま使っています。「基準を満たすには色を変えるしかない」と思われがちですが、たいていは文字色と縁で足ります。

ここまでが、私に言えることです

言えるのは「基準を満たした」までです。「だから問い合わせが増えた」とは書けません。 問い合わせの数を計測していないからです。フォーム自体がこの日に設置したもので、比べる前の期間がそもそも存在しません。読めるようになったこと（測れる）と、集客が改善したこと（測っていない）は、別のものとして扱っています。