今回やった作業
Codex作業後に、PC表示とスマホ表示を同じ基準で見ず、それぞれの画面サイズに合わせて確認した流れを一般化します。同じHTMLやCSSでも、PCではカード密度、スマホでは縦積み時の読みやすさが問題になるため、レスポンシブ確認の観点を分ける必要があります。
今回の作業では、Codexの報告だけでなく、公開URL、公開HTML、PC表示、スマホ表示、スクリーンショット、人間が見た時の所感を組み合わせて確認しました。表示系の改善は、ファイル変更やHTTP 200だけでは判断できません。読者が実際に見る画面で、順位、指標、ボタン、導線が理解できるかまで見る必要があります。
作業前の状態
作業前は、PCではカードやランキングが見えていましたが、スマホでは縦積み表示になっていました。PCでは余白が多すぎて情報密度が低く見える可能性があり、スマホではボタンや指標が詰まる可能性がありました。どちらか片方だけの確認では不十分でした。
作業前の段階では、修正対象は分かっていても、どの画面サイズで、どの要素を、どの基準で見ればよいかが曖昧でした。スマホ表示、PC表示、公開HTML、実画面、スクリーンショット確認を分けずに扱うと、報告は完了に見えても、実際には読みにくい状態を見逃す可能性があります。
作業前に問題だったこと
PCとスマホを同じ基準で確認すると、重要な問題を見落とします。PCではカードの並び、横幅、余白、情報密度が重要です。一方でスマホでは、横スクロールの有無、縦の読みやすさ、ボタンの押しやすさ、順位と指標の可読性が重要です。
Codex作業では、機械的な確認と人間が見る表示確認を分けて考えることが大切です。HTMLに存在すること、CSSが読み込まれていること、HTTP 200で返ること、スマホで読みやすいこと、PCで情報密度が適切なことは、それぞれ別の確認です。どれか一つだけで完了扱いにすると、表示改善の品質が不安定になります。
Codexに任せたこと
Codexには、PC表示とスマホ表示を分けて確認し、PCではカードの横幅、余白、並び、情報密度、順位や指標の見え方を確認させました。スマホでは、横スクロール、縦積み時の読みやすさ、ボタン配置、順位と指標の可読性を確認させ、PC / スマホ別の所感を報告させました。
あわせて、公開HTMLで対象要素が出ているか、CSSが読み込まれているか、画面サイズごとに崩れがないか、確認したURLを報告書に残すことも任せました。表示確認は感覚だけに寄せず、HTTP 200、公開HTML、スクリーンショット、目視所感をセットにすると、後から確認しやすくなります。
人間が判断したこと
人間側では、PCとスマホの完了条件を分けること、どちらか一方だけで判断しないこと、スマホで読めないページは表示改善済みとは言えないこと、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へ依頼する時に使えるテンプレートです。
以下の公開中サイトで、PC表示とスマホ表示を分けて確認してください。
PCでは、カードの横幅、余白、並び、情報密度、順位や指標の見え方を確認してください。
スマホでは、横スクロールの有無、縦積み時の読みやすさ、ボタンの押しやすさ、順位と指標の可読性を確認してください。
確認結果は、PC表示とスマホ表示を分けて報告してください。
どちらか片方だけで完了扱いにしないでください。確認チェックリスト
表示確認では、確認した画面サイズと確認観点を分けて残すことが重要です。
- PCで見た
- スマホで見た
- それぞれの完了条件を分けた
- PCでカード密度を確認した
- スマホで横スクロールを確認した
- ボタン配置を確認した
- 順位と指標が読める
- PC / スマホ別に所感を出した
- 片方だけで完了扱いしていない
関連する使い方ガイド
注意書き
この記事は、実際の作業を一般化してまとめた実践ログ型ガイドです。具体的な案件名、内部情報、サーバーパス、秘密情報は掲載していません。
表示確認では、Codexに任せる確認作業と、人間が判断する見え方の確認を分けることが大切です。確認していないことは未確認と書き、見えていないものを完了扱いにしないようにします。