パソコンやタブレット、スマートフォンなど、モバイルデバイスの普及とともに重要視されるようになった「viewport（ビューポート）」。Webページの見え方を適切に制御するために欠かせない要素の1つです。
ユーザーがスマートフォン、タブレット、パソコンなど、どのデバイスからでも快適にWebサイトを閲覧するには、viewportを正しく設定する必要があります。
この記事では、viewportの基本から実践までを分かりやすく解説します。viewportの役割や設定方法を知りたい方は、ぜひ参考にしてください。
viewportの基本概念
まずは、viewportの基本概念を知ることが大切です。ここでは、viewportとは何なのか、どのような役割を持っているのか、押さえておきたい基本情報を詳しく説明します。
viewportとは
Webページを表示する領域（表示領域）が「viewport」です。まさに、今見ているこのWebページがviewportと言えます。
viewportは、ユーザーのデバイスやブラウザのサイズに依存するという点が大きな特徴です。
たとえば、デスクトップ環境でWebサイトを見る場合、ブラウザウィンドウの表示領域がviewportとなります。スマートフォンの場合は、デスクトップ環境よりも画面が小さくなるため、1ページがviewportに収まりません。
viewportはWebページの表示方法に直接影響を与えます。だからこそ、それぞれのデバイスに合わせて設定することが重要です。
なお、viewportはおもにHTMLのmetaタグで設定します。metaタグは、Webページのヘッダー内で、ページに関するmetaデータを指定するために使用されるタグのことです。
viewportの設定もその一部であり、Webページがデバイス上でどのように表示されるかを指定するために用いられます。
viewportの役割
viewportのおもな役割は、Webページの表示方法をデバイスの画面サイズや特性に応じて最適化することです。前述したように、デスクトップ環境で表示されるページをそのままスマートフォンで表示すると、スマートフォンユーザーには見えづらくなってしまいます。
見えづらい・使いづらいWebサイトはユーザーがすぐに離れてしまい、自然とアクセス数も下がってしまうのです。つまり、viewportはユーザー体験を向上させるための重要な要素と言えます。
また、Webページが異なるデバイスで適切に表示されるように調整するのもviewportの役割です。これにより、ユーザーエクスペリエンスが向上し、どのデバイスからでも快適にWebページを閲覧できるようになります。
Viewportの適切な設定によってSEO効果も期待できるというわけです。
viewportの設定方法
では、viewportを実際に設定する場合、どのような方法があるのでしょうか。ここでは、基本的な設定方法と推奨される設定値を解説します。
基本的な設定方法
前述したように、viewportを設定する際は、HTMLのmetaタグを使用します。HTMLのheadセクションにmetaタグを追加するのが、viewportの基本的な設定方法です。
タグの内容には、width（横幅）やheight（縦幅）、initial-scale（初期倍率）といった設定可能な要素を含みます。具体的な例としては、以下のようなコードです。
<meta name="viewport"content="width=device-width,initial-scale=1.0">
上記のコードは、viewportで最も使用される一般的な設定です。それぞれのデバイスに合わせて設定する場合は、metaタグにviewportの横幅や初期倍率、ズーム操作の可否などを追加したり、変更したりします。
難しく感じるかもしれませんが、基本設定とviewportで設定できる要素を把握しておけば、デバイスごとに適したページが表示されるように調整できます。重要なのは、viewportの基本を理解したうえで実践することです。
推奨される設定値
ページ幅をデバイスの幅に合わせるために使用する「width=device-width」は、viewportの設定でよく使われる設定値です。横幅は「width」となるため、「device-width」を使用してデバイスの幅に合わせます。
また、初期表示倍率を設定する際は、「initial-scale=1.0」を使用します。ページの初期ズームレベルを設定するための要素で、「1.0」が通常倍率です。
他にも、最大倍率やユーザーのズームを制御する設定があります。参考として、おもに使用される設定値を下記にまとめました。
- minimum-scale：ユーザーがズームアウトできる最小のスケール
- maximum-scale：ユーザーがズームインできる最大のスケール
- user-scalable：ユーザーがページをズームイン・ズームアウトできるかどうかを設定。値は「yes」または「no」
viewportを設定する際は、「デバイスの幅」「初期ズームレベル」「ユーザーのズーム操作」の3つがポイントです。これらの要素を設定することで、さまざまなデバイスや画面サイズでもページが適切に表示され、ユーザーエクスペリエンスが向上します。
viewportのSEOへの影響
デバイスごとに正しく設定されたviewportのページは、ユーザーにとって見やすい・使いやすいWebページとなり、SEO対策にもなります。viewportがいかにSEOへ影響を与えるのか、理解を深めておきましょう。
モバイルフレンドリーなサイトの作成
viewportの設定は、モバイルフレンドリーなサイトを作成するための重要な要素です。モバイルフレンドリーなサイトとは、スマートフォンやタブレットなどのモバイルデバイス上で快適に閲覧や操作ができるように設計されたWebサイトを指します。
おもに、レスポンシブデザインや最適化されたコンテンツ、適切なインターフェースといったさまざまな要素を取り入れているのが特徴です。モバイルフレンドリーなサイトは、ユーザーに良好なエクスペリエンス（経験）を提供します。
viewportは、ユーザーのどのようなデバイスでも快適に閲覧できるようにする基本的な設計手法です。そのため、レスポンシブデザインの基本として役立ちます。
さらにviewportは、Googleが推奨するレスポンシブデザインを適用する際に必要不可欠なHTMLタグでもあります。Googleのモバイルフレンドリーテストに合格するのに必須のポイントと言えるでしょう。
ユーザーエクスペリエンスの向上
レスポンシブデザインの基本として役立つviewportは、正しく設定することでユーザーが快適にページを閲覧できるようになります。
スマートフォン、タブレット、デスクトップなど、デバイスが多様化する現代においては、ほとんどのWebサイトがviewportを用いた設計手法を採用しています。
viewportでズームやスクロールの手間を減らすための設定や工夫を施せば、コンテンツへのアクセスがより容易になるでしょう。
どのデバイスからでも快適に閲覧できるだけでなく、ユーザーエクスペリエンスの向上は、SEOの観点からも重要な要素です。特に、Googleなどの検索エンジンはレスポンシブデザインを推奨しており、モバイルフレンドリーなサイトを評価の基準にしています。
さらに、 レスポンシブデザインはデバイスに関係なくサイトデザインが統一できるため、メンテナンスや管理が楽という点も大きなメリットです。
viewport設定のベストプラクティス
より効果的で効率的なviewport設定には、最新のWeb標準やブラウザの推奨事項に従うことが重要です。特に、モバイルブラウザはデスクトップよりも画面が小さくなるため、最新の推奨標準に従う必要があります。
たとえば、幅や倍率の設定における推奨事項です。タブレットやスマートフォンでうまく表示されない、ページがはみ出るという場合は、以下のコードを試してみてください。
<meta name="viewport" content="width=device-width">
「width=device-width」は、ブラウザに対してviewportの幅をデバイスの物理的な幅に合わせるよう指示するものです。つまり、上記のコードを設定しておけば、それぞれのブラウザや端末に合ったページが表示されます。
なお、倍率の推奨設定値は以下のとおりです。
minimum-scale（最小倍率）：0.25
maximum-scale（最大倍率）：1.6
ちなみに、Googleが推奨しているviewportは、以下のコードとなります。
<head>
<meta name="viewport"content="width=device-width,initial-scale=1">
</head>
「content=”width=320」でも横幅を固定できますが、Googleは「width=device」を推奨しています。「content=”width=320」では、デバイスごとの表示領域が最適化されるわけではないため、レスポンシブデザインとは言えません。
非推奨のコードで設定するとSEOにも影響をおよぼす恐れがあります。ユーザーにとって使いやすい・見やすいWebサイトにするためにも、Googleで推奨されているコードを使用しましょう。
viewportに関するトラブルシューティング
viewportが正しく設定されていない場合、さまざまなトラブルにつながるため注意が必要です。ここでは、よくあるviewportのトラブルシューティングと、その解決策を解説します。
表示が崩れる場合の対処法
Webサイトのページ表示が崩れている場合は、viewport設定が正しく機能していない証拠です。よくある原因としては、HTMLタグのミスが挙げられます。
たとえば、HTMLファイルドキュメントの先頭に「head」タグが付いていなかったり、headタグ内に記述するmeta要素のname属性値が間違っていたりするなどです。正しく記述されているか、一文字ずつチェックしてみてください。
また、CSSやJavaScriptとの相性問題も関係しています。CSSで指定されている固定幅といった要素がviewportの幅を超えている、メディアクエリがviewportの設定と一致していない、などが考えられます。
これらの問題に対しては、固定幅ではなくパーセンテージ（％）などの相対幅を使用し、要素のサイズがviewportに対してレスポンシブになるようにします。また、viewport設定に基づいて、メディアクエリも設定しなおしましょう。
その他、デバイス幅の設定ミスや初期倍率の調整不足も考えられます。細部までチェックすることが大切です。
異なるデバイス間での表示確認
デバイスに合った表示方法になっているか確認する際は、viewport設定をテストするためのツールや方法を活用しましょう。
デバイスによって解像度や画面サイズは異なるため、レスポンシブデザインを実装する際、それぞれのデバイスでの表示確認が非常に重要です。
なお、さまざまなデバイスやスクリーンサイズでWebサイトがどのように表示されるかを確認する方法はいくつかあります。
その1つが、ブラウザの開発者ツールを使用する方法です。ほとんどのブラウザには、レスポンシブデザインをテストするための開発者ツールが内蔵されています。
たとえば、Google Chromeの場合は、右上の3点ドットから「その他のツール」→「デベロッパー ツール」をクリックするだけで開発者ツールを開くことが可能です。
viewportを使用する際のよくある間違いとその回避方法
Viewportを使用する際、よくある間違いとしては以下の3つがあります。
- 幅を固定する設定の誤り
- 初期倍率の設定ミス
- ユーザーズームの制限
幅を固定する設定の誤り
「viewport設定のベストプラクティス」でも少し説明しましたが、viewportで幅を設定する際は、「width=device-width」がベストです。
「width=device-width」を使わずに固定幅を指定すると、デスクトップでは正常に表示されたページがスマートフォンで見るとはみ出していたり、正常に見られなくなったりする恐れがあります。
「width=device-width」に設定しておけば、ユーザーのデバイス幅に応じた適切な表示に調整してくれるのです。デバイスが多様化している現代において、幅を固定する設定方法は誤っていると言えるでしょう。
また、viewportは、レスポンシブデザインの基本原則に従うことが必要になります。viewportの幅を固定すると、デバイスや画面サイズに応じて柔軟に対応するレスポンシブデザインの利点が失われてしまうので注意が必要です。
初期倍率の設定ミス
初期倍率の「initial-scale」を適切に設定しないと、ページがデフォルトのズームレベルで表示されない、ページが小さすぎたり大きすぎたりしてしまう、といった恐れがあります。
デバイスのスクリーンサイズに対してページのレイアウトが適切に表示されず、レイアウトが崩れてしまうでしょう。ユーザーエクスペリエンスを向上させるには、ユーザーの初期表示倍率を考慮した設定方法が重要です。
なお、初期倍率を含めたviewportの適切な設定方法は、下記のとおりとなります。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
たとえば、viewportの幅が画面幅と同じ場合、縮小表示をする必要はありません。しかし、「width=device-width, initial-scale=0.5」という設定をしてしまうと縮小表示されることになるため、viewportの幅が意図せず大きくなってしまいます。
縮小するにはviewportの幅がデバイス画面よりも大きくなければなりません。よって、この場合だとviewportの幅がdevice-widthの2倍になり、初期倍率の設定ミスということになります。
ユーザーズームの制限
viewportのcontent属性設定には「width=device-width」と「initial-scale」の他に、「user-scalable」があります。「user-scalable」はズームの操作で、許可する「yes」と許可しない「no」の指定が可能です。
viewportを設定する際は、「user-scalable=no」を避ける必要があります。なぜなら、「user-scalable=no」を設定するとユーザーがページを拡大縮小できなくなってしまうからです。
特に、視覚に障害を持つユーザーは不便に感じてしまいます。使いづらい・見えづらいWebサイトは、アクセシビリティとユーザビリティが低下するので、ユーザー体験を損なわないための適切な設定が不可欠です。
前述したように、「user-scalable=no」を使用するとアクセシビリティやユーザビリティに重大な弊害をもたらす可能性があります。
モバイルデバイスを使用するユーザーがWebサイトを適切に利用できなくなるリスクが高まるだけでなく、SEOやユーザーの期待にも悪影響となる可能性があります。できるだけこの設定は避け、ユーザーが自由に拡大・縮小できるようにすることが望ましいです。
まとめ
モバイルデバイスの普及にともない、Webページの表示を最適化する「viewport」の設定が重要視されています。viewportはユーザーのデバイスに応じてページの表示領域を調整し、ユーザーに快適な閲覧体験を提供するための重要な要素です。viewportはHTMLのmetaタグで設定し、content要素の属性を組み合わせます。基本的なコードと指定できる要素を把握しておけば、viewport設定を適切に行なうことができるでしょう。viewportの基本を理解したうえで、実際にコードを入力して試してみてください。
