viewportとは？HTMLのmeta要素やinitial-scale、非推奨の設定を解説
viewportとは、Webページを表示するブラウザの表示領域で、デバイスの画面サイズや解像度に合わせて、Webページを最適に表示する機能があります。
こちらでは、viewportの設定方法を初心者向けにわかりやすく解説します。
- 目次
-
viewportとは？
viewportとは、HTMLファイルの<head>タグ内に記述するメタタグのことです。
一言でまとめると「表示領域」を指します。
Webサイトの閲覧に使っているスマホやパソコンなどで、Webサイトを開いた際に見えている範囲のことです。
スマホやタブレット、パソコンなど、デバイスに合わせて表示領域を設定する機能があるため、パソコン向けのWebサイトを、スマホやタブレットでも快適に表示させるための必須要素です。
Googleはレスポンシブデザインを推奨しており、対応するためにはviewportが欠かせません。
もし、開いたページの文字が小さすぎて読みにくい場合、君ならどうする？
見えづらいので、すぐに離脱してしまうと思います…。
そうだよね。だから、「viewport」の設定が重要なんだ！
viewportを設定することで、様々なデバイスや画面サイズで快適に表示できるため、見やすいWebサイトを作成するためには、適切な設定が必要なのです。
viewportを設定するべき理由
なぜviewportを設定するべき？
なぜviewportを設定するべきなのかというと、Googleが推奨するレスポンシブデザインに対応するためです。
レスポンシブデザインとは、ユーザーがWebサイトの閲覧に使っているデバイスや画面サイズに合わせて、「最適な表示」と「使いやすさ」を提供するためのデザイン手法です。
viewportを設定しないと、「レイアウトの崩れ」「操作の難しさ」など、様々な不具合が生じます。例えば、パソコン向けのWebサイトデザインは、スマホでは快適に使用できません。
「パソコン」と「スマホ」では、表示領域が大きく異なります。
viewportを設定しないと、パソコンで表示されたとおりにスマホの小さな画面で表示されるため、「文字や画像が小さい」「ボタンが小さく押しにくい」という、使いづらさの原因になりかねません。
「見えづらい」「使いづらい」Webサイトは、ユーザーの利便性や満足度の低下を招いてしまうんだ。
だからviewportを適切に設定して、快適に表示できるようにする必要があるのですね！
なぜレスポンシブデザインが必要？
デスクトップパソコンやノートパソコン、スマホやタブレットなど、ユーザーがWebサイトの閲覧に使用するデバイスは多様化しています。
「画面サイズ」や「解像度」などの条件が、異なるデバイスに対応するためには、レスポンシブデザインである必要がありますが、理由はそれだけではありません。
レスポンシブデザインが必要な理由を3つ紹介しよう！
① Webサイトを管理する手間を省ける
デバイス別のHTML/CSSのファイルが不要で、どのデバイスでも1つのファイルで「メンテナンス」「デザイン変更」などの対応が可能です。結果として、WebサイトやWebページの管理が簡単になります。
② ユーザーエクスペリエンスの向上につなげられる
レスポンシブデザインのWebサイトは、パソコンもスマホもURLは同じです。そのため、デバイスごとに適したWebページに、リダイレクトさせる必要がありません。
また、表示速度が低下しないため、ユーザーエクスペリエンスの低下を防ぐことにつながります。
スマホユーザーには「スマホ向けレイアウト」を表示させることで、ユーザーの利便性が向上するんだ。
③ Googleのクロールを効率化できる
同じ内容のWebページが複数ある場合、Googleクローラーは何度もクロールを行い、情報を取得しなければなりません。
一方、レスポンシブデザインであれば、URLが統一されるため、一度のクロールで情報を取得できます。
クロールの効率が向上すると、「より多くのWebページがインデックスされる」「リライトした際も適切なタイミングでインデックスされる」などのメリットがあります。
「レスポンシブデザインについて詳しく知りたい」という方は、こちらをご覧ください。
viewportの設定方法
viewportってどのように設定するんですか？
HTMLの<head>タグに記述するよ！
基本の設定
viewportを指定したmeta要素は、HTMLファイルの<head>タグ内に配置します。
metaタグに「name属性」を書き、name属性値にviewportを記述します。
レスポンシブデザインのWebサイトを作成する際に、Googleが推奨している記述内容は、以下です。
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
Googleが推奨している記述なので、特別な理由がない場合は、この記述をコピーして使うのがおすすめだよ！
内容を設定するcontent属性の「width=device-width」とは、表示領域の幅をデバイスの画面幅に合わせるように指定するものです。
また、「initial-scale=1.0」とは、初期表示時のズーム倍率を調整するものです。「1」に設定することで、初めにWebページが表示された際に違和感なく表示されます。
Google推奨の記述を行うことで、Webページを以下の状態に設定することができます。
- デバイスに関係なくコンテンツが適切に表示される
- Webページ全体が見える自然ズーム倍率
- ユーザーが快適にページを閲覧できるような設定
content属性の設定
content属性を設定する際には、3つの項目で数値を指定できます。
① width=device-width
表示領域の幅をデバイスの画面幅に合わせるように指定できます。
② user-scalable
ズームの操作で、「yes（許可する）」「not（許可しない）」を指定できます。
③ initial-scale
初期のズーム倍率で、倍率を指定できます。
メディアクエリを指定している場合
メディアクエリとはCSSの機能の一種で、異なるデバイスの画面サイズや解像度に応じて、Webページの表示を最適化する機能です。
Viewportでは「ブラウザに認識させたい表示領域の大きさ」しか指定できないため、レイアウトをメディアクエリで指定する必要があります。
メディアクエリの記述内で条件を指定することで、特定のデバイスや画面サイズに対して、異なるレイアウトを適用できるため、ユーザーが使用しているデバイスに合わせて、レスポンシブデザインのWebサイトを表示できます。
メディアクエリを指定している場合でも、基本設定の以下記述内容で問題ありません。
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
viewportで設定可能な要素
viewportでは、Webサイトの何を設定できるのですか？
「より見やすい」Webサイトにするために、以下6つを設定できるよ。
| 要素 | 指定するもの | 詳細 |
|---|---|---|
| width | 表示領域の幅 | 指定できる範囲は200px～10,000px |
| height | 表示領域の高さ | 指定できる範囲は233px～10,000px |
| initial-scale | 初期倍率 | 指定しない場合はinitial-scale＝1 |
| minimum-scale | 最小倍率 | デフォルトは0.25 |
| maximum-scale | 最大倍率 | デフォルトは5.0 |
| user-scalable | ズーム操作の可否 | 「yes（許可する）」「not（許可しない）」を指定 デフォルトは「yes」 |
viewportが効かない原因と対策
設定したviewportが機能しない場合は、主に3つの原因が考えられます。
原因と対策を合わせて解説するよ！
CAUSE 1
viewportの記述ミス
viewportが効かない原因として真っ先に考えられるのが、記述ミスです。
<head>タグ内に記述していなかったり、widthやinitial-scaleを指定したりすると、レスポンシブデザインに対応できないどころか、正しく表示できなくなります。
正しい場所に適切に入力されているか、まず確認しよう。
CAUSE 2
メディアクエリの記述ミス
記述ミスはviewportだけではなく、メディアクエリでもよくあります。誤字脱字はもちろん、必要のない半角スペースがあるだけで、効かない恐れがあります。
記述のミスを防ぐためには、メディアクエリの書き方を解説しているWebサイトから、記述をコピー＆ペーストし、数値のみを書き変えることが有効です。
「記述はコピペ」で、誤字脱字やミスを最小限にするのですね！
CAUSE 3
キャッシュ
viewportが効かない原因として、ブラウザのキャッシュデータが更新されていないことも考えられます。この場合、キャッシュの削除で改善できる可能性があります。
キャッシュとは、以前に閲覧したWebサイトのデータやファイルを一時的に保存し、再表示時にブラウザが保存した情報を利用する機能です。
Webサイトを最新の状態で表示するためには、キャッシュを常に最新のものに保つ必要があります。
viewportやメディアクエリの記述が正しいにも関わらず効かない場合は、キャッシュを削除してみよう！
レスポンシブデザインにしよう
レスポンシブデザインに対応するには、viewportを設定し、メディアクエリでパソコン・タブレット・スマホ向けのスタイルシートを記述します。
まずは、HTMLファイルにviewportを記述します。
<meta name=”viewport” content=”width=device-width,initial-scale=1.0,minimum-scale=1.0″>
次に、CSSファイルにメディアクエリを記述します
/*—– 通常（パソコン向け）の記述 —–*/
/*—– タブレット向けの記述 —–*/
@media screen and (max-width: 767px) { /* タブレット向けのスタイル */ }
/*—– スマホ向けの記述 —–*/
@media screen and (max-width: 479px) { /* スマホ向けのスタイル */ }
上記の記述することで、パソコンやタブレット、スマホでWebサイトを閲覧した際に、各デバイス幅に最適化されて表示されます。
よくある質問
-
「viewport」はどこに記述するのですか？
-
HTMLの<head>タグに記載することで機能します。
-
「initial-scale」の意味は何ですか？
-
日本語で「初期倍率」という意味です。initial-scaleは手動で設定しない場合、「initial-scale＝1」と自動的に設定されます。
-
「meta要素」とは何ですか？
-
検索エンジンやブラウザにWebページ内容を伝えるHTMLタグです。
まとめ
viewportの設定は、コンテンツを見やすく使いやすくするために、非常に重要です。ただし、viewportの設定を誤ると、レスポンシブデザインが機能しなくなってしまいます。
記述や配置を間違ったり、設定を忘れたりすると、スマホやタブレットでコンテンツが見にくく使いにくい状態になってしまいます。
モバイルフレンドリーに対応していないWebサイトは、ユーザーエクスペリエンスが低下し、Googleからの評価も下がるでしょう。
SEO評価を高めるためにも、viewportは正しく設定し、Webページを見やすく使いやすくすることが重要です。
機能を活用するためには正しい設定が欠かせないため、本記事で解説した設定方法を参考に、ぜひレスポンシブデザインに対応したWebサイトを作ってください。
