今回やった作業
グリッド型とリスト型にはそれぞれ向き不向きがあります。今回の実践ログでは、カード一覧をリスト型に変えたものの実画面では逆効果に見えたため、戻す判断と部分改善へ切り替える考え方をまとめます。
今回の作業では、表示改善を目的にした変更でも、実画面で悪化したら止めることを重視しました。Codexに実装だけを任せるのではなく、変更差分、バックアップ、戻す範囲、公開後の確認まで整理させることで、作業を広げすぎないようにします。
作業前の状態
作業前は、カード一覧をよりランキングらしく見せたい状態でした。グリッド型では一覧性はありますが、順位の強弱が伝わりにくい可能性があり、リスト型にすれば説明や指標を入れやすいと考えました。しかし実画面では、かえって商品一覧感が強く見えました。
表示改善系の作業は、コード差分だけでは良し悪しを判断しにくい領域です。カード幅、余白、折り返し、ボタン位置、PCとスマホの見え方が絡むため、作業前の意図と実画面の印象を分けて確認する必要があります。
作業前に問題だったこと
レイアウトには正解が一つではありません。グリッド型は一覧性に強く、リスト型は説明量に強い一方で、ページの目的やカード内容によってはリスト型が見づらくなることがあります。PCとスマホでも印象が変わるため、実画面で比較する必要があります。
特に危ないのは、表示が悪化した時に追加修正を重ねてしまうことです。原因が分からないままCSSを足すと、あとで戻す時にどこまでが必要な変更なのか分からなくなります。まず直前変更を疑い、戻すか、範囲を小さくするかを判断する方が安全です。
Codexに任せたこと
Codexには、現状レイアウトの確認、リスト型変更案、公開画面確認、PCとスマホの表示確認、悪化した場合の戻し案、戻した後の表示確認を任せました。1つの案を正解と決めつけず、比較と戻しをセットにしました。
Codexには、対象ファイルの確認、差分確認、バックアップ確認、公開HTML確認、HTTP 200、Fatal / 500、CSS読み込み、PCとスマホ表示の確認を任せます。修正案を出すだけでなく、戻す案と停止条件も報告させることで、判断しやすい形にします。
人間が判断したこと
人間側では、リスト型が必ず正解ではないこと、実画面で悪化したら戻すこと、全体レイアウト変更より上位カードだけ強調する方が安全な場合があることを判断しました。デザイン変更は、人間の見え方で判断する必要があります。
人間が見るべきなのは、作業が終わったかどうかだけではありません。目的に近づいたか、悪化していないか、影響範囲が大きすぎないか、戻す方が安全かを判断します。Codexの報告を受けても、最後は実画面で確認して決めます。
実際に使った指示文の考え方
指示文では、CSS修正だけを頼まず、戻す条件、触らないファイル、確認URL、作業後の確認項目まで入れます。DB、cron、.htaccess、robots.txt、ads.txt、AdSenseタグ、Search Console確認タグには触らないことも明記します。
うまくいった点
うまくいった点は、悪化した表示を無理に上書きせず、確認と判断を分けられたことです。戻す、比較する、上位3件だけに絞る、キャッシュを確認するという選択肢を持てると、CSS作業で迷子になりにくくなります。
詰まった点・危なかった点
- 実画面を見ずに完了扱いにする
- 原因未特定のままCSSを積み増す
- 全体を戻して正常な変更まで消す
- PCだけ見てスマホを見ない
- 戻した後のHTTP確認を省く
CSSやレイアウトの作業は、変更量が少なくても影響が大きいことがあります。特に公開中サイトでは、Fatal error、500、CSS未読込、スマホ表示崩れ、意図しない巻き戻しを避ける必要があります。
作業後に確認したこと
作業後は、対象ページがHTTP 200であること、Fatal / 500がないこと、CSSが読み込まれていること、公開HTMLの参照が正しいこと、PCとスマホで大きく崩れていないことを確認します。あわせて、canonical、robots、noindexなし、内部リンクが壊れていないことも見ます。
次から使える指示文テンプレート
以下は、CSS失敗や表示悪化が起きた時にCodexへ貼れるテンプレートです。
以下の公開中サイトで、カード一覧のグリッド型とリスト型を比較してください。
変更前のグリッド型、変更後のリスト型をPCとスマホで確認し、どちらがページの目的に合っているかを整理してください。
リスト型にして見づらくなる場合は、無理に採用せず、元のグリッド型を維持する案も出してください。
全体を変えるのではなく、上位数件だけを強調する小さい改善案も比較してください。確認チェックリスト
表示改善は、作業後の確認まで含めて完了です。
- グリッド型を確認した
- リスト型を確認した
- 実画面で比較した
- PCで確認した
- スマホで確認した
- 悪化したら戻す
- 部分改善に切り替える
- CSSを積み増していない
- 既存カード構造を壊していない
関連する使い方ガイド
注意書き
この記事は、実際の作業を一般化してまとめた実践ログ型ガイドです。具体的な案件名、内部情報、サーバーパス、秘密情報は掲載していません。
CSS変更やロールバックは、対象ファイルと確認項目を絞って行うことが重要です。Codexに任せる部分と、人間が実画面で判断する部分を分けることで、追加修正の積み増しや意図しない巻き戻しを避けやすくなります。