「パソコンで見たときはきれいだったのに、スマホで開いたら文字がびっしりで、読む気が失せた」——ここはAI所長の副業ブログ研究室。今回は、記事を出す前にスマホでの見え方を確かめる手順を、プログラミングの知識がない方向けに整理します。
先に結論です。ブログは書くのがパソコン、読まれるのは多くがスマホ。この当たり前のズレが、そのまま読みにくさになって表に出ます。だから公開の前に、書いた画面とは違う画面で、一度だけ通して見る。これだけでも、読みにくさはかなり減らせます。この記事では「どこを見るか」を5か所、「どうやって見るか」を2通り、順番にお渡しします。
なぜ「パソコンで書いて、スマホで読まれる」のか
検索から記事にたどり着く人の多くは、通勤の電車の中や、休憩中の数分間にスマホで開いているはずです。一方、書く側はキーボードのあるパソコンに向かい、大きな画面で文章を整えます。作る場所と、読まれる場所が違う。これが、ブログでいちばん見落とされやすいズレだと私は考えています。
数字にすると分かりやすいかもしれません。この研究室のブログで、同じ段落の幅と行数を実際に測ってみました。パソコンでは本文の幅が約650ピクセル、スマホ相当の幅では約360ピクセル。半分よりは少し広い、という差です。そして同じ段落が、パソコンで4行、スマホ相当では6行になりました。幅はテーマによって変わりますが、同じ文章でも、細い画面では行数が1.5倍ほどにふくらむ——これが、読む気が失せる正体だと考えています。
□ 公開前に見る5か所(一文/表/画像/ボタン/見出し)
□ 確かめ方2通り(スマホで開く/パソコンの窓を細くする)
□ 「パソコンのプレビューで見たつもり」で見落とすもの
公開前に見る5か所|一覧で先に
細かい説明の前に、確認する場所を一覧にします。それぞれ、このあとで一つずつ解説していきます。まずは全体像だけつかんでください。
※この表は、画面が狭いときは横にスクロールできます。
この5つに共通しているのは、パソコンの広い画面では気づけないという点です。広い画面では、はみ出しも余白のなさも起きません。だからこそ、狭い画面で一度見る、という手順が要るわけです。
① 一文の長さと、段落の切れ方
スマホでいちばん効くのが、ここです。文章の中身を変えなくても、切る位置を変えるだけで読みやすさは変わります。
② 表が、画面からはみ出していないか
表(テーブル)は、スマホでいちばん壊れやすい部品です。比較表を作ると記事は分かりやすくなりますが、そのまま置くと、細い画面では列が潰れて読めなくなります。文字が1文字ずつ縦に並んでしまったり、右端が切れて見えなくなったりします。
表は「横にスクロールできる形」で置く——これを共通のルールにしています。列を無理に画面幅へ押し込むのではなく、表そのものは幅を保ったまま、指で横に滑らせて見てもらう考え方です。ちょうど、この記事の一覧表と同じ形です。実際に指で左右に動かしてみてください。
使っているテーマによっては、設定を入れるだけで横スクロールになるものもあります。まずは自分のテーマに「テーブル(表)をスクロールさせる」設定がないかを探してみてください。見つからないときは、表を作るブロックの設定に「モバイルでスクロール」といった項目がないかを確認します。
③ 画像が、重すぎないか
画像は、記事の中でいちばん「重い」部品です。電波の弱い場所や、外出先の回線では、画像の読み込みに時間がかかります。待っている間に離脱されてしまえば、せっかく書いた本文は読まれません。スマホの読者は、待ってくれる時間が短いと考えておくのが安全です。
画像そのものの作り方、無料で用意する方法、著作権で気をつけることは、AIでブログのアイキャッチ・画像を無料で作る方法にまとめています。ここでは「重さ」と「文字の大きさ」だけ意識していただければ十分です。
④ ボタンやリンクが、指で押せる大きさか
パソコンはマウスのカーソルで、狙った1点を正確に押せます。ところがスマホは指です。指の腹はカーソルよりずっと太く、細いリンクや小さいボタンは、そもそも狙えません。押したつもりが隣に飛んでしまえば、読者はそこで離れていきます。
⑤ 見出しだけ読んで、話が分かるか
スマホの読者は、指でスーッと画面を送りながら、見出しと太字だけを拾って進むことがよくあります。だから、見出しだけを上から拾い読みして、話の筋が通るか——ここを公開前に一度確かめておくと、読まれ方が変わります。
確かめ方はかんたんです。記事の目次だけを上から順に読んでみてください。「①〜について」「②〜の話」のように中身の分からない見出しが並んでいたら、書き直しの合図です。見出しは、その章のいちばん言いたいことをそのまま書く——これだけで、流し読みでも伝わります。
見出しの作り方や、検索から読まれる記事の考え方は、ブログSEOの基本|AIで“検索から読まれる記事”にする初心者向けの考え方で扱っています。あわせて読むと、見出しを直す方向が見えてきます。
確かめ方は2通り|スマホで開く/パソコンの窓を細くする
見る場所が分かったところで、「どうやって見るか」です。方法は大きく2つあります。両方やるのが理想ですが、どちらか一つなら方法①を選んでください。
方法① スマホで、実際に開く(いちばん確実)
回りくどく見えますが、これがいちばん確実です。手順は次のとおりです。
② パソコンの編集画面で「プレビュー(表示)」を押し、「新しいタブでプレビュー」を選ぶ(開いた新しいタブの、アドレス欄に出ているURLをコピーします)
③ そのURLを、自分あてに送る(メールやメッセージアプリで自分に送るのが手軽です)
④ 送られてきたリンクは、タップせずに長押しして「リンクをコピー」。①でログインしたブラウザ(SafariやChromeなど)を自分で開き、アドレス欄に貼り付けて開きます
⑤ 上から下まで、読者のつもりで通して読む(拾い読みもしてみる)
⑥ 気になった場所をメモして、パソコンで直す
※②のボタンの呼び名は、お使いのWordPressやテーマによって変わることがあります。「プレビュー」「表示」など、近い名前のものを探してください。
①でスマホの管理画面にログインできているなら、そのままスマホの管理画面から記事を開いて、プレビューを押すだけで済みます。この場合、②〜④は要りません。パソコン側で書きながら送りたいときだけ、②から順に進めてください。
④で「タップせずに長押しして貼り付ける」という回りくどいことをするのには、理由があります。メールやメッセージアプリの中でリンクをそのままタップすると、アプリによってはそのアプリ専用の簡易ブラウザが開きます。これは①でログインしたブラウザとは別扱いになるため、ログイン状態が引き継がれず、下書きが出てきません。「同じブラウザで開く」というのは、この違いのことです。
スマホで下書きが開けないときは、①のログインができていないか、④でアプリの中のブラウザを開いてしまっているか——まずはこの2つを疑ってみてください。
ポイントは、⑤で「直すつもり」ではなく「読むつもり」で見ることです。直す目で見ると細かい装飾ばかりが気になり、肝心の「文字が詰まって読みにくい」といった大きな問題を見落としがちになります。
すでに公開している記事なら、もっとかんたんです。スマホのブラウザで自分のブログを開き、気になる記事を読むだけ。週に一度、この時間を取るだけでも、直すべき場所は次々に見つかります。
方法② パソコンのブラウザで、窓を細くする
パソコンだけで手早く確かめたいときの方法です。ブラウザの窓の右端を、マウスでつまんで左へ引っ張り、これ以上細くできないところまで狭めます。目安は横400ピクセル前後。なお、ブラウザによっては一定の幅より細くならないので、そこまで縮まないこともあります。幅の数字が分からなくても大丈夫です。細さが足りているかどうかの見分け方は、このあとでお伝えします。
ここで大事なのは、「画面の3分の1」といった割合で決めないことです。この研究室のブログで、窓の幅を変えながら同じ段落を測ってみました。
※この表も、画面が狭いときは横にスクロールできます。
1,920ピクセルのモニタで「3分の1」まで狭めても、本文の幅はほとんど変わらず、行数は1行も増えませんでした。これでは、この記事がいちばんの問題として挙げた「文字の詰まり」は再現できません。400ピクセル前後まで細くして、ようやく実機に近づきます。しかも「3分の1」は、モニタの大きさによって455ピクセルにも853ピクセルにもなります。割合で決めても、狙った細さにはなりません。
再現できているかどうかは、本文の段落をひとつ選んで、行数を数えると分かります。全画面のときに何行か、細くしたときに何行か。行数が増えていなければ、まだ細さが足りていません。
手軽なぶん、限界もあります。指で押せるかどうか、実際の通信で画像が待たされるか——このあたりは、細くした窓では分かりません。窓が一定より細くならない場合は、文字の詰まり具合も実機より軽く見えます。「あたりを付けるための方法」と考えて、最後は方法①で確かめるのが安全です。
「パソコンのプレビューで見たつもり」が、いちばん危ない
編集画面のプレビューは便利な機能です。ただし、それをパソコンの広い画面で見ているかぎり、狭い画面での崩れは出てきません。「プレビューで確かめたから大丈夫」と思い込んだまま出してしまう——見落としは、ここから起きやすいと考えています。
□ 画面に固定されるボタンやメニュー(狭い画面で本文を隠していないか)
□ 記事の下や横に出る欄(関連記事・プロフィールなど。下書きの段階では出ないことがあります)
□ 画像が読み込まれるまでの待ち時間(外出先の回線では変わります)
□ 表が本当に横スクロールするか
□ 実際の指での押しやすさ
プレビューは「文章の流れを確認する道具」、スマホでの実機確認は「読者と同じ体験をする道具」——役割が違うものだと分けて考えると、見落としが減ります。
見やすさの多くは、テーマ選びの段階で決まっている
ここまで「書いたあとの確認」の話をしてきましたが、実はスマホでの見やすさは、テーマ(見た目の着せ替え)でかなりの部分が決まります。スマホ向けの調整がしっかりしているテーマを選んでおけば、一つずつ手で直す場面はぐっと減ります。
テーマの選び方は、初心者向けWordPressテーマの選び方|無料と有料どっち?迷わない3つのポイントにまとめています。これから選ぶ方は、こちらを先に読んでおくと遠回りが減ります。
また、文字の大きさや余白といった土台の設定も、読みやすさに効いてきます。WordPressを入れたばかりの方は、WordPress初期設定これだけ|初心者が最初にやる設定チェックリストを先に済ませておくと、あとから直す手間が減ります。
よくある質問(Q&A)
Q1. スマホを持っていない場合は、どうすればいいですか?
方法②の「パソコンの窓を細くする」で代用します。ただし、先に限界をお伝えします。ブラウザの窓は、実機のスマホほど細くならないことがあります。そのときは、文字の詰まり具合が実機より軽く見えます。表のはみ出しは窓を細くすれば見つかりますが、詰まり具合は割り引いて見てください。
そこで、目で見て詰まっていなくても、実際はもっと詰まっている前提で書いておくのが安全です。一文は短く、段落は3行前後で切る。ボタンは大きめに、リンクは並べない。この2つを書く前のルールにしておけば、確かめきれない部分を安全側に倒せます。
Q2. どのくらいの頻度で確認すればいいですか?
毎回やるのが理想ですが、続かなければ意味がありません。現実的には、新しい形の記事を出すとき——表を入れた、画像を増やした、ボタンを置いた——このタイミングで見るだけでも十分に効きます。同じ型で書き続けている記事は、毎回見なくても大きくは崩れません。
Q3. iPhoneとAndroid、両方で確認すべきでしょうか?
最初のうちは、手元にある1台で十分だと考えています。文字の詰まりや表のはみ出しといった大きな崩れは、どちらの機種でも同じように現れるからです。細かい差が気になってきたら、家族の端末を借りて見せてもらう程度で足ります。
Q4. 直すのに、コードを触る必要はありますか?
多くの場合、必要ありません。文章を切る、段落を分ける、画像を小さくする、ボタンの設定を変える——ここまでは編集画面の操作だけでできます。表の横スクロールだけはテーマの設定に左右されるので、設定が見つからないときは、テーマの名前と「表 スクロール」で検索すると、同じところでつまずいた方の解説が見つかります。
Q5. 過去の記事も、全部さかのぼって直すべきですか?
一度に全部やる必要はありません。まずは読まれている記事から順に直していくのが効率的です。読まれていない記事を先に直しても、直した効果が見えにくく、手だけがかかって続かなくなります。
まとめ:出す前に、狭い画面で一度だけ見る
最後に、この記事のポイントをまとめます。ブックマークして、記事を出す前に上から順に見返してみてください。
□ ② 表は横スクロールできる形に。列は3つまでが目安
□ ③ 画像は小さくしてから入れる。中の文字は大きめに
□ ④ ボタンは指で押せる大きさ。リンクを並べない
□ ⑤ 見出しだけ拾い読みして、話が通るか
□ 確かめ方=スマホで実際に開く/パソコンの窓を細くする
□ パソコンのプレビューだけで済ませない。狭い画面でもう一度見る
大がかりな作業ではありません。記事を出す前に、狭い画面で一度だけ通して見る。それだけで、読む人の負担はずいぶん軽くなります。書いた人にしか分からない読みにくさを、公開する前に見つけておく——この一手間が、読み続けてもらえる記事とそうでない記事を分けていくのだと、私は考えています。
▶ これから始める方は、【2026年最新】非エンジニアがAIで副業ブログを始める完全ガイドで全体の流れをつかめます。
▶ 土台づくりがまだの方は、WordPress初期設定これだけ|初心者が最初にやる設定チェックリストと、初心者向けWordPressテーマの選び方|無料と有料どっち?迷わない3つのポイントからどうぞ。
▶ 画像まわりはAIでブログのアイキャッチ・画像を無料で作る方法、記事を読まれる形に整えるならブログSEOの基本|AIで“検索から読まれる記事”にする初心者向けの考え方が役に立ちます。
【免責】本記事は情報提供を目的とした一般的な整理です。WordPressやテーマ、各種ツールの仕様・設定項目の名称は更新により変わることがあります。実際の設定は、お使いのテーマやサービスの公式情報をご確認のうえ、ご自身の責任でお願いいたします。本記事は特定の成果を保証するものではありません。