今回やった作業
Codexでカード一覧やランキング表示を修正した後、スマホ幅で本当に読みやすいかを確認した流れを一般化します。PCで問題なく見えても、スマホでは順位、指標、ボタン、サムネイル、説明文が詰まり、横スクロールや押しづらい導線が出ることがあります。
今回の作業では、Codexの報告だけでなく、公開URL、公開HTML、PC表示、スマホ表示、スクリーンショット、人間が見た時の所感を組み合わせて確認しました。表示系の改善は、ファイル変更やHTTP 200だけでは判断できません。読者が実際に見る画面で、順位、指標、ボタン、導線が理解できるかまで見る必要があります。
作業前の状態
作業前は、PC表示では大きな崩れがありませんでした。しかしスマホではカードが縦に長くなりやすく、順位や指標、詳しく見るボタン、外部リンクが詰まって見える可能性がありました。表示改善を完了扱いにするには、スマホでユーザーが読みやすく、押しやすい状態かを確認する必要がありました。
作業前の段階では、修正対象は分かっていても、どの画面サイズで、どの要素を、どの基準で見ればよいかが曖昧でした。スマホ表示、PC表示、公開HTML、実画面、スクリーンショット確認を分けずに扱うと、報告は完了に見えても、実際には読みにくい状態を見逃す可能性があります。
作業前に問題だったこと
表示改善をPCだけで判断すると、スマホユーザーの見え方を見落とします。カード型ページでは、PCでは横並びで自然でも、スマホでは縦積みになり、どれが順位でどれが指標か分かりにくくなることがあります。横スクロールが出ると、本文やボタンが画面外に逃げ、改善どころか使いにくいページになります。
Codex作業では、機械的な確認と人間が見る表示確認を分けて考えることが大切です。HTMLに存在すること、CSSが読み込まれていること、HTTP 200で返ること、スマホで読みやすいこと、PCで情報密度が適切なことは、それぞれ別の確認です。どれか一つだけで完了扱いにすると、表示改善の品質が不安定になります。
Codexに任せたこと
Codexには、スマホ幅での表示確認、横スクロールの有無、順位表示の見え方、順位指標の読みやすさ、詳しく見るボタンの押しやすさ、外部リンクとの距離、カードが縦に長くなりすぎていないかを確認させました。HTTP 200や公開HTML確認とは別に、スマホ表示の所感として報告することも指定しました。
あわせて、公開HTMLで対象要素が出ているか、CSSが読み込まれているか、画面サイズごとに崩れがないか、確認したURLを報告書に残すことも任せました。表示確認は感覚だけに寄せず、HTTP 200、公開HTML、スクリーンショット、目視所感をセットにすると、後から確認しやすくなります。
人間が判断したこと
人間側では、PCで良くてもスマホで読みにくければ完了にしないこと、スマホで順位と指標が認識できることを優先すること、ボタンが押しやすいこと、重要導線が埋もれていないことを判断基準にしました。スマホで読めない改善は、実務上の表示改善とは言いにくいからです。
人間が判断するのは、最終的に読者に伝わるかどうかです。Codexは確認項目を洗い出し、公開HTMLやHTTP状態を調べるのに向いています。一方で、読みやすいか、迷わないか、ランキングページとして意味が伝わるか、表示改善が本当に良くなったかは、人間が実画面を見て判断する必要があります。
実際に使った指示文の考え方
指示文では、単に「表示を確認してください」と書くのではなく、PC表示とスマホ表示を分け、横スクロール、ボタン配置、順位表示、順位指標、追加class、スクリーンショット、人間目線の所感を確認対象にしました。DB、cron、.htaccess、robots.txt、ads.txt、AdSenseタグ、Search Console確認タグには触らない条件も明記しました。
うまくいった点
うまくいった点は、表示確認を「大崩れなし」だけで終わらせなかったことです。PCとスマホを分けて見ることで、どの画面で何が読みやすいか、どの導線が埋もれているかを整理できました。公開HTMLとスクリーンショットを組み合わせることで、実装済みと見た目の良し悪しを分けて判断できました。
詰まった点・危なかった点
- PCだけで表示確認済みにする
- 公開HTMLにあるだけで画面確認を省く
- スマホの横スクロールを見ない
- スクリーンショットを残さない
- 人間が見た時の所感を報告しない
危なかったのは、HTMLに出ていることをそのまま表示改善と見なしてしまうことです。公開HTMLにclassや文言が出ていても、CSSの当たり方、余白、折り返し、画面幅によって読者には伝わらないことがあります。表示系の作業ほど、最後に画面を見て戻す判断も必要です。
作業後に確認したこと
作業後は、公開URLが200 OKであること、canonicalが自己URLであること、robotsがindex,followであること、noindexメタがないこと、CSSが読み込まれていること、スマホ表示で大崩れがないこと、PCとスマホそれぞれで重要導線が見えることを確認します。さらに、未完成文言や秘密情報が混じっていないことも確認対象にします。
次から使える指示文テンプレート
以下は、表示確認やスクリーンショット確認をCodexへ依頼する時に使えるテンプレートです。
以下の公開中サイトで、Codex作業後のスマホ表示を確認してください。
PC表示だけで完了扱いにしないでください。
スマホ幅で、横スクロールが出ていないか、順位が見えるか、順位指標が読めるか、詳しく見るボタンが押しやすいか、外部リンクが強すぎないかを確認してください。
カードが縦に長くなりすぎていないか、重要な導線が埋もれていないかも確認してください。
確認結果は、HTTP 200や公開HTML確認とは別に、スマホ表示の所感として報告してください。確認チェックリスト
表示確認では、確認した画面サイズと確認観点を分けて残すことが重要です。
- 横スクロールなし
- 順位が見える
- 指標が読める
- ボタンが押しやすい
- 外部リンクが強すぎない
- カードが詰まりすぎていない
- スマホ幅で大崩れしていない
- 重要導線が埋もれていない
- PC確認だけで完了扱いにしていない
関連する使い方ガイド
注意書き
この記事は、実際の作業を一般化してまとめた実践ログ型ガイドです。具体的な案件名、内部情報、サーバーパス、秘密情報は掲載していません。
表示確認では、Codexに任せる確認作業と、人間が判断する見え方の確認を分けることが大切です。確認していないことは未確認と書き、見えていないものを完了扱いにしないようにします。