サイトのオンボーディングが「読む前」で詰まるとき
記事を開いてもらえれば、たぶん勝てる。
読めば笑う。読めば「おー」となる。読めば次も見たくなる。
なのに、その記事が店の奥にある。
入口には立派な看板。 その次に「すべての記事を見る」。 その次に一覧。 その次に検索。 その次にカテゴリー。 その次に「どれにしようかな」。
そして読者は、まだ一行も面白いものを読んでいない。
試食がめちゃくちゃうまいのに、試食コーナーへ行くまでに受付票を3枚書かせる店である。
問題は記事ではない。
最初の一本を開くまでのオンボーディングである。
ここでいうオンボーディングは、会員登録後のチュートリアルだけではない。初めてサイトへ来た人が、
「何のサイト？」 「自分に関係あるものある？」 「どれ面白そう？」 「これ、わざわざ開く価値ある？」
を数秒で判断し、一本目へ到達するまでの全体を指す。
この記事では、情報探索研究、選択過多、視線研究、ECのホームページ実験、YouTubeとNetflixの推薦設計を材料にして、記事が面白いのに開かれないサイトの入口ボトルネックを分解する。
0. 30秒版――「探せるサイト」と「読みたくなるサイト」は別物
検索がある。 カテゴリーがある。 一覧がある。 サイトマップまである。
完璧。
ただし、これは主に「何を探したいか分かっている人」を助ける装備である。
ふらっと来た人は、検索語を持っていない。
その人に最初から、
「検索してください」 「カテゴリーを選んでください」 「全記事から選んでください」
と出すと、仕事を渡している。
良い入口は逆だ。
- まず具体的な記事候補が目に入る。
- 何の話か一瞬で分かる。
- 候補同士の違いが分かる。
- 気になる一本をその場で開ける。
- 合わない人だけ検索・カテゴリー・全件一覧へ逃げられる。
要するに、
検索は非常口として強くする。最初の一歩は売り場にする。
倉庫型の店に入った瞬間、「商品名を入力してください」とだけ書かれていたら、ちょっと怖い。
歩いているだけで「これ何？」「お、安い」「なんでこんなの売ってるんだ」が起きるから、探索そのものが楽しい。
記事サイトも同じである。
1. 本当のファネルは「訪問→記事」ではない
入口のファネルを細かく分けると、少なくとも六段階ある。
1. 候補への到達
記事の候補そのものが画面に出るまで。
ブランド演出、長いサイト説明、巨大なヒーロー、案内文だけで一画面を使えば、まだ候補へ着いていない。
2. 自分との関係を認識
「自分が好きそうなものが、このサイトにある」と分かる段階。
AIの記事しか見えなければ、旅行や漫画や暮らしの記事が千本あっても、初見には存在しない。
3. 内容を予測
タイトル、短い補足、画像、棚の名前などから「開いたら何があるか」を予測する。
情報探索研究では、この予測可能性は information scent、つまり情報の匂いとして説明される。[1][2]
4. 比較
候補Aと候補Bの違いを理解する。
「AIについて考えた」 「AIについて考えた話」 「AIを考える」 が並んだら、三つあるのに一つに見える。
5. 開く価値を判断
ここが核心である。
面白そう − 外れそう − 読む時間 − 探す手間
の脳内暗算で、プラスなら開く。
本文が神でも、カードからその期待値が見えなければ負ける。
6. クリックして到着
クリックしたリンク先が正常に開く。
ここではじめて本文の勝負が始まる。
つまり「記事が読まれない」は一つの問題ではない。
見えていないのか、見えたけど関係なさそうなのか、関係ありそうだけど違いが分からないのか、面白そうだが面倒で開かなかったのかを分けないと、直す場所を間違える。
2. 研究①――3クリックルールは雑すぎる。「近づいている感じ」の方が重要
Web UXには昔から「3クリック以内で目的へ」という有名な話がある。
しかしCenter Centreが44人、620タスク、8,000クリック超を調べた研究では、成功・失敗とクリック数に3クリックの境界は見つからなかった。[3]
これは「100クリックでもいい」という意味ではない。
大事なのはクリックの意味である。
情報採餌理論では、人は次のリンクを押す前に、
「この先に欲しいものがありそうか」 「そこへ行く手間に見合うか」
だから、
トップ →「おすすめ」 →「あなたが好きそうな作品考察」 →「このキャラ、説明不足すぎて怖い」
なら、3クリックでも匂いが強くなっている。
逆に、
トップ →「記事」 →「カテゴリー」 →「その他」 →「一覧」
は、毎回「本当にこっち？」となる。
クリック数ではなく、クリックするたびに期待値が上がっているか。
これが入口設計の方が重要な質問である。
3. 研究②――選択肢は「多い＝悪」ではない。分からない選択肢がしんどい
選択肢の話をすると、すぐ「少なくしろ」と言いたくなる。
研究はもう少し面倒である。
2010年のメタ分析は50実験、5,036人をまとめ、選択過多の平均効果はほぼゼロだが研究間の差が大きいと報告した。[4]
2015年の別のメタ分析は99観測、7,202人をまとめ、選択肢の数だけでなく、
- 選択集合の複雑さ
- 判断課題の難しさ
- 自分の好みが不明確
- 努力を減らしたい状況
が選択過多を強めると整理した。[5]
つまり記事が500本あること自体は罪ではない。
罪になりやすいのは、
何を読みたいか決まっていない人に、違いの分からない30本をいきなり比較させること。
本棚に1万冊あってもいい。
入口で1万冊を床にぶちまけるな、という話である。
4. 研究③――人は一覧を精読しない。カードの最初の数秒で「匂い」を嗅ぐ
NN/gが13年間の視線追跡研究を振り返った報告では、Web上では逐語的に読むよりスキャンする行動が一貫して観察されている。[6]
つまりカードに、
タイトル カテゴリー 読了時間 説明文 更新日 タグ 作者 ランキング
と全部載せても、全部読まれるわけではない。
重要なのは、最初に目へ入る情報で、
「これは自分向け」「これは違う」「これ何？」
が分かることだ。
information scentの研究では、リンクのラベルだけでなく、その周辺文脈、位置、画像、過去経験までが「この先に何があるか」の推定に使われる。[1]
だから「記事を見る」「もっと見る」「おすすめ」だけでは匂いが弱い。
ラベルとして正しいが、中身が分からない。
一方、
「台風なのに、客も店員も誰も予約を止められない」 「AIに仕事を任せたら、管理の管理が増えた」 「神社とイオンだけで街が埋まりそう」
のように題材とズレが見えれば、クリック前から映像が立つ。
オチを全部ばらす必要はない。
何が起きる記事なのかを、開く前に少し想像できればいい。
5. 失敗パターン――便利機能を足すほど、一本目が遠くなる
ある記事サイトを監査すると、個々の部品は全部それなりに正しかった。
それでも全体では遠かった。
パターンA：入口でブランドショーが始まる
ロゴが動く。 かっこいい。
ただし初訪問者はまだ、読む価値のある記事を一つも知らない。
映画館へ入ったら、予告より先に映画館のロゴだけ1分流れるようなものである。
ブランド演出を消せ、ではない。
候補を隠してまで再生する価値があるか、非遮蔽版と比較する。
パターンB：Primary CTAが「すべての記事を見る」
これは親切そうで、読者へ作業を返している。
「何食べる？」と聞かれて「メニュー全部見て決めて」と渡す方式。
全件一覧は必要だ。
ただし入口の主役は、今すぐ開ける具体的な候補の方が強い場合がある。
パターンC：一覧へ行ったのに、また探し方を選ぶ
一覧の上に、
説明 検索 地図 カテゴリー 新着
が積まれ、その下に記事。
一覧を開いた人の心は、
「記事を見せてくれ」
である。
図書館へ来たら、入口で蔵書検索端末の使い方講習が始まる。
パターンD：検索は強いが、入力しないと何も起きない
検索は目的がある人に強い。
暇つぶしの人に「調べたいことを入力」は強すぎる。
その人は調べたいことがない。
面白いものを向こうから持ってきてほしい。
パターンE：検索候補がタイトル＋大分類だけ
候補が8件出ても、違いが分からなければ8件全部が同じ霧の中にいる。
検索精度だけでなく、検索結果のカードにも選択理由が要る。
パターンF：枠が増えて「おすすめ」の意味が薄まる
注目の一本。 おすすめ。 新着。 ほかの記事。 今週の一本。 あなた向け。
運営側には全部ロジックが違う。
読者から見ると全部、
「なんかおすすめらしい」
である。
棚が多いことより、棚の役割が分かることが大事だ。
6. 他社事例――YouTube、Netflix、ECが教えてくれること
YouTube：クリックを成功にすると、釣れるものが勝つ
YouTubeは公式説明で、2011年にはクリックだけでは実際に視聴されたか分からないと学び、その後、総再生時間やアンケート、共有、高評価・低評価など複数シグナルを推薦に使ってきたと説明している。[7]
記事サイトへの翻訳は単純である。
CTRだけ上げると、タイトル釣り大会になる。
入口改善の成功条件は、
クリック →到着 →一定の読書 →次の記事
まで見る。
「押させた」ではなく「押してよかった」にする。
Netflix：巨大なカタログを、そのまま巨大な一覧にしない
Netflixはホームページを、どの行を出すか、行に何を入れるか、どの順番にするかという複数層で組むと説明している。[8][9]
さらに初期の好み選択は任意で、選ばなければ多様で人気のある作品から始める。[8]
これが重要だ。
オンボーディングで、
「まず好きなジャンルを5個選んで」 「次に興味を10個選んで」 「では診断開始」
を必須にする必要はない。
まず出す。合わなければ選ばせる。
受け身の発見を先にし、能動的な調整を補助に置ける。
Baymard：ホームを見ただけで「何がある店か」を誤解される
BaymardのEC研究では、初訪問者はホームやナビを使って、その店の品ぞろえの幅を推測する。2025年更新の記事では、調査対象の22%がホームで十分な商品幅を示せておらず、視覚的商品を気軽に探す場面では33%がまずホームをスクロールすると回答している。[10]
また2025年のベンチマークでは、ホーム・カテゴリナビUXが「mediocre〜poor」とされたサイトはデスクトップ58%、モバイル67%だった。[11]
これはECの結果であり、記事サイトへ数字をそのまま移植してはいけない。
ただし示唆は強い。
ホームに見えないものは、初見には「ない」に近い。
記事サイトに仕事・AI・旅行・作品・暮らし・笑いがあるなら、最初の画面から少しずつ幅を見せる。
在庫は倉庫にあってもいい。 入口の棚は「この店、こんなものもあるんだ」を伝える。
7. あるべき姿――「探す前に、もう選び始めている」
入口を次のように変える。
旧型
- サイト説明を読む
- 探し方を選ぶ
- カテゴリーを選ぶ
- 一覧を見る
- 記事を比較する
- やっと開く
新型
- 具体的な候補が見える
- 眺めるだけでサイトの幅が分かる
- 気になるものがあれば即開く
- なければ興味チップ・カテゴリー・検索で調整
- 全件一覧は最後の逃げ道
ここで重要なのは、選択を消すのではなく、選択のタイミングを後ろへずらすこと。
読者の自己決定は残す。
「この人はAI好きだろう」と勝手に一色に染めるのではなく、
- 笑えるもの
- へえとなるもの
- 今すぐ役立つもの
- 作品の話
- AI・仕事
- 暮らし・旅行
のように複数の入口を見せる。
ただし「あなたはどれですか？」と最初に試験を始めない。
売り場を歩きながら選べるようにする。
8. カード設計――タイトルの下に「開く理由」を一つだけ足す
良いカードはミニ記事ではない。
全部説明したら、カードで読了する。
必要なのは、比較のための差分である。
カードの三層
1. 何の話か 固有名詞、場面、問題。
2. 何が引っかかるか 矛盾、意外性、結果、問い。
3. 開くコスト 必要なら読了目安。ただし価値より先にコストだけを見せない。
例。
悪い例： 「コミュニケーションについて考える」 「人間関係を考察しました」
良い例： 「好きなのに、説明しなさすぎてストーカーに見える」 「全員帰りたい台風の日、なぜ予約だけ生き残ったのか」
後者は、本文の結論を全部言っていない。
でもクリックした先の風景が見える。
サムネイルも同じ。
画像を付ければ勝ちではない。
同じマスコット顔を20枚並べれば、画像が20枚あるのに識別力は1枚である。
画像を使うなら題材を区別する。 区別できないなら、テキストを強くする。
9. おすすめ設計――「正解を当てる」より、外しても次が見える
初訪問者には履歴がない。
いきなり完璧なパーソナライズはできない。
そこで最初の棚は、
人気 × 多様性 × 新しさ × 探索枠
くらいでよい。
ここでの「くらい」は実験の考え方で、固定比率の科学的正解があるという意味ではない。
大事なのは一色にしないこと。
AI記事を一度読んだから、ホーム全部AI。
これはおすすめというより、AI軟禁である。
Netflixのページ生成研究でも、関連性だけでなく多様性、探索、安定性、デバイス上の見え方を同時に扱っている。[9]
おすすめは「あなたを決めつける装置」ではなく、
今の興味を少し先回りしつつ、別の面白さへの扉も残す装置にする。
10. 計測――「開かれなかった」を一種類のゼロにしない
改善するなら、入口ファネルを計測する。
最低限ほしい段階
- candidate：候補として選ばれた
- render：HTMLには存在した
- impression：実際に画面内へ入った
- click：押された
- arrive：記事が開いた
- qualified read：一定以上読まれた
- next：次の記事へ進んだ
ここで重要なのは、
表示されなかった0クリックと、100回見られて0クリックを同じにしないこと。
前者は入口の配置問題かもしれない。 後者はカードか候補の問題かもしれない。
入口専用の指標
- ホーム／一覧訪問から一本目の記事到着率
- 一本目到着までの時間分布
- 一本目までに検索・カテゴリーを何回使ったか
- impression→click→arriveの落差
- 記事へ着いて数秒で戻った割合
- qualified readまで到達した割合
- 次記事クリック率
平均時間だけを見ると、生き残った人しか見えない。
30秒で誰も開かなかった人が大量に消えても、開いた人だけ平均すれば速く見える。
だから未到達者を含む到達率と一緒に見る。
そしてYouTubeの教訓どおり、CTRだけで自動最適化しない。
入口は強いが本文と期待がズレるカードを量産すると、短期的には勝って長期的に死ぬ。
11. 結論――面白さを作るだけでなく、面白さまでの距離を設計する
記事サイトは、記事を書くほど大きくなる。
すると運営者は整理したくなる。
カテゴリー。 検索。 地図。 ランキング。 おすすめ。 タグ。 ナビ。
全部正しい。
そして全部足した結果、記事を開くまでが遠くなることがある。
これはかなり面白い事故である。
「読者のために入口を増やしました！」
入口が12個ある巨大迷路が完成。
必要なのは、機能を消すことではない。
最初の一本に到達するまで、読者へ何回判断を要求しているかを見ること。
良い記事があるなら、奥に隠さない。
トップから、
「これ何？」 「ちょっと見たい」 「え、そんなことある？」
が連続して起きるようにする。
検索は残す。 カテゴリーも残す。 全件一覧も残す。
でも、最初の体験はもっと受け身でいい。
歩いているだけで面白いものにぶつかる。
倉庫を歩いていたら謎の巨大ぬいぐるみがいる。 スーパーを歩いていたら試食を渡される。 動画アプリを開いたら、もう何か気になるものが並んでいる。
記事サイトもそこまで来ると、
「記事を探すサイト」から、
「面白いものに遭遇するサイト」
へ変わる。
それが、本文の前にある本当のオンボーディングである。
入口QC
- 最初の画面で具体的な記事候補が見えるか。
- 初見がサイトの内容の幅を推測できるか。
- 検索語を考えなくても一本目を選べるか。
- 候補同士の違いが一瞬で分かるか。
- 「すべて見る」が最強のCTAになっていないか。
- ブランド演出が候補を覆っていないか。
- 同じ意味の「おすすめ」棚が増殖していないか。
- スマホで重要語が最初に見えるか。
- 見えなかった記事を「人気がない」と誤判定していないか。
- CTRだけで勝者を決めていないか。
- 最初の記事到着率と、その後の満足を両方見ているか。
参考資料
https://www.nngroup.com/articles/information-scent/
https://www.nngroup.com/articles/information-foraging/
https://www.nngroup.com/articles/how-people-read-online/
https://articles.centercentre.com/three_click_rule/
https://doi.org/10.1086/651235
https://doi.org/10.1016/j.jcps.2014.08.002
https://baymard.com/research-articles/inferring-product-catalog-from-homepage
https://baymard.com/research-articles/ecommerce-navigation-best-practice
https://baymard.com/research-articles/ecommerce-homepage-ux
https://blog.youtube/inside-youtube/on-youtubes-recommendation-system/
https://help.netflix.com/en/node/100639
https://netflixtechblog.com/learning-a-personalized-homepage-aa8ec670359a
参考資料（12件）
- Nielsen Norman Group, Information Scent: How Users Decide Where to Go Next (2020) nngroup.com
- Nielsen Norman Group, Information Foraging: A Theory of How People Navigate on the Web (2019) nngroup.com
- Center Centre, Testing the Three-Click Rule articles.centercentre.com
- Scheibehenne, Greifeneder & Todd (2010), Can There Ever Be Too Many Options? A Meta-Analytic Review of Choice Overload, Journal of Consumer Research, 37(3), 409–425 doi.org
- Chernev, Böckenholt & Goodman (2015), Choice overload: A conceptual review and meta-analysis, Journal of Consumer Psychology, 25(2), 333–358 doi.org
- Nielsen Norman Group, How People Read Online: New and Old Findings (2020) nngroup.com
- YouTube, On YouTube’s recommendation system (2021) blog.youtube
- Netflix Help Center, How Netflix’s Recommendations System Works help.netflix.com
- Netflix Technology Blog, Learning a Personalized Homepage (2015) netflixtechblog.com
- Baymard Institute, Ecommerce Homepage UX: Can Users Infer the Breadth of Your Product Catalog? Updated 2025 baymard.com
- Baymard Institute, Homepage and Category Navigation UX 2025 baymard.com
- Baymard Institute, The Current State of Homepage UX – 8 Common Pitfalls & Best Practices
