一番古く見えたのは自分の広告だった。触れないコードを触らず直す

このブログの記事本文に楽天の広告リンクを埋め込んだのは、同じ日の朝だった。貼った時点では、記事の中に収まっていると思っていた。その日のうちに別のAI(Codex)へサイト全体のデザイン監査をさせたら、最優先で上がってきた指摘がこれだった。「サイト全体は整っているが、楽天の広告だけがデザイン言語から外れて古く見える」。

自分で作った部分ではなく、自分で作れない部分が一番ダサかった。しかもその部分は、規約上わたしが書き換えてはいけないコードでできている。

きっかけ

監査はスクリーンショットの印象論ではなく、実測値つきで返ってきた。モバイル(幅375px)でこのブログの本文が使える横幅は328px。それに対して、楽天のリンクコードが内部に持っている固定幅は493〜504px。記事の中に置いた比較表はもっと広くて585px。どれも本文の幅を超えていて、ページ全体が横にずれる原因になっていた。

指摘は3つに整理されていた。広告が本文からはみ出すこと、比較表が横に続いていることを読者に伝える手がかりがないこと、そして長い記事に目次がないこと。どれも心当たりがあった。特に広告は、その朝に公開したUSB-Cモニターの記事で初めて本文に埋め込んだばかりで、モバイルでの見え方をきちんと確認していなかった。

提案をそのまま実装しかけて、止めた

監査には改善案も付いていた。読み進めていて手が止まったのは、広告についての案だった。広告のHTMLをモバイル用に組み替える、という趣旨のものが混ざっていたのだ。

楽天アフィリエイトのガイドラインには、禁止事項として「リンク作成で生成されたHTMLソースにおいて、編集可能と明記されている部分以外を変更又は追加する行為」と書かれている。リンクタグや画像タグの属性を足したり消したりすること、指定サイズ以外に画像を変えることも、名指しで挙げられている。編集が許されるのは「テキストのみ」を選んだ場合のテキスト部分だけだ。わたしが貼っているのは画像つきのリンクコードなので、触れる余地はない。他のASPの規約までは確認していないが、少なくとも楽天については、デザインの都合でここを崩したら提携そのものが飛ぶ。わたし自身も「ASP・楽天の規約に反する手法(自己クリック誘導・リンク改変等)を使わない」を運用方針の鉄則として書いている。

だから案は捨てた。捨てたうえで、条件を1つに絞り直した。広告コードには1文字も触れない。触っていいのは、その外側に自分で足す枠だけ。

この手の照合を、AIの提案を受け取った側がやらないと誰もやらない、というのが今回いちばんの学びだった。監査の側は px を実測して出してきたが(実装時に照合したかぎり値は合っていた)、わたしの側の規約は知らない。事実の指摘は強く、改善案は自分の制約と突き合わせないと通せない。

触らずに直す

条件を絞ると、やることは一意に決まった。広告コードを .ad-embed という枠で包み、その枠に max-width: 100% と overflow-x: auto を与える。504pxの広告は枠の中で横スクロールし、ページ全体は328pxに収まる。広告のHTMLは無加工のまま出力される。

比較表も同じ発想で外側に枠を足したが、こちらは「横に続きがある」ことを読者に伝える必要があった。JavaScriptは使いたくなかったので、CSSのスクロールシャドウでやった。背景に4枚のグラデーションを重ね、background-attachment を local と scroll で使い分ける。中身と一緒に動く背景色のグラデーションが、端まで来ると影を覆い隠す(色は背景変数を使っているので、ダークモードでもそのまま成立する)。影が見えていれば、まだ先がある。モバイルでは「横にスクロールできます」の一文も出すが、これは position: sticky と left: 0 で表の左端に貼り付けてあるので、表を横にスクロールしても文字だけは流れずに残る。

目次は自作しなかった。rehype-slug という既存のライブラリを入れて見出しに id を振り、h2 が3つ以上ある記事だけ、PR表記の直後に目次を挿入する。自分で書けば30行くらいだが、書かずに済むなら書かない方がいい。この記事にも目次が付いているはずだ。

数字

実装はテストを先に書く形で進めた。結果は以下のとおり。

• 変更14ファイル、+284行(比較表・広告ラッパー・目次の3点あわせて)
• テストは新規11件を追加し、全142件パス
• 既存テストの期待値修正は1件だけ。見出しに id が付いたことによるもので、テストを弱めた箇所はない
• 本番反映後、幅375pxで実機確認。ページ全体の横はみ出し0px、目次6項目のアンカーはすべて解決、比較表と広告はそれぞれの枠の中でスクロール

監査から本番反映・確認までは同じ日のうちに終わった。

分かったこと

事実として残ったのは、「改変してはいけないコード」を1文字も触らずに、見た目の問題は解決できたということだ。広告のHTMLは発行されたままで、ページには収まっている。

そこからの解釈を3つ。

• 改変禁止は行き止まりではなく、設計を一意にする制約だった。 「外側だけ」と決めた瞬間、選択肢が消えて手が動いた。迷っていたのは制約が曖昧だった間だけだ
• 見た目の問題を、見た目の外側で解くと副作用が少ない。 今回さわったのはCSSと、HTMLを包む処理だけ。広告そのものも、記事のMarkdownも変えていないので、あとから広告を差し替えても壊れない
• AI監査の出力は、事実と提案を分けて受け取る。 px の実測は信頼して使い、改善案は自分の制約に通してから採る。前に実装とレビューを別のAIに分けた記録を書いたが、あのときは「仕様に書き漏らした意図」が残った。今回残りかけたのは「相手が知らない自分側の規約」だった。AIに任せる範囲を広げると、抜ける場所がこうやって移動していく

同じことをする人へのポイント

アフィリエイトの広告を自分のサイトに貼るなら、リンクコードが固定幅を持っている前提で枠を用意しておくといい。中身がどんな幅でも、外側が受け止めていれば読者のページは壊れない。CSSとしては2行で足りる。

.ad-embed {
  max-width: 100%;
  overflow-x: auto;
}

そして、デザインの指摘をAIから受け取ったら、実装に入る前に「これは自分が書き換えていい部分か」を一度確認する工程を挟むこと。監査する側は規約を知らない。知っているのは貼った本人だけだ。

この記事は、運営者自身の実践記録に基づいています。