スマホだけ文字が重なる原因｜PCの縮小表示では見つからない崩れの探し方

「パソコンでは問題ないのに、スマホで見ると文字の上に白い枠が乗っていて、途中から読めない」

ホームページの公開前後で必ずと言っていいほど出てくる症状です。しかも厄介なのは、制作側が確認したときには見つからず、経営者がご自身のスマホで開いた瞬間に一発で見つかる、という順番で発覚しやすいことです。

先に結論を書きます。重なりは「撮って見る」では見つかりません。画像として正常に描画されてしまうからです。防ぐには、スクリーンショットではなく「その文字が本当に手前に来ているか」を機械的に判定する検査を、公開前のチェック項目に入れておく必要があります。

そして直すときは、崩れを見つけた順ではなく「読めないか」「導線が隠れていないか」で順番を決めます。以下、なぜ通常の確認をすり抜けるのか、どう検出するのか、原因のパターンごとにどう直すのかを順に説明します。

PCブラウザを縮めた確認では、重なりは原理的に見つからない

まず、多くの現場で行われている確認方法が、なぜ重なりに対して無力なのかを整理します。理由は3つあります。

1つ目は、重なっていても画像としては正常だからです。ページ全体を撮影して目視する方法は「画像が壊れていないか」を見ているだけで、要素同士がどちらが手前かという情報は写真に写りません。白いカードが本文の上に乗っていても、スクリーンショットは何事もなく撮れます。

2つ目は、縮小して見ると目立たないからです。撮影した縦長の画像をモニタに収めて眺めると、実寸の何分の一かに縮んでいます。その状態では、数行分が隠れている程度の重なりは「詰まって見える」としか認識されません。実機で原寸で見ている人だけが、文の途中で切れていることに気づきます。

3つ目は、一般的な自動チェックの項目に「重なり」が入っていないからです。表示されていない要素の検出は、たいてい display:none や opacity:0、高さゼロを探します。他の要素に覆われて読めない状態は、この定義のどれにも当てはまりません。 要素は存在し、表示指定も生きているので、チェックは通過します。

実際、あるサイトの公開前検品で、全ページを複数の画面幅で撮影し、横スクロール・非表示ブロック・リンク切れ・構造化データまで機械で測って問題なしと判定した後に、実機の目視で3ページ・15か所の重なりが見つかったケースがあります。検査項目を増やしても、重なりだけは別の測り方をしない限り通り抜けます。

検出は2種類必要。片方だけでは取りこぼす

重なりを機械で検出するには、方向性の違う2つの判定を両方走らせます。

① 読めるかどうかの判定（document.elementFromPoint）

文字がある座標を指定して、その位置で最前面に来ている要素が、その文字自身の要素かどうかを調べます。別の要素が返ってきたら、その文字は人間の目にも隠れています。「読めるか」を直接測れるのが強みです。

② 形の判定（矩形の交差）

負のマージンや絶対配置で位置をずらした要素と、テキストを持つ要素の四角形が重なっていないかを走査します。描画順やスクロール位置に左右されないので、確実に拾えます。

この2つは守備範囲が違います。前述のケースでは、①が3か所、②が15か所を検出しました。①は「調べた座標にたまたま文字がなかった」ときに見逃します。②は重なりの事実を拾いますが、読めるかどうかまでは判断しません。 両方を回して、和集合を候補にするのが正しい使い方です。

検査時の注意も1つあります。WordPressにログインした状態で検査すると、画面上部の管理バーが大量の誤検出を出します。 実際に200件を超える偽陽性が出た例があり、そのまま報告すると本物の崩れが埋もれます。検査はログアウト状態、あるいは管理バーを除外条件に入れて実行してください。

隠れて困るものの筆頭は、本文ではなく問い合わせ導線

重なりの被害で一番大きいのは、実は読み物の部分ではありません。トップページのファーストビューで、装飾用の小さな写真が問い合わせボタンと受付時間を覆っていた、という形の崩れが起こり得ます。この状態は、ページを開いた人の目に「問い合わせる場所がない」と映ります。

しかもこれは、広告や検索でお金と時間をかけて連れてきた人だけが遭遇します。アクセスは増えているのに問い合わせが伸びない、という数字の形になって現れるため、原因が表示崩れだと気づくまでに時間がかかります。

この事故は、レイアウトを大きく変えたときに起こりやすい傾向があります。本文を全幅に広げた、見出しを大きくした、写真を大判に差し替えた——こうした変更のときに、周囲に置いてある絶対配置の装飾を一緒に見直さないと、ずれ込んだ本体が装飾の下に潜り込みます。 大きさや幅を変える改修をしたら、その画面に絶対配置の要素が何個あるかを先に数えてください。

重なりが生まれる4つのパターン

原因は大きく4つに分かれます。それぞれ直し方が違うので、症状ではなく原因で分類します。

パターン1：負のマージンで持ち上げた要素が、別の要素の上に乗る

「カードを写真に少し重ねて配置したい」というデザイン指示は珍しくありません。実装では要素を負のマージンで持ち上げますが、そのカードがHTML上でどの要素の直後にあるかによって、乗る相手が変わります。

写真ブロックの直後にあれば写真に乗ります。しかし「本文＋写真」を含むブロックの後ろにあると、持ち上げた先には本文があり、文章の上に乗ります。その配置のままでは、写真だけに重ねることは原理的にできません。

対処は、重ねる指示を受けた時点でHTML上の並び順を確認し、狙った相手の直後にない場合は縦方向の重なりを使わないことです。上下ではなく左方向のずらしだけにする、または重なりをやめる。演出で得られるリズムより、読めることが優先です。判断に迷ったら重なりを解除するという基準を先に決めておくと、この種の崩れは発生しません。

パターン2：ブレークポイントで、対になる装飾の片方だけを消す

縦書きの英字、背景に敷いた大きなゴースト文字、目盛りの線と点——こうした絶対配置の装飾は、スマホでは邪魔になるので幅の条件で非表示にします。ここで起きるのが「セットの片方だけ消える」崩れです。

線と点で1つの目盛りを作っていたのに線だけ非表示にすると、点が宙に浮いて意味不明な丸が並びます。ヒーロー部分の縦書き英字を非表示にしていても、別セクションの同じ装飾を消し忘れれば、そこだけ見出しに文字が重なります。

装飾をブレークポイントで消すときは、その装飾が単体か、対になっているかを一覧してから判断してください。 加えて注意すべきなのが、装飾が情報を兼ねている場合です。セクション番号を縦書き装飾の中に入れている構造だと、スマホで縦書きを消した瞬間に番号ごと消えます。この場合は、番号を見出しの小見出し行へ移し、装飾は装飾に専念させる形に分けます。

パターン3：CSSの詳細度が逆転して、スマホ用の指定が効かない

スマホでだけレイアウトが1カラムに戻らない、という症状はほぼこれです。

たとえば「小さく表示する版」として .card--compact .card-grid { grid-template-columns: 1fr 1fr; } のような指定を追加したとします。クラスが2つ連なっているので詳細度は高く、スマホ用に書いてある .card-grid { grid-template-columns: 1fr; }（クラス1つ）より強くなります。結果、画面幅の条件を満たしていても2カラムのまま維持され、文字が半分の幅に押し込まれ、画像が潰れ、ボタンが崩れます。

対処は、修飾クラス（バリアント）を追加したら、スマホ側にも同じ詳細度の打ち消しをセットで書くことです。.card--compact .card-grid { grid-template-columns: 1fr; } をスマホ用のブロックの中に、後から読まれる位置に置きます。

この事故はCSSファイルの読み込み順にも左右されます。後から追加したファイルが最後に読まれる構成では、先に書いた個別ページ用の指定が、あとから読まれる共通ファイルに必ず負けます。 追記する場所を決めるときは、ファイルの読み込み順と詳細度の両方を確認してから書いてください。

パターン4：写真の上の文字が、背景と同系色で読めない

要素としては重なっていて正しいのに、色が近くて読めないケースです。作業風景の写真の上に濃紺の見出しを置いていて、写っている作業着が同じ濃紺だった、というような形で起こります。

背景に帯を敷けば確実に読めますが、写真の雰囲気は失われます。軽い対処として有効なのが、多重の text-shadow で文字を縁取ることです。 濃い色の文字には白い光を数層、白い文字には濃色の影を数層重ねます。

この方法には副次的な利点があります。白背景の上では白い光は見えないので、写真の上でだけ効きます。 背景色ごとに指定を分岐させる必要がなく、PCの見た目を壊さずにスマホの可読性だけを上げられます。

直す順番と、直し方の選び方

検出した箇所を全部同時に直す必要はありません。優先順位は次の順です。

優先度	状態	対応
最優先	問い合わせ・予約・電話の導線が隠れている	即修正。売上に直結する
高	本文が途中から読めない	即修正。離脱の直接原因
中	読めるが窮屈・かぶって見づらい	まとめて修正
低	意図的な重ね（写真の上の文字など）で可読性は確保されている	修正しない

直し方には段階があります。「非表示にする」は最速ですが、情報を捨てる選択です。 装飾英字のように、消しても情報が失われないもの（同じ語がページ内の別の場所にも出ている等）であれば非表示で構いません。

一方、内容のある要素は消さずに形を変えます。絶対配置の装飾は position: static に戻せば通常の流れに入るので、円形の切り抜きを角丸のカードに置き換えるといった変換ができます。 枠線や中央揃えといった意匠は引き継げるので、見た目の意図を保ったまま重なりだけを解消できます。

もう1つ重要なのが、個別に直さず共通ルールに変換することです。たとえば表の直後の余白が消えている箇所が複数ページで見つかったとき、1か所ずつ余白を足すと、ページを追加するたびに同じ作業が発生します。「表そのものが下方向の余白を持つ」「表の直後の見出しは上方向の余白を持つ」という2行の共通ルールにすれば、その後ページが増えても再発しません。 崩れが3か所以上で同じ形をしていたら、共通ルール化を検討する合図です。

確認する画面幅と、検査の2段構え

確認する幅は次を標準にしています。

• 320px / 375px / 390px / 430px：スマホ。狭い端末で文字がはみ出さないか、横スクロールが出ないかを見る
• 768px：タブレット縦。スマホ用とPC用の指定の切り替わり目で崩れやすい
• 1440px：PC。スマホ側の修正がPCを壊していないかの確認

特に見落としやすいのが768px前後です。スマホとPCの両方の指定が中途半端に効く帯で、ここだけカードが極端に細くなる、余白が二重にかかるといった崩れが残ります。

そして最後に、検査結果はそのまま修正リストにしないでください。 機械が検出する「交差」は書類上の重なりであって、「読めない」の証明ではありません。写真の上に文字を置く、薄い色の大きな番号に本文を重ねるといったデザインは意図的な重なりであり、可読性が確保されていれば直す必要はありません。

検出 → 目視で選別 → 修正の3段で進めます。特にエディトリアル寄りのデザインでは、検出結果の大半が意図的な重なりになることもあります。それでも検査には意味があります。「読めない崩れが1件も残っていない」ことを、目視の主観ではなく実測で言い切れるようになるからです。

まとめ

スマホだけ文字が重なる崩れは、確認の丁寧さでは防げません。測り方が違うので、項目を増やしても通り抜けます。

• 撮って見る確認は、重なりに対して原理的に無力。画像としては正常に写る
• 検出は「最前面がその文字自身か」と「四角形が交差しているか」の2種類を両方走らせる
• ログイン状態での検査は、管理バーが大量の誤検出を出すので避ける
• 原因は、負のマージン／装飾の消し忘れ／CSSの詳細度／写真上の同系色文字の4パターン
• 直す順番は、問い合わせ導線 → 本文の可読性 → 見づらさ の順。意図的な重ねは直さない
• 同じ形の崩れが3か所以上あれば、個別修正ではなく共通ルールに変換して再発を止める

制作を依頼する側の立場では、納品前チェックの項目に「スマホ実機での重なり確認」が入っているかを聞いてみてください。 撮影と目視だけで済ませている場合、この記事にある崩れは検品を通過します。公開後にご自身のスマホで気づくことになる前に、確認の方法まで含めて詰めておくのが安全です。