Codexでカードのサムネイル
クリック先を確認した実践ログ

今回やった作業

カード一覧では、サムネイルがもっとも押されやすい導線になることがあります。今回の実践ログでは、サムネイル、タイトル、詳しく見るボタン、外部確認リンクの href を分けて確認し、内部詳細ページと外部リンクの役割を整理した流れを一般化します。

今回の作業では、カードの見た目を大きく作り替える前に、ユーザーがクリックする場所を分解して確認しました。サムネイル、タイトル、詳しく見るボタン、外部確認リンクは、同じカード内にあっても役割が違います。どのリンクを主導線にし、どのリンクを補助導線にするかを決めることで、ランキング型ページや情報メディアの回遊が分かりやすくなります。

作業前の状態

作業前のカード一覧には、サムネイル、タイトル、ボタンなど複数のクリック箇所がありました。ただし、サムネイルを押した時に内部詳細ページへ進むのか、外部サイトへ直接出るのかが混在しており、ユーザーがサイト内で比較してから次へ進む導線としては弱い状態でした。内部詳細ページがあるカードでも、最初のクリックで外部へ出てしまうと、ランキング理由や関連情報を読む機会が少なくなります。

特に注意したのは、クリックできる場所が多いほど、ユーザーが次に何をすればよいか迷いやすくなる点です。カードが並んでいるだけでは、サイト内で比較するページなのか、外部へ送る入口なのかが曖昧になります。リンク先の役割を確認せずにボタンだけ整えると、導線の問題は残ったままになります。

作業前に問題だったこと

問題は、外部リンクがあることではなく、強いクリック導線であるサムネイルの役割が曖昧だったことです。ランキング型サイトや情報メディアでは、まずサイト内で内容を確認し、必要に応じて外部で詳細を確認できる流れが自然です。サムネイルが外部へ飛ぶと、内部詳細ページ、比較材料、関連ページへの回遊が弱くなり、ページ全体の役割も伝わりにくくなります。

内部リンクを強める作業では、リンクを増やすこと自体が目的になりがちです。しかし、存在しない内部ページへリンクすれば404になりますし、外部リンクを強く出しすぎればサイト内の比較導線が弱くなります。つまり、リンク確認では、href、リンク先の存在、ボタン文言、クリック後の体験をまとめて確認する必要があります。

Codexに任せたこと

Codexには、対象カードのHTML、サムネイルのhref、タイトルのhref、詳しく見るボタンのhref、外部リンクのhrefを分けて確認させました。あわせて、内部詳細ページが存在するか、公開HTML上でどのリンクが出ているか、実画面でクリックした時にどこへ進む設計になっているかを報告させました。

Codexには、現在のファイル構造と公開HTMLを見比べる役割を任せました。作業報告だけではなく、実際にHTML上でどのhrefが出ているか、内部ページが存在するか、公開URLが200 OKか、リンクを追加したことで別のページへ混入していないかを確認させます。見た目の修正だけに寄せず、導線の確認まで含めるのが安全です。

人間が判断したこと

人間側では、サムネイルを内部詳細ページへの強い導線にするか、外部リンクのまま残すかを判断しました。内部詳細ページがあるカードはサムネイルとタイトルを内部へ向け、内部ページがないカードは無理に内部リンクを作らない方針にしました。外部リンクは削除せず、確認用の補助導線として残す判断です。

人間が判断するのは、リンクの正しさだけではありません。ユーザーにどの順番で読んでもらいたいか、外部リンクをどの程度目立たせるか、内部詳細ページがないカードをどう扱うかも判断対象です。Codexは確認と実装に向いていますが、サイト内での読ませ方や公開してよい導線の設計は人間が決めます。

実際に使った指示文の考え方

指示文では、単に「リンクを直して」と書かず、サムネイル、タイトル、詳しく見るボタン、外部リンクを別々に確認するよう指定しました。さらに、内部詳細ページがある場合だけ内部導線化し、存在しないページへのリンクは作らないこと、公開HTMLと実画面の両方でクリック先を確認することまで完了条件に含めました。

この種の作業では、「リンクを追加して」だけでは不十分です。どの要素のhrefを見るのか、内部詳細ページがある場合とない場合をどう分けるのか、外部リンクを消すのか残すのか、公開HTMLと実画面のどちらを確認するのかまで指示します。停止条件として、404リンクが出そうな場合や、存在しないページへのリンクが必要になりそうな場合は作業を止めるようにします。

うまくいった点

うまくいった点は、リンクの役割を見た目ではなく href 単位で分解できたことです。サムネイルは内部、外部確認リンクは補助、詳しく見るボタンは内部詳細ページというように、ユーザーが次に何をする導線なのかを整理できました。

リンク導線を分解したことで、カード一覧の改善が見た目だけの話ではなくなりました。内部詳細ページへ進む導線、外部で確認する導線、リンクを出さない判断を分けられるようになり、公開前チェックでも確認しやすい状態になります。

詰まった点・危なかった点

危なかった点は、内部リンクを増やしたい気持ちだけで、存在しない詳細ページへリンクしてしまうことです。404を作ると、ユーザー体験も公開前チェックの品質も下がります。また、外部リンクを全部消すと、ユーザーが確認したい時の出口がなくなるため、削除ではなく役割分離で考える必要がありました。

• hrefを見ずに見た目だけで完了扱いにする
• 内部ページがないのにリンクを出す
• 外部リンクを主導線にしすぎる
• 公開HTMLではなく作業報告だけで判断する
• 実画面でクリック先を確認しない

カード一覧のリンク修正は小さな変更に見えますが、hrefを間違えるとユーザーの移動先が変わります。特に、内部ページがないカードを無理にリンク化すること、外部リンクを主導線にしすぎること、実画面クリックを確認しないことは避けたいポイントです。

作業後に確認したこと

作業後は、公開HTMLでサムネイル、タイトル、ボタン、外部リンクのhrefを確認します。さらに実画面でクリック先を見て、内部詳細ページがあるカードは内部へ進めること、内部ページがないカードは404リンクになっていないこと、外部リンクが補助導線として残っていることを確認します。

あわせて、対象ページが200 OKであること、canonicalとrobotsが変わっていないこと、noindexが入っていないこと、CSSが読めていること、スマホ表示でカードやボタンが崩れていないことも確認します。リンク導線の作業でも、SEOタグや公開状態の確認を省かないことが重要です。

次から使える指示文テンプレート

以下は、同じようなリンク導線整理をCodexへ依頼する時に使えるテンプレートです。

以下の公開中サイトで、カード一覧のサムネイルクリック先を確認してください。

サムネイル、タイトル、詳しく見るボタン、外部確認リンクのhrefを分けて確認してください。

内部詳細ページがあるカードは、サムネイルとタイトルを内部詳細ページへ向ける案を出してください。

内部詳細ページがないカードは、無理に内部リンクを作らず、404リンクを避けてください。

外部リンクは削除せず、補助導線として残してください。

作業後は、公開HTML上のhrefと実画面でのクリック先を確認し、内部リンクと外部リンクの役割が分かれているか報告してください。

確認チェックリスト

作業後は、リンクを追加したかどうかではなく、クリック先と役割が合っているかを確認します。

• サムネイルhrefを確認した
• タイトルhrefを確認した
• 詳しく見るhrefを確認した
• 外部リンクhrefを確認した
• 内部詳細ページの有無を確認した
• 内部ページがある場合は内部リンクへ向けた
• 内部ページがない場合は404を避けた
• 外部リンクを補助導線にした
• 公開HTMLで確認した
• 実画面でクリック先を確認した

関連する使い方ガイド

注意書き

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

リンク先の確認は、作業報告だけで完了扱いにせず、公開HTMLと実画面の両方で確認することを前提にしています。Codexに任せる部分と、人間が導線の意味を判断する部分を分けることで、404や不自然な外部誘導を避けやすくなります。