Codex報告だけでなく
スクリーンショット確認が必要だった実践ログ

今回やった作業

Codex作業後に公開HTMLでは対象要素が出ていても、実際の画面では見え方が意図通りではなかったため、スクリーンショット確認を重視した流れを一般化します。表示系の作業では、HTMLにあることと、読者に見えることは別です。

今回の作業では、Codexの報告だけでなく、公開URL、公開HTML、PC表示、スマホ表示、スクリーンショット、人間が見た時の所感を組み合わせて確認しました。表示系の改善は、ファイル変更やHTTP 200だけでは判断できません。読者が実際に見る画面で、順位、指標、ボタン、導線が理解できるかまで見る必要があります。

作業前の状態

作業前は、公開HTMLには対象要素が出ていました。しかし実画面では目立たなかったり、レイアウト変更が良くなったのか悪くなったのか判断しにくかったりしました。PCとスマホで見え方が違う可能性もあり、スクリーンショットで確認する必要がありました。

作業前の段階では、修正対象は分かっていても、どの画面サイズで、どの要素を、どの基準で見ればよいかが曖昧でした。スマホ表示、PC表示、公開HTML、実画面、スクリーンショット確認を分けずに扱うと、報告は完了に見えても、実際には読みにくい状態を見逃す可能性があります。

作業前に問題だったこと

HTML確認だけでは、デザインや視認性の判断は難しいです。CSS、余白、フォントサイズ、カードの並び、ボタンの位置、見出しとの距離は、実際の画面で見ないと分かりません。スクリーンショットは、Codex報告と実画面のズレを共有しやすい確認材料になります。

Codex作業では、機械的な確認と人間が見る表示確認を分けて考えることが大切です。HTMLに存在すること、CSSが読み込まれていること、HTTP 200で返ること、スマホで読みやすいこと、PCで情報密度が適切なことは、それぞれ別の確認です。どれか一つだけで完了扱いにすると、表示改善の品質が不安定になります。

Codexに任せたこと

Codexには、公開URL確認、公開HTML確認、PC表示確認、スマホ表示確認、スクリーンショット確認、画面上での見え方の所感、改善前後の差分整理を任せました。順位、指標、ボタン、サムネイル、説明文がユーザーに認識しやすい位置にあるかも確認させました。

あわせて、公開HTMLで対象要素が出ているか、CSSが読み込まれているか、画面サイズごとに崩れがないか、確認したURLを報告書に残すことも任せました。表示確認は感覚だけに寄せず、HTTP 200、公開HTML、スクリーンショット、目視所感をセットにすると、後から確認しやすくなります。

人間が判断したこと

人間側では、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作業後にスクリーンショット確認を行ってください。

公開HTMLに対象要素があるかだけでなく、PC画面とスマホ画面で実際にどう見えるかを確認してください。

順位、指標、ボタン、サムネイル、説明文がユーザーに認識しやすい位置にあるかを見てください。

可能であれば、表示の所感を「良くなった点」「まだ弱い点」「戻すべき可能性がある点」に分けて報告してください。

確認チェックリスト

表示確認では、確認した画面サイズと確認観点を分けて残すことが重要です。

• 公開HTML確認
• スクショ確認
• PC確認
• スマホ確認
• 見た目の所感を出した
• 目的に近づいたか確認
• ボタンが見える
• 順位や指標が見える
• 悪化していれば戻す判断をした

関連する使い方ガイド

注意書き

この記事は、実際の作業を一般化してまとめた実践ログ型ガイドです。具体的な案件名、内部情報、サーバーパス、秘密情報は掲載していません。

表示確認では、Codexに任せる確認作業と、人間が判断する見え方の確認を分けることが大切です。確認していないことは未確認と書き、見えていないものを完了扱いにしないようにします。