VIEWPORTとは？VIEWPORTの種類と効かなかった場合の対処方法

会社でPCを使用し、会議に行くときにはタブレット、プライベートな調べものではスマートフォンと使い分けている人も多いのではないでしょうか。そのような時代に様々な画面のサイズに対応させるviewportを設定し、レスポンシブWEBデザインに対応することはWEB担当者にとって欠かせない作業となっています。ぜひviewportを使いこなしてスマートなサイトの運営を目指しましょう。

 

viewportとは？

viewportとは宇宙船などの窓を表す言葉ですが、これがWEBサイト上の用語では「ディスプレイ上の表示領域」という意味になります。

viewportはHTMLのMeta要素の中の一つでレスポンシブWEBデザインに欠かせないタグとなっています。WEBサイトを運営する担当者としては避けては通れない様々な要素がこのviewportには含まれていますので、まずはその重要性を確認していきましょう。

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

viewportの重要性を理解するのに欠かせないのがレスポンシブWEBデザインという用語です。数年ほど前まではWEBサイトはパソコンで閲覧することが主流でしたが、今ではスマートフォンやタブレットの機能が発達し主流となりつつあります。

また様々な作業が外出先でも出来るようになってくると、自然とWEBサイトの閲覧も増えてきます。最近ではパソコンからの閲覧数をしのぐ勢いで増えているスマートフォンなどからのアクセスに対応するには様々なサイズの画面で見やすい表示にする必要があります。

とはいえパソコン用、スマートフォン用といった具合に作成するのは時間もかかり、とても面倒な作業です。そこで一つのページを作成すれば表示するデバイスによって画面のサイズが最適な状態に変更できるレスポンシブWEBデザインの機能の重要性が増してきます。

METAタグとは

METAタグとはWEBサイトを構成するHTMLのページに含まれるもので、この中にはそのページを構成するあらゆる情報が詰め込まれています。ページの名前や内容といったものから今回のviewportのようにサイトの仕組みにまつわるものまで色々含まれています。

またこの部分は検索エンジンにページの情報を与えるのにも有効な要素となっているのでSEO対策の観点からも使いこなしたい部分ではあります。

viewportが必要な理由

ここまでWEBサイトの運営のための基礎的なことをおさらいしてきました。それではこれらにviewportがどのように関係するのでしょうか。

viewportはMETAタグのうちの一つであり、このMETAタグを設定することでレスポンシブWEBデザインの設定が容易になります。これによってスマートフォンで検索されることが多くなった現在の状況に対応することができユーザーにとって見やすい画面で情報を提供できるようになり、SEO対策にもつながります。

メディアクエリ（media query）とは

画面の表示領域を設定する時にviewportと同じように出てくるのはメディアクエリと言われるものです。同じような作用のタグのように感じることもありますが、若干、機能が違っているのがこの二種類のタグです。

viewportもメディアクエリも画面の表示領域に作用するタグではありますが、viewportはHTMLのタグであって、メディアクエリはCSSのタグになります。

viewportで画面に表示領域を合わせることができますが、テキストが画面の中に納まるように配置されるためのタグであって、メディアクエリを設定することによってよりきれいなデザインで画面を表示することができます。

レスポンシブWEBデザインに対応する時にはこの2種類の設定をする方がよりユーザーの目を引くサイトを作成することができると言えます。

viewportの種類とそれぞれの意味と指定例

WEBサイトの運営者にとってぜひとも取り入れたいviewportについて知っておきたい基礎をご紹介します。まずはそれぞれの設定例からご覧ください。

width（横幅）

横幅を設定するタグです。viewportではこの横幅を基準として設定されます。固定のピクセルを指定することもできますが、現在では様々なサイズのデバイスがあるため、一般的には設定例のように自動的に合わせることが多くなります。

【設定例】

表示サイズは画面に自動的に合わせるというHTML

width=device-width

height（縦幅）

縦幅を設定するタグです。一般的には「width=device-width」で設定されていれば、縦幅の設定は特に必要ではありませんが、横幅で固定のピクセルで設定した場合には必要になってきます。

【設定例】

縦幅400pxで表示するというHTML

height=”400″

縦幅を自動に設定するHTML

Device-height

initial-scale（初期倍率）

最初に画面を表示する倍率を指示するタグです。特に指定する必要が無ければ「1」で設定しておくことをお勧めします。

【設定例】

初期の画面の表示の倍率は1倍（等倍）に設定のHTML

initial-scale=1

minimum-scale（最小倍率）

ページを縮小する時の最小の倍率を指示するタグです。

【設定例】

ページを最小で1/2まで縮小できる設定のHTML

minimum-scale=0.5

maximum-scale（最大倍率）

ページを拡大する時の最大の倍率を指示するタグです。

【設定例】

ページを最大で1.5倍まで拡大できる設定のHTML

maximum-scale=1.5

user-scalable（ズーム操作の可否）

ユーザーによるズームの操作を可能にするかどうかを指示するタグです。

【設定例】

ズームの操作を可能にできる設定のHTML

user-scalable=yes

 target-densitydpi（ターゲットとなる画面密度）

古いandroid端末向けに必要なタグでデバイスごとの画面の密度によって表示される文字サイズが見にくくならないためのタグです。

【設定例】

デバイスの画面の密度によって文字サイズなどが変わらないように指示する設定のHTML

target-densitydpi=medium-dpi

 viewportのタグの種類と知っておきたい基礎一覧

上記で設定例を紹介しましたが、タグの詳細をまとめてみました。より見やすいサイトの作成のために実際のタグと照らし合わせてサイトにあった設定を心掛けたいところです。

width	横幅	200～10,000px（ピクセル）の範囲で指定ができ、初期値は960pxで設定されています。 ただ上記例題のように「画面に合わせる」と設定することが一般的になっています。 古いandroidの端末では効果がない時があります。
height	縦幅	横幅と同じく200～10,000pxで指定ができ、「画面に合わせる」という設定もできますが、縦幅のタグの使用頻度はそれほど多くありません。
initial-scale	初期倍率	ページを最初に開いた時に表示される倍率を指示するタグです。 device-widthで設定すると初期値は1で設定されます。
minimum-scale	最小倍率	ページを縮小するときにどこまで縮小を可能にするかを指示するタグで0～10の間で指定ができます。初期値は0.25になっています。 initial-scaleと組み合わせると設定が効かなくなります。
maximum-scale	最大倍率	ページを拡大する時にどこまで拡大を可能にするかを指示するタグで0～10の間で指定ができます。 初期値は1.6になっています。
user-scalable	ズーム操作の可否	ユーザーが画面をズームすることを可能にするかどうかのタグでyes/noもしくは1/0で指示することができます。 指定をしない場合はyesになります。
target-densitydpi	ターゲットとなる画面密度	主に古いandroid端末のために設定するもので「画面に合わせる」と指示すると端末ごとに表示がかわり、見にくい端末がでてくる。 Android4.2以降ではこのような心配が無くなっているため、上記の設定例のように設定するか、設定しないことが多くなっています。

meta viewportの設定方法

いくら魅力的なWEBサイトを作成しても画面が見にくければユーザーには伝わらず、せっかくの機会を逃してしまうかもしれません。viewportはある意味、サイトの中身を検討することと同じくらい運営担当者にとっては大切な要素になります。ここでは実際にWEBサイトにMETAviewportを設定する方法についてご紹介します。

一般的なviewportの記載方法

Meta name=”viewport”content=”width=device-width;initial-scale=1 “

上記で様々なタグをご紹介してきましたが、多くのWEBサイトでは実はそれほど詳細を設定しているわけではありません。一般的には下記のように指定されることが多いです。

画面表示サイズは各デバイスに合わせて最初は等倍で表示してください。

今まで説明した設定例にも同じ部分がありますが、このタグが指示する意味は

となります。HTMLに慣れてくればそれぞれのタグの持つ意味を理解して設定をすることができるようになりますが、最初のうちはごく一般的なタグを使用して作成していくのもWEBサイトの作成に慣れていく一つの方法です。

タグはわかりにくい用語が並んではいますが、一つ一つを理解していくと成り立ちがわかるようになっていきます。

Googleが推奨しているviewportの記述例

googleではレスポンシブWEBデザイン（WEBサイトの表示がPCだけでなくスマートフォンなどにも対応していること）を推奨しております。SEO対策としても取り入れておきたいところです。このレスポンシブWEBデザインにも対応するためにもviewportの設定は欠かせません。googleでは下記の設定を推奨しております。

Meta name=”viewport”content=”width=device-width;initial-scale=1 “

 

このタグは何度も出てきておりますが、それはviewportを簡潔に設定するにはこのタグが一番使用されるからです。

Googleが非推奨している記述例

上記の方法以外に下記のように横幅を固定したタグを使用することも可能です。

この場合、特定のサイズのデバイスの画面の表示に対しては有効に働きますが、様々なサイズに自動的に対応するという訳にはいきません。その為、レスポンシブWEBデザインにかなっているとはいいがたいこともあり、googleでは非推奨としています。

この場合、画面の表示が適切にされないだけでなく、SEO対策にも影響する可能性があるので、特段必要なない場合には自動で画面に合わせる設定にしておくことをお勧めします。

Meta name=”viewport”content=”width=320“

 

viewportが効かない原因と対策方法

viewportは様々なサイズの画面に対して適切に表示されるように指定するタグです。そしてこの「様々な」という部分がクセ者で稀に適切なサイズに表示されない場合があります。例えば上でも記載をした古いandroid端末などがそれにあたります。古いといってもどれくらいの時期にあたるのかというと2012年頃のandroid端末ぐらいになるのでそれほど対策を検討することも必要ないように思われます。

ではそれ以外にviewportが効かない原因と対策はどのようにすればいいのでしょうか。

キャッシュの消去をする

最も単純で忘れがちな方法ではありますが意外に有効な方法です。HTMLファイルの更新と確認を何度も繰り返しているとまれにキャッシュが残っていて上手く表示されないことがあります。

この場合には一度、キャッシュを消去して改めて確認をします。この方法を試してみた後にまだ画面の表示が治らないようなら設定の再確認をしていきます。

widthのピクセルを固定している

PCで閲覧されることを基本にして作成されたWEBサイトを、モバイル端末に対応するためにピクセルを固定してタグを作成している場合があります。

もちろんサイズがあうモバイルに対しては有効に機能しますが画面のサイズが様々になり、スマートフォンだけでなくモバイル端末が浸透している現在では、一定のピクセルに固定せずに自動で合わせる設定に変更したほうが見やすいサイトを提供できます。

相性の悪いタグが一緒に使われている

例えば「width=device-width」と合わせて「initial-scale=0.5」と設定したタグを一緒に使用すると画面が大きく表示されてしまいます。この設定では「initial-scale=0.5」が作用してしまい縮小するために画面を2倍で表示してしまうからです。

ではそのようにならないためにあらかじめサイズを限定するために「width=1280」で「initial-scale=0.5」と設定すれば問題ないかというと今度は表示する端末によってはちゃんと表示にならないことがあります。

このようにタグがちゃんと並んでいても指示の方法が違っていると上手く作用しないことがあります。

スマ―トフォンを回転するとサイズが変わってしまう

スマートフォンを回転すると画面の横のサイズが違うので表示などが変わってしまいます。横向きになった時でも1行の文字数を増やしたりして快適な表示にするためには画面の表示を自動にして全て等倍に設定し、ズームをできないようにタグを設定します。その上でcssの設定で「body｛webkit-text-size-adjust:100％;｝」と設定をします。

これで横向きの表示になっても読みやすい画面を表示することができます。

ブラウザに読み込まれていない

cssやviewportは作成したと思っていても必ずgoogle chromeなどのブラウザのソース内で確認する必要があります。ブラウザにちゃんと読み込まれていなければ上手く作用しないようでアップロードした時にはソース内でも確認することを心がけます。

まとめ

外でスマートフォンなどを利用して検索をするユーザーが主流となっている現在では小さな画面でも有効な情報を届けることでWEBサイトの効果が変わってきます。特に通販など小売りの店舗のサイトでは商品がちゃんと表示されなければ購買意欲をそぐだけでなく他の見やすいサイトへの異動してしまいます。

このような事が起こらないためにもレスポンシブWEBデザインにすることが大切になってきます。このためにもviewportは理解していきたいタグの一種です。難しく感じるviewportのタグも覚えてしまえばそれほど難しくもなく表示領域の設定をすることができます。この機会にWEB担当者としてはタグの成り立ちを理解することで、より効果的なサイトの運営を心掛けていきたいところです。