Web サイトの画面を直すとき、パソコンでは問題なく見えていても、スマホで開くと文字が切れていたり、ページが横にずれてしまったりすることがあります。パソコンのブラウザーでもスマホの幅を試すことはできますが、本物のスマホとまったく同じにはなりません。
そこでシステマでは、画面を直したあとや記事を公開したあとに、AI が本物の Android のスマホでページを開いて確かめるようにしました。この記事では、何を確かめているのかと、さっそく見つかった崩れの例をご紹介します。
AI が実機で確かめていること
AI はスマホの Chrome でページを開き、読み込みが終わるのを待ってから、次の 4 つを確かめます。どれも、人が目で見て探すと時間がかかったり、見落としたりしやすいところです。
| 確かめること | なぜ大事か |
|---|---|
| 横のはみ出し | 1 か所でも画面の幅を超えると、ページ全体が横にずれて読みにくくなる |
| 壊れた画像 | 表示されない画像があると、内容が伝わらない |
| エラー | 画面の裏で起きているエラーは、見た目だけでは気づけない |
| 画面の画像 | 直す前と後を並べて残し、見比べられるようにする |
ボタンを押す・入力欄に文字を入力する、といった操作も、スマホの上でそのまま確かめられます。メニューを開いたあとの画面なども、同じように確かめられます。
さっそく見つかった例：トップページのボタン
試しにシステマのトップページを確かめたところ、さっそく崩れが見つかりました。右上の「ランサーズで相談」のボタンが、スマホの幅に収まりきらずに右へはみ出していたのです。そのせいでページ全体が横にずれ、左側のロゴや文字の頭が切れて見えていました。
パソコンで見ると、このボタンには十分な場所があるので、崩れには気づけません。スマホの幅でだけ起きる崩れは、実機で開いてはじめて分かることがあります。このボタンは、スマホの幅でも収まるように直しました。直したあとも、もう一度実機で開いて、はみ出しがなくなったことを確かめています。
一方、サイトビーコンの紹介ページは、同じ確かめで問題がありませんでした。はみ出し・壊れた画像・エラーがないことを確かめたうえで、画面の画像を残しています。
お客さまにとってよいこと
- スマホでの崩れに早く気づける：サイトを見に来る方の多くはスマホからです。公開の前後に実機で確かめることで、崩れたまま気づかない時間を短くできます。
- 直す前と後を画像で見比べられる：直した内容を、言葉だけでなく画面で確かめられます。
- 確かめ忘れが減る：決まった手順で AI が確かめるので、急いでいるときでも抜けにくくなります。
今のところ確かめているのは Android のスマホの Chrome です。iPhone の Safari でだけ起きる崩れもあるため、そちらは引き続き人の目でも確かめています。
まとめ
画面の直しや記事の公開のあとに、AI が本物のスマホで確かめる流れを、システマの作業に組み込みました。始めた日のうちに、トップページの崩れを 1 つ見つけることができました。これからも、見つけにくい崩れを早く見つけられるよう、確かめ方を少しずつ増やしていきます。