「自分のスマホではきれいなのに、お客様から『文字がはみ出している』と言われた」。サイトを持つ会社なら、一度は聞く話です。当社のサイトでも、同じことが何度も起きました。
この記事では、スマホでサイトが崩れる原因と、AIに検査を任せて分かったことを、当社の記録をもとに紹介します。
先に要点を3つ挙げます。
- 崩れの多くは、作る側の画面では見えません。 見る人の画面の幅、文字の大きさ、ブラウザが、作る側と違うからです。
- 当社の記録では、ふつうの見方で見つかる崩れは約3割でした。 残りは、条件を変えてはじめて見えました。
- 組み合わせを全部見るのは、AIに向いた仕事です。 ただし「何を測るか」は、人が決めます。
スマホでサイトが崩れる原因：試着が1人だけ
たとえるなら、服を1人のモデルだけで試着して、売り場に出すようなものです。
サイトは、見る人の画面に合わせて形を変えます（レスポンシブと呼びます）。作る人は、自分のパソコンと、手元のスマホで確かめます。ところが、見る人の体型はさまざまです。
- 画面の幅がちがう（小さいスマホ、折りたたみ、タブレット）
- 文字を大きくする設定にしている
- ブラウザがちがう（iPhoneのSafari、AndroidのChrome）
- 英語のページを見ている
当社でも、記事に書いた長いURLが折り返されず、小さいスマホでページが画面の2倍の幅に広がっていたことがあります。作った側のパソコンでは、まったく問題なく見えていました。
AIに検査を任せる流れ
試着を、すべての体型でやり直す。これを人がやると、何日もかかります。当社は、AIエージェントのClaude Code（クロードコード）に任せています。
AIは、ページを実際のブラウザで開き、「文字が入れ物から何ピクセル出ているか」を数字で測ります。頼み方は、たとえばこうです。
サイトの全ページを
スマホの幅で開いて、
はみ出しと重なりを
調べてください。
文字を2倍にした
場合も見てください。
直す前に、一覧を
画像つきでください。「直す前に一覧を」と書くのが大事です。どこを直すかは、人が決めます。
当社の実例：ふつうの見方で見つかるのは約3割
当社のサイトで、この1か月に直した崩れを、「どんな見方で出るか」で分けました。
- ふつうの見方で見つかる崩れは、約3割でした。 日本語のページを、通常の文字で、よくあるスマホの幅で見る。それで見つかるのは、この分だけです。
- 半分は、文字を大きくしたときに出ました。 文字を2倍にすると、住所やメールアドレスが、画面の外へ出ていました。
- 約3割は、英語のページでした。 英語は、長い単語を途中で折れません。日本語では入っていた枠から、単語がはみ出しました。
- 約2割は、スマホとパソコンの間の幅でした。 タブレットや、横にしたスマホの幅です。
- Safariだけで出る崩れもありました。 同じ文字でも、Safariは少し幅が広く出ます。Chromeでは1行に入る文が、Safariでは1字だけ次の行に落ちました。
直したあとの確かめも、AIに任せています。直す前と後で全ページを測り直し、「直した所のほかは、何も変わっていない」ことを数字で比べます。
見落としやすい3つの場面
- 文字を大きくしている人の画面。 年配の方や、目が疲れやすい方は、文字を大きくして読みます。当社では、通常・1.5倍・2倍の3つで測ることにしました。
- 切り替わる幅の前後。 サイトは、ある幅を境に並べ方が変わります。当社では、AIが「問題なし」と報告したあとで、人が中間の幅で見て、絵が枠からずれているのを見つけました。AIは、はみ出しだけを測っていました。
- 「問題なし」の中身。 上の件から、当社はAIに「何を測ったか」を一緒に書かせています。測っていない種類の崩れまで、無いとは言わせません。この決めごとは、メモリに残して、次の検査にも引き継いでいます。
AIのまちがいを仕組みで防ぐ考え方は、AIのミスを防ぐにはにまとめています。
よくある質問
自分のスマホで見て問題なければ、十分ではないですか
十分とは言えません。当社の記録では、ふつうの見方で見つかる崩れは約3割でした。まずは、スマホの設定で文字を大きくして、自社のサイトを開いてみてください。
AIに任せれば、人は見なくてよいですか
人の目も要ります。AIは、決めた項目を、すべての組み合わせで測るのが得意です。一方、「何を測るか」に入っていない崩れは、見つけません。当社でも、人が気づいた崩れを、検査の項目に足してきました。
まとめ
スマホでサイトが崩れる原因は、試着が1人だけで終わっていることです。画面の幅、文字の大きさ、ブラウザ、言語。体型を変えると、作る側には見えなかった崩れが出てきます。組み合わせを全部見るのはAIに任せ、何を測るかと、どこを直すかは人が決める。当社は、この分担で続けています。
当社では、こうした検査の仕組みづくりも含めて、AIを業務に組み込む開発を行っています。詳しくはAIエージェント開発・AI受託開発をご覧ください。
この記事の作り方
この記事の下書きと図は、AI（Claude Code）が作りました。割合は、当社のサイトで直した崩れの記録を、条件ごとに分けたものです。人は、内容の確認と公開の判断をしました。AIで書いた記事についての当社の考え方は、AIが書いた記事はGoogleに評価される？にまとめています。
