ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

レスポンシブサイトで最適なフォントサイズを実装する

レスポンシブサイトで最適なフォントサイズを実装する

今回の記事は以下のような課題を持っている方におすすめです。
  ・フォントサイズの単位の違いを知りたい。
  ・どの画面サイズでも最適なフォントサイズにしたい。
  ・レスポンシブなサイトでフォントサイズを容易に管理したい。

フォントサイズはCSSで「font-size:16px;」のように指定することでサイズを変えることができます。一つのデバイスでの設定ならすぐできますが、レスポンシブサイトではそうした設定が複雑になってきます。そこで、今回の記事ではレスポンシブサイトに最適なフォントサイズを設定する方法を紹介します。

フォントサイズはSEOに影響する

まずフォントサイズはSEOには影響しないと思われがちですが、実は「文字が小さすぎる」といったように読みにくいフォントサイズだと、SEOに悪影響をおよぼします。以下のような記載があります。

https://cluster-seo.com/blog/mobile-seo.html

ページをインデックスに登録する際、Googleはテキストの大きさが適切かどうかをチェックしています。フォントサイズが小さくて読みづらい場合、そのページは「モバイルフレンドリーではない」と判定されます。

モバイルフレンドリーは検索ランキングの要因で、モバイルフレンドリーではないページはマイナス評価となります。

たとえPC画面で最適なフォントサイズに設定していたとしても、スマホ画面では文字が小さすぎたりするので注意が必要です。

逆に言えば、今回の記事を通してフォントサイズを最適化することで、自身のサイトのSEOをさらに良くすることができるかもしれません。

では、実際にレスポンシブサイトにおけるフォントサイズを最適化する方法を紹介します。

フォントサイズの単位それぞれのメリットデメリット

まずはレスポンシブサイトにおいて扱いやすい単位はどれか、それぞれのメリットデメリットを解説します。

px(ピクセル)

pxは絶対的な値を指定することができ、3px,6pxと数値が大きくなればなるほどフォントサイズも大きくなります。可読性はありますが、絶対的な値ゆえに一つ一つ値を修正していかなければならないという欠点があります。

親要素に対して相対的な値を指定することができます。例えば、10pxの親要素に対して50%と指定した場合、5pxのフォントサイズとなります。

em

親要素に対して相対的な値を指定することができます。%と考え方は同じですが、100%=1emとなります。つまり、10pxの親要素に対して0.5emと指定した場合、5pxのフォントサイズとなります。

rem

常にhtmlに対して相対的な値を指定することができます。%とemと違い、htmlの値のみ考慮すればいいので、比較的楽に指定することができます。

vw(viewport width)

表示領域の幅に対する割合で、ビューポートの幅に合わせてフォントサイズの値を指定できます。例えば、フォントサイズを10vwと指定した場合、ビューポートの幅に対して10%のフォントサイズになります。レスポンシブサイトに適してはいますが、可読性があまりなく、扱いずらいのが難点です。

以上のようなフォントサイズの単位があります。
ここからは、実際にフォントサイズの指定方法を紹介していきます。

レスポンシブサイトで最適なフォントサイズを設定する

フォントサイズの単位を見てきましたが、レスポンシブサイトにおいて扱いやすそうなフォントはvwとremだと思います。そこで、この二つのフォントサイズの単位を用いた具体的な設定を解説します。

vwを使用してレスポンシブにフォントサイズを可変させる

まず、例1のページをPC画面、スマホ画面両方で開いてみてください。
例1 vwの基本的な使い方
以下、例1のコードです。
HTML

<div>
 <p>フォントサイズは5vwです。</p>
<div>フォントサイズは16pxです。
</div></div>

CSS

p{
      font-size:5vw;
}
div div{
     font-size:16px;
}

簡単なコードですが、「フォントサイズ5vw」の方は画面サイズに応じてフォントサイズが変化していることが分かると思います。このようにvwは画面サイズに応じてフォントサイズを変化させることができるのでレスポンシブサイト向きだと言えます。

remを用いて、可読性のあるコードで設定する

vwは画面に応じたフォントサイズを設定することができますが、可読性が低くvwの値がどんな大きさになるか判断が難しいという欠点がありました。しかし、remはhtmlを基準に大きさを設定することができるので判断が容易です。以下の例2を見てください。
例2 remを用いて可読性のあるコードでフォントサイズを設定する

以下例2のコードです。
HTML

<p>pc画面、スマホ画面両方で確認してみてください。</p>
        <div class="container">
          <div class="item">
            <h3>コンテンツ1</h3>
            <img src="/img/cloth1.jpg">
            <p>この文章はダミーです。以下省略</p>
          </div>
          <div class="item">
            <h3>コンテンツ2</h3>
            <img src="/img/cloth2.jpg">
            <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
          </div>
          <div class="item">
            <h3>コンテンツ3</h3>
            <img src="/img/cloth3.jpg">
            <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
          </div>
          <div class="item">
            <h3>コンテンツ4</h3>
            <img src="/img/cloth4.jpg">
            <p>この文章はダミーです。以下省略</p>
          </div>
          <div class="item">
            <h3>コンテンツ5</h3>
            <img src="/img/cloth5.jpg">
            <p>この文章はダミーです。以下省略。</p>
          </div>
        </div>

CSS

html {
font-size:62.5%;/*pxだと10px;*/

}
.container {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  margin: 0 0 10px;
}

.item{
  background: #FFEFD5;
  padding: 20px;
  flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 400px;
  margin: 10px;
}
h3 {
font-size:2rem;/*20px*/
}
p{
font-size:1.6rem;/*16px*/
}
@media screen and (max-width: 640px) {/* 640px以下でスマホ画面時*/
h3 {
font-size:1.6rem;/*16px*/
}
p{
font-size:1.2rem;/*12px*/
}
}

htmlはデフォルトが16pxのため、計算しやすいように16pxの62.5%、つまり10pxに変更しています。vwに比べコードは多くなりますが、計算しやすいのでメンテナンスが容易です。

まとめ

以上、レスポンシブサイトにおけるフォントサイズの最適化方法を解説してきました。remは直感的で値を修正することも容易ですので、大規模なサイトになってくるほど扱うべきだと思います。

フォントサイズを最適化することによって、サイトの見栄えもよくなり、SEOにもつながるのでぜひ今回の記事を参考にしてみてください。

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。