カテゴリページを「ハブページ」化する機能を、Claude Codeに実装してもらった日の後日談です。実装時の数値ベースの検証では「正しくできた」という結果が出ていたのに、後日自分がスマホの実機で見たら、レイアウトが2箇所も崩れていました。
ハブページ化というのは、カテゴリごとに関連記事をまとめて案内する「入口ページ」を用意する機能です。トップページからいきなり全記事一覧に飛ばすのではなく、カテゴリ単位で興味を持ってもらえるような導線を作りたくて着手しました。実装自体は特に難しいものではなく、その日のうちにサクッと終わった作業です。
幅の数字は一致していたのに
1つ目のバグは、新しく作ったお知らせブロックまわりで起きていました。実装時、`getBoundingClientRect()`で幅を測ってもらったところ、想定通り748pxで一致していて、「これで問題ない」という判断になっていました。
ところが、自分が実機で見ると、お知らせブロックが記事一覧の中に埋もれて、隣の本物の記事カードと横並びに潰れていました。パソコンの画面では気づかなかった崩れ方で、スマホの狭い画面幅だからこそ目立っていました。原因を調べてもらうと、お知らせブロックがWordPress側の「カード型記事一覧」の内部に置かれる構造になっていて、ブロック自体が「記事カード1枚」として扱われていたことが分かりました。幅の数字さえ一致していれば大丈夫、と早合点していたのが敗因です。実際の見た目は、幅だけでは説明できませんでした。要素同士の親子関係までは、数値だけを見ていても分かりません。
💡 Tips: getBoundingClientRect()とは
HTML要素の実際の幅・高さ・画面上の位置をピクセル単位で取得できるJavaScriptのメソッドです。数値としては正確ですが、要素同士の親子関係や、どのCSSルールがどう影響しているかまでは教えてくれません。
スマホ用CSSが、いつの間にか効かなくなっていた
2つ目のバグは、もっと気づきにくいものでした。スマホでは1カラム表示にするためのCSSを用意してもらっていたのですが、HTML構造を1段階リファクタリングしてもらった際に、セレクタが対象としている要素がズレてしまい、指定が効かなくなっていました。
これも数値ベースの検証では発見できませんでした。CSSのセレクタが実際に何を指しているかは、コードを読むだけでは見落としやすく、画面を見て初めて「あれ、1カラムになっていない」と気づけるタイプの不具合でした。しかも見た目としては「なんとなく2カラムっぽいまま」で、パッと見ただけでは意図した表示なのか崩れているのか判断がつきにくい、地味に厄介なタイプの崩れ方でもありました。
検証スキルの話をしていた、まさにその日に
このバグに気づいた日の朝、たまたま別の作業で「実際に使って確認できるかどうかが一番効く検証スキルだ」という趣旨のAI活用理論を検証していました。X上で見かけた理論で、AIエージェントの検証スキルとして「実際に動かして確認する」ことの価値を説いている内容でした。数字を見るだけでなく、実際に触って確かめることの大切さを、まさにその日のうちに自分の手で証明してしまった形になります。話がひと繋がりになっているのが、我ながら皮肉でした。
気づけたきっかけは、実機を自分の目で見たこと
結局この2つのバグに気づけたのは、後日、自分が実際にスマホで表示を確認していて崩れに気づいたときでした。数値ベースの検証を重ねても、実機での見た目までは保証してくれません。
AIによる自己検証にも、同じ限界があります。コード上の数値やロジックが正しくても、実際の画面がどう見えるかは、結局のところ人の目で確認するしかない部分が残ります。今回はその境界線を、身をもって再確認できた出来事でした。数値の検証自体は間違っていません。ただ、それだけで「完了」と判断するには、範囲が狭すぎたということです。
実機確認を工程に組み込むようにした
この一件以降、新しい表示まわりの機能を追加した際は、数値ベースの検証で終わらせず、必ず自分のスマホで実際の画面を開いて確認する工程を挟むようにしています。PCのブラウザでウィンドウ幅を縮めて確認するだけでは、実機特有の崩れ方(タップ領域の余白、フォントレンダリングの違いなど)を見落とすことがあると分かったからです。
手間としては数十秒の作業ですが、これをやるかやらないかで、公開後に気づいて慌てて直す羽目になるかどうかが変わってきます。今では実装をお願いする段階で「最後に自分のスマホで確認するので、その前提で進めてください」と一言添えるようにもなりました。
まとめ
「幅が748pxで一致しているから大丈夫」という判断は、半分だけ正しくて半分は間違っていました。数値の検証は、あくまで検証の入り口でしかありません。実装が終わった後、実際の画面で確認する工程を省略しないこと。地味ですが、これに尽きると思います。
数字は嘘をつきませんが、数字が見ている範囲は思っているより狭いです。今回の2つのバグは、どちらもその狭さの外側で起きていました。
この記事が参考になったら、応援クリックをお願いします
