Maison_de_chatのブログ

【実体験レポート】ChatGPTで始める副業 – 最先端AI活用で在宅収益化に挑む新たな働き方を更新中！

Vol.20【PART３：CLS/INP編】｜CLS/INPを壊さない広告表示：予約枠・遅延・スクリプト整理で“読める”を守る

お問い合わせはこちらから！

広告やアフィを増やそうとすると、必ずぶつかる問題があります。
「表示がズレる」「読み込みが遅い」「タップしづらい」 という、UX（読みやすさ）の崩れです。

そして、この崩れの大半は CLS（表示のガタつき）と INP（初回操作の遅さ） から発生します。

広告タグは読み込みが重く、サイズも変わりやすく、外部スクリプトも多い。
これらを“なんとなく増やす”だけで、読者がストレスを感じ、読了率もCTRも下がってしまいます。

でも安心してください。
改善のコツは思っているよりシンプルで、

  • 予約枠（高さ・比率）を必ず確保する

  • 折りたたみ以下の広告は“遅延読み込み”にする

  • スクリプトは重複をなくし、最小構成にする

この3つを整えるだけで、CLS も INP も一気に安定し、
“広告を置いても読めるページ” に変わります。

Vol.20-3では、この 「崩れない広告表示」 の設計を、難しい専門用語なしでまとめています。
あなたのブログの読み心地がガラッと変わるパートです。

 

 

 

本記事でわかること

  • 予約枠（aspect-ratio／高さ固定）の作り方と、広告が読み込まれてもズレない設計

  • **遅延読み込み（LazyLoad）**の実務的な使い方

  • アコーディオンや既定開閉を使った“静かな表示”の作法

  • 外部スクリプトの棚卸し（重複読み・無駄なSDK・計測タグの整理）

  • CLS / INP を悪化させない 広告×アフィの軽量構成テンプレ

 

 

 

予約枠 —— aspect-ratio / 固定高さで“表示がズレない”土台を作る

 
 

広告配置で起きるトラブルの約7割は、実は 「高さが変わる」 ことによって発生します。
読者が記事を読んでいるときに、広告ユニットが後から読み込まれ、
画面がガタッと動く（CLS） —— もうこれだけで信用は一段落ちます。

そしてこの問題は、
「広告の読み込みが遅いから起こる」のではなく、「広告が入る“場所が決まっていない”から起こる」 のが本質です。

そこで重要になるのが、今日のキーワード 「予約枠（プレースホルダー）」。
簡単に言えば、

“広告が入る場所のサイズを、読み込み前から確保しておく”

という仕組みです。

これを入れるだけで、CLS が劇的に安定します。

予約枠で広告のスペースを事前確保しCLSを防ぐ方法を図解。スマホはaspect-ratio、PCは固定高さで安定させ、本文内や比較表付近で必須。



■ 原則①：広告は“読み込まれる前に場所を決めておく”

予約枠をつくる最大の目的は、
「まだ広告が来ていなくても、そこにスペースを確保しておく」 こと。

たとえば…

  • 高さが確定している広告 → 固定高さで枠を確保

  • アスペクト比がわかっている広告 → aspect-ratio で縦横比を確保

  • レスポンシブ広告 → 最大・最小の高さを指定して“揺れ幅”をなくす

これだけで、記事の文章が押し下がることがなくなり、
CLS（Layout Shift）がほぼ起きなくなります。

予約枠は、広告と本文の“平和協定” みたいなもの。
まずは読者の読み心地を優先し、広告が割り込まない環境をつくってあげるのがベストです。

 

■ 原則②：スマホでは「aspect-ratio」が最強

スマホ画面は幅がほぼ固定されているため、
広告ユニットの縦横比（aspect-ratio） がわかっていれば、
ほぼ完璧な予約枠が作れます。

例：300×250（よくあるレクタングル広告）
→ aspect-ratio: 300 / 250（=1.2） を指定するだけで、
読み込み前に 縦横比が固定された箱 が先に表示されます。

これが優秀なのは、読み込み速度に関係なく

  • 座標がズレない

  • 文章が動かない

  • スクロール位置がブレない

という効果が得られるからです。

特にスマホは画面が小さいため、
わずかな変動でも読者は「えっ？」とストレスを感じます。
aspect-ratio はそのストレスをほぼゼロにしてくれる“最強の味方”です。

 

■ 原則③：PCは“固定高さ”が安定（幅が流動するため）

PCは可変幅のレイアウトが多く、
スマホより広告サイズが変わりやすいという特徴があります。

そのため：

  • 高さは固定（px指定）

  • 幅はレスポンシブでOK

  • 中身は広告側のスクリプトに任せる

という構成がもっとも安定します。

特に PC の読み込みタイミングはスマホより早いため、固定高さを指定しても違和感がほぼありません。

むしろ、

  • 読み途中に表が押し下がる

  • CTAボタンが外れた位置に飛ぶ

  • 見出しが急に下へ動く

といったズレのほうがユーザーにとって致命的です。

だからこそ “高さだけ先に決めてしまう” のがベスト。

 

■ 原則④：予約枠は「本文内」と「比較表周り」ほど絶対に必要

広告やアフィをどこに置いてもよいわけではありませんが、
その中でも 絶対に予約枠が必要な場所 は次の2つです。

① 本文内の広告（休憩ポイント）
本文中は、読者の集中が高いゾーンなので、
そこで画面が動いた瞬間に離脱が起きます。

→ 予約枠なし = 即CLS
→ 予約枠あり = 安定表示

② 比較表・CTA付近のユニット
比較表はパッと見た印象が命。
ここでズレが起きると、リズムが完全に崩れます。

→ ここでのCLSは“CVRを直接削る”ので最悪の事故

だからこそ、本文中・比較表前後の広告には必ず予約枠を入れる。
これだけで収益ページの安定性が段違いになります。

 

■ 原則⑤：予約枠があるだけで、読了率が驚くほど改善する

これは実務で最も強く実感する部分ですが、

  • 予約枠あり → 読了率が平均 +10〜20%

  • 予約枠なし → 読了前の離脱が明らかに増える

というデータが多くのサイトで確認できます。

読者は“読むモード”に入っているので、
ほんのわずかなズレでもテンポが壊れ、
スクロールを戻したり、見失ったりします。

予約枠は単なるレイアウト設定ではなく、
「読者の体験を守るための最前線」 だと思ってください。

 

■ 結論：予約枠は“広告のため”ではなく、“読みやすさのため”に作る

ここまでをまとめると、予約枠とは

  • 座標がズレない

  • 文章が動かない

  • 読者が迷わない

  • CLSを根本的に防ぐ

という、広告表示の“安全装置”です。

そして一番大事なのは、
予約枠は広告のためではなく、読者のために作るということ。

読めるページは、それだけで広告の成果も自然と上がります。

 

<

 

 

遅延と既定開閉 —— “折りたたみ下は静かに読み込む” が読み心地改善の鍵

 
 
 

広告・アフィの配置がよくても、読み込みタイミングを誤ると、
読者の体験が一気に崩れてしまいます。
ページの表示速度が遅くなる、スクロールが重くなる、画面がガタつく（CLS）、操作が引っかかる（INP）……。

けれど、この問題のほとんどは 「読み込むタイミングをズラす」 だけで解決できます。
つまり、遅延読み込み（LazyLoad） と 既定開閉（アコーディオンの初期状態を閉じる） を正しく使うだけで、多くのサイトのUXは劇的に改善します。

折りたたみ下の広告は遅延読み込みで、ビューポート接近時に静かに表示する流れを図解。初動を軽くしINPとスクロール体験を安定させる。



■ 原則①：折りたたみ下の広告は“すべて遅延読み込み”にする

ページを開いた瞬間に、
「画面に見えていない広告」まで読み込む必要はありません。

読者がまだスクロールしていないのに、
下の広告までロードしてしまうと、

  • 表示速度が重くなる

  • INP（初回操作の遅延）が悪化

  • スクロール時にカクつく

  • 場合によってはCLSまで増える

という悪循環が発生します。

そこで有効なのが LazyLoad（遅延読み込み）。

▶ ビュー（画面）に近づいたときに、はじめて広告を読み込む
これだけで体感速度はガラッと変わります。

特にスマホでは効果が絶大で、

  • ページを開いた瞬間が軽くなる

  • スクロールがスムーズ

  • 読者の離脱が減る

という“静かな表示”が生まれます。

 

■ 原則②：遅延読み込みは「折りたたみ下＝すべて」が基本

遅延読み込みを使うときの基準は、とてもシンプルです。

▶ 1スクロール目で見えない広告はすべて遅延にする

これは、スマホでもPCでも変わりません。

特にスマホでは、読者が広告の位置に到達するまで時間があるので、
後から静かに読み込ませれば十分間に合います。

注意点として、
「比較表の近く」や「章末の提案導線の近く」にある広告は、必ず遅延設定にしておきましょう。
判断の瞬間に画面が動くと、CVRが一気に落ちるからです。

 

■ 原則③：既定開閉（アコーディオンやFAQ）は“閉じた状態”が正解

広告とは少し違いますが、CLS/INPに影響する要素として アコーディオン（FAQの折りたたみ） や 詳細説明のセクション があります。

これらは、

  • もともと高さが可変

  • 開くと一気にコンテンツ量が増える

  • スクロール飛びが起きやすい

  • 開閉アニメーションが重いとINPまで悪化

と、地味ですが問題を生みやすいパーツ。

ここで重要なのが、

▶ 初期状態は“閉じる”を基本にする
▶ 開閉のアニメーションは“高さ一定のスムース”にする

この2点です。

FAQや折りたたみ要素は初期状態を閉じて開始し、開閉アニメも安定させることでCLSとINP悪化を防ぐ仕組みを示す図解。

理由はシンプルで、
最初から開いていると高さが不安定で、ページ読み込みのたびに 微小なCLSが連発する からです。
また、アニメーションがカクつくと、初回操作時のINPが悪化してしまいます。

 

■ 原則④：遅延 × 既定開閉 × 予約枠を組み合わせると“完全に静かな表示”になる

Vol.20-3 の3本柱は次の通りです。

  1. 予約枠（ずれないように場所を確保）

  2. 遅延（広告は近づいたときに読み込む）

  3. 既定開閉（高さが暴れないように閉じた状態で始める）

この3つを組み合わせると、ページの前半は“超軽量”、
後半の広告群は“静かに出現”、
全体として 「スクロールしてもまったくイラッとしないページ」 が完成します。

特にスマホでは効果が大きく、

  • 画面が飛ばない

  • 読み込みで引っかからない

  • 操作がすぐ反応する

  • 違和感がなく広告が視界に入る

  • 読了率が上がる

  • 結果としてCTRも自然に改善

と、まさにいいことづくめです。

 

■ 原則⑤：遅延による“広告の視認性低下”はほぼ起きない

「遅延すると広告のViewabilityが下がるのでは？」
と心配される人が多いのですが、結論は逆。

  • 読者がスクロールしない → そもそも広告見られない

  • 読者がスクロールする → LazyLoadの方が見られるタイミングが正確

つまり、遅延のほうが実際の視認率は安定するのです。

広告を早く出す必要はありません。
読者のスクロールに合わせて自然に読み込むほうが、
“見られた広告” の比率がむしろ増えます。

 

■ 結論：遅延と既定開閉は“読者のストレスをゼロにするための技術”

まとめると、遅延と既定開閉は

  • ページを軽くする

  • 画面を動かさない

  • 読者の集中を壊さない

  • INPを改善する

  • Viewabilityを安定させる

  • 結果的にCTRまで上げる

という、“地味だけど劇的な改善ポイント” です。

派手な改善ではありませんが、
これをやるだけでブログの読み心地はワンランク上がります。

 

 

 

外部スクリプトの棚卸し —— “同系の二重読み禁止”が最速でINPを改善する

 

広告やアフィの配置をどれだけ最適化しても、
外部スクリプト（広告タグ／計測タグ／ウィジェットJS）が重複で読み込まれるだけで、INP（初回操作の遅延）とCLS（表示崩れ）は一気に悪化します。

実は、多くのブログで速度低下やカクつきの原になっているのは、
“広告の数”ではありません。

原因は 「外部スクリプトの二重読み」 にあります。

  • 同じ広告ネットワークのJSを複数回読み込み

  • 計測タグを記事テンプレと広告ユニットで2重インクルード

  • SNSボタン・ウィジェットのJSが記事ごとに別ロード

  • ABテストツールが複数バージョン混在

  • 使っていないSDKが残留

こうした“見えない重さ”が、読み心地を壊す最大の敵です。

外部スクリプトを目的別に分類し、同系の二重読みを排除して削除・統合・遅延へ整理する棚卸し手順を図解し、INPとCLS安定へつなげる。



■ 原則①：スクリプトは「種類」ではなく「目的」で分類する

棚卸しをするときに最初にやるべきは、
スクリプトを“目的別”に分類することです。

例：

  • 広告配信用（Ads）

  • アフィリエイト計測用（Affiliate Tracking）

  • アクセス解析（Analytics）

  • 同意管理（Consent）

  • UIウィジェット（SNSボタン・アコーディオン等）

  • ABテスト（Optimize系）

ここで重要なのは、
「同じ目的のスクリプトは1種類にまとめる」 という考え方です。

たとえば…

  • 広告タグを3つ使っているなら、1つに統合できないか？

  • SNSシェアボタンは外部JS不要な軽量版に変えられないか？

  • 計測タグはテンプレートに1回読み込みにすべきでは？

この整理をするだけで、
サイト全体のINPが体感レベルで軽くなります。

 

■ 原則②：同系スクリプトは“二度読みさせない”が絶対ルール

もっとも大きなミスが、同じ広告・同じウィジェットのスクリプトを複数箇所で読み込むこと。

よく起きる例：

  • 記事テンプレに広告SDK

  • 比較表部品の中にも広告SDK

  • フッタにも計測タグ

  • 別プラグインがまた同じタグを読み込む

こうなるとどうなるか？

  • JSが2回動く

  • DOM操作が2回走る

  • スクロール時の負荷が倍増

  • CLSを起こすタイミングが増える

  • 最悪のケースは「JSの競合で広告が出ない」

同じタグは1ページに1度だけ。
これは“HTMLの技術ルール”というより、
ブログ運営における最重要の原則です。

 

■ 原則③：スクリプトは“初回相互作用まで静かに”が最適

CLSやINPを改善するためには、
ページが完全に表示される前に動くスクリプトを減らすこと が最も効果的です。

推奨設定：

  • defer（HTML解析後に実行）

  • async（依存関係がないJSに最適）

  • DOMContentLoaded以降に実行

  • スクロール開始 or ビューポート到達で発火

特に広告タグは内部で重い処理を行うため、
“最速で読み込む”必要はありません。

読者のスクロールが始まるまで、なるべく静かにしておく。
これがINP改善のコツです。

 

■ 原則④：棚卸しの手順は「3ステップ」で十分

棚卸しは難しそうに見えますが、以下の3ステップで完了します。

 

STEP1：自分のサイトが読んでいるスクリプト一覧を出す

Chrome DevTools → Network → JS
またはブラウザ拡張で“読み込まれているスクリプト”をすべて洗い出します。

 

STEP2：目的でまとめる（広告/計測/同意/UI/不要）

ここで初めて
「こんなにAds SDKがあったのか…」
というケースがほぼ100%起きます。

 

STEP3：削除・統合・移動の3択で整理

  • 同じタグ → 削除 or 統合

  • 使ってないSDK → 削除

  • 初回表示に不要 → 遅延 or defer

  • UIスクリプト → ページ最下部に移動

このだけで、“静かに動くページ”になります。

 

■ 原則⑤：棚卸し後は“広告の表示速度”も安定する

不思議ですが、
スクリプトを減らすと広告の表示速度も安定します。

理由は：

  • JSの競合が起きなくなる

  • DOMが落ち着くのでCLSが減る

  • INP改善で操作ストレスがなくなる

  • LazyLoadと相性が良くなる

つまり、棚卸しは
「ページを軽くする」と同時に、「広告のパフォーマンスも上げる」 という二重のメリットがあります。

軽くすることは、広告収益を下げるどころか、
むしろ Viewability と CTR を安定させる基盤 になるのです。

 

■ 結論：外部スクリプトは“足す前に削る”。軽いほど成果が伸びる

外部スクリプトは、
多くのブログの“隠れ負債”です。

しかし逆に言えば、
ここを整理するだけであなたのサイトは別物のように軽くなります。

  • 同系スクリプトは1つだけ

  • 初回相互作用まで静かに

  • 目的ごとにまとめて棚卸し

  • 不要なSDKは削除

この4つを守るだけで、CLS や INP は確実に改善します。

そして結果として、
読了率 → CTR → RPM まで自然に底上げされる のです。

 

 

 

まとめ｜CLSとINPは“広告を軽くする”より“動かさない設計”で改善する

Vol.20-3 では、広告やアフィを増やしても “読み心地を壊さない” ための技術的な土台を整理しました。
ポイントは、難しい最適化ではなく、次の3つの原則だけです。

  • 予約枠：広告が読み込まれる前に“高さ”と“場所”を確保して、CLSを根本から防ぐ

  • 遅延読み込み（LazyLoad）：折りたたみ下の広告は、読者が近づいたときだけ静かに読み込む

  • 外部スクリプトの棚卸し：同系JSの二重読みをなくし、INPを大幅に改善する

これらはどれも“広告の数”ではなく 読者の体験（UX）を守るための設計 です。
実践すれば、スクロールの滑らかさが大きく変わり、
読了率・CTR・Viewability が自然に安定していきます。

まずは予約枠と遅延だけでも効果は絶大です。
あなたのブログを一気に“読めるページ”へ進化させましょう。

 

 

 

 

用語ミニ辞典（Vol.20-3）

● CLS（Cumulative Layout Shift）
ページ表示中に“ガタッ”と動く現象。広告や画像の高さが確保されていないと起こりやすく、読者のストレス・離脱の原因に。予約枠を作ることで防げる。

● INP（Interaction to Next Paint）
タップやスクロールなど、読者の操作に“どれだけ素早く応答するか”を示す指標。外部スクリプトの二重読みや重いJSがあると悪化しやすい。遅延読み込みと棚卸しで改善。

● 予約枠（Placeholder / Reserved Space）
広告が“まだ読み込まれていない段階”であらかじめ高さ・比率を確保しておく仕組み。CLS対策の基本で、aspect-ratio や固定高さで実現する。

● 遅延読み込み（LazyLoad）
折りたたみ下の広告や画像を、読者のスクロールに応じて後から静かに読み込む方法。ページの初速が軽くなり、INPも安定する。

 

 

今回はここで終わりにしたいと思います！

最後までお読みいただきありがとうございました！


このブログでは「ChatGPT×副業」をテーマに、AIをフル活用したリアルな副業チャレンジを発信しています🎶

むずかしい話はナシで、「ちょっとやってみたいかも」と思えるような内容を目指しています😁

私は現在、ChatGPTを使ってTシャツのデザインを作って販売したり、

LINEスタンプのキャラ制作に挑戦したりしています👍

デザインの知識ゼロでも、AIの画像生成機能を使えばかなりいい感じになりますよ！

ブログの内容やSEO対策も、ぜんぶChatGPTに相談しながら書いています。

アイデアが出ないときも、相棒みたいに助けてくれます🎶

さらに、楽天ルームのレビュー文章もChatGPTと一緒に考えたり、

X（旧Twitter）の投稿や運用方法も提案してもらったりと、あらゆる場面でAIに頼っています。😅

「AIって便利そうだけど、自分にも使えるのかな？」

と思っている人には、ぜひ読んでほしいです。

このブログは、AI初心者でも副業が始められるように、

体験ベースでわかりやすく書いています。

私の成功も失敗もまるごとシェアしていくので、よかったら気軽に読んでいってくださいね。

Xでも日々の活動をゆるっと更新しているので、ぜひのぞいてみてください！

明日のあなたがより豊かになりますように😌

それでは、おやすみなさい😴