スマホで見ると文字が小さい…パソコンでは普通なのに起きる原因と確かめ方

ご自身のホームページを、パソコンとスマートフォンの両方で開いてみたとき、「パソコンでは普通に読めるのに、スマホだと文字がやけに小さい」と感じたことはないでしょうか。指で広げないと読めない、横にはみ出してしまう、ボタンが押しにくい。こうした状態は、見た目の問題だけでなく、せっかく訪れてくださった方がそのまま離れてしまう理由にもなります。

ただ、これはホームページを作られた方の手抜きでも、管理が悪いせいでもありません。ホームページが作られた時期や、使われている仕組みによって自然に起きることで、むしろよくあることです。もったいないのは、原因がわからないまま放置されてしまうこと。この記事では、考えられる原因を4つに絞り、それぞれ「ご自身で確かめる方法」まで順番にご説明します。専門用語は、そのつど普通の言葉に言い換えてお伝えします。

まず結論：スマホで文字が小さくなる原因は、ほぼこの4つ

パソコンで見れば何の問題もないのに、スマートフォンで開いた途端に文字がぎゅっと縮んで読めない。指で広げないと内容が追えない。この症状は、原因がかなり限られています。先に答えを書きます。ほぼ次の4つのどれか、あるいはその組み合わせです。

この4つは、確かめる順番が決まっている

順番としては、1→2→3→4の流れで見ていくのが効率的です。1が原因なら他を調べる必要はありませんし、2であれば3や4を直しても根本は変わりません。上から順に切り分けていけば、途中で必ず答えに行き当たります。この記事では、以降のセクションで1つずつ、どこを見て判断するかを具体的に説明していきます。

スマホでの見え方は、思っている以上に影響が大きい

業種にもよりますが、ホームページを訪れる方の半分以上がスマートフォンから、というお店や会社は珍しくありません。飲食、美容、士業、地域密着の工事業など、「その場で調べて連絡する」性質の商売ほどその傾向が強くなります。つまり、スマホで読みにくい状態は、来てくださった方の大半にとって読みにくい状態ということです。

加えてGoogleは現在、スマートフォン版のページ内容をもとに検索での扱いを決める仕組み（モバイルファーストインデックスと呼ばれます）を採用しています。パソコン版がどれだけ整っていても、評価の軸になるのはスマホで表示されたときの中身です。これを直したから順位が上がる、と言い切れるものではありませんが、スマホで読みづらい状態を放置しておく理由はひとつもありません。

なお、文字の大きさ以外にもスマホでの見え方で確認しておきたい点はいくつかあります。まとめて見直したい場合は自分のスマートフォンでホームページを確認するときの5項目も参考にしてください。せっかく中身の良いページをお持ちなのに、表示の設定ひとつで伝わっていないのは、本当にもったいないことです。

原因1：ページに「スマホ用のサイズ指示」が書かれていない

スマホで文字が小さく見える原因として、いちばん多いのがこれです。ホームページには「この画面の幅に合わせて表示してください」という1行の指示を書いておく決まりがあります。これが無いと、スマホは「パソコン用の広い画面として扱おう」と判断し、ページ全体をそのまま縮小して表示します。結果として、文字だけが小さくなったように見えるわけです。

この症状に当てはまりますか

• スマホで開いた瞬間、ページ全体がパソコン画面をぎゅっと縮めたように見える
• 指で広げないと本文が読めない
• 左右に動かせてしまう（横スクロールが出る）
• パソコンで見るとレイアウトも文字サイズもまったく問題ない

この4つがそろっているなら、デザインの問題ではなく、指示が1行抜けているだけという可能性が高いです。裏を返せば、直し方もいちばんシンプルな部類に入ります。

パソコンで確かめる手順

1. パソコンのChromeで、自社のホームページのトップページを開きます。
2. ページの何もない場所で右クリックし、「ページのソースを表示」を選びます。英語や記号が並んだ画面が別タブで開きますが、読む必要はありません。
3. キーボードで Ctrl と F（Macは Command と F）を同時に押すと、画面の上または右上に小さな検索欄が出ます。そこに viewport と入力します。
4. 1件もヒットしなければ、スマホ用のサイズ指示が書かれていません。これが原因とみてほぼ間違いありません。
5. ヒットした場合は、その行に width=device-width という記載があるかを目で確かめます。無ければ、指示はあるのに正しく効いていない可能性があります。

正しく書かれている場合、次のような1行が見つかります。

<meta name=

原因2：ページ全体がパソコンの幅を前提に作られている

もうひとつ多いのが、ページそのものが「パソコンの広い画面で見ること」を前提に組まれているケースです。専門的には「レスポンシブ非対応」と呼ばれますが、要は画面の幅に合わせて中身が並び替わる作りになっていないということ。横に3つ並んだ写真が、スマホでもそのまま横3つのまま縮むので、文字だけが豆粒のように小さくなります。

2015年前後より前に作られたサイトや、表組み（テーブル）で見た目を整える方法で組まれたサイトに多く見られます。当時はそれが普通の作り方でしたから、作りが古いこと自体は何も悪いことではありません。長く使われてきた証でもあります。

確かめ方1：パソコンの画面の幅を、手で狭めてみる

1. パソコンのブラウザで自社サイトを開きます（画面いっぱいに広げた状態から始めます）。
2. ウィンドウの右端にマウスのカーソルを合わせ、左右の矢印の形に変わったところで、左へドラッグしてどんどん細くしていきます。
3. 幅が狭くなるにつれて、横に並んでいた写真やメニューが縦に積み重なっていけば、スマホ対応済みです。
4. 反対に、全体の形はそのままで中身だけが小さくなる、あるいは画面の下に横方向のスクロールバーが出てくる場合は、幅に合わせて変わらない作りだと判断できます。

確かめ方2：Chromeの「検証ツール」でスマホ幅にする

1. GoogleChromeでサイトを開き、キーボードの「F12」キーを押します（押しても反応しない場合は、ページ上で右クリック→「検証」）。
2. 画面の横または下に、英数字がずらりと並んだ領域が出てきます。驚かなくて大丈夫です、何も壊れていません。
3. その領域の左上あたりに、スマホとタブレットが重なった小さなアイコンがあります。これをクリックします。
4. 左側のページ表示がスマホの細長い形に変わります。上部の「Dimensions」や機種名のプルダウンから、iPhoneなどを選ぶと実機に近い幅で確認できます。
5. ここで文字が小さいまま、横に見切れているようなら、幅に合わせた作りになっていない可能性が高いです。

確かめ方3：Googleの無料ツールで客観的に見る

「PageSpeed Insights」で検索し、出てきたGoogleのページに自社サイトのURLを貼り付けて実行します。結果画面で「モバイル」のタブを選ぶと、スマホで見たときの表示イメージと、改善点の一覧が日本語で出てきます。「文字サイズが小さすぎます」「タップ要素が近すぎます」といった指摘が並んでいれば、スマホで見づらい状態だとGoogle側も認識している、ということになります。実際の見え方は自分のスマートフォンでの確認と合わせて見ると判断しやすくなります。

正直なところ、このケースは部分修正では直りにくい

原因1（サイズ指示の1行がない）は追記で済むことが多いのですが、ページ全体の骨組みがパソコン幅前提の場合、一部を直しても他が崩れる、ということが起こりがちです。多くは作り直しか、WordPressであればテーマ（デザインの土台）の入れ替えが現実的な選択になります。

費用の話に入る前に、判断の分かれ目として次の3点で考えると整理しやすくなります。

• ページ数：10ページ程度なら作り直しの負担は小さく、数十ページ以上なら移行の手間を含めて計画が必要です。
• 更新頻度：今後も情報を足していくなら、更新しやすい土台に変えた方が結果的に楽になります。ほぼ更新しないなら、主要ページだけ別に用意する手もあります。
• 問い合わせ導線：電話やフォームへの入口がスマホで押しづらいなら、優先度は上がります。見た目の問題ではなく、機会の問題だからです。

原因3：文字サイズが固定の数値で指定されている／画面からはみ出す要素がある

ここまでの2つに当てはまらない場合、原因はもう少し細かいところにあります。大きく分けて「文字そのものが小さく指定されている」ケースと、「どこか一か所がはみ出して、ページ全体が横に広がっている」ケースです。見え方は似ていますが、直し方は違うので、分けて確かめます。

①文字サイズが固定の数値で指定されている

ページの文字の大きさは、制作時に「12px」のような数値で決められていることがあります。pxは画面上の点の数を表す単位で、この数値が小さいと、どの端末で見ても小さいままです。かなり前に作られたページでは、HTMLの中に古い書き方（fontタグのsize指定など）が残っていることもあります。

目安として、スマートフォンの本文は16px前後が読みやすいとされ、14pxを下回ると読みづらく感じる方が増えます。あくまで目安で、書体や行間によって印象は変わりますので、絶対の基準ではありません。

確かめ方は2通りあります。

1. スマートフォンでページを開き、腕を自然に伸ばした距離で本文が無理なく読めるか見る。目を近づけないと読めないなら小さすぎます。
2. パソコンのChromeでページを開き、本文の上で右クリック→「検証」を選びます。開いた画面の右側に「Styles」という欄があり、そこに font-size の数値が出ます。ここが12pxや13pxなら、文字指定そのものが小さいと判断できます。

対処としては、本文の文字サイズを16px前後に引き上げる、あるいは画面幅に応じて変わる指定に変えることになります。CSSという見た目を決めるファイルの修正なので、制作を頼んだ先があれば「本文のfont-sizeを16px程度にしてほしい」と伝えるのが早道です。

②はみ出す要素が全体を押し広げている

文字の指定は普通なのに小さく見える場合、ページのどこかに画面幅を超える要素があることが多いです。よくあるのは次のようなものです。

• 横幅の大きい写真や図版を、そのまま貼っている
• 列が5つも6つもある料金表・比較表
• 長いURLをそのまま本文に書いている（途中で折り返されない）
• 地図やカレンダーなどの埋め込み枠

一か所でもはみ出すと、ブラウザはページ全体を横長とみなして縮めて表示します。その結果、関係のない文章まで小さくなります。

確かめ方は簡単で、スマートフォンで各ページを開き、画面を横方向に指でスライドしてみてください。左右に動く（余白が出る）ページがあれば、そこにはみ出す要素があります。上から順にスクロールしながら横スライドを繰り返すと、どのあたりで動くかが絞り込めます。パソコンのChromeで「検証」を開き、左上のスマートフォンのアイコンで表示を切り替えてから、要素を順に選んでいく方法でも場所を特定できます。

対処の方向性は、画像なら「幅は画面の100%まで」という指定を入れる、表なら横スクロールできる枠に入れる、地図は幅が自動で伸び縮みする囲みに入れる、URLは文字リンクにして長い文字列を直書きしない、といった形です。いずれも作り直しではなく部分的な修正で済むことがほとんどです。確認の流れ全体は自分のスマートフォンでホームページを確認するときの5項目もあわせてご覧ください。

自分で確かめた結果を整理して、直す順番を決める

ここまでで、ページの先頭にスマホ用のサイズ指示があるか、横にスクロールしてしまう要素がないか、文字サイズが固定の数値で書かれていないかを確かめてきました。原因が複数重なっていることも珍しくありませんので、一度まとめて書き出してみてください。頭の中だけで整理しようとすると、どこから手をつければよいか見えなくなります。

確認結果をまとめるチェック表

直す順番の考え方

1. スマホ用のサイズ指示がない場合は最優先。影響する範囲がサイト全体と大きい一方、修正そのものは記述を1行加えるだけで済むことが多く、手間と効果の釣り合いが取れています。
2. 次がはみ出す要素。原因になっている画像や表は特定のページに限られることが多く、そこだけ直せば解消する場合があります。
3. 文字サイズの固定は読みやすさに直結します。急ぎではなくても、本文が小さいままだと読む前に離れられてしまうので、早めに手を入れたい部分です。
4. サイト全体が未対応の場合は、計画的に。時間も費用もかかります。慌てて決めず、まず問い合わせにつながる主要なページから整えるという進め方もあります。

直したあとに、何を見ればよいか

修正したら、まずご自身のスマートフォンでの見え方を確認してください。そのうえで、アクセス解析をお使いなら、スマートフォンからの訪問者に絞って、1ページだけ見て離れた割合やページの滞在時間、問い合わせの件数を、修正の前後1か月ずつで比べます。比べる期間の長さをそろえるのがコツです。

ただし、これらの数値は検索結果の順位、季節、広告の有無など外部の要因でも動きます。変化があっても修正だけが理由とは限らず、逆に数値が動かないこともあります。数値は判断材料のひとつとして、落ち着いて眺めてください。

まとめ：原因の切り分けさえできれば、打ち手は見えてくる

ここまで、スマホで見ると文字が小さいのに、パソコンでは普通に見える——この現象が起きる原因を4つに分けて見てきました。最後に、確かめ方とあわせて短く振り返ります。

• 原因1：スマホ用のサイズ指示が書かれていない。ページの裏側にある1行の設定が抜けていると、スマホはパソコン向けの画面をそのまま縮小して表示します。ページのソースに「viewport」という言葉があるかで確認できます。
• 原因2：ページ全体がパソコンの幅を前提に作られている。横幅が数字で固定されていると、スマホの画面に収まりきらず全体が縮みます。パソコンのブラウザの幅を狭めていき、中身が折り返るかどうかで見当がつきます。
• 原因3：文字サイズが固定の数値で指定されている。10pxや11pxといった小さな指定が残っていると、スマホでは読みづらくなります。
• 原因4：画面からはみ出す要素がある。大きな画像や表が1つあるだけで、ページ全体が横に広がり、文字まで小さく見えます。横スクロールが出るかどうかが目印です。

これは、作った側にも見る側にも落ち度のない話

大事なのは、これが誰かのミスで起きているわけではない、ということです。スマホ用の表示設定が当たり前になったのは比較的最近のことで、それ以前に作られたホームページは、当時としてはきちんと作られていたものがほとんどです。時代の方が動いた結果として、今のスマホで見ると小さく見えている。無理もない話ですし、見つけた今が直しどきというだけのことです。

ご自身で確認できるのは、ここまで

この記事の手順で、「どの原因に当てはまりそうか」の見当まではご自身でつけられます。一方で、実際にどこを書き換えるか、ほかのページに影響が出ないかという判断は、ページの作り方によって変わります。制作会社に依頼する場合も、「スマホで小さいので直してください」と伝えるより、「viewportの指定が無さそうです」と伝えられる方が、話が早く進みます。確認の進め方は自分のスマートフォンでホームページを確認するときの5項目もあわせてご覧ください。

「4つのうちどれに当てはまるか判断がつかない」「直したいが、どこから手をつけるべきか迷う」という場合は、シロツメWebの無料SEO診断をご利用ください。現状のスマホでの表示と、検索でどう見えているかを確認したうえで、直す順番をお伝えします。私たちはもともと中古スマートフォン・PCの法人向け買取/販売が本業で、その集客を自社でSEO記事を書いて行ってきました。代行だけを請け負う会社ではなく、自分たちで試した範囲のことをお伝えします。なお、診断の結果として順位や問い合わせ件数をお約束するものではありません。

無料SEO診断のご相談は、お問い合わせフォームからお気軽にどうぞ。

よく読まれている関連ガイド

• robots.txtとは？検索の機械に渡す案内書きをやさしく解説
• 何年か触っていないホームページを、作り直さずに動かし直す手順