近年のSEOにおけるレスポンシブの重要性

近年の検索エンジン最適化（SEO）では、レスポンシブデザインが重要視されています。
Googleのモバイルファーストインデックス（MFI）の影響で、モバイル対応の有無が検索順位を左右するようになりました。
そのため、レスポンシブデザインを採用することが求められています。

レスポンシブデザインとは？

レスポンシブデザインとは、PCやスマートフォン、タブレットなど、異なるデバイスでも適切に表示されるデザインのことです。
画面サイズに応じてレイアウトが調整され、ユーザーに最適な閲覧体験を提供します。

検索順位への影響

管理の効率化
1つのURLで管理できるため、サイトの更新作業が簡単になり、SEO対策としても効果的です。

評価の向上
Googleはモバイル対応サイトを優遇し、レスポンシブデザインの導入が検索結果の上位表示につながります。

ユーザー体験の向上
モバイルでも見やすく使いやすいサイトは、滞在時間の増加や直帰率の低下につながり、検索エンジンの評価が向上します。

font-sizeを動的に設定する様々な方法

①最もシンプルなfont-sizeの設定方法

html {
  font-size: 16px;
}

@media (max-width: 768px) {
  html {
    font-size: 14px; /* タブレット */
  }
}

@media (max-width: 480px) {
  html {
    font-size: 12px; /* スマホ */
  }
}

これは、@media クエリを使って、画面サイズに応じて html の font-size を変更する方法です。

メリット
設定したい箇所にのみ適用することができる。

デメリット
段階的にフォントサイズが、変わるため、しきい値以外でデザインが期待する結果にならないことがある。

②vw（ビューポート幅に応じたサイズ）

  font-size: 4vw; /* 画面幅の4% */

vw は画面幅（viewport width）に応じてフォントサイズを変化させる方法です。

メリット
シンプルなコードで可読性が高い。

デメリット
・画面サイズが極端に大きい or 小さいと文字サイズが不自然になる
・ヘッダーやナビゲーションのサイズ調整が難しい

デメリットを補うために、clampを使い以下のように書くことで、より精密な設定が可能になります。

body {
  font-size: clamp(14px, 4vw, 20px);
}

③em（親要素基準の相対サイズ）

.container {
  font-size: 16px;
}

h1 {
  font-size: 2em; /* 親の2倍 = 32px */
}

p {
  font-size: 1em; /* 親と同じ = 16px */
}

em は親要素の font-size を基準にして計算される単位です。

メリット
親コンテンツを対象にするため、要所要所での設定が明確になる

デメリット
・ネストが深くなると em の計算が複雑になり、予想外のサイズになることがある

body {
  font-size: clamp(14px, 4vw, 20px);
}

最も柔軟なfont-size設定

NOVEL FLAREでは、あらゆるfont-sizeで利用できる指定の仕方として、
以下を利用することがあります。

clamp(14px, 14px + 6 * (100vw - 550px) / 850, 20px)

これは、一見わかりにくいですが、SCSSを利用することで、生成されたコードで、実際には、以下のような関数を用意しています。

//_media.scss

$pc:1400px; //PC等 840px〜1400px
$tab: 840px; //タブレット等 780px〜840px
$s-tab: 780px; //小さいタブレット(レスポンシブ境界)550px〜780px
$sp: 550px; //スマホ  〜550px

//PCからスマホ間で最大値と最小値の間で拡大縮小する
@function custom-clamp($min, $max) {
  $range: calc(($max - $min) / 1px); //単位を消す
  $media-range: calc(($pc - $sp)/1px); //単位を消す
  @return clamp($min, $min + $range * (100vw - $sp)/$media-range, $max);
}

このコードを関数として用意することで、

font-size:media.custom-clamp(14px, 20px);

と記載することができます。

このコードを利用することで、厳密にデスクトップでの文字サイズ(最大値)から、モバイルの文字サイズ(最小値)まで、動的に文字サイズが変更され、最大値、最小値を超えることなく、変動するため、デザインの一貫性を保つ際にと湯方する書き方となります。

また、_media.scssに各端末幅を指定することで、サイト全体での設定が統一され、可読性や保守性に優れています。

まとめ

font-sizeは、デザインの印象を決める大きな要素となります。
様々な方法があるため、都度、最適な設定方法をりようすることがユーザビリティーの向上につながり、結果として、SEOに影響を与えます。

コーディングの上で、細かい部分とはなりますが、重要なため、しっかりと使い分けをして設定しましょう。

NOVEL FLAREでは、丁寧なコーディングにより、優れたレスポンシブ対応を行なったWEBサイトを制作することができます。
また、コードレビューや、局所的な修正も5000円〜受け付けておりますので、お気軽にご相談ください。