読む体験を先に置いた——広告をほぼ捨て、アフィリと検索まで整えた話（ひとぅブログ、リニューアル続編）

前回の Deep は、ツールの話でした。WordPress をやめて静的エンジンをつくり、Markdown を正本にし、ブログ／メモ／Deep の三部構成で運営する——サイトの持ち方を変えた記録です。

今回は、その続きとして、読者さんの読む体験をよくした話を書きます。

伝えたいことは、わりと単純です。ひとぅブログは、長い文章を読んでもらう場所にしたい。だから、読む邪魔になる広告はほぼ捨てた。代わりに、文脈のあるアフィリエイトと、読むための小さな工夫（読了目安、進捗バー、サイト内検索）を整えた。ツールを載せ替えたあとに、いちばんやりたかったのがこれでした。前回が「持ち方」、今回が「読まれ方」。その対比で続編を閉じたい、というのが執筆の動機です。

何が問題だったか

前回の記事でも、「広告は減らす」「読者体験を先に置く」とは書いていました。言葉では書いていたのに、載せ替え直後の公開面には、まだ読む側の邪魔が残っていました。

いちばん困っていたのは、デザインが崩れた Amazon の広告枠です。古い埋め込みが、記事の途中でレイアウトを壊す。まわりの文章とちぐはぐに見える。読んでいる流れが、そこで止まる。静的にしたのに、読む場所としてはまだ途中だった、という感覚です。稼ぐ以前の問題として、ページが壊れている。そこを放置したまま「読む体験を優先」とは言えませんでした。

AdSense も、冒頭・末尾だけでなく、長い記事だと途中の見出し前にも入りうる状態でした。長いほど枠が増える。Deep を1万字で書くサイトなのに、読むほど広告が増えるのは、目的と食い違います。

商品の案内も、記事ごとに見た目がバラバラでした。サイト内検索もなく、過去記事を探すときは Google 頼みに近い。静的にしたから不便が消えるわけではない。消えたのは管理画面の重さであって、読む体験の手入れは、そのあとから始まる仕事でした。

一方で、静的エンジンにしたおかげで、直したいことを全記事に同じルールで適用しやすくなりました。だからこそ、体験側の改善が現実的になった、とも言えます。

WordPress のころは、「気になる記事を一本直す」ことはできても、「読む邪魔になる枠のルールを、サイト全体で変える」のは重かった。テーマとプラグインと、焼き付いた HTML のあいだで、熱が冷めやすい。今は、ルールを決めてビルドすれば、同じ形が並ぶ。体験の話を Deep に残せるのも、その前提があるからです。

そして個人的な動機もある。自分自身が、スマホで他のサイトを読んでうんざりしている、ということです。画面の半分を埋めるリッチな広告、追従する枠、段落のあいだに割り込むカード。情報を取りに来たのに、注意力を刈り取られる。自分が運営する側で、同じものを読者さんに押しつけるのは気が引けました。「自分が嫌なものは置かない」——個人ブログの体験設計は、結局そこから外れると長続きしない、と思っています。

読む側の自分と、書く側の自分が分裂していると、文章もサイトもどこか嘘っぽくなる。うんざりしている側が運営すると、少なくとも「自分が嫌な妨害」は減らせる。今回の改善は、その分裂を少し埋めた作業でもありました。

広告をほぼ捨てた

いまのひとぅブログでは、Google AdSense は1ページあたり最大2枠です。記事がどれだけ長くても、3つ目は足しません。タイトル直下にも置きません。

以前は、冒頭・末尾に加え、見出しが一定数以上あると途中にも入っていました。稼ぐ側だけ見れば合理的です。読む側だけ見ると、長いほど邪魔が増える。読む体験を優先するなら、答えは後者です。ほぼ捨てた、と言っていい密度です。言い訳の余白は要りません。減らした、ではなく、ほぼ捨てた、で通します。

なぜ捨てたのか

ひとつは、リッチな広告へのうんざりです。近年のスマホ向け広告は、静かなバナーというより、動きや大きなタップ領域を伴う小さなアプリに近いことがあります。本文を整えても、隣で派手なものが動いていれば、読む体験の主導権は広告側に移ります。枠を減らさない限り、画面は静かになりません。

もうひとつは、広告ブロッカーの普及です。枠をたくさん置いても、表示されない・測れない・体験だけが損なわれる、という組み合わせになりやすい。「ブロックされるなら、もっと目立たせて突破する」方向には行きたくありませんでした。見えない広告のために本文を分断するくらいなら、最初から枠を少なくする。

ブロッカーの話を持ち出すと、「じゃあ広告は悪だ」となりがちですが、そう単純にもしていません。読者さんが自分の画面を守る手段を持っている、という現実を認める、ということです。その現実のうえで、サイト側が枠を増やす競争に参加するか、静かなページに寄せるか。参加しない、と決めたのが今回です。

過剰な枠は、短期のクリックを除けば、読む邪魔になりやすい。滞在が浅くなる。信頼が削れる。商品カードまで「また広告か」と一緒くたに見られる。長い Deep を読んでもらいたいサイトが、途中で何度も視線を奪うのは自己矛盾です。

ここまで書いておきながら、自分でも分かっています。広告をほぼ捨てる、と決めるのは簡単ではない。収益は下がるかもしれない。それでも、下げ方には種類がある。読む体験を壊して稼ぐ下げ方と、体験を守ったうえで稼ぐ場所を移す下げ方。後者を選んだ、というのが今回の芯です。

広告収入は大事です。ただ、ひとぅブログの本丸は、長いあいだ「読まれること」でした。2007年から続いてきた場所の価値は、枠の数では測れません。戻ってきてもらえるか、あとから読み返したくなる文章があるか。そちらのほうが先です。読まれない場所で稼ごうとするほうが、結局つらい。静かなページのうえで、必要な人にだけ商品の話が届く——その距離感のほうが合います。

残した2枠の置き方

完全ゼロにはしていません。ゼロにしなくても体験は大きくよくなるし、いまの着地は「ほぼ捨てる」だからです。残したルールは次のとおりです。

• 静かな枠を前提にする（リッチで目立たせる方向には振らない）
• 1ページ最大2枠
• 置き場所は、(1) 最初の h2 の直前（目次の直後）と (2) 記事本文の末尾

タイトル直下は、まだ本文に入る前に視線を奪いやすい。導入を少し読んだあと、最初の大見出しの前は「本編に入る」区切りになる。目次がある記事では、目次の次です。ここで一度だけ置くのは許容できる、と感じました。途中の見出しごとに入れないことも重要です。長いほど増える設計をやめた、ということです。

Deep のような長文では、途中挿入の回数がいちばん効きます。短いブログなら、途中枠が1つ増えてもダメージは限定的かもしれません。1万字の記事で、見出しのたびに枠が入ると、読むリズムが何度も折れる。折れたリズムは、戻ってきにくい。だから「最大2枠」だけでなく、「途中に増やさない」がセットです。

末尾は、読み終わった人向けの余白です。最後まで読んでくれた人にだけ届く。途中割り込みよりマシです。冒頭をやめ、途中をやめ、区切りの2点だけに残す。これがいまの形です。

数字はあとから見ます。毎週のインプレッションに合わせて枠を増減する運用には戻らないつもりです。体験のルールを先に固定し、文章とアフィリエイトの質を上げる。その順番です。四半期くらいの単位で見直せば足りる。毎日の数字に合わせて枠を足す運用は、結局「ほぼ捨てた」を取り消す道だからです。

稼ぐなら、文脈のあるアフィリエイトで

広告をほぼ捨てたあとに残る収益の柱が、アフィリエイトです。Amazon、楽天市場、Yahoo!ショッピング——レビューや比較の文脈で「これを見た／買った／候補にした」と書けるときに、同じルールのカードで案内する。押し売りではなく、記事の延長として置く。誰にでも出る枠より、書いた内容と結びつくリンクを主軸にする、というシフトです。

アフィリエイトでも、開示や距離感を雑にすれば信頼は壊れます。だから見た目を揃え、価格の時点を出し、セール中なら分かるようにする。隠さない案内にする。本文と無関係な広告が割り込んでくる感覚と、レビューの流れで製品ページを示す感覚は、同じお金の話でも質が違います。後者なら、読者さんは拒否も比較もできる。

ここでの勝負は、クリック数の最大化ではありません。記事を読んでくれた人に、必要なときだけ案内が届くこと。だからカードは本文の流れに置き、AdSense のような無関係な提案で段落を割らない。稼ぐ場所を移す、というのはそういう意味です。広告枠の密度で稼ぐ世界から、文脈の密度で稼ぐ世界へ寄せる。寄せた以上、文脈側の見た目と運用を雑にすると、せっかくの移動が無駄になります。次の章の「崩れた広告をやめ、カードを揃える」は、そのための実務です。

メモと Deep は売りにくい。それでも書く

正直に書くと、メモや Deep はアフィリエイト向きではありません。数字だけ見れば、ブログのレビューのほうが稼げる可能性は高いです。それでも厚くする理由は、ファンと信頼のための棚だからです。

すぐに買わない人にも、「この人の整理は信用できる」「ここは読むことを大事にしている」と思ってもらえるかどうか。その蓄積が、あとからレビューを読んでもらう土台になります。全部を売る文章にしない。全部を広告枠にしない。売るときは、売るに足る文脈で売る。広告をほぼ捨てることは、禁欲の美談というより、役割分担です。

ブログで速く伝え、メモで調べ、Deep で方針を残す。三部構成を決めたときから、稼ぐ文章と稼がない文章を同居させる前提でした。稼がない文章があるから、サイト全体が「売りの場」だけにならない。売りの場だけになると、読む体験は簡単に後回しになります。広告をほぼ捨てた判断は、その三部構成の延長線上にもあります。

崩れた広告をやめ、カードを揃える

収益をアフィリに寄せるなら、見た目がバラバラでは続きません。WordPress 時代の名残として、記事の中には次のようなものが混ざっていました。

• 昔の商品カード（HTML が焼き付いたもの）
• カエレバ系の枠
• デザインが崩れた Amazon の古い埋め込み
• 短縮リンクや、楽天・Yahoo への個別リンク

読者さんから見れば「また別デザインの広告か」になりやすい。運営から見れば、セールのたびに手で直すのがつらい。

そこで、商品マスタを置き、本文には短いショートコードを書く形にしました。ビルド時に同じ見た目のカードへ展開する。Amazon／楽天／Yahoo のボタンを揃え、価格の取得時点も小さく出す。ASIN が取れないものは、各店の検索カードにする。

作業は地味です。崩れた埋め込みを外し、古いカードを戻し、リンクを整える。一気に美しくなった、というより、例外が減っていく感覚です。例外が減ると、次の改善が速くなる。セールのバッジも、価格の更新も、カードの形が揃っていることが前提でした。

崩れた Amazon 広告の話に戻ると、あれは「広告があること」そのものより、「読む流れを物理的に壊すこと」が問題でした。静かな案内なら、本文の一部として機能する。崩れた枠は、本文の敵になる。だから捨てたのは、稼ぐことではなく、壊す側の広告です。残したアフィリのカードは、壊さない側の案内として揃え直した、という整理になります。

読者さんへの見え方としては、「前より読みやすい」「前より揃っている」で足りると思っています。裏側の仕組みの自慢は、この記事の主題ではありません。主題は、崩れた広告をやめ、案内を同じルールで見せるようにした、ということです。

以前は商品カード用のプラグインもありました。移行後はそれがない。だから自前で揃えた、という事実はあります。ただ、それを冒頭の自慢にしたいわけではありません。読者さんにとって大事なのは、崩れた枠が消えて、案内が同じ顔で並んでいることです。運営の都合の工夫は、必要なら別の場所で書けばいい。

セールと価格

セールを本文に手書きすると、終わったあとにゴミが残る。何も出さないと機会を逃す。そこで、ヘッダー下の帯と、カードの店ボタン横のバッジを、設定で出せるようにしました。Amazon／楽天／Yahoo を別々に ON/OFF でき、期間が来たら出て、終われば消える。帯はヘッダーに張り付かず、スクロールで流れる。読む邪魔を減らすためです。

アフィリエイトを主軸にするなら、セールの伝え方は「おまけ」ではありません。文脈のある案内の一部です。ただし、本文に永久に「セール中」と残るのは最悪です。終わった告知が残るサイトは、読む体験だけでなく、信頼も削ります。帯とバッジを期間付きにしたのは、その両方を守るためです。

価格も、古いまま放置したくありません。必要なら取り直してビルドで反映する。完璧な自動化ではない。でも、「いまの価格っぽいもの」を出せる状態にはしました。リンク切れの扱いも含め、まだ発展途上です。ただ、気づいたら手で直すだけ、よりは前に進んでいます。

読むための小さな工夫

邪魔を減らしたうえで、進みやすくする側も足しました。

読了の目安

3000文字以上の記事だけ、タイトル下に「約○分で読めます」を出します。目安は600文字／分。短いメモには出しません。分数は正確な約束ではない。それでも、Deep のような長文では「どのくらいの長さか」が最初に分かると安心です。最初は500字/分で出してみて、やや長く感じたので600に上げました。こういう微調整がすぐできるのも、自前エンジンの利点です。

進捗バーとヘッダー

ヘッダー直下に、細い進捗バーを出しました。スクロールに応じて伸びる。「まだ半分かな」が分かる程度です。ヘッダーは少し半透明にし、下の本文がうっすら見えるようにしました。PC のヘッダーからはカテゴリ／タグを外し、探す系は検索やトップ、スマホメニューに寄せました。情報を減らすことも、体験の一部です。

サイト内検索

静的サイトは検索が難しい、と言われがちです。サーバー側に検索 API を持たないからです。いまは、ビルド時に索引を作り、ブラウザ側で探す方式が実用になっています。ひとぅブログでもそれを載せ、入力に応じて結果が絞られるようにしました。検索した人だけが索引を読む方向にできる。静的配信のまま、「あの記事」にたどり着ける。

リニューアル直後は「ページが見つかりません」も目立ちました。全部が検索不足のせいではありませんが、サイトの中を探す手段がない状態はつらい。検索を載せたあとは、少なくとも「あの話、どこだっけ」への近道ができました。入口はヘッダーの「検索」です。派手な専用ページより、いまの流れを壊さず探せるほうが、このサイトに合うと感じました。

広告をほぼ捨てることと、検索を載せることは、一見バラバラに見えます。でもどちらも同じ問いへの答えです。読者さんが、邪魔されずに、探せて、読めるか。 枠を減らすのは妨害を減らすこと。検索は到達を助けること。読了目安と進捗は、長い文章の見通しを渡すこと。体験の改善は、一つのボタンではなく、この束です。

読了目安について補足すると、出さない記事を決めたことも重要です。短いメモに「1分で読めます」と出すと、かえってうるさい。3000字という閾値は、「見通しが欲しくなる長さ」から逆算しました。Deep や長めのブログにだけ出す。全部に同じ装飾を足さない、という判断も、読む体験の一部です。進捗バーも同様で、記事ページだけに出します。一覧や固定ページに進捗はいりません。

検索についても、静的だから仕方ない、で止めなかった理由があります。記事が千本規模あるサイトで、常連が「あの話」を思い出せないのは、運営としても損失です。Google の検索結果は外部の都合です。サイト内検索は、自分たちの棚の目次です。目次がない図書館はつらい。静的サイトでも目次はつくれる——それが、今回の答えでした。

読者さんにとって、何が変わるか

ここまで運営側の都合で書いてきました。読者さん側から見ると、変化はもっと単純なはずです。

長く読める。途中で広告が増えない。崩れた埋め込みでレイアウトが壊れにくい。商品の案内が同じ顔で並ぶ。セール中なら帯やバッジで分かる。長い記事なら、どのくらいの長さか・今どこかが分かる。探したい言葉があれば、サイト内で探せる。

派手な新機能の発表ではありません。邪魔が減って、見通しが増えた。それだけです。ただ、個人ブログでは「それだけ」がいちばん高いハードルでもあります。稼ぐための枠を足すのは簡単です。枠を減らして静かにするのは、意思が要ります。意思をサイト全体に通すには、仕組みが要ります。前回つくったエンジンの上で、その意思を通した、というのが続編の中身です。

もちろん、すべての読者さんが同じように感じるとは限りません。広告が少ないサイトを好む人もいれば、気にしない人もいる。それでも、ひとぅブログとしては「読むことを先に置く」と決めた。その旗を、コードと運用に落とした。数字の検証はこれからでも、旗の位置はもう動かした、というのがいまの実感です。

もう一歩だけ踏み込むと、読む体験をよくする、というのは「やさしい見た目にする」だけの話ではありません。何を邪魔とみなし、何を案内とみなすか、の線引きです。AdSense の枚数競争は邪魔側に寄りやすい。文脈のある商品カードは案内側になりうる。崩れた埋め込みは、案内のつもりでも邪魔側に落ちる。線引きをサイトのルールにしたのが、今回の中身です。

手作りエンジンだから、こうしたいが形になる

ここまでの改善に共通しているのは、欲しい体験から逆算して足した、ということです。

WordPress のテーマやプラグインでも似たことはできるものがあります。ただ、「このサイト専用の小さなエンジン」にしたおかげで、こうしたいが実装に届きやすい。アイデアが湧きやすい。カードも広告枠も、ビルド一発で全記事に同じルールを適用できる。やらないこと（リッチ広告を増やさない、枠は2つまで）も決めやすい。

もちろん楽なだけではありません。自分で壊せる。自分で直す。書き残さないと迷う。それでも、巨大 CMS をメンテし続けるより把握しやすい、というのが今の感触です。

いちばん嬉しかったのは、技術自慢というより、「読む側の自分」と「書く側の自分」が同じテーブルにつけた感覚です。うんざりしていた広告が、枠数のルールになる。探しにくさが、検索になる。セールの見逃しが、帯やバッジになる。翻訳が速いと、直すことが苦になりにくい。苦になりにくいと、また次のアイデアが出る。その循環が、リニューアル後に一気に回った、というのが実感です。

「ヘッダー下にセールを出したい」「バッジが欲しい」「進捗が欲しい」「PC からカテゴリを外したい」——こうした要望が次々と出て、その日のうちに確認できる、ということが起きました。WordPress 時代にも似た要望はあったはずです。テーマとプラグインの隙間や、焼き付き HTML に阻まれて、熱が冷めることが多かった。今は、熱が冷める前に形になる。意思が実装に届くまでの距離が短い。それが、手作りエンジンのいちばんの価値だと思います。

前回の Deep では、自作エンジンを「続けられる回路」として書きました。今回はその回路の上で、読む体験の改善が一気に回った、という実感の記録でもあります。回路があるから、アイデアが湧く。湧くから直す。直すからまた湧く。読む体験の優先を決めたあとに、その循環が見えました。

もう少しだけ実務の感触を書くと、改善の単位が「記事一本」から「サイトのルール」に変わったことが大きいです。一本直すのも大事ですが、ルールを直すと何百本・何千本に効く。広告枠の上限、カードの形、セールの出し方、進捗バー、検索。どれもルールです。ルールを持てるエンジンにしたから、体験の優先がサイト全体の話になった。逆に言えば、ルールを持てないまま体験を語っても、記事ごとの応急処置で終わりやすい。続編が書けたのは、前回の土台があるからです。

まだ残っていること

広告を2枠に減らしても、サイトは死にません——少なくともいまのところは。静かさのほうが、先に体感として返ってきます。カードが揃うと、本文の案内が広告臭く見えにくくなる、という副作用もありました。

やり残しもあります。アプリストア系の古い枠は整理の途上です。商品がなくなったときの表示も、まだ伸ばせます。セールの文言や色味、読了時間の閾値も、運用しながら直していくものです。数字の検証も、長い目で見ます。ここでは方針を固定した、と書き、結果は追記や別記事に回します。

数字について一つだけ先に書いておくと、「減らしたから負け」とすぐ結論づけるつもりはありません。短期の AdSense が落ちても、戻り率や、アフィリ経由の納得感、長い記事の読了感がどう変わるか。見る指標を、枠のインプレッションだけにしない。読む体験を先に置いた以上、見る側の数字も体験寄りに寄せる必要があります。そこまで含めて、まだ途中です。

前回の終わりで「次は中身の話を」と書いた申し送りも、まだ有効です。この記事は、どうしても必要だった体験の章でした。騒音を下げないまま深い文章だけ増やしても、届きにくい。静かな部屋を先に整えた、という順番です。部屋が整ったから中身が増えるわけではない。そこからが本番だ、という自覚は持っています。

書いていて改めて思うのは、読む体験の改善は一度やれば終わりではない、ということです。セールの出し方も、枠の静けさも、検索の使い勝手も、運用しながらまた直したくなるでしょう。それでも、「読むことを先に置く」と決めておけば、微調整の方向はぶれにくい。今回の Deep は、その最初の固定の記録だと思っています。

まとめ

この Deep で伝えたかったことは、次のことです。

ひとぅブログは、読者さんの読む体験を先に置く。だから広告はほぼ捨てた。稼ぐなら、文脈のあるアフィリエイトで案内する。崩れた Amazon 広告はやめ、カードを揃える。長い記事には読む目安と進捗を出し、サイト内検索も載せる。手作りエンジンだから、その「こうしたい」が形になりやすい。

• AdSense は1ページ最大2枠。冒頭連打も、長いほど増える途中挿入もやめた
• 置き場所は、最初の h2 直前（目次の次）と記事末尾
• 収益の主軸は、文脈のある Amazon／楽天／Yahoo のアフィリエイトへ
• メモや Deep は売りにくいが、ファンと信頼のための棚として厚くする
• 崩れた埋め込みを整理し、商品カードを同じルールで見せる。セールは帯とバッジ。価格も更新できる
• 3000字以上で読了目安（600字/分）。進捗バー。軽いヘッダーUI
• 静的サイトでも、入力ですぐ絞られる検索を載せた
• 手作りエンジンだから、「こうしたい」が形になり、アイデアが湧きやすい

前回の Deep が持ち方の更新なら、今回は読まれ方の更新です。両方あって、次の十年に渡す土台に近づく、と思っています。前回は「どう持つか」、今回は「どう読んでもらうか」。続編として、そこが一本の線になっています。

長いあいだ読んでくれている人には、たぶん最初に「静かになった」と感じてもらえるはずです。これから来てくれる人には、「ここは読むことを先に置いている」と伝わればうれしいです。数字はあとからついてくる——そう信じて、まず体験を直した、という記録をここに残します。

次こそ、中身の Deep を積み上げていきます。体験を直した今だからこそ、中身を書ける——そう言ったほうが近いかもしれません。静かな部屋で、ようやく本題を書ける。その順番を、自分でも信じたいです。

もし「自分のブログも広告を減らすべきか」と考え始めた人がいたら、答えは一つではありません。収益の柱やテーマによって最適解は違う。大切なのは、枠の枚数そのものより、読む体験と収益のどちらを先に決めるかを、自分の言葉で決めているかどうかだと思います。私の場合は、体験を先に決めた。その結果として枠が2つになり、アフィリの揃えが必要になり、検索や進捗まで手が伸びた。順番は、そうでした。減らすことが正解なのではなく、先に決めたことの結果として減った——そこに違いがあります。

最後に、自分への申し送りを一文だけ残します。静かになったサイトで、中身を書け。体験の章は前置きであって、目的ではない。読者さんに渡すべきなのは、静かな枠組みのうえにある文章だ——その順番を、忘れないようにします。