10月3日に「初心者ブログを読みやすくしたい！過去記事を見直す5つのポイント！」という記事を書きました。10月25日には目次と見出しの使い方を調べて、少しずつ「読みやすさ」を整えてきています。
今回は、その10/3の記事の続きです。スマホで読みやすくするために、Cocoonの吹き出し・ボックスと、文字の大きさ・行間の設定を公式サイトで調べてみました。実際に設定を変えるのは次回で、今回は「調べて、使い分けを決めた」回です。
「読みやすくしたい」の記事が、検索に出ていた！
毎朝、AI（Claude）が作った仕組みで、サーチコンソールの数字をまとめています。2026年10月29日時点の直近28日分を見ると、10/3の「読みやすくしたい」の記事が検索結果に3回表示されていました。クリックは0回、平均の掲載順位は7.3位です。
数はまだ小さいけれど、同じ悩みで検索している人がいるのかもしれません。そこで、その続きとして、もう一歩具体的な「道具の使い方」を調べることにしました。
スマホで読むと、何が読みにくくなりそう？？
まず、なぜスマホなのか。Googleの公式の説明では、インデックス登録とランキングにスマートフォンでクロールしたモバイル版のページを使うそうです。これを「モバイルファーストインデックス」と呼びます。
Cocoonはレスポンシブ対応で、PCとスマホに同じコードを出すテーマだと公式に書かれています。つまり、PCで書いた記事がそのままスマホの細い画面に流れ込みます。
自分の記事を1本ずつスマホで確かめたわけではありません。ただ、画面の幅が狭いぶん、次のようなことが起きそうだと想定しています。
- 段落が長いと、画面いっぱいが文字だけの「文字の壁」になる
- 同じ見た目の段落が続くと、どこが大事なのか分からなくなる
- 逆に囲みや色を使いすぎると、ごちゃごちゃして読みにくい
吹き出しは「Cocoon設定→吹き出し」で登録するものだった！
このブログでおなじみのデップの吹き出し。Cocoonの公式によると、流れは次のとおりです。
- 管理画面で「Cocoon設定→吹き出し」を選ぶ
- 「新規作成」からタイトルやアイコンなどを入力して登録する
- 記事を書くときに、ブロックエディターの「吹き出し」ブロックで登録した吹き出しを呼び出す
アイコンの画像は正方形で160px〜200px程度が目安だそうです。吹き出しブロックでは、人物の位置を変える、スタイルをフラットやLINE風にする、アイコンを四角にする、といったこともできると説明されています。
吹き出しの作り方の公式ページは2018年のもの。今の画面とボタンの名前や並びが違うかもしれないので、スタイルの細かい名前までは書かないでおきます。
ボックスの種類が多すぎる！？公式の一覧を表にしてみた
Cocoonのブロックの一覧を見ると、文章を囲むボックスだけでもかなりの数がありました。主なものを表にまとめます。右の列は、このブログでの使い方の案です。
| ボックス | 公式で確認できた種類 | このブログでの使い方（案） |
|---|---|---|
| アイコンボックス | インフォメーション・クエスチョン・注意喚起・メモ・コメント・OK・NG・GOOD・BAD・プロフィール | 注意点はメモにそろえる |
| 案内ボックス | プライマリー・セカンダリー・サクセス・インフォ・ワーニング・デンジャー・ライト・ダーク | 今は使わない |
| 白抜きボックス | 灰色・黄色・赤色・青色・緑色 | 今は使わない |
| 付箋風ボックス | 灰色・黄色・赤色・青色・緑色 | 今は使わない |
| タブボックス | 一覧に名前があることを確認 | 記事の最後のまとめ |
| アイコンリスト | 一覧に名前があることを確認 | 「この記事でわかること」 |
種類が多いと、記事ごとに気分で選んでしまいそう…。同じ「注意」でも見た目がバラバラだと読む人が迷うので、使うものを先に絞ることにしました。
文字の大きさと行間は「全体」と「本文」のタブで変えられるらしい
次は、文字そのものの読みやすさです。Cocoonの公式ページで分かったのは、この2か所でした。
| 場所 | 変えられること |
|---|---|
| Cocoon設定→「全体」タブ→「サイトフォント」 | フォントの種類と文字サイズ。PC（横幅の広い端末）とモバイル（横幅の狭い端末）ごとに文字サイズを変えることもできる |
| Cocoon設定→「本文」タブ→「本文余白」 | 「行の高さ」と「行間の余白」（段落の上下のすき間） |
公式には、フォントが小さすぎたり読みにくかったりすると訪問者が離れやすくなり、検索順位が悪くなる可能性も高くなる、と書かれていて、とにかく読みやすいフォントとサイズにすることをすすめていました。行の高さや行間の余白は、数字を小さくすると本文が詰まった固い印象になる、と案内されています。
飾りすぎ注意！Googleの「読みやすさ」の考え方
Cocoonには文字の飾りも多く、「Cocoonインライン」として太字や色の付いた文字、黄・赤・青のマーカー、「重要」「注意」などのバッジ、12px〜48pxのフォントサイズまで、ドロップダウンから選べます。
便利そうですが、全部使うと逆に読みにくくなりそうです。そこでGoogleの「SEOスターターガイド」も読んでみました。役に立つコンテンツの特徴の1つとして「文章が読みやすく、よく整理されている」ことが挙げられていて、長い文章は段落や章に分け、見出しを付けるようにと書かれていました。
一方で、ページごとに「魔法の見出し数や理想的な見出し数」があるわけではない、とも書かれています。飾りを増やすことではなく、読む人が全体を見通せるように区切ることが大事なんだと受け取りました。
「飾る」より「区切る」。これなら、初心者でもすぐ意識できそうです！
デップと決めた、このブログの使い分けルール
調べたことをもとに、このブログで使う飾りを次のように決めました。
- 段落は1〜3文で区切る
- デップの吹き出しは1記事に1〜3個。つまずいたところ・気づいたところだけに置く
- 囲みは、最初の「この記事でわかること」（アイコンリスト）、注意点のメモ（アイコンボックス）、最後のまとめ（タブボックス）に絞る
- 比べるときは表、手順は番号付きリストにする
- 文字の飾りは太字だけ。色やマーカーは使わない
- 文字サイズ・行間は、今の値を画面で確かめてから変える
よくある疑問を、今の私なりにまとめてみた
- Qスマホだけ文字を大きくすることはできる？
- A
公式には、PCとモバイルで文字サイズを変えることもできると書かれていました。ただ、正確な項目名と初期値はまだ確かめられていません。次回、自分の設定画面で確かめます。
今回わかったことと、次にやること
- Googleはスマホ版のページを使って、インデックス登録とランキングをしている
- 吹き出しは「Cocoon設定→吹き出し」で登録し、吹き出しブロックで呼び出す
- ボックスは種類が多いので、使うものを先に絞った
- 文字サイズは「全体」タブ、行の高さ・行間の余白は「本文」タブで変えられる
次にやることはこの3つです。
- Cocoon設定の「全体」「本文」タブを開いて、今の文字サイズ・行の高さ・行間の余白を記録する
- 過去の記事を何本かスマホで開いて、文字の壁になっているところを探す
- 変えるなら1項目ずつ変えて、前と後の見え方を記録する
検索で見つけてくれた人が、最後まで読みやすいと思えるブログにしたいです。次回は実際に設定画面を開いて、数字で記録していきます！
関連する記録：初心者ブログを読みやすくしたい！過去記事を見直す5つのポイント！／記事が長くて迷子になる！？Cocoonの目次機能と見出しの使い方を公式で調べてみた！
コメント