はじめに
viewportとは、PCやスマホ、タブレットなどのデバイスごとにコンテンツの表示領域を指定するためのHTMLのmeta要素（name属性に指定する値）です。
直訳すると「表示領域」を意味し、「ビューポート」と読みます。
このmeta viewportを正しく設定することで、レスポンシブデザインがうまく機能し、SEOにも良い影響を与えることが期待できます。
逆に、viewportを設定しないとレスポンシブデザインに対応できず、スマホやタブレットでサイトを閲覧した際、PC向けの横幅で表示されてしまいます。そのため、ユーザーが自ら画面を拡大・縮小したりして文字や画像を見やすい大きさに調整する、と言う必要性が出てきます。
こうした不便さはユーザー体験を損ね、Googleの評価にも悪影響を及ぼす可能性があります。
今回は、viewportの基本的な役割や設定方法、スマホで効かない原因など、初心者の方にもわかりやすく解説します。
viewportの設定（「基本」と「詳細」）
※viewport（ビューポート）とはー
PCやスマホ、タブレットなどデバイスごとにコンテンツの表示領域を指定するためのmetaタグの属性値のことです。
直訳すると「表示領域」を意味し、読み方は「ビューポート」です。
たとえば、PC向けのサイトをスマホやタブレットでも最適な表示にしたい場合、HTMLファイルの<head>タグ内に以下のようなmetaタグを記述します。
このように記述するmetaタグの属性値が「viewport」です。
—————————————–
○viewportの「基本」設定方法
まず、HTMLファイルの<head>タグ内にmetaタグを追加し、name="viewport"と記述します。content属性には、次のように記述するのがGoogleが推奨する基本の設定です。
この設定により、端末の画面幅に合わせて表示が調整されます。
○viewportの「詳細」設定方法（content属性）
content属性では、以下のような値を組み合わせて細かく指定することもできます。
各属性値の役割は次の通りです。
-
width=device-width
デバイスの画面幅に合わせて表示領域を設定します。 -
user-scalable
ユーザーによるズーム操作を許可する（yes）／許可しない（no）を指定します。 -
initial-scale
ページ読み込み時の初期ズーム倍率を指定します。 -
minimum-scale / maximum-scale
ズームの最小／最大倍率を指定します（範囲は0～10、初期値はそれぞれ0.25、1.6）。
また、次のように幅を固定値で指定することも可能です。
このような固定幅の指定は、一時的な応急措置として使うことはできますが、Googleでは推奨されていません。
viewportがスマホで効かない原因とその対策
スマートフォン（Android・iPhone）でviewportが正しく機能しない原因はいくつか考えられます。
主な原因
-
HTMLの記述ミスや未指定
-
CSSの記述ミスや未指定
HTMLの記述ミスや未指定
スマホでviewportが効かない原因のひとつは、HTML内の記述ミスや設定漏れです。
たとえば、<head>タグ内でmeta viewportの記述が間違っていたり、そもそも記述がない場合、スマホやタブレットでPC用の横幅で表示され、画面からコンテンツがはみ出してしまいます。
つまり、表示領域が正しく調整されず、viewportが効かない状態となるのです。
対策<head>内のmeta viewportの記述を正しく修正する、または忘れずに設定することが重要です。
CSSの記述ミスや未指定
もう一つの原因は、CSSの設定ミスや必要な記述が不足していることです。
たとえば、meta viewportを正しく設定していても、CSSでwidth: 100%;などの相対指定がされていなかったり、メディアクエリの記述ミスがあると、PC用の横幅で表示され、スマホでは画面からはみ出してしまいます。
対策
必要な相対指定やメディアクエリの記述を追記・修正し、正しくレスポンシブ対応できるCSSにしましょう。
〜viewportを活用してレスポンシブデザインにする〜
レスポンシブデザインを実現するには、まずHTMLに正しいmeta viewportを記述します。
そのうえで、CSSにメディアクエリを追加し、デバイスごとにスタイルを調整します。
こうした設定により、PC・スマホ・タブレットそれぞれの画面幅に最適化された表示が可能になります。
基本のPC向けスタイルをベースに、スマホ・タブレット向けの調整をメディアクエリで追記していく形が一般的です。
まとめ：
viewportを適切に設定することで、どのデバイスでも見やすく使いやすいコンテンツを提供することができます。
これにより、スマホやタブレットでの表示も最適化され、ユーザー体験の向上やGoogleからの高評価につながります。
逆に、viewportの設定を誤ったり、記述位置が間違っていたり、CSSのメディアクエリにミスがあると、レスポンシブデザインが正しく機能せず、モバイルフレンドリーなサイトにはなりません。
その結果、スマホやタブレットでの閲覧時にコンテンツが見づらく、操作もしづらくなり、ユーザーエクスペリエンスが低下し、Googleの評価にも悪影響を及ぼします。
正しいviewport設定とCSS設計で、あらゆるデバイスで快適に閲覧できるサイトを目指しましょう。
