スマホで読まれない記事の共通点|モバイル前提の設計

スマホで読まれない記事の共通点|モバイル前提の設計

「同じ記事なのに、携帯から来た読者だけ冒頭で離れている」「端末別に分けて見て、初めて気づいた」——記事の数字を細かく見た担当者が見つけることです。読まれない原因は、中身の弱さとは限りません。画面の幅が3分の1になると、同じ1段落が3倍の高さに伸びます。この記事では、離脱が集中する記事の共通点と、その直し方を整理します。


カメ先生カメ先生

記事の読まれ方はね、中身が同じなら端末が変わっても同じだと思われがちだが、画面の幅が変わると読む体感がまるで別物になるんだ。


カメ子カメ子

文字数も内容も同じなのに、そんなに変わるものでしょうか。


カメ先生カメ先生

変わる。幅が3分の1になれば、1段落の高さは3倍になる。画面を埋め尽くす文字の壁になって、読む前に指が動く。表や図も、そのままでは字が読めない。


カメ子カメ子

縦に伸びるのですね。共通点から見ていきます。


この記事のポイント
  • 端末別の滞在と離脱を記事単位で分けて見ると、直すべき記事が具体的に絞り込める
  • スマートフォンで離脱が集中する記事には、段落の長さ・見出しの長さ・結論の位置に共通の特徴がある
  • 全記事を直す必要はない。流入の多い上位20本だけで、サイト全体の体感は変わる

AI×SEOに取り組む前に、社内のAI導入環境から整えませんか?

デボノはアカウント開設・初期設定など「そもそものAI導入」から社内定着まで伴走支援。マーケティング活用など一歩進んだご相談にも対応します。

目次

記事の滞在が端末で変わる

記事の評価を、平均の滞在時間や離脱率だけで見ていると、端末による差は消えてしまいます。平均という数字は、よく読まれている層と読まれていない層を足して割ったものだからです。両者が混ざったまま平均が並んでいると、どの記事に問題があるのかは見えません。

端末で分けると、傾向がはっきりします。パソコンからの読者は業務時間中に腰を据えて読むため、多少読みにくくても最後まで進みます。一方、移動中や休憩中にスマートフォンで開いた読者は、読みにくいと判断した時点で戻ります。同じ記事でも、許容される読みにくさの水準が違うのです。

この差が生まれる理由は、読む姿勢の違いだけではありません。画面の幅が狭くなると、同じ文章でも縦に長く伸び、終わりが見えなくなります。文字数はまったく変わっていないのに、体感の分量だけが増える。これがスマートフォンでの離脱を生む物理的な原因です。

BtoBのサイトでは、この差が見過ごされがちです。検討の本番はパソコンで行われるという前提が、社内で共有されているためです。ただ、最初にその記事と出会う場面は、メールやSNSからのスマートフォンでの流入であることが多くあります。入口と本番は別の端末で起きています。

最初の出会いで読まれなければ、検討の本番にたどり着きません。ブックマークもされず、社内で共有もされず、その記事は存在しなかったことになります。入口を整える作業として、この記事の内容を捉えてください。

なお、ここで扱うのはサイト全体の作り替えではありません。記事の書き方と体裁に絞った話です。デザインの改修を待たなくても、明日から書き方を変えるだけで効果が出る領域を対象にしています。

端末別に記事の数字を分ける

感覚で直し始める前に、対象の記事を絞ります。アクセス解析にはデバイスカテゴリという区分があり、ここを軸に分ければ記事単位の差が見えます。全記事を並べて眺めるのではなく、問題のある記事だけを取り出すのが目的です。

見るのは3つです。端末別のセッション数、端末別の平均滞在時間、そして端末別の直帰率や離脱率。この3つを記事ごとに並べると、パソコンでは普通なのにスマートフォンだけ数字が落ちている記事が特定できます。両方の端末で数字が悪い記事は、体裁ではなく内容に原因があります。

並べ替えの基準は、スマートフォンからの流入が多い順です。流入が少ない記事をいくら直しても、サイト全体の数字は動きません。上位20本に絞れば、作業量は現実的な範囲に収まります。20本で足りるかと不安になりますが、多くのサイトでは上位20本が流入の大半を占めています。

あわせて、流入経路も確認します。検索から来ているのか、メールから来ているのか、SNSから来ているのか。メールとSNSからの流入はスマートフォンの比率が高くなりやすく、その記事には特に画面幅への配慮が要ります。逆に、社内リンクや資料からの流入が中心の記事は、優先度を下げて構いません。

時間帯の分布も手がかりになります。始業前、昼休み、終業後にアクセスが立っている記事は、業務の合間ではなく個人の時間に読まれています。そうした記事は、片手で持って親指でスクロールされている前提で設計する必要があります

数字が出たら、上位の記事を自分のスマートフォンで実際に開いてください。数字と体感を突き合わせると、どこで読むのをやめたくなるかが具体的に分かります。この作業に30分かければ、直すべき箇所の一覧が手元にできます。

共通点1:1段落が長い

最も多い原因が、段落の長さです。パソコンの画面では4行に収まる段落が、スマートフォンでは10行を超えることがあります。書き手は前者の見た目で判断し、読み手は後者を見ています。この認識のずれが、離脱の最大の温床になります。

縦に長い文字の塊は、読む前に判断されます。内容を確かめる前に、読む労力を見積もって離脱するという行動が起きます。文章の質とは無関係に、見た目の圧迫感だけで切られてしまう状態です。丁寧に書き込んだ段落ほど、この現象に巻き込まれやすくなります。

目安として、1段落は3文までに収めます。接続詞でつないで長くなった文は、2つに割るだけで見え方が変わります。文の途中で強制的に改行を入れる必要はありません。段落を分けるだけで、画面上には空白が生まれ、圧迫感が下がります。

ただし、細かく割りすぎると今度は流れが途切れます。1文ごとに段落を変えると、話がつながらず、箇条書きを崩したような断片的な印象になります。3文前後で1つのまとまりを作り、次の段落で話を進める形が、読みやすさと論理の流れを両立させます

判断に迷ったら、その段落が答えている問いを1つに絞れているかを確かめてください。1つの段落に2つの論点が入っていると、必ず長くなります。論点を分ければ、段落も自然に分かれます。長さは結果であって、原因は構成にあります。

既存記事を直す場合、この作業が最も費用対効果に優れます。内容を変えず、段落の区切りを入れ直すだけだからです。事実確認も不要で、1本あたり10分ほどで終わります。

共通点2:見出しが長い

見出しの長さも、画面幅の影響を強く受けます。パソコンで1行に収まる見出しが、スマートフォンでは3行に折り返されます。折り返された見出しは、本文との区別がつきにくくなり、構造を示す役割を失います。

3行の見出しは、見出しとして機能しません。ひと目で内容を掴むための要素なのに、読まなければ意味が分からない状態になります。目次に並んだときにも同じ問題が起き、目次全体が壁のような文字列になります。

目安は、全角で20字前後です。修飾語を削り、その節で扱う対象だけを短く示します。検索語を全部入れようとして長くなった見出しは、たいてい削っても意味が通ります。同じ語を見出しと本文の両方に入れる必要はありません。

長い説明を入れたい場合は、見出しの直後の段落に回します。見出しは道しるべ、本文は説明。この役割分担を守るだけで、スクロール中の理解が速くなります。読者は見出しだけを拾い読みして、必要な節で立ち止まるという読み方をします。

見出しの階層にも注意が要ります。大見出しと小見出しの文字の大きさが近いと、スマートフォンでは階層が判別できません。装飾で区別しているサイトでは、幅が狭くなった時点でその区別が崩れることがあります。実機で確認すべき点の1つです。

見出しに数字を入れるのは有効です。「3つの原因」「5工程」といった数字があると、残りの分量が予測でき、読み進める判断がしやすくなります。終わりが見える記事は、最後まで読まれやすくなります。

共通点3:表を詰め込む

BtoBの記事では、比較表や仕様表が多く登場します。情報を整理した結果として表が生まれるのですが、ここがスマートフォンでの離脱ポイントになります。書き手が最も手をかけた部分が、最も読まれない部分になるという皮肉が起きます。

列が多い表は、画面の幅に収めようとして文字が極端に小さくなります。指で拡大しないと読めない表は、その場で飛ばされます。せっかく整理した情報が、届かないまま終わります。拡大した状態では今度は全体が見えず、比較という目的も果たせません。

対処は2つあります。1つは列を減らすことです。比較軸を3つか4つに絞れば、多くの場合は幅に収まります。もう1つは、横にスクロールできる領域に入れ、スクロールできると分かる見た目にすることです。何の合図もない横スクロールは、存在に気づかれません。

どちらを選ぶかは、読ませ方で決まります。横に並べて比べさせたいなら横スクロール、1つずつ理解させたいなら縦に積むほうが向きます。両方を中途半端に混ぜると、どちらの読み方もできなくなります。

表を減らして箇条書きに置き換える判断も有効です。比較ではなく列挙が目的なら、表である必要はありません。表は2つ以上の対象を同じ軸で比べるための道具だと考えると、使うべき場面がかなり絞られます

表の直前に、その表で何が分かるのかを1文で書いておくのも効きます。表そのものが読めなくても、要点だけは伝わります。読み飛ばされる前提で、逃げ道を用意しておく発想です。

共通点4:図の文字が小さい

図解やグラフを画像として入れている記事は、画面幅に合わせて自動的に縮小されます。ここで文字が読めなくなります。図は理解を助けるために入れたはずが、逆に読者を止める要素に変わります。

パソコンで作った図は、細い線と小さな文字で情報を詰め込みがちです。横幅が3分の1になれば、文字も3分の1になり、判読できなくなります。読めない図は、置いていないのと変わりません。むしろ、読もうとして拡大する手間を強いる分だけ損をしています。

対策は、図に載せる情報を減らすことです。1枚で説明することを1つに絞り、補足は本文のテキストに逃がします。図の中の文字は、本文の文字より大きいくらいでちょうど良くなります。要素が3つを超えたら、図を2枚に分けることを検討してください。

図の内容を本文でも説明しておくと、読めなかった場合の保険になります。図を見なくても意味が通る本文を書き、図はその理解を早めるために置く。この順序で考えると、図が読めないことによる損失を小さくできます。

代替テキストの設定も忘れないでください。画像が読み込まれない通信環境や、読み上げを使う人にとっては、代替テキストが唯一の情報源になります。検索エンジンが図の内容を解釈する手がかりにもなります。

スクリーンショットを載せる場合は、必要な範囲だけを切り出します。画面全体を貼ると、見せたい部分が全体の数十分の一になり、スマートフォンではまず判別できません。囲みや矢印を加えるより、切り出すほうが効果的です。

共通点5:結論が下にある

記事の構成そのものが原因になることもあります。結論に至るまでの前置きが長い記事は、スマートフォンで最後まで読まれません。構成の丁寧さが、そのまま離脱の原因になるという逆転が起きています。

前提の説明、業界の背景、用語の定義。丁寧に積み上げてから結論に向かう構成は、パソコンでは通用してもスマートフォンでは途中で切られます。スクロールの途中に、読むのをやめる判断点が何度も訪れるためです。判断点のたびに、一定の割合が離れていきます。

直し方は単純で、記事の冒頭で結論に触れることです。この記事で何が分かるのかを、最初の200字以内に置きます。詳しい説明や背景は、その後にいくらでも書けます。結論を先に示しても、読者は詳細を求めて読み進めます。

見出しにも結論を入れます。「〜の3つの原因」より「〜は項目数が原因」のほうが、目次を眺めただけで内容が伝わります。スクロールしながら拾い読みされる前提に立つと、見出しの書き方は変わります。問いを立てるより、答えを置くほうが伝わります。

節の中でも同じ構造を使います。各節の最初の段落でその節の結論を述べ、続く段落で理由や具体例を示す。この形にすると、途中で読むのをやめた読者も、要点だけは受け取って離脱できます。

記事の冒頭に要点の一覧を置く形も有効です。3項目程度にまとめておけば、それだけ読んで満足する読者にも価値が渡せます。全部読ませることを目的にせず、どこで読み終えても持ち帰るものがある構成を目指してください。

共通点6:本文が始まらない

記事を開いてから、実際の本文にたどり着くまでの距離も影響します。ここが遠い記事は、内容を見る前に戻られます。読者は最初の画面で、このページに用があるかどうかを判断しています。

要素を積み上げると、この距離は簡単に伸びます。大きなアイキャッチ画像、パンくずリスト、公開日と更新日、著者情報、長い目次、関連記事の案内、SNSの共有ボタン。1つずつは小さくても、積み重なると画面2つ分を占領します

特に目次は注意が必要です。見出しが16個ある記事の目次は、それだけで縦に長く伸びます。スマートフォンでは目次を折りたたみ、開きたい人だけが開ける形にするのが現実的です。目次を消す必要はなく、初期状態を閉じておくだけで足ります。

画像の高さも見直します。横長の画像は幅に合わせて縮むため問題になりませんが、縦長の画像は画面を占領します。記事の冒頭に縦長の画像を置くのは避けてください。図を縦に長く作る癖がある場合は、横並びに組み替えられないかを検討します。

広告や案内の差し込みも、位置によっては同じ問題を起こします。本文が始まる前に何かを挟むと、その分だけ本題が遠のきます。差し込むなら、読者が内容に納得した後の位置が適しています。

確認は簡単です。記事を開いた最初の画面に、本文の1行目が入っているか。入っていなければ、その手前にある要素のどれかを削るか、折りたたむ対象にしてください。

検索エンジンもスマホ基準で見ている

読者側の話に加えて、検索エンジン側の状況も押さえておきます。ここは施策の優先度を社内で説明するときの材料になります。

Googleは、サイトの評価にスマートフォン用のページを使うモバイルファーストインデックスへの切り替えを段階的に進め、2023年11月に全サイトでの移行完了を公表しています。順位を決める材料は、パソコン版ではなくスマートフォン版のページから取られています

確認の手段も変わりました。かつて広く使われていたモバイルフレンドリーテストの単体ツールは2023年12月に提供が終了しており、現在はサーチコンソールなどで確認する形になっています。ツールが見つからないことを、対応が不要になった合図と取り違えないでください

実務上の意味は明確です。スマートフォンで表示されない情報や、読み込まれない要素は、評価の対象から外れる可能性があります。パソコン版にだけ詳しい説明を置き、スマートフォン版では省略しているような作りは、その省略した分の評価を捨てていることになります

表示速度の影響も、通信環境が不安定なスマートフォンでより大きく出ます。画像の重さ、外部から読み込むスクリプトの数。機能を足すたびに遅くなる性質があるため、定期的に測る項目として持っておいてください。

ただし、検索エンジンのために書くという発想には注意が要ります。読みやすさを整えた結果として評価が付いてくる、という順序を崩さないでください。順序を逆にすると、人が読めない記事ができあがります。

書くときの数値目安

執筆の段階で意識する数値をまとめます。感覚ではなく数字で持っておくと、書き手が変わっても品質が揃います。特に複数人で執筆している場合や、外部に依頼している場合に効果があります。

要素目安外れたときに起きること
1段落3文まで・全角150字前後縦に伸びて読む前に飛ばされる
見出し全角20字前後3行に折り返して機能しなくなる
表の列数3〜4列文字が縮んで判読できない
図の中の文字本文と同等以上の大きさ縮小されて読めなくなる
冒頭から結論まで200字以内前置きの途中で離脱される
1記事の見出し数15前後・目次は折りたたむ目次だけで画面が埋まる

この表は、絶対の基準ではなく出発点です。自社の記事で試し、離脱の変化を見ながら調整してください。数字を持っていること自体に、書き手の判断を速くする効果があります。迷う時間が減るぶん、内容を考える時間が増えます。

外部のライターに依頼している場合も、この表を渡すだけで納品物の粒度が揃います。修正の指示を毎回文章で書くより、数値の基準を1枚渡すほうが早く伝わります。差し戻しの回数が減れば、双方の負担が下がります。

なお、この目安は読み物としての記事を想定しています。仕様の一覧や用語集のように、参照されることが目的のページでは基準が変わります。読み方が違うページに同じ基準を当てないでください。

公開前の確認手順

執筆が終わってから公開するまでに挟む工程を決めます。慣れれば5分で終わる作業で、後からの手戻りを大きく減らせます。

STEP1
下書きをスマートフォンで開く

プレビューを自分のスマートフォンで表示します。パソコンの画面幅を縮めるだけでは、実機の見え方や指の操作感とはずれます。

STEP2
親指だけでスクロールして読む

拡大せずに最後まで読みます。拡大したくなった箇所、スクロールが止まらず不安になった箇所が、直すべき場所です。

STEP3
段落と見出しの長さを確認する

画面の高さを超える段落と、3行になっている見出しを探します。見つけたら分割か短縮で対応します。

STEP4
表と図を単体で確認する

表の文字が読めるか、図の中の文字が判読できるかを個別に見ます。読めなければ、列を減らすか図を作り直します。

STEP5
冒頭200字で結論に触れているか見る

最初の画面に、この記事で何が分かるかが書かれているかを確認します。書かれていなければ、リード文を足します。

この5工程を公開前のチェックリストに入れてしまうのが、最も確実な定着方法です。担当者の意識に頼る改善は、担当が変わった時点で元に戻ります。手順として書き残すことに意味があります。

確認する端末は1台に決めておくと、判断がぶれません。画面の小さい機種を基準にすれば、大きい機種では自然に読みやすくなります。複数人で確認する場合も、基準の端末を揃えておいてください。

記録として、確認時の画面を撮っておくと後で役立ちます。直す前と直した後を並べれば、社内で効果を説明する材料になります。数字より説得力があるのは、実際の画面です。

既存記事を直す優先順位

公開済みの記事をどこから直すかを決めます。すべてを直そうとすると、着手できないまま計画だけが残ります。範囲を区切ることが、この作業を完了させる唯一の方法です。

  • スマートフォンからの流入が多い順に上位20本だけを対象にする
  • その中でも、検索順位が付いている記事を先に直す(流入が確定しているため)
  • 1本あたりの作業は30分を上限にし、段落分割と見出し短縮だけで終える
  • 表と図の作り直しは別作業として切り出し、後日まとめて処理する

この4つの区切りで進めると、20本でも数日で終わります。完璧に直すことより、多くの記事を及第点に引き上げるほうが全体の効果は大きくなります。1本に時間をかけすぎないことが、結果的に成果を大きくします。

直した記事は記録に残してください。直した前後で離脱の数字がどう動いたかが分かれば、次の記事の書き方に反映できます。効果が確認できれば、社内で継続の合意も得やすくなります。

なお、記事の内容そのものが古い場合は、体裁を整える前に内容の更新を優先します。読みやすくなった古い情報は、読者にとって価値がありません。体裁の改善は、内容が現役である記事に対して行う作業です。

直す対象から外す判断も必要です。流入がほとんどない記事、役割を終えた告知記事、更新予定のない過去の情報。これらは体裁を直すより、統合や削除を検討するほうが適切です

生成AIに任せられる整形

段落の分割や見出しの短縮は、判断の要らない作業が多く含まれます。ここは生成AIに任せられる領域です。人が時間をかける価値が低く、機械的に処理できる部分から渡していきます。

任せられるのは、形の調整です。長い段落を分ける、見出しを短くする、表の列を減らす案を出す。いずれも元の意味を保ったまま形を変える作業です。指示の条件を明確にすれば、出力の品質は安定します。

以下の記事本文を、スマートフォンで読みやすい形に整えてください。
条件:
・1段落は3文まで、全角150字前後に収める
・見出しは全角20字前後に短縮する(意味は変えない)
・事実、数値、固有名詞は一切変更しない
・削除ではなく分割で対応し、情報量は減らさない
変更した箇所を一覧で示してください。

【本文】
{記事本文を貼る}

任せてはいけないのは、内容の判断です。どの情報を削るか、どこを結論とするかは、読者と商材を知っている人が決める領域です。ここを渡すと、無難だが要点のない記事になります。

出力はそのまま使わず、必ず人が通して読みます。分割の位置が不自然になっていたり、見出しの短縮で意味が変わっていたりすることがあります。変更箇所を一覧で出させておくと、確認の時間を短縮できます

既存記事をまとめて処理する場合でも、1本ずつ確認する工程は省かないでください。整形は安全な作業に見えますが、公開済みの記事を書き換える行為である点は変わりません。

やりがちな失敗

直す方向を誤ると、読みにくさが別の形で残ります。実際に起きがちな失敗を挙げておきます。

  • 1文ごとに段落を分け、話の流れが途切れて断片的な印象になっている
  • 見出しを短くしようとして省略しすぎ、何の話か分からなくなっている
  • 表を画像として貼り付け、拡大しないと読めない状態にしている
  • パソコンの画面幅を縮めただけで確認を済ませ、実機で開いていない
  • 文字数を減らすことが目的になり、必要な説明まで削っている

共通しているのは、形式を整えることが目的化している点です。目的は読まれることであり、短くすることではありません。短くした結果として伝わらなくなれば、直す前より悪い状態です。

判断に迷ったら、実際に自分のスマートフォンで読み通してください。最後まで読めたかどうかが、最も確実な合否の基準になります。数値の目安は、この判断を助けるための道具にすぎません。

もう1つ気をつけたいのが、直す作業が目的化することです。体裁を整え続けても、内容が読者の関心とずれていれば読まれません。体裁は入口の問題であり、中身の問題とは分けて扱ってください。

よくある質問

記事の文字数は減らすべきですか

減らす必要はありません。問題になるのは総量ではなく、1段落の長さと結論の位置です。1万字の記事でも、段落が短く結論が先にあれば最後まで読まれます。逆に3千字でも、長い段落が続けば途中で切られます。

パソコン向けとスマートフォン向けで記事を分けるべきですか

分ける必要はありません。同じ内容を1つのページで提供し、表示だけを画面幅に合わせるのが標準的な形です。分けて管理すると更新の手間が倍になり、内容がずれていく原因になります。検索エンジン側もスマートフォン版を評価に使うため、情報を減らした別ページを用意する意味はありません。

目次は入れないほうがよいですか

入れたほうが親切です。ただし、見出しが多い記事では折りたたんでおき、開きたい人だけが開ける形にしてください。目次が画面を占領して本文が始まらない状態が、最も避けたい形です。

既存記事を直すと検索順位に影響しますか

段落の分割や見出しの短縮であれば、内容が変わらないため大きな影響は考えにくいところです。ただし、見出しから重要な語を削ったり、情報そのものを減らしたりすると影響が出ることがあります。直す前後の順位は記録しておいてください。

まとめ

同じ記事でも、端末によって読まれ方は変わります。まずはアクセス解析で端末別のセッション、滞在、離脱を記事単位に分け、スマートフォンからの流入が多い上位20本を対象に絞ってください。

離脱が集中する記事には共通点があります。1段落が長い、見出しが3行になる、表の列が多い、図の文字が小さい、結論が下にある、本文が始まるまでが遠い。この6つを潰すだけで、体感は大きく変わります。

執筆時の目安は、1段落3文まで、見出しは全角20字前後、表は3〜4列、冒頭200字で結論に触れる、です。公開前に実機で開いて親指だけで読み通す工程を、チェックリストに1行足してください。

検索エンジン側も、2023年11月にモバイルファーストインデックスへの移行を完了しており、評価に使われるのはスマートフォン版のページです。読者のためと検索のため、両方の理由から手を入れる価値があります。まずは上位20本を、手元の端末で開くところから始めてください。

※本記事にはAIが活用されています。編集者が確認・編集し、可能な限り正確で最新の情報を提供するよう努めておりますが、情報の完全性、正確性、最新性、有用性等について保証するものではありません。本記事の内容に基づいて行動を取る場合は、読者ご自身の責任で行っていただくようお願いいたします。

AI×SEOに取り組む前に、社内のAI導入環境から整えませんか?

デボノはアカウント開設・初期設定など「そもそものAI導入」から社内定着まで伴走支援。マーケティング活用など一歩進んだご相談にも対応します。

運営会社:株式会社デボノ

目次