Web 制作、Web デザインの初心者、現在勉強中の皆さん、こんな悩みがありませんか?
HTMLとCSSを勉強して、やっとPCサイトをコーディングすることができるようになりました。でも、スマホレスポンシブ対応を始めようとすると、スマホ画面はパソコンよりずいぶん小さい為、文字の大きさ、いわゆるスマホレスポンシブ対応のフォントサイズはどのぐらいすれば適切でしょうか?。

近年スマホの普及とともに、スマートフォンレスポンシブ対応の需要性がだんだん上がってきました。 スマホ画面が小さい為、違和感のないスマホ対応のレスポンシブデザインがとても重要であります。 その中、重要ではないと思いがちなフォントサイズですが、実はSEOにも影響を及ぼします。では、今回はスマホデザインに適切なフォントサイズについてご紹介します。

Webを表すアルファベット写真

意外と知らない!?フォントサイズはSEOに影響を及ぼす

意外と知らないかもしれませんが、文字サイズ(いわゆるフォントサイズ、CSSで装飾するときに ”font-size”を使います )はSEOにも影響します。SEO(Search Engine Optimization)とは、検索エンジン最適化のことです。Googleが不定期的にサイトをチェックしています。文字のサイズが適切でないことも、Googleが該当サイトを” モバイルフレンドリーではないサイト” と判断され検索順位が下がることに繋がる一つの要因です。

SEO(Search Engine Optimization)/検索エンジン最適化

可読性(読みやすさ)とフォントサイズの関係性・重要性

SEO対策のためにも、可読性はとても重要であります。可読性とは、文字の読みやすさのことを意味します。どんなにWeb制作をうまくできても、素敵なWebデザインをしても、文字が読みづらくコンテンツが正しく伝わらなければ台無しです。ユーザー(いわゆるターゲットグループ)に読んでもらうことが一番大事です。閲覧するユーザーにとって文字のサイズが小さくて読みづらい場合、サイトから離脱し、当然その結果、該当スマホサイトのクリック率も下がります。

フォントサイズの単位、よく使うフォントサイズのメリットとデメリット

先ほど、読みやすさとフォントサイズの関係性・重要性についてご紹介しました。次は、フォントサイズの単位、よく使うフォントサイズ単位のメリットとデメリットについてご紹介します。

サイズ・単位を表す”ものさし・リンゴの写真

では早速, 初心者にとって使いやすいフォントサイズの単位 “px(ピクセル)” と “%(パーセント)” の特徴を表にしました。

表: フォントサイズ単位 px(ピクセル)と %(パーセント)のメリットとデメリット

font-size 単位表示

 

px (ピクセル)

絶対的な固定値を指定することができます。

% (パーセント)

相対的な変動値を指定する単位です。

CSS実装の例例えば、CSS実装でbody { font-size: 16px; } と指定すれば、他に特別な指定がない限りbodyのサイズは基本的には16pxで変わりません。指定したい要素は親要素に対して、パーセンテージで表示することができます。例えば、親要素h1(見出し1)のフォントサイズは20pxで、その子要素段落(段落コンテンツテキスト)のフォントサイズを16pxにする場合、p{ font-size: 80% ; }と指定します。
メリット
  • 初心者にとって分かりやすく使いやすい;
  • font-sizeを細かく調整しやすい;
  • 違うデバイスでも崩れにくい;
  • スマホレスポンシブ対応に向いている;
デメリット
  • その反面、タイトル、見出し、段落などを別々指定する必要がある;
  • 違うデバイス幅であってもサイズは固定の為、レスポンシブ対応には弱い;
  • 計算する必要がある;
  • 親要素の影響に受けやすい;

文字サイズの指定方法または単位は、他にも何種類があります:

  • xx-small, x-small, small, medium, large, x-large, xx-large (xx-smallからxx-largeまでの7段階単位 )
  • em(親要素の相対値、親要素font-size を基準に大きさを計算する)
  • rem (root em : ルート要素、いわゆるhtml要素のfont-sizeを基準にする)
  • vw(viewport width : ビューポートの幅に対する割合)
  • vh(viewport height : ビューポートの高さに対する割合)

ここでは、深く踏まえないですが、今後CSSで実装するときに必要な分を調べて、少しずつうまく使い分けるようになれば今後は役に立つでしょう。

実際に10pxから27pxまでの文字サイズを見比べてみましょう

さて、実際にフォントサイズの大きさとフォントサイズに対して設定する数値と単位を比べてみましょう。
下記は、HTMLとCSSでコーディングしました10px~27pxのfont size のサンプルです。是非ご参照ください。

10px 文字サイズ(font size)のサンプル(sample) 10px

11px 文字サイズ(font size)のサンプル(sample) 11px

12px 文字サイズ(font size)のサンプル(sample) 12px

13px 文字サイズ(font size)のサンプル(sample) 13px

14px 文字サイズ(font size)のサンプル(sample) 14px

15px 文字サイズ(font size)のサンプル(sample) 15px

16px 文字サイズ(font size)のサンプル(sample) 16px

17px 文字サイズ(font size)のサンプル(sample) 17px

18px 文字サイズ(font size)のサンプル(sample) 18px

19px 文字サイズ(font size)のサンプル(sample) 19px

20px 文字サイズ(font size)のサンプル(sample) 20px

21px 文字サイズ(font size)のサンプル(sample) 21px

22px 文字サイズ(font size)のサンプル(sample) 22px

23px 文字サイズ(font size)のサンプル(sample) 23px

24px 文字サイズ(font size)のサンプル(sample) 24px

25px 文字サイズ(font size)のサンプル(sample) 25px

26px 文字サイズ(font size)のサンプル(sample) 26px

27px 文字サイズ(font size)のサンプル(sample) 27px

Googleが推奨しているフォントサイズ・スマホデザインのフォントサイズの目安と範囲は?

先ほど、実際に10px~27pxのfont size の見本を見てどう思いますか?どんなサイズが一番読みやすいでしょう?また、スマホレスポンシブ対応に一番適切なフォントサイズ(font size)はどのフォントサイズだと思いますか?

 

適切なfontsizeをイメージするカモメの写真

 

筆者の私が、「スマホレスポンシブ対応の際に、どれぐらいのフォントサイズを設定すれば一番適切でしょうか?」について、現役Webクリエイター、Webデザインナーの関連記事を検索してみました。それら記事の検証、調査結果についてまとめました。Webサイト構築・HTML・CSSでコーディングする際に、お役に立つかもしれません。

  • Googleが推奨しているスマホ本文のフォントサイズは16px (ピクセル) です。
  • 一番人気で多く使われているスマホ本文(テキストコンテンツ)のフォントサイズ範囲は:14px~18pxです。
  • 見出し(タイトル)によく使われているフォントサイズの範囲は;18px~24pxです。

上記でまとめた検証結果、調査結果に従って、スマートフォンデザインの文字サイズは16pxを基準にすると無難でしょう。

もちろん、サイトのターゲットグループやサイトの全体雰囲気、クライアント様のご要望などに合わせてフォントサイズを設定することはとても大事ですが、上記の基準、目安範囲を意識した上適切に使い分けで設定した方がいいでしょう。

また、font-sizeだけではなく、フォント(書体)種類の使い分け、font-weight(文字の太さ)、line-height (行間の高さ) などもちゃんと考慮、調整し、レイアウトもよく読み易いWebサイトのデザインを作りましょう。

まとめ

さて、今回は、

  • Webデザイン・HTMIL・CSSでコーディングの際に、特にスマホデザインにおけるフォントサイズの重要性とSEO へどう影響するのかについてご紹介しました。
  • よく使うスマホサイトのフォントサイズ単位、それぞれのメリット・デメリットについて簡潔に説明しました。
  • 実際に文字サイズ ”10px~27px” はどんなような大きさになるかを見比べてみました。
  • スマホレスポンシブ対応の際に最も多く使われているフォントサイズとGoogleが推奨しているスマホ本文文章のフォントサイズをまとめました。

モバイルフレンドリーテストツールとフォントサイズを確認できるツール

最後、おまけとしてWebサイトを構築するときにご参考になる2つのツールをご紹介します。

  1. モバイルフレンドリーテスト → Googleの推奨しているツールで、URLを入力すると該当サイトがモバイルフレンドリーか否かを判定してくれます。 URL: https://search.google.com/test/mobile-friendly?hl=JA
  2. WhatFont というGoogle Chromeの拡張機能の一つです。文字のフォントファミリー (Family) 、文字のサイズ (Size) 、文字の行間 (Line-height) 、文字の太さ (Weight) 、文字のスタイル (style) 、文字の色 (Color) を調べることができます。是非試してみてくださいね。

また、皆さんはすでにご存じだと思いますが、ご参考したいWebサイトの文字サイズを調べるときに、一番便利な検証ツール(画面のどこでも大丈夫です、右クリックをし、検証を押します。またはキーボードの“F12”を押します)を忘れなく使って下さいね。