ブログのスマホ表示を公開前に確認する方法|見落としやすい5つの場所

ブログのスマホ表示を公開前に確認する方法|見落としやすい5つの場所

「パソコンで見たときはきれいだったのに、スマホで開いたら文字がびっしりで、読む気が失せた」——ここはAI所長の副業ブログ研究室。今回は、記事を出す前にスマホでの見え方を確かめる手順を、プログラミングの知識がない方向けに整理します。

先に結論です。ブログは書くのがパソコン、読まれるのは多くがスマホ。この当たり前のズレが、そのまま読みにくさになって表に出ます。だから公開の前に、書いた画面とは違う画面で、一度だけ通して見る。これだけでも、読みにくさはかなり減らせます。この記事では「どこを見るか」を5か所、「どうやって見るか」を2通り、順番にお渡しします。

タカシくん(30代・会社員)

タカシくん(30代・会社員)
所長、記事を書き終わったので自分のスマホで開いてみたんです。そうしたら……なんだか別物に見えました。パソコンではちょうどよかったはずなのに、画面が文字で埋まっていて。
AI所長

AI所長
よく気づきましたね。公開してから気づくというのは、起こりがちなことです。原因ははっきりしていて、書く画面は横に広く、読む画面は縦に細いから。文章の量は同じでも、細い画面では行数がふくらみます。見るべき場所は決まっているので、一つずつ潰していきましょう。

なぜ「パソコンで書いて、スマホで読まれる」のか

検索から記事にたどり着く人の多くは、通勤の電車の中や、休憩中の数分間にスマホで開いているはずです。一方、書く側はキーボードのあるパソコンに向かい、大きな画面で文章を整えます。作る場所と、読まれる場所が違う。これが、ブログでいちばん見落とされやすいズレだと私は考えています。

数字にすると分かりやすいかもしれません。この研究室のブログで、同じ段落の幅と行数を実際に測ってみました。パソコンでは本文の幅が約650ピクセル、スマホ相当の幅では約360ピクセル。半分よりは少し広い、という差です。そして同じ段落が、パソコンで4行、スマホ相当では6行になりました。幅はテーマによって変わりますが、同じ文章でも、細い画面では行数が1.5倍ほどにふくらむ——これが、読む気が失せる正体だと考えています。

【この記事でお伝えすること】
□ 公開前に見る5か所(一文/表/画像/ボタン/見出し)
□ 確かめ方2通り(スマホで開く/パソコンの窓を細くする)
□ 「パソコンのプレビューで見たつもり」で見落とすもの
AI所長

AI所長
ここで大事なのは、直すことより、まず気づくことです。崩れに気づけさえすれば、直し方はあとから調べられます。逆に、気づかないまま記事が増えていくと、あとでまとめて直すはめになります。

公開前に見る5か所|一覧で先に

細かい説明の前に、確認する場所を一覧にします。それぞれ、このあとで一つずつ解説していきます。まずは全体像だけつかんでください。

見る場所 崩れているときのサイン 直し方の方向
① 一文と段落 画面が文字で埋まって、余白がない 一文を短く切る。段落は3行前後で改行する
② 表(テーブル) 表が右にはみ出し、文字が縦に潰れる 横スクロールできる形に置き換える
③ 画像 表示までに時間がかかる/画面をはみ出す 横幅を小さくして保存し直す。形式をWebPにする
④ ボタン・リンク 指で押しにくい/隣を押してしまう 高さを大きめに取り、上下に余白を入れる
⑤ 見出し 見出しだけ拾っても話が分からない 見出しだけで筋が通るように書き直す

※この表は、画面が狭いときは横にスクロールできます。

この5つに共通しているのは、パソコンの広い画面では気づけないという点です。広い画面では、はみ出しも余白のなさも起きません。だからこそ、狭い画面で一度見る、という手順が要るわけです。


① 一文の長さと、段落の切れ方

スマホでいちばん効くのが、ここです。文章の中身を変えなくても、切る位置を変えるだけで読みやすさは変わります。

✓
一文は、途中で息継ぎできる長さに
ひとつの文に、情報を詰め込みすぎないことです。「〜であり、〜のため、〜ということから、〜です」とつながる文は、細い画面では迷子になります。読点で切れそうな場所は、思い切って句点で切ってしまう。それだけで、ぐっと読みやすくなります。
✓
段落は3行くらいで改行する
この研究室のブログで測ると、パソコンで4行の段落が、スマホ相当では6行になりました。書いているときの感覚よりこまめに改行するくらいが、読む側にはちょうどよくなります。
✓
大事なことは、かたまりの先頭に置く
スマホの読者は、段落の1行目だけを拾って先に進むことがあります。結論や大事な一言を段落の最後に置くと、そこまでたどり着いてもらえないことがあります。
フクさん(50代・定年後)

フクさん(50代・定年後)
なるほど。私は長い文を書く癖がありましてね。「読点でつなげば丁寧になる」と思っていましたが、逆だったのですね。
AI所長

AI所長
丁寧さと、読みやすさは別ものなんです。細い画面では短く切ったほうが、かえって親切になります。コツは、書き終えたあとに声に出して読んでみること。息が続かない文は、たいてい長すぎます。

② 表が、画面からはみ出していないか

表(テーブル)は、スマホでいちばん壊れやすい部品です。比較表を作ると記事は分かりやすくなりますが、そのまま置くと、細い画面では列が潰れて読めなくなります。文字が1文字ずつ縦に並んでしまったり、右端が切れて見えなくなったりします。

この研究室の決まりごと
表は「横にスクロールできる形」で置く——これを共通のルールにしています。列を無理に画面幅へ押し込むのではなく、表そのものは幅を保ったまま、指で横に滑らせて見てもらう考え方です。ちょうど、この記事の一覧表と同じ形です。実際に指で左右に動かしてみてください。

使っているテーマによっては、設定を入れるだけで横スクロールになるものもあります。まずは自分のテーマに「テーブル(表)をスクロールさせる」設定がないかを探してみてください。見つからないときは、表を作るブロックの設定に「モバイルでスクロール」といった項目がないかを確認します。

✓
列は、増やしすぎない
横スクロールできるようにしても、列が7つも8つもあると読む側は疲れます。スマホで読まれる前提なら、列は3つまでを目安にすると収まりがよくなります。どうしても比べたい項目が多いときは、表を2つに分けるほうが親切です。
✓
左の1列目は、短い言葉にする
横スクロールしても1列目は目印になります。ここが長い文章だと、行の高さが伸びて表が読みにくくなります。
タカシくん(30代・会社員)

タカシくん(30代・会社員)
比較表、つい張り切って列を増やしていました……。パソコンだときれいに並ぶので、まったく気づいていませんでした。

③ 画像が、重すぎないか

画像は、記事の中でいちばん「重い」部品です。電波の弱い場所や、外出先の回線では、画像の読み込みに時間がかかります。待っている間に離脱されてしまえば、せっかく書いた本文は読まれません。スマホの読者は、待ってくれる時間が短いと考えておくのが安全です。

✓
横幅を、大きすぎない大きさにしてから入れる
カメラで撮った写真や、生成した画像をそのまま入れると、横幅が数千ピクセルあることがあります。ブログで使うぶんには、横1,200ピクセル前後まで小さくしてから入れれば足ります。
✓
保存の形式を「WebP」にする
見た目をあまり落とさずに、ファイルの大きさを小さくできる形式です。画像を作るツールの保存設定で選べることが多いので、迷ったらここを見直してみてください。
✓
画像の中の文字は、大きめに
パソコンで作った画像に細かい文字を入れると、スマホでは読めません。画像の中の文字は、作っているときに「大きすぎるかな」と感じるくらいがちょうどよくなります。

画像そのものの作り方、無料で用意する方法、著作権で気をつけることは、AIでブログのアイキャッチ・画像を無料で作る方法にまとめています。ここでは「重さ」と「文字の大きさ」だけ意識していただければ十分です。


④ ボタンやリンクが、指で押せる大きさか

パソコンはマウスのカーソルで、狙った1点を正確に押せます。ところがスマホは指です。指の腹はカーソルよりずっと太く、細いリンクや小さいボタンは、そもそも狙えません。押したつもりが隣に飛んでしまえば、読者はそこで離れていきます。

✓
ボタンは、縦の高さをしっかり取る
目安は高さ44ピクセル以上(スマホ向けの画面設計でよく使われる目安です)。数字を覚える必要はありません。スマホで見たときに「親指で押せそうか」を、実際に押してみて確かめれば十分です。
✓
リンクを、続けて並べない
文中のリンクが2つ続いたり、行をまたいで並んだりすると、押し間違いが起きます。間に文章をはさむか、行を分けて置きましょう。
✓
画面に居座るボタンに気をつける
テーマによっては、画面の下に固定されて動かないボタンやメニューが出ます。パソコンでは気になりませんが、狭い画面では本文を隠してしまうことがあります。
AI所長

AI所長
④の指での押しやすさと、③の画像が出てくるまでの待ち時間——この2つは、パソコンの窓を細くしても再現できません。スマホを手に持って、実際に指で押し、実際の回線で開いて確かめてください。

⑤ 見出しだけ読んで、話が分かるか

スマホの読者は、指でスーッと画面を送りながら、見出しと太字だけを拾って進むことがよくあります。だから、見出しだけを上から拾い読みして、話の筋が通るか——ここを公開前に一度確かめておくと、読まれ方が変わります。

確かめ方はかんたんです。記事の目次だけを上から順に読んでみてください。「①〜について」「②〜の話」のように中身の分からない見出しが並んでいたら、書き直しの合図です。見出しは、その章のいちばん言いたいことをそのまま書く——これだけで、流し読みでも伝わります。

見出しの作り方や、検索から読まれる記事の考え方は、ブログSEOの基本|AIで“検索から読まれる記事”にする初心者向けの考え方で扱っています。あわせて読むと、見出しを直す方向が見えてきます。


確かめ方は2通り|スマホで開く/パソコンの窓を細くする

見る場所が分かったところで、「どうやって見るか」です。方法は大きく2つあります。両方やるのが理想ですが、どちらか一つなら方法①を選んでください。

方法① スマホで、実際に開く(いちばん確実)

回りくどく見えますが、これがいちばん確実です。手順は次のとおりです。

① スマホのブラウザで、自分のブログの管理画面にログインしておく(下書きは、ログインしていない状態では表示されません。ここを飛ばすと、リンクを開いても記事が出てきません)
② パソコンの編集画面で「プレビュー(表示)」を押し、「新しいタブでプレビュー」を選ぶ(開いた新しいタブの、アドレス欄に出ているURLをコピーします)
③ そのURLを、自分あてに送る(メールやメッセージアプリで自分に送るのが手軽です)
④ 送られてきたリンクは、タップせずに長押しして「リンクをコピー」。①でログインしたブラウザ(SafariやChromeなど)を自分で開き、アドレス欄に貼り付けて開きます
⑤ 上から下まで、読者のつもりで通して読む(拾い読みもしてみる)
⑥ 気になった場所をメモして、パソコンで直す
※②のボタンの呼び名は、お使いのWordPressやテーマによって変わることがあります。「プレビュー」「表示」など、近い名前のものを探してください。
【近道】②〜④を丸ごと省く方法
①でスマホの管理画面にログインできているなら、そのままスマホの管理画面から記事を開いて、プレビューを押すだけで済みます。この場合、②〜④は要りません。パソコン側で書きながら送りたいときだけ、②から順に進めてください。

④で「タップせずに長押しして貼り付ける」という回りくどいことをするのには、理由があります。メールやメッセージアプリの中でリンクをそのままタップすると、アプリによってはそのアプリ専用の簡易ブラウザが開きます。これは①でログインしたブラウザとは別扱いになるため、ログイン状態が引き継がれず、下書きが出てきません。「同じブラウザで開く」というのは、この違いのことです。

スマホで下書きが開けないときは、①のログインができていないか、④でアプリの中のブラウザを開いてしまっているか——まずはこの2つを疑ってみてください。

ポイントは、⑤で「直すつもり」ではなく「読むつもり」で見ることです。直す目で見ると細かい装飾ばかりが気になり、肝心の「文字が詰まって読みにくい」といった大きな問題を見落としがちになります。

すでに公開している記事なら、もっとかんたんです。スマホのブラウザで自分のブログを開き、気になる記事を読むだけ。週に一度、この時間を取るだけでも、直すべき場所は次々に見つかります。

方法② パソコンのブラウザで、窓を細くする

パソコンだけで手早く確かめたいときの方法です。ブラウザの窓の右端を、マウスでつまんで左へ引っ張り、これ以上細くできないところまで狭めます。目安は横400ピクセル前後。なお、ブラウザによっては一定の幅より細くならないので、そこまで縮まないこともあります。幅の数字が分からなくても大丈夫です。細さが足りているかどうかの見分け方は、このあとでお伝えします。

ここで大事なのは、「画面の3分の1」といった割合で決めないことです。この研究室のブログで、窓の幅を変えながら同じ段落を測ってみました。

ブラウザの窓の幅 本文の幅 同じ段落の行数
1,920px(全画面) 649px 4行
640px(1,920pxの3分の1) 608px 4行
500px 468px 5行
400px 368px 6行
390px(実機のスマホ相当) 358px 6行

※この表も、画面が狭いときは横にスクロールできます。

1,920ピクセルのモニタで「3分の1」まで狭めても、本文の幅はほとんど変わらず、行数は1行も増えませんでした。これでは、この記事がいちばんの問題として挙げた「文字の詰まり」は再現できません。400ピクセル前後まで細くして、ようやく実機に近づきます。しかも「3分の1」は、モニタの大きさによって455ピクセルにも853ピクセルにもなります。割合で決めても、狙った細さにはなりません。

再現できているかどうかは、本文の段落をひとつ選んで、行数を数えると分かります。全画面のときに何行か、細くしたときに何行か。行数が増えていなければ、まだ細さが足りていません。

手軽なぶん、限界もあります。指で押せるかどうか、実際の通信で画像が待たされるか——このあたりは、細くした窓では分かりません。窓が一定より細くならない場合は、文字の詰まり具合も実機より軽く見えます。「あたりを付けるための方法」と考えて、最後は方法①で確かめるのが安全です。

タカシくん(30代・会社員)

タカシくん(30代・会社員)
窓を細くするだけなら、書きながらでもできそうです。公開前にスマホで一度、というのを習慣にしてみます。

「パソコンのプレビューで見たつもり」が、いちばん危ない

編集画面のプレビューは便利な機能です。ただし、それをパソコンの広い画面で見ているかぎり、狭い画面での崩れは出てきません。「プレビューで確かめたから大丈夫」と思い込んだまま出してしまう——見落としは、ここから起きやすいと考えています。

パソコンのプレビューでは分かりにくいもの
□ 画面に固定されるボタンやメニュー(狭い画面で本文を隠していないか)
□ 記事の下や横に出る欄(関連記事・プロフィールなど。下書きの段階では出ないことがあります)
□ 画像が読み込まれるまでの待ち時間(外出先の回線では変わります)
□ 表が本当に横スクロールするか
□ 実際の指での押しやすさ

プレビューは「文章の流れを確認する道具」、スマホでの実機確認は「読者と同じ体験をする道具」——役割が違うものだと分けて考えると、見落としが減ります。

AI所長

AI所長
起こりやすいのは、パソコンのプレビューでは問題なく見えたのに、スマホで開いたら表がはみ出していたという形です。プレビューは見た目をそのまま映してくれますが、映している画面が広ければ、狭い画面での崩れは起きようがありません。プレビューを見たあと、もう一度狭い画面で見る——ここまでを一つの手順にしておくと、抜けにくくなります。

見やすさの多くは、テーマ選びの段階で決まっている

ここまで「書いたあとの確認」の話をしてきましたが、実はスマホでの見やすさは、テーマ(見た目の着せ替え)でかなりの部分が決まります。スマホ向けの調整がしっかりしているテーマを選んでおけば、一つずつ手で直す場面はぐっと減ります。

テーマの選び方は、初心者向けWordPressテーマの選び方|無料と有料どっち?迷わない3つのポイントにまとめています。これから選ぶ方は、こちらを先に読んでおくと遠回りが減ります。

また、文字の大きさや余白といった土台の設定も、読みやすさに効いてきます。WordPressを入れたばかりの方は、WordPress初期設定これだけ|初心者が最初にやる設定チェックリストを先に済ませておくと、あとから直す手間が減ります。

フクさん(50代・定年後)

フクさん(50代・定年後)
順番が大事なのですね。土台を整えてから書く、書いたら細い画面で見る——覚えておきます。

よくある質問(Q&A)

Q1. スマホを持っていない場合は、どうすればいいですか?

方法②の「パソコンの窓を細くする」で代用します。ただし、先に限界をお伝えします。ブラウザの窓は、実機のスマホほど細くならないことがあります。そのときは、文字の詰まり具合が実機より軽く見えます。表のはみ出しは窓を細くすれば見つかりますが、詰まり具合は割り引いて見てください。

そこで、目で見て詰まっていなくても、実際はもっと詰まっている前提で書いておくのが安全です。一文は短く、段落は3行前後で切る。ボタンは大きめに、リンクは並べない。この2つを書く前のルールにしておけば、確かめきれない部分を安全側に倒せます。

Q2. どのくらいの頻度で確認すればいいですか?

毎回やるのが理想ですが、続かなければ意味がありません。現実的には、新しい形の記事を出すとき——表を入れた、画像を増やした、ボタンを置いた——このタイミングで見るだけでも十分に効きます。同じ型で書き続けている記事は、毎回見なくても大きくは崩れません。

Q3. iPhoneとAndroid、両方で確認すべきでしょうか?

最初のうちは、手元にある1台で十分だと考えています。文字の詰まりや表のはみ出しといった大きな崩れは、どちらの機種でも同じように現れるからです。細かい差が気になってきたら、家族の端末を借りて見せてもらう程度で足ります。

Q4. 直すのに、コードを触る必要はありますか?

多くの場合、必要ありません。文章を切る、段落を分ける、画像を小さくする、ボタンの設定を変える——ここまでは編集画面の操作だけでできます。表の横スクロールだけはテーマの設定に左右されるので、設定が見つからないときは、テーマの名前と「表 スクロール」で検索すると、同じところでつまずいた方の解説が見つかります。

Q5. 過去の記事も、全部さかのぼって直すべきですか?

一度に全部やる必要はありません。まずは読まれている記事から順に直していくのが効率的です。読まれていない記事を先に直しても、直した効果が見えにくく、手だけがかかって続かなくなります。


まとめ:出す前に、狭い画面で一度だけ見る

最後に、この記事のポイントをまとめます。ブックマークして、記事を出す前に上から順に見返してみてください。

□ ① 一文は短く、段落は3行前後で切る
□ ② 表は横スクロールできる形に。列は3つまでが目安
□ ③ 画像は小さくしてから入れる。中の文字は大きめに
□ ④ ボタンは指で押せる大きさ。リンクを並べない
□ ⑤ 見出しだけ拾い読みして、話が通るか
□ 確かめ方=スマホで実際に開く/パソコンの窓を細くする
□ パソコンのプレビューだけで済ませない。狭い画面でもう一度見る

大がかりな作業ではありません。記事を出す前に、狭い画面で一度だけ通して見る。それだけで、読む人の負担はずいぶん軽くなります。書いた人にしか分からない読みにくさを、公開する前に見つけておく——この一手間が、読み続けてもらえる記事とそうでない記事を分けていくのだと、私は考えています。

AI所長

AI所長
完璧を目指す必要はありません。今日は「表がはみ出していないか」だけでも構いません。一つ見つけて、一つ直す。それを繰り返しているうちに、書いている途中から、狭い画面を思い浮かべられるようになります。そうなればこの確認は、ほとんど手間になりません。

▶ これから始める方は、【2026年最新】非エンジニアがAIで副業ブログを始める完全ガイドで全体の流れをつかめます。

▶ 土台づくりがまだの方は、WordPress初期設定これだけ|初心者が最初にやる設定チェックリストと、初心者向けWordPressテーマの選び方|無料と有料どっち?迷わない3つのポイントからどうぞ。

▶ 画像まわりはAIでブログのアイキャッチ・画像を無料で作る方法、記事を読まれる形に整えるならブログSEOの基本|AIで“検索から読まれる記事”にする初心者向けの考え方が役に立ちます。


【免責】本記事は情報提供を目的とした一般的な整理です。WordPressやテーマ、各種ツールの仕様・設定項目の名称は更新により変わることがあります。実際の設定は、お使いのテーマやサービスの公式情報をご確認のうえ、ご自身の責任でお願いいたします。本記事は特定の成果を保証するものではありません。