今回やった作業
公開中のランキング型サイトで、カテゴリページがカード一覧だけに見えていたため、順位、順位指標、レビュー数、評価、内部詳細ページへの導線を追加した作業を一般化してまとめます。
カードは並んでいましたが、何順なのかが分かりにくく、サムネイルやタイトルが外部へ直接向く箇所もありました。そのため、ユーザーがサイト内で比較し、内部詳細ページで確認する流れが弱い状態でした。
作業前の状態
作業前は、カードは並んでいて、ランキングのように見せたいページでした。しかし順位や指標が見えにくく、何を基準に並んでいるのか人間に伝わりにくい状態でした。
また、サムネイルやタイトルが外部へ飛ぶ箇所があると、内部詳細ページへの導線が弱くなります。サイト内で比較・確認してから外部へ進む流れを作る必要がありました。
作業前に問題だったこと
ランキングページは、ただカードが並んでいるだけでは成立しません。ランキングと呼ぶには、順位、順位を決める指標、その指標に基づく並び順、内部で詳しく確認できる導線が必要です。
Codexに「ランキングっぽく」とだけ頼むと、見た目の装飾に寄りやすく、ORDER BYや順位指標、リンク先の確認が抜けることがあります。
Codexに任せたこと
Codexには、見た目の調整より先に、現在の並び順とリンク先を確認させました。さらに、画面上で順位と指標が確認できるか、公開HTML上でも内部リンクが出ているかを確認対象にしました。
- 現在の並び順確認
- ORDER BY確認
- 順位・指標表示追加
- 内部詳細ページへの導線確認
- サムネイルリンク確認
- タイトルリンク確認
- 詳しく見るボタン確認
- 公開HTML確認
人間が判断したこと
人間側では、カードが並んでいるだけではランキングではないと判断しました。順位と点数、レビュー数、評価などの比較材料が見えないと、読者は何を基準に見ればよいか分かりません。
- 単なるサムネイル一覧はランキングではない
- 順位と指標が見えないとランキングサイトに見えない
- 外部リンクが主導線になりすぎるとサイト内比較の意味が弱くなる
- 上位3件を強調するとランキング上位であることが分かりやすい
実際に使った指示文の考え方
指示文では、「カードをランキング風にして」ではなく、ORDER BY、表示指標、リンク先まで指定します。ランキングの完了条件を、順位が出ていること、順位指標が見えること、内部詳細ページへ進めることとして明確にします。
公開HTMLと実画面の両方で確認することも指示に入れます。HTMLに存在するだけでユーザーに伝わっていない場合があるためです。
うまくいった点
順位、指標、内部導線をセットで確認したことで、カード一覧がランキングページとして読める状態に近づきました。見た目だけでなく、何を基準に比較すればよいかを示せるようになりました。
詰まった点・危なかった点
危なかった点は、CSSやカード装飾だけでランキング感を出そうとしたことです。根拠となるORDER BYや順位指標が見えなければ、ランキングとしての意味は弱いままです。
作業後に確認したこと
作業後は、HTTP 200、順位表示、順位指標、内部リンク、外部リンク、サムネイルリンク、タイトルリンク、詳しく見るボタンを確認します。あわせて、404 / 500 / Fatal error がないこと、noindex / canonical / 広告タグを意図せず変更していないことも確認します。
次から使える指示文テンプレート
公開中のランキング型サイトで、カテゴリページが単なるカード一覧に見えていないか確認してください。
今回はコード修正前に、現在の並び順、ORDER BY、表示している順位、順位指標、内部詳細ページへの導線、外部公式リンクの扱いを確認してください。
ランキングと呼ぶには、順位、順位を決める指標、その指標に基づく並び順、内部で詳しく確認できる導線が必要です。
サムネイルやタイトルが外部サイトへ直接飛ぶ場合は、内部詳細ページへ向ける修正案を出してください。
実装後は、公開HTML上で順位、順位指標、内部リンク、詳しく見るボタンが確認できるかを必ず確認してください。
変更後は、実画面でもランキングとして見えるか確認し、Codex報告と実画面がズレていないか報告してください。確認チェックリスト
- 現在のORDER BYを確認した
- 並び順の根拠を確認した
- 順位が画面に表示されている
- 順位指標が画面に表示されている
- レビュー数や評価など比較材料がある
- サムネイルクリックが内部詳細ページへ向く
- タイトルクリックが内部詳細ページへ向く
- 詳しく見るボタンが内部導線になっている
- 外部公式リンクは補助導線として残っている
- 公開HTML上で順位・指標・内部リンクを確認した
- 実画面でランキングに見えるか確認した
- 直前変更で悪化した場合は、追加修正ではなく差し戻しを検討した
- 404 / 500 / Fatal error がない
- noindex / canonical / 広告タグを意図せず変更していない
注意書き
この記事は、実際の作業を一般化してまとめた実践ログ型ガイドです。具体的な案件名、内部情報、サーバーパス、秘密情報は掲載していません。作業対象サイトの条件や利用しているサービスの仕様は変わる可能性があるため、実際に作業する前には現在の環境と公式情報を確認してください。