スマホで文字が小さくなる原因とレスポンシブでの直し方

このような悩みを持っている方はとても多いです。

実際に、文字が小さいホームページは、読みにくく離脱されやすくなります。

そこで、この記事では、
スマホで文字が小さくなる理由と、レスポンシブでの直し方を初心者向けにわかりやすく解説します。

スマホで文字が小さくなる原因は決まっていて、ほとんどは簡単な設定で直せるので、ぜひ参考にしてくださいね！

スマホで文字が小さくなる主な原因

まずは、スマホで文字が小さくなる主な原因から見ていきましょう！

原因① フォントサイズがパソコン基準のまま

パソコン向けに小さめの文字サイズを設定していると、スマホではかなり読みにくくなります。

たとえば、

body {
  font-size: 13px;
}

などはスマホには小さすぎます。

原因② viewport設定が入っていない

viewport設定がないと、ページ全体が自動で縮小されて表示されます。

その結果、文字も一気に小さくなってしまいます。

HTMLのhead内には必ず以下を入れましょう。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

原因③ スマホ用CSSが設定されていない

パソコン用のデザインのままでは、スマホ向けに文字サイズが調整されません。

スマホ用CSSの設定をすることが必要です。

原因④ 行間が詰まりすぎている

文字サイズだけでなく、行間もとても大切です。

行間が狭いと、小さく感じてさらに読みにくくなります。

まずはこれで直る基本設定（最重要）

それでは、基本設定をご紹介します。

スマホ用フォントサイズを設定する

次のCSSを追加するだけで、多くのケースが改善します。

@media screen and (max-width: 768px) {
  body {
    font-size: 16px;
  }
}

スマホでは文字サイズは16pxくらいが読みやすい目安です。

行間を見やすくする

文字サイズとあわせて行間も調整しましょう。

line-height: 160%;

これだけで、かなり読みやすくなりますよ。

状況別の直し方パターン

状況別の直し方パターンについて、お伝えします。

全体の文字を大きくしたい場合

bodyにフォントサイズを指定する方法が一番簡単です。

これで、全体の文字が大きくなります。

一部の文字だけ小さい場合

メニューや見出しなど、個別に指定して調整しましょう。

@media screen and (max-width: 768px) {
  .menu {
    font-size: 16px;
  }
}

よくある失敗と注意点

よくある失敗と注意点をご紹介します。
たとえば、次のような注意点です。

読みやすさを優先する方が、結果的にホームページの評価も上がりますよ。

スマホで読みやすくするチェックポイント

調整後は次を確認してください。

やはり、スマホでの表示確認は、実際にスマホでホームページを見ることが一番確実です。

まとめ

「スマホで文字が小さくなる原因とレスポンシブでの直し方」の内容はいかがでしたでしょうか？

スマホで文字が小さくなる原因のほとんどは、

このどれかです。

そこでまずは、

これだけで、ほとんどのサイトは見やすくなりますよ。

スマホは、そもそも画面サイズがとても小さいので、文字のサイズには気をつけていきましょうね。

ちなみに私は、文字サイズは16pxにしていますけど、このくらいのサイズで問題ないと思いますよ！