SEO
公開日2023年10月31日
更新日2023年12月21日
viewportとは？設定方法やHTMLのmeta要素の記述方法を解説
甲斐龍之介
SEOツール「Nobilista（ノビリスタ）」の事業責任者。株式会社IIPにて取締役兼SEO担当者。中小企業庁が設置した経営相談所、福岡県よろず支援拠点にてSEOコンサルタントとしても活動。
詳細を見る
viewportとは、HTMLファイルの<head>タグ内に記述するメタタグです。
一言で言うと「表示領域」を示すタグで、デバイスの画面サイズや解像度に合わせて、ページを最適に表示させる役割があります。
viewportを適切に設定することで、どのデバイスのユーザーも快適にWebサイトを閲覧できます。
Googleが推奨するレスポンシブデザインに対応するには、viewportの設定が欠かせません。
とはいえ、viewportをどのように設定すれば良いのか、記述すれば良いのかわからない方も多いでしょう。
そこで本記事では、viewportの設定できる範囲やHTMLのmeta要素の記述方法、viewportが効かない原因・対策について解説します。
本記事を参考に、レスポンシブデザインに対応した、ユーザーにもGoogleにも好まれるWebサイトを作っていきましょう。
大手企業も続々導入中！
多機能型 検索順位チェックツール「Nobilista(ノビリスタ)」
Nobilistaは、365日完全自動で大量の検索キーワードの順位を計測するSEOツールです。
※7日間の無料トライアル実施中
レスポンシブデザインとは？作り方のコツやSEOとの関係、CSS実装方法、テンプレート・参考サイトを紹介
viewportとは
viewportとは、HTMLファイルの<head>タグ内に記述するメタタグです。
一言で言うと「表示領域」を指し、Webサイトの閲覧に使用しているデバイスなどで実際に見えている範囲のことです。
viewportにはデバイスの画面サイズや解像度に合わせて、ページを最適に表示させる役割があります。
viewportを適切に設定することで、PCやスマホ、タブレットなど異なるデバイスの大きさでも、デバイスに合った表示領域を設定できます。
Googleはレスポンシブデザインを推奨しており、そのレスポンシブデザインに対応させるためにはviewportの設定が欠かせません。
viewportを設定するべき理由
viewportを設定するのは、Googleが推奨するレスポンシブデザインに対応するためです。
パソコンとスマホでは「表示領域」が大きく異なり、viewportを設定しないとデバイスによって様々な不具合が生じます。
例えば、パソコン用のサイトがスマホ画面に表示されると、文字や画像が小さかったり、ボタンが押しづらかったり、ユーザビリティの低下につながってしまいます。
ユーザーは「サイトが見づらい・使いづらい」と感じたら、すぐにページを離脱してしまうでしょう。
このように、viewportはユーザーのファーストインプレッションを決める大切な役割を果たします。
直接ユーザーには見えない部分ですが、ユーザビリティの低下を防ぐためにも、viewportを設定してレスポンシブデザインに対応させることが大切です。
記事コンテンツSEO対策
100のチェックリスト
メディアクエリについて
viewportについて知る上で、併せて抑えておきたいのが「メディアクエリ」です。
メディアクエリとは、CSS機能の一種で、異なるデバイスの画面サイズや解像度に応じて、Webページの表示を最適化する機能です。
viewportもメディアクエリも画面の表示領域に作用するタグというのは共通していますが、viewportはHTMLのタグ、メディアクエリはCSSのタグという違いがあります。
viewportでは「ブラウザに認識させたい表示領域の大きさ」しか指定できません。
そのため、ページのレイアウトをメディアクエリで指定する必要があります。
メディアクエリ内で条件を指定すれば、ユーザーの画面サイズや解像度に最適化されたレイアウトを適用できるため、レスポンシブデザインのWebサイトになります。
viewportで設定できる要素
viewportで設定できる要素は次の6つです。
| 要素 | 指定するもの | 詳細 |
| width | 表示領域の幅 | 範囲は20px～10,000px |
| height | 表示領域の高さ | 範囲は233px～10,000px |
| inital-scale | 初期倍率 | デフォルトは1 |
| minimum-scale | 最小倍率 | デフォルトは0.25 |
| maximum-scale | 最大倍率 | デフォルトは1.6 |
| user-scalable | ズーム操作の可否 | yes＝許可、no=許可しない |
width（表示領域の幅）
widthでは「表示領域の幅」をピクセル単位で指定できます。
基本的に初期値は960pxで設定されており、200px〜10,000pxまでの設定が可能です。
「device-width」を指定すると、デバイスの幅に自動で最適化されます。
また、widthは「最大（min-width）」と「最小（max-width）」で指定できます。
min-widthはこれ以上幅が小さくならないような設定ができるため、「スマホで見ると小さく感じる」といった時に便利です。
逆にmax-widthはこれ以上大きくならないような設定ができるため、「PCで見ると大きすぎる」といった問題を解決できます。
height（表示領域の高さ）
heightでは「表示領域の高さ」をピクセル単位で指定できます。
基本的に初期値は、widthとデバイスのアスペクト比から自動算出されます。
指定できるのはwidthと同じ、200px〜10,000pxです。
heightは自動算出されるため、基本的に自分で設定することはありません。
inital-scale（初期倍率）
inital-scaleでは、サイトが表示されるときの倍率を任意で設定できます。
デフォルトでは、表示領域にページがフィットするように自動算出されます。
そのため、基本的にinital-scaleは設定する必要がない要素です。
指定しない場合は、inital-scale=1と自動的に設定されます。
minimum-scale（最小倍率）
minimum-scaleでは、最小縮小倍率の指定ができます。
デフォルトは0.25で、0より大きく10未満の値を指定します。
なお、initial-scaleとminimum-scaleを一緒に指定することはできません。
記事コンテンツSEO対策
100のチェックリスト
maximum-scale（最大倍率）
maximum-scaleでは、最大拡大倍率の指定ができます。
デフォルトは1.6で、0より大きく10未満の値を指定します。
user-scalable（ズーム操作の可否）
user-scalableでは、ユーザーがズームできるかを指定できます。
デフォルトでは「user-scalable = yes」、つまりズーム操作が自由にできるようになっています。
ズームができないようにしたい場合は「user-scalable = no（または0）」に変更することで設定可能です。
viewportの記述方法
ここでは、viewportの記述方法を紹介します。
Googleが推奨しているviewportの記述例
前述したとおり、Googleがレスポンシブデザインを推奨しています。
そのレスポンシブデザインに対応するためにも、viewportの設定は欠かせません。
Googleは次のような記述を推奨しています。
<head>
<meta name=”viewport” content=”width=device-width,initial-scale=1″>
</head>
widthを使えば表示領域の幅を自由に設定できますが、現在はデバイス画面の幅に最適化させることが推奨されています。
「width=divice-width」と記述することで表示領域の幅を、PCやデバイスなどのデバイス画面の幅に自動で調整されるのが特徴です。
また、「iniial-sccale=1」は初期倍率を表しており、1に設定することで違和感のないページ倍率になります。
ファーストインプレッションは非常に大切で、ページに訪れた時に倍率が大きすぎたり、小さすぎたりで違和感を感じると離脱に繋がってしまうので注意しましょう。
Google非推奨のviewportの記述例
上記で紹介した方法以外でも、横幅を固定した設定にできないことはありません。
次のような記述でも特定の幅に設定することができます。
<head>
<meta name=”viewport” content=”width=320″>
</head>
ただ、上記の記述方法はGoogle非推奨の方法です。
特定のサイズのデバイス画面に表示には有効ですが、Google推奨の「width=device」のように、異なるデバイスの画面サイズに自動で最適化されるわけではありません。
これではレスポンシブデザインとは言えないので、Googleも推奨していないのです。
Google非推奨の方法で記述すると、ユーザビリティの低下だけでなくSEOでも悪影響を及ぼす可能性があるので、推奨の方法で記述することをおすすめします。
SEO対策とは？初心者にもわかりやすく上位表示の基本的なやり方を解説
メディアクエリを指定している場合
メディアクエリをしている場合も、viewportの設定に変わりはありません。
<head>
<meta name=”viewport” content=”width=device-width,initial-scale=1″>
</head>
このように記述すれば、ユーザーが使用しているデバイスの幅に自動で調整されます。
viewportでレスポンシブデザインを作る方法
ここでは、viewportのレスポンシブデザインを作る方法を紹介します。
レスポンシブデザインに対応させるためには、viewportを設定して、メディアクエリでPC・タブレット・スマホ向けのスタイルシートをそれぞれ記述します。
- HTMLファイルにviewportを記述する
- CSSファイルにメディアクエリを記述する
順を追って詳しく見ていきましょう。
HTMLファイルにviewportを記述する
まずは、HTMLファイルにviewportを記述します。
<head>
<meta name=”viewport” content=”width=device-width,initial-scale=1″>
</head>
繰り返しになりますが、上記はGoogleが推奨するviewportの記述方法です。
基本的には上記コードをコピペしてお使いください。
CSSファイルにメディアクエリを記述する
続いて、CSSファイルにメディアクエリを記述して、PCとその他のデバイス用に振り分ける設定をします。
具体的には、CSSファイルに次のように記述します。
/*—– PC向けの記述 —–*/
@media screen and (max-width: 961px) {
/* PC向けのスタイル */
}
/*—– タブレット向けの記述 —–*/
@media screen and (min-width: 480px) and (max-width: 767px) {
/* タブレット向けのスタイル */
}
/*—– スマホ向けの記述 —–*/
@media screen and (max-width: 479px) {
/* スマホ向けのスタイル */
}
ここでは、横幅が961px以上の場合はPC、480px～767pxはタブレット、479px以下はスマホとそれぞれ振り分けています。
上記コードを記述することで、ユーザーがページを閲覧しているデバイスに最適化されたサイズで表示されます。
もしも、コードをいじるのが難しいと感じた方は、次の章で紹介する「viewport以外でレスポンシブデザインを作る方法」を参考にしてください。
viewport以外でレスポンシブデザインを作る方法
レスポンシブデザインはGoogleが推奨しているため、今やSEO対策をする上でサイトのレスポンシブ化は欠かせません。
本記事で紹介しているviewportを設定すれば、レスポンシブデザインを作ることができます。
しかし、難易度は低いもののCSSに関する専門的な知識が必要になるため、HTMLやCSSの知識がない方にはおすすめしません。
そのような方は、次の2つの方法でレスポンシブデザインを作ることができます。
- レスポンシブ対応のWordPressテーマを使う
- レスポンシブ対応のWordPressプラグインを導入する
それぞれ詳しく見ていきましょう。
レスポンシブ対応のWordPressテーマを使う
まず1つ目の方法は、レスポンシブ対応のWordPressテーマを使うことです。
WordPressテーマとは、サイト全体のデザインや構成を設定するためのテンプレートです。
無料のテーマでもレスポンシブ対応にしているテーマはたくさんあります。
有料のテーマはレスポンシブ対応はもちろん、豊富なデザインテンプレートやSEO対策にも優れています。
とりあえずレスポンシブデザインに対応したいだけであれば無料テーマでも十分ですが、本格的にSEO対策を行っていきたい場合は有料テーマの導入がおすすめです。
WordPressのSEO対策設定のやり方とは？初心者向けにプラグインや投稿設定を方法を解説
レスポンシブ対応のWordPressプラグインを導入する
2つ目の方法は、レスポンシブ対応のWordPressプラグインを導入することです。
現在使用しているWordPressテーマがレスポンシブに対応していない場合は、プラグインを導入することでもレスポンシブに対応できます。
プラグインとは、WordPressの既存機能やテーマだけでは補えない便利な機能を備えたツールです。
レスポンシブ対応になるおすすめプラグインは次の3つです。
- WPtouch Mobile Plugin
- Any Mobile Theme Switcher
- WordPress PDA & iPhone
いずれも無料のプラグインで、インストール・有効化すればすぐにレスポンシブに対応します。
なお、レスポンシブ対応のWordPressテーマを使用している場合は、プラグインを導入する必要はありません。
不要なプラグインを導入するのはサイトが重くなる原因にもなるので注意しましょう。
viewportが効かない原因と対策
設定したはずのviewportが効かない場合、次の3つの原因が考えられます。
- viewportの記述ミス
- メディアクエリの記述ミス
- キャッシュの消去
対策方法も併せて詳しく見ていきましょう。
viewportの記述ミス
viewportが効かない原因のほとんどが記述ミスです。
viewportは、HTMLの<head>タグ内に記述しなければそもそも機能しません。
<head>タグ以外の場所に記述していないかを確認してみましょう。
また、widthやinitial-scaleの設定によってはviewportがうまく機能しない場合があります。
width=device-widthを推奨しており、widthに値を入力すると初期の横幅が指定されてしまうため、レスポンシブデザインにはなりません。
initial-scale=2.0とすると、初期倍率が2倍に設定されてしまい、サイト全体を閲覧できない状態になってしまいます。
viewportは正しい場所に正しく記述しましょう。
メディアクエリの記述ミス
メディアクエリの記述にミスがあっても、viewportが正しく機能しません。
誤字脱字や余計な半角スペースなど、小さいミスが1つでもあるだけで、効かない可能性があります。
このような小さいミスは、自分の目で見つけづらいことも多いです。
メディアクエリの記述ミスを防ぐためには、メディアクエリの書き方等を紹介しているサイトからコードをコピペして、数値のみ書き換えるのがおすすめです。
記事コンテンツSEO対策
100のチェックリスト
キャッシュの消去
ブラウザのキャッシュデータを更新できていないと、viewportが効かない場合があります。
そもそもキャッシュとは、過去に閲覧したWebサイトのデータやファイル等を一時的に保存する機能です。
次に同じページにアクセスした際に、ネット上のデータではなく保存されたデータを参照するため、すばやく表示できるメリットがあります。
Webサイトを最新の状態でブラウザに表示させるには、キャッシュも常に最新の状態にしておく必要があります。
viewportがうまく効かない場合は、一度キャッシュを削除してみましょう。
Google Chromeの場合「Shift + ブラウザの再読み込みボタン」で削除できます。
viewportに関するよくある質問
viewportに関するよくある質問をまとめました。
ぜひ参考にしてください。
viewportはどこに記述しますか？
viewportはHTMLの<head>タグ内に記述します。
viewportでは何を設定できますか？
vierportで設定できる要素は次の6つです。
- width（表示領域の幅）
- height（表示領域の高さ）
- inital-scale（初期倍率）
- minimum-scale（最小倍率）
- maximum-scale（最大倍率）
- user-scalable（ズーム操作の可否）
レスポンシブデザインとは何ですか？
レスポンシブデザインとは、ユーザーが使用するデバイスの画面サイズに合わせてWebサイトの表示を最適化するデザインです。
Googleは次のように定義しています。
ユーザーのデバイスの種類（パソコン、タブレット、モバイル、非視覚系ブラウザなど）に関係なく、同じURLで同じHTMLコードを配信しつつ、画面サイズに応じてコンテンツの異なる方法で表示できます。
Google検索セントラル
GoogleはレスポンシブWebデザインを推奨しています。これは、実装と維持が最も簡単なデザインパターンであるためです。
レスポンシブデザインはGoogleも推奨しているため、SEOの面でもユーザビリティの面でもレスポンシブデザインへの対応は不可欠と言えるでしょう。
レスポンシブデザインとは？作り方のコツやSEOとの関係、CSS実装方法、テンプレート・参考サイトを紹介
viewprtの設定以外にレスポンシブデザインのサイトは作成できますか？
はい、WordPressを利用している場合、viewportの設定以外にもレスポンシブデザイン対応のサイトを作成することができます。
- レスポンシブ対応のテーマを使用する
- レスポンシブ対応のプラグインを導入する
どちらの方法でも簡単にレスポンシブデザインのサイトを作成できます。
viewportは必ず設定するべきですか？
レスポンシブデザインに対応していない場合は、設定するべきです。
ただ、前述したとおりWordPressのテーマやプラグイン等によってレスポンシブデザインに対応している場合は必要ありません。
viewportが効かないのはどんな理由が考えられますか？
viewportが効かない主な原因は次の3つです。
- viewportの記述ミス
- メディアクエリの記述ミス
- キャッシュの消去
記述する場所を間違っていることがうまく機能しない原因のほとんどです。
viewportがHTMLの<head>タグに記述されているか確認しましょう。
関連する記事一覧
おすすめ記事一覧
新着記事
カテゴリ