viewportの役割や使い方、設定方法についてまとめました。ついつい面倒で後回しにしてしまいがちな作業ですが、スマホやタブレットでのサイト表示を適切にするためには大事なもの。そのviewportとは何かから、具体的な使い方まで紹介しています。
Googleがスマホからのアクセスも上位表示に影響を与えるようにしたアップデートから、しばらく時間が経ちました。対応できているサイト、出来ていないサイトもまだまだたくさんありますが、スマホやタブレットでサイトを綺麗に表示させるために、「viewport」というタグを使っている人も多いでしょう。
viewportとは？
viewportとは、サイトを表示するときにどの大きさで表示するかを指定するために使うメタタグのことであり、同時に、ページが表示される領域そのものを言います。勝手にサイトが、ユーザーの使用しているデバイスのサイズを合わせてくれるわけではなく、サイトの持ち主が設定してあげる必要があるのです。
パソコン版と、スマホ・タブレット版でviewportの設定が違います。パソコン版では、画面全体ではなく、開いているブラウザの大きさがサイトの大きさとなります。そのため特に設定は必要ありません。一方のスマホ・タブレット版は、画面全体にサイトが表示されるため、デバイスの画面の大きさがサイトの大きさになるのです。
もし、パソコン版のサイトがそのままスマホやタブレットで表示されると、サイトが小さく表示されてしまいます。文字や写真を見るためにはわざわざズームをしなければなりません。こういった手間をユーザーに与えないためにも、viewportの設定は必要なのです。
メディアクエリについて
viewportとはの前に、もうひとつ抑えておきたいのが「メディアクエリ」です。viewportにおけるCSSとは、適用される画面サイズや解像度に応じて表示方法を変えることを言います。設定にはBreak Pointを使います。
一定のサイズ以下のサイト表示の仕方と、それ以上での表示の仕方をユーザーのデバイスに応じて切り替えてくれるもので、ユーザーのデバイスに応じたレスポンシブデザインのサイトを表示させる、運営することができるようになったのです。
しかし、一部の古いスマホとviewportとは相性が悪く、一緒に使うことが推奨されていないものもあります。有効にならないものもあるので注意しましょう。
viewportで指定できるもの
viewportで指定できるものは大きく分けて7つあります。それぞれがサイトの表示に大切な役割を果たしており、設定しておくことで、ユーザビリティの高いサイトを提供することができるのは言うまでもないでしょう。ここではその7つを、それぞれのタイプ別に5つ再分類してお話します。
width（横幅）とheight（縦幅）
まずは横幅と縦幅の設定である、widthとheightです。指定できる範囲はどちらも200px～10000pxとなっています。これを設定することで、サイトの表示範囲の指定ができるのです。
しかし、heightはあまり設定しないこと、widthも一部のスマホでは有効にならないなどの注意点があります。ただ、サイトの表示に支障が出るようなものではないので、設定しておきましょう。
また以下のように特定の幅を指定するのは設定上問題ないですが、モバイルの画面のサイズが多様化している現代ではあまり推奨されていません。
[html]
<head>
<meta name=”viewport” content=”width=720″>
</head>
[/html]
initial-scale（初期倍率）
サイトが表示されてすぐに適用される倍率の設定がinitial-scaleです。日本語では「初期倍率」とも呼ばれ、任意で設定可能です。Initial-scaleは設定しなくても問題ありませんが、その場合は「initial-scale=1」と自動的に設定されます。
minimum-scale（最小倍率）とmaximum-scale（最大倍率）
ユーザーが変更できる最小倍率と最大倍率がminimum-scaleとmaximum-scaleです。
それぞれに初期値が存在し、minimum-scaleの初期値は0.25で、0以上10未満の数値から値を選択できます。一方のmaximum-scaleの初期値は1.6で、そのまま使うこともできますし、0～10までの数値を任意で設定することもできます。
user-scalable（ズーム操作の可否）
ユーザーが任意でズームをすることができるかどうかを設定するために使われるのがuser-scalableです。YesかNo、または1か0の数字で設定します。Yesと1、Noと0がそれぞれ対応しています。任意で設定しない場合は自動でYesと設定されます。
target-densitydpi (ターゲットとなる画面密度)
Android4.2以前のAndroidで、サイト画面の密度を整える役割を果たすのがtarget-densitydpiです。このタグは、最近ではそもそも記述されないことが多いほど使う頻度が少ないもので、あえて設定する必要もありません。もし、古いAndroidもターゲットにしているのならば設定してもいいですが、そこまで重要とは言えません。
viewportの設定方法
ここで気になるのは、viewportの設定方法です。いくつものタグがあるため、何をどうしていいのかがわからないものも多いでしょう。しかし、結局のところ、一番いいviewportはある程度決まっているのです。それが以下のものになります。
[html]
meta name=”viewport” content=”width=device-width,initial-scale=1″
[/html]
この指定で問題が起こることはまずありません。その理由は、画面サイズをdevice-width、つまりデバイスの幅に合わせるよう指令を出しているからです。
しかし、これで100%問題なく表示されるわけではありません。一度設定したviewportが正しく反映されているかを確認し、もし反映されていなければ設定を少し変えてみるという調整方法がいいでしょう。
有名なサイトのviewportの紹介
viewportの使い方はサイトによって違います。大手企業のサイトも同じで、先に紹介した、最もスタンダードなものを使っている場合もあれば、ちょっと変わったものを採用しているサイトもあります。
今回は、大きく5つのviewportを、採用している記述とともに紹介します。
Microsoft
【使っているviewport】
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
一番オーソドックスなもので作られています。Microsoftの他にもEvernoteやslack、YouTubeも同じviewportを使用しています。
apple
【使っているviewport】
<meta name=”viewport” content=”width=device-width, initial-scale=1, viewport-fit=cover”>
自社製品であるiPhoneⅩの画面を横向きにしても余白が生まれないように設定されています。ユーザビリティ向上のための記述ともいえます。
LIG
【使っているviewport】
<meta name=”viewport” content=”width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0″>
ズームを無効にするhtmlが設定されています。同じようにズーム機能を無効にしたい場合は参考にしましょう。
TOYOTA
【使っているviewport】
<meta name=”viewport” content=”width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=2, shrink-to-fit=no”>
少し変わった記述がなされていますが、これは古いiOSに対応するためのものだと考えられます。あえて設定する必要はありませんが、設定したほうが親切なのは間違いありません。
資生堂
【使っているviewport】
<meta name=”viewport” content=”width=device-width”>
まとめ
スマホなどのデバイスごとによって異なるサイトの表示を設定するタグ、viewportとは何かについてお話をしてきました。
昨今の検索ではパソコンよりもスマホやタブレットが多く使われる時代。そんなユーザーのためにも、面倒でも設定はしておいた方がいいでしょう。大手企業もそんな世間の流れを受けて、さまざまなサイトでviewportの設定をしています。
オーソドックスな設定をコピペしてもいいでしょうが、一番は、自分の目で見て微調整を加えること。viewportとは、長い時間と自分の目でもって確認をして付き合っていきましょう。
