今回やった作業
Codex作業後の報告に、HTTP 200や公開HTML確認だけでなく、人間が見てページの目的が伝わるかという所感を入れた流れを一般化します。技術的に表示されていても、読者が何のページか分からなければ改善としては弱くなります。
今回の作業では、Codexの報告だけでなく、公開URL、公開HTML、PC表示、スマホ表示、スクリーンショット、人間が見た時の所感を組み合わせて確認しました。表示系の改善は、ファイル変更やHTTP 200だけでは判断できません。読者が実際に見る画面で、順位、指標、ボタン、導線が理解できるかまで見る必要があります。
作業前の状態
作業前は、HTTP 200は確認でき、公開HTMLにも文言が出ていました。しかし人間が見た時にランキングページとして分かるか、カード一覧に意味があるか、順位や指標が伝わるかは別問題でした。機械的な確認だけでは判断できない部分が残っていました。
作業前の段階では、修正対象は分かっていても、どの画面サイズで、どの要素を、どの基準で見ればよいかが曖昧でした。スマホ表示、PC表示、公開HTML、実画面、スクリーンショット確認を分けずに扱うと、報告は完了に見えても、実際には読みにくい状態を見逃す可能性があります。
作業前に問題だったこと
HTML上に文言があっても、下の方に埋もれていたり、見出しとカードがつながっていなかったり、主導線が弱かったりすると、読者には伝わりません。HTTP 200やgrep確認だけでは、ページの分かりやすさ、導線の自然さ、一覧としての意味までは判断しにくいです。
Codex作業では、機械的な確認と人間が見る表示確認を分けて考えることが大切です。HTMLに存在すること、CSSが読み込まれていること、HTTP 200で返ること、スマホで読みやすいこと、PCで情報密度が適切なことは、それぞれ別の確認です。どれか一つだけで完了扱いにすると、表示改善の品質が不安定になります。
Codexに任せたこと
Codexには、HTTP 200確認、公開HTML確認、順位や指標の表示確認、主導線確認に加えて、実画面を見た時の所感を整理させました。カード一覧として薄く見えないか、商品一覧のように見えないか、見出しとカードがつながっているかも報告項目に入れました。
あわせて、公開HTMLで対象要素が出ているか、CSSが読み込まれているか、画面サイズごとに崩れがないか、確認したURLを報告書に残すことも任せました。表示確認は感覚だけに寄せず、HTTP 200、公開HTML、スクリーンショット、目視所感をセットにすると、後から確認しやすくなります。
人間が判断したこと
人間側では、ページの目的に合っているか、見出しとカードがつながっているか、主導線が分かるか、単なるカード一覧に見えないかを確認しました。Codexの機械的確認は重要ですが、最終的に読者に伝わるかは人間目線の所感も必要です。
人間が判断するのは、最終的に読者に伝わるかどうかです。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作業後の実画面を確認してください。
HTTP 200や公開HTML確認だけでなく、人間が見てページの目的が分かるかを報告してください。
見出しとカード内容がつながっているか、順位や指標が認識できるか、主導線が分かるか、単なるカード一覧に見えないかを確認してください。
報告書には、機械的な確認結果とは別に、人間目線の所感を入れてください。確認チェックリスト
表示確認では、確認した画面サイズと確認観点を分けて残すことが重要です。
- 人間が見て分かるか
- 目的に合うか
- 見出しとカードがつながるか
- 主導線が分かるか
- 商品一覧に見えないか
- 順位と指標が認識できるか
- HTMLにあるだけでなく画面で伝わるか
- 所感を報告書に入れた
関連する使い方ガイド
注意書き
この記事は、実際の作業を一般化してまとめた実践ログ型ガイドです。具体的な案件名、内部情報、サーバーパス、秘密情報は掲載していません。
表示確認では、Codexに任せる確認作業と、人間が判断する見え方の確認を分けることが大切です。確認していないことは未確認と書き、見えていないものを完了扱いにしないようにします。