900ページを目で見るのは無理だと悟った日、レイアウト崩れの見張り番を作った
📌 記事の取り扱いについて（公開当時の内容を含みます — タップで詳細）
本記事は公開当時の体験・気づきをまとめたものです。現在のツール数・プラン数・対象年齢・記事数・仕様とは異なる場合があります。最新の内容は各ツールページをご確認ください。ツールや外部サービスの仕様・料金は変更されることがあるため、利用前には各公式情報も併せてご確認ください。記載に誤りを見つけられた場合はお問い合わせフォームよりご連絡いただけると助かります。
嬉しい悲鳴のあとに来るもの
気づけば、公開しているページが全サイト合計で900本を超えていました。ツールを作り、記事を足し、データ更新の仕組みを回しているうちに、いつの間にかそんな数になっていました。ページが増えるのは素直に嬉しいです。ただ、増えるほどに確実に困ることがひとつあります。「ちゃんと表示されているか」を自分の目で見きれなくなるのです。
レイアウト崩れというのは厄介で、ページを実際に開いてみないと分かりません。表が画面の右にはみ出している、画面に固定表示しているボタンが本文のリンクに覆いかぶさっている、中身が妙に左に寄っています。どれも開けば一目で分かるのに、開かなければ永遠に気づけません。900ページを2つの画面サイズで見るとなると、単純計算で1,800回ページを開くことになります。1ページ10秒でも5時間です。無理です。
「目視でやっていること」を分解してみました
そこで考えました。私がページを開いて「崩れてないな」と確認するとき、実際には何を見ているのか。書き出してみると、だいたい3つに絞られました。
- 横にはみ出しているものがないか
- 画面に固定されたボタンが、本文のリンクやボタンに重なっていないか
- 本文の塊が中央からズレて、妙に片側に寄っていないか
この3つなら、人間の感覚ではなく寸法の問題です。要素の位置と幅を測って画面の幅と比べれば、機械でも判定できるはずです。そう思って、AIと二人三脚で点検道具を組み立てました。
作ったのは「全ページを開いて測る」だけの道具
やっていることは単純で、まず各サイトの目次にあたるデータから全ページの住所（URL）を集めてきます。次に、画面のないブラウザ（人間が見る画面を出さずに裏で動くブラウザ）でそれを1ページずつ開き、パソコン幅の960pxとスマホ幅の390pxの2サイズで先ほどの3項目を測ります。8ページ同時に進めるので、全ページを一巡しても約15分で終わります。
工夫が要ったのは「わざとはみ出させている場所」の扱いでした。たとえば横スクロールで見せる比較表は、設計として横に長いのです。これを片っ端から「はみ出し」と報告されたら警告だらけで使い物になりません。なので、横スクロール用の入れ物の中にあるものは除外するようにしました。点検道具は「異常だけが目に入る」状態になって初めて役に立ちます。
実際に回してみたら、本当に見つかりました
初回の点検で、子育てサイトのグッズ紹介2ページで、スマホ幅だと長い英字の商品名が折り返されずに画面の右へ突き抜けているのが見つかりました。自分では何度も見たつもりのページでした。人間の目視は「見たことのあるページ」ほど素通りします。機械は900ページ目でも1ページ目と同じ真剣さで測ってくれます。ここが一番ありがたいです。
一方で、完璧ではないことも分かりました。「中央ズレ」の判定は、カードを何枚も横に並べるデザインのページで「ズレている」と大量に報告してきます。デザイン上そうなっているだけなので、これはノイズです。件数が前回から増えたときだけ見る、という運用でしのいでいます。あと、ページ側の作りとの相性で、どうしても開き終わらず計測できないページも少しあります。そこは従来どおり自分の目で見ます。機械8割、人間2割くらいの分担です。
見張り番がいる安心感
この道具ができてから、「どこかのページが崩れたまま何週間も放置されているかも」という漠然とした不安が消えました。何か大きめの変更をしたあとに一度回しておけば、900ページ分の答え合わせが15分で返ってきます。
ページが増えるほど目が届かなくなる、というのは個人でサイトをやっている人なら誰でもぶつかる壁だと思います。私の答えは「目視をあきらめる」ではなく「目視でやっていたことを機械に肩代わりさせて、人間は警告が出た所だけ見る」でした。全部を機械に任せられたわけではないけれど、5時間の作業が15分＋αになったのだから、作ってよかったと思っています。
← 他の制作記を見る ｜ トップ ｜ お問い合わせ