Web 制作、Web デザインの初心者、現在勉強中の皆さん、こんな悩みがありませんか？
HTMLとCSSを勉強して、やっとPCサイトをコーディングすることができるようになりました。でも、スマホレスポンシブ対応を始めようとすると、スマホ画面はパソコンよりずいぶん小さい為、文字の大きさ、いわゆるスマホレスポンシブ対応のフォントサイズはどのぐらいすれば適切でしょうか？。
近年スマホの普及とともに、スマートフォンレスポンシブ対応の需要性がだんだん上がってきました。 スマホ画面が小さい為、違和感のないスマホ対応のレスポンシブデザインがとても重要であります。 その中、重要ではないと思いがちなフォントサイズですが、実はSEOにも影響を及ぼします。では、今回はスマホデザインに適切なフォントサイズについてご紹介します。
目次
意外と知らない！？フォントサイズはSEOに影響を及ぼす
意外と知らないかもしれませんが、文字サイズ（いわゆるフォントサイズ、CSSで装飾するときに ”font-size”を使います ）はSEOにも影響します。SEO（Search Engine Optimization）とは、検索エンジン最適化のことです。Googleが不定期的にサイトをチェックしています。文字のサイズが適切でないことも、Googleが該当サイトを” モバイルフレンドリーではないサイト” と判断され検索順位が下がることに繋がる一つの要因です。
可読性（読みやすさ）とフォントサイズの関係性・重要性
SEO対策のためにも、可読性はとても重要であります。可読性とは、文字の読みやすさのことを意味します。どんなにWeb制作をうまくできても、素敵なWebデザインをしても、文字が読みづらくコンテンツが正しく伝わらなければ台無しです。ユーザー（いわゆるターゲットグループ）に読んでもらうことが一番大事です。閲覧するユーザーにとって文字のサイズが小さくて読みづらい場合、サイトから離脱し、当然その結果、該当スマホサイトのクリック率も下がります。
フォントサイズの単位、よく使うフォントサイズのメリットとデメリット
先ほど、読みやすさとフォントサイズの関係性・重要性についてご紹介しました。次は、フォントサイズの単位、よく使うフォントサイズ単位のメリットとデメリットについてご紹介します。
では早速, 初心者にとって使いやすいフォントサイズの単位 “px（ピクセル）” と “％（パーセント）” の特徴を表にしました。
表： フォントサイズ単位 px（ピクセル）と ％（パーセント）のメリットとデメリット
| font-size 単位表示
| px （ピクセル） 絶対的な固定値を指定することができます。 | ％ （パーセント） 相対的な変動値を指定する単位です。 |
| CSS実装の例 | 例えば、CSS実装でbody { font-size: 16px; } と指定すれば、他に特別な指定がない限りbodyのサイズは基本的には16pxで変わりません。 | 指定したい要素は親要素に対して、パーセンテージで表示することができます。例えば、親要素h1（見出し１）のフォントサイズは20pxで、その子要素段落（段落コンテンツテキスト）のフォントサイズを16pxにする場合、ｐ｛ font-size: 80% ; ｝と指定します。 |
| メリット |
|
|
| デメリット |
|
|
文字サイズの指定方法または単位は、他にも何種類があります：
- 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）はどのフォントサイズだと思いますか？
- Googleが推奨しているスマホ本文のフォントサイズは16px (ピクセル) です。
- 一番人気で多く使われているスマホ本文（テキストコンテンツ）のフォントサイズ範囲は：14px～18pxです。
- 見出し（タイトル）によく使われているフォントサイズの範囲は；18px～24pxです。
上記でまとめた検証結果、調査結果に従って、スマートフォンデザインの文字サイズは16pxを基準にすると無難でしょう。
もちろん、サイトのターゲットグループやサイトの全体雰囲気、クライアント様のご要望などに合わせてフォントサイズを設定することはとても大事ですが、上記の基準、目安範囲を意識した上適切に使い分けで設定した方がいいでしょう。
また、font-sizeだけではなく、フォント（書体）種類の使い分け、font-weight（文字の太さ）、line-height (行間の高さ) などもちゃんと考慮、調整し、レイアウトもよく読み易いWebサイトのデザインを作りましょう。
まとめ
さて、今回は、
- Webデザイン・HTMIL・CSSでコーディングの際に、特にスマホデザインにおけるフォントサイズの重要性とSEO へどう影響するのかについてご紹介しました。
- よく使うスマホサイトのフォントサイズ単位、それぞれのメリット・デメリットについて簡潔に説明しました。
- 実際に文字サイズ ”10px～27px” はどんなような大きさになるかを見比べてみました。
- スマホレスポンシブ対応の際に最も多く使われているフォントサイズとGoogleが推奨しているスマホ本文文章のフォントサイズをまとめました。
モバイルフレンドリーテストツールとフォントサイズを確認できるツール
最後、おまけとしてWebサイトを構築するときにご参考になる2つのツールをご紹介します。
- モバイルフレンドリーテスト → Googleの推奨しているツールで、URLを入力すると該当サイトがモバイルフレンドリーか否かを判定してくれます。 URL: https://search.google.com/test/mobile-friendly?hl=JA
- WhatFont というGoogle Chromeの拡張機能の一つです。文字のフォントファミリー (Family) 、文字のサイズ (Size) 、文字の行間 (Line-height) 、文字の太さ (Weight) 、文字のスタイル (style) 、文字の色 (Color) を調べることができます。是非試してみてくださいね。
また、皆さんはすでにご存じだと思いますが、ご参考したいWebサイトの文字サイズを調べるときに、一番便利な検証ツール（画面のどこでも大丈夫です、右クリックをし、検証を押します。またはキーボードの“F12”を押します）を忘れなく使って下さいね。
