読者の大半がスマホだと分かって、書き方を変えた

• 書く環境と、読まれる環境が違っていた
• 画面の幅が変わると、読みやすさの条件も変わる
• 1画面に入る量を基準にする

記録を見ると、読者の大半がスマホだった。パソコンで書いてパソコンで確認していたので、実際の見え方を知らなかった。

気づいたきっかけ

自分のスマホで記事を開いて驚いた。

• 1段落が、画面の半分以上を占める
• 表が横にはみ出す
• 見出しまでの距離が遠い

3つ目が離脱の原因だった。パソコンでは短く見える冒頭が、スマホでは1画面を超えていた。

段落の長さ

まず、1段落の長さを見直した。

• パソコンで3行の段落が、スマホでは7〜8行
• 2〜3文で切るようにした
• 長くなったら、段落を分ける

2つ目を基準にしている。文の数で決めると、画面幅に左右されない。

見出しの間隔

見出しの数も増やした。

• 見出しの間が長いと、現在地が分からない
• スマホでは、1画面に見出しが入らないことがある
• 300〜400字ごとに見出しを置く

3つ目を目安にしている。スクロールしていて、見出しが定期的に現れる状態にする。

表の扱い

表は、スマホで最も崩れやすい。

• 4列までに収める
• 横にスクロールできるようにする
• 列が多いなら、箇条書きに変える

3つ目の判断をするようになった。読めない表より、読める箇条書きのほうがよい。

箇条書きの使い方

箇条書きは、スマホで読みやすい。

• 1項目は1行に収める
• 長くなるなら、太字で要点を先に出す
• 3〜5項目にする

2つ目が効く。折り返しても、最初の数文字で内容が分かる。

確認の仕方を変えた

書いた後の確認を、スマホで行うようにした。

• 公開前に、スマホの幅で見る
• 実際のスマホでも開く
• 1画面に何が入るか確認する

3つ目が基準になる。1画面に本文が入らない冒頭は、長すぎる。

画像の扱い

画像も、スマホでの見え方を考えた。

• 横に広い図は、縮んで読めない
• 文字が入る図は、特に厳しい
• 縦に長い形にするか、表に置き換える

3つ目の判断が増えた。スマホで読めない図は、無いほうがよい。

読み込みの速さ

スマホは、回線が遅いことがある。

• 画像の容量を抑える
• 最初に見える部分だけ、先に読み込む
• 遅い条件で測って確認する

3つ目が重要だ。手元の回線が速いと、何をしても速く見える。

書く環境は変えない

確認はスマホでするが、書くのはパソコンのままだ。

• 打つ速さが違う
• 全体を見ながら書ける
• 確認だけスマホでやれば足りる

3つ目が結論だった。書く環境と、確認する環境を分ける。

目次の見え方

スマホでは、目次の扱いも変えた。

• 項目が多いと、目次だけで1画面を超える
• 折りたたんで、押したら開く形にする
• 本文に早く入れるようにする

2つ目にしてから、冒頭の離脱が減った。目次は構成を示す役割があるが、長いと本題までの距離が遠くなる。必要な人だけ開ける形にすれば、両方を満たせる。パソコンでは横に出しているので、折りたたむのはスマホだけにしている。

文字の大きさ

読みやすさの基本として、文字の大きさも見直した。

• 16px未満だと、入力時に画面が拡大される
• 本文は15〜16pxを基準にする
• 行の間隔は、広めに取る

3つ目が効く。行が詰まっていると、どこを読んでいるか見失う。パソコンでは気にならない差が、スマホでは読みやすさを左右した。

変えた後

段落と見出しを調整した後、数字が動いた。

• 最後まで到達する割合が上がった
• 滞在時間が伸びた
• 冒頭での離脱が減った

3つ目が狙いだった。読まれない理由が、内容ではなく形にあった。

まとめ

• 書く環境と、読まれる環境が違っていた
• 段落は2〜3文で切る。文の数で決めると幅に左右されない
• 300〜400字ごとに見出しを置く
• 表は4列まで。多いなら箇条書きに変える
• 確認はスマホで。書くのはパソコンのままでよい