viewportを理解して正しいレスポンシブデザインを設定しよう

今日ではWebサイトをスマートフォンなどの端末に対応させるスマホ最適化が必須となってきていますが、Webデザイナーなら一度はつまづいたことがあるのではないでしょうか？

今回はレスポンシブデザインについて紹介したいと思います。

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

まずレスポンシブデザインとは、デバイスの種類ごとに別サイトを用意せず、ひとつのHTMLファイルで、各デバイスに最適化されたページを実装することを指します。どうやってデバイスを判別するかというと、画面の大きさで判別をしています。CSS（スタイルシート）のメディアクエリをmax-width: 750pxのように指定してあげることで、画面のサイズが750pxまではモバイル向けの表示になり、751px以上でPC版の表示に切り替えてくれます。

PCとスマートフォンのサイト、と2つ以上のHTMLを作成する手もありますが、レスポンシブデザインはGoogleにも推奨されている手法であり、URLも切り替わらなかったりとメリットも大きいので、レスポンシブウェブデザインでのスマホ最適化がおすすめです。

他にも、同一URLでもパソコンとスマホで別HTMLを呼び出す手法の「ダイナミックサービング」というものもあります。こちらはデザインの幅は広がる分、運営の手間がかかってしまうため、よほど力を入れたい場合以外ではおすすめできません。

メディアクエリについて

先ほどCSSのメディアクエリとありましたが、メディアクエリ（Media Queries）とは、デバイスの解像度やウィンドウの幅（画面サイズ）、向きなどの指定条件に合わせて、パソコンとスマホで別々のCSSを適用できる機能のことをいいます。メディアクエリを使用したCSSの切り替えは、ブレイクポイント（Break Point）を設定します。

このブレイクポイントは簡単に言うと、表示している画面幅が750px以下ならこのスタイルを、751pxより大きいならこのスタイルを、といったような形で切り替えが行われます。このメディアクエリによりレスポンシブウェブデザインを行うことが可能になりました。

しかしながら一部viewportのwidthのピクセル値が効かない端末もあることから、viewportで指定する幅とメディアクエリのブレイクポイントの値を合わせてスマホ最適化する方法は推奨されておりません。

viewportとは？

「viewport」とは、「表示領域」のことです。Webページの横幅がviewportとなります。

viewportを設定していないPC向けのページをスマートフォンで表示すると、文字もページも小さくなってしまいます。「viewport」の概念は、デスクトップPCだけの環境では意識する必要はあまりありませんでした。ですが、今はデスクトップPCよりタブレット等の使用頻度が高くなり、見やすくするためにそれぞれのデバイスでのズレがないように指定する必要が出てきました。
設定されていないと、横幅いっぱいでおさまらないコンテンツや本文は横のスクロールがついて表示されてしまい、閲覧しにくくなってしまいます。そこで、viewportを指定することで、画面幅いっぱいにコンテンツや本文がおさまるようにしていくのです。

ただ、viewportを設定しただけでは最適化されたとは言えません。viewportでは表示領域を設定して、ページが見やすいように拡大されているだけになっています。これを解消するために、スマートフォン用にCSSでレイアウトを設定してあげる必要があります。

viewportでスマホを回転してもサイズを変えないようにする

余談ですが、スマホは横にすると回転する機能がついています。そこで横向きの時は一行の文字を増やしたい、追加の情報を表示したいなど思う時があります。そういうときはviewportを以下に書き換えるといいでしょう。

｢meta name=”viewport” content=”width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no”｣

合わせてCSSには

body {
-webkit-text-size-adjust: 100%;
}

と記入しましょう。
-webkit-text-size-adjust にはnoneを設定すると副作用があるため、必ず100％を設定するようにしましょう。

viewportのmetaタグ

viewportの指定はこのようなコードをコピペして使用している方が多いのではないでしょうか？

｢meta name=”viewport” content=”width=device-width,initial-scale=1″｣

「width=device-width」は、閲覧している画面サイズに合わせてサイズ変更するという意味になります。大体の場合は上記のコピペで問題ありませんし、制作していけるので、このコードについて深く考えることもあまりないかと思います。ただ構造を理解することによって、何か問題が生じたときなど柔軟に対応することができるようになるので、今回はこちらのコードについて詳しくご紹介したいと思います。

viewportで指定可能なもの

width（横幅）

viewportの横幅を指定できます。ピクセル単位での指定が可能です。初期値は960px、指定できる範囲としては、200px〜10000pxとなるようです。他にも、表示しているデバイス幅に合わせる、device-widthがあり、魔法の呪文で使われるものはこのdevice-widthが指定されています。

▼横幅を750pxにする場合

｢meta name=”viewport” content=”width=750″｣

上記のように指定することで、横幅750pxの下層領域としてviewportが作られることになります。 こちらの幅とメディアクエリのブレイクポイントの幅を合わせておけば、問題なく最適化することも可能です。ただ、widthのピクセル値が効かない端末も一部あり（古いAndroidなど）、あまり推奨されている表記ではありません。

height（縦幅）

あまり使うことはありませんが、縦幅の指定をすることも可能です。横幅とのアスペクト比から計算される値が初期値となっているようです。widthと同じように、200px〜10000pxの間で指定でき、device-heightも指定可能です。

initial-scale（初期倍率）

そのページが表示されたときの倍率の設定です。指定しない場合は、initial-scale=1と自動的に設定されます。

minimum-scale（最小倍率）

最小縮小倍率の指定です。初期値は0.25で、0より大きく10未満の値を指定できます。

maximum-scale（最大倍率）

minimum-scaleと同様最大拡大倍率を指定できます。0から10の値を指定することができます。設定しない場合は1.6と自動的に設定されます。

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

ユーザーがズームすることを許可するかどうかを指定できます。yesかnoまたは1か0で指定することができます。設定しない場合はuser-scalable=yesと自動的に設定されます。

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

target-densitydpiは古いAndroid端末のために指定するものになります。target-densitydpi=device-dpi（ターゲットとなる画面密度をデバイスの画面密度と合わせる）とすると、端末ごとに表示される文字サイズも大きく変わってしまいます。そこで最近ではそうならないよう、target-densitydpi=medium-dpiに設定するか、そもそも記述しないことが多くなっているようです。
古いAndroid端末に向けてであり、最近のもの（Android4.2以降）では廃止されているので、気にする必要はないかもしれません。

viewportはどう指定するのがいいのか？

結局、viewportの指定はどのようにするのが1番いいのかというと、やはり

｢meta name=”viewport” content=”width=device-width,initial-scale=1″｣

に落ち着きます。メディアクエリさえ正しくなっていれば、この表記で問題が起こることはそうそうありません。たまに起こってしまうスマホ表示の際の右側の謎の空白など、幅は全て収まっているし、心当たりも何もなく、どうしても解決できなさそうな場合はwidthにそのサイト幅を指定してあげると解決できることもあります。

レスポンシブデザインをしっかり設定しよう

ここまででviewportやレスポンス化などについて簡単に説明してきましたが、少しでも理解が深まったでしょうか？viewportに限らずWebサイト制作では、たった一行の記述で変わってきます。
設定されていないだけでページから離れてしまうかもしれないので、デバイスごとに見やすい設定をしていきましょう！

マーケティングでお悩みでしたら、
Bigmacにお任せください。