現在のWebサイトは、多様なデバイスでの利用を前提にして制作する必要があります。
複数の表示に柔軟に対応するためのレスポンシブデザインの作り方について、基本的な考え方や実装の仕方を紹介します。
レスポンシブデザインとは
レスポンシブWebデザインとは、デバイスによる画面の大きさの違いを吸収し、見やすく使いやすいWebサイトを表示するためのデザイン方法です。
レスポンシブデザインでは、HTMLのファイルは共通で、CSSやJavascriptをデバイスごとに用意することで表示を変えるようにしています。
そのため、HTMLに変更があった場合はhtmlファイルひとつを編集するだけで更新でき、デザインの変更もCSSごとに行います。
簡単に言えば、内容は全て同じで、その見せ方について工夫するということです。
レスポンシブデザインがあることによって、ユーザーが使いやすい、読みやすい情報を提供することができ、満足度が大きく向上します。
そのため、検索エンジンもサイトの評価基準としてレスポンシブデザインになっているかを重要視しています。
レスポンシブデザインの考え方と実装の仕方
レスポンシブデザインの考え方と実装方法について、代表的なものを紹介します。
【無料あり】エンジニアが解説！プログラミングスクールおすすめ５選リキッドデザイン（フルードデザイン）
リキッドデザイン（フルードデザイン）は、幅をパーセントで指定することによって、デバイスによる画面サイズの違いに対応する方法です。
例）
<div style=”width:25%; border:solid 1px red; background:#dfdfdf” >コンテンツ</div>
レスポンシブデザインに含めるか否かは微妙なところですが、特に画面サイズが変わっても画面デザインを変えたくない場合に利用されます。
アダプティブデザイン
アダプティブデザインは、まずユーザー側のデバイス環境を読み取り、そのデバイスに合わせて専用のHTMLやCSSファイルを読み込んで表示します。
いわゆる「スマホ用サイト」があるような場合です。
この場合、実現する方法はいくつかありますが、最も単純な方法はアクセスした際にブラウザやOSの種類を読み取り、モバイルならモバイル用のサイトに転送し、PCならPC用のサイトに転送します。
モバイル用のサイトとPC用のサイト（フルサイトと呼ぶこともある）で、表示の仕方だけでなく表示するコンテンツそのものが変化した方が良い場合に用いられます。
Viewportによるレスポンシブデザイン
現在主流になっている方法のひとつが、「viewport」を利用してレスポンシブデザインを実現する方法です
viewportは<head></head>内に記述することで、デバイスの横幅などの情報を取得してくれます。
例）
<meta name=”viewport” content=”width=device-width”>
Viewportのcontentは次のようなものが選べ、倍率をどうするかは使いやすさを考慮して決定します。
- content=”width=device-width /*端末画面の幅に合わせる*/
- initial-scale /*初期のズーム倍率*/
- minimum-scale /*最小倍率*/
- maximum-scale /*最大倍率*/
- user-scalable /*ズームの操作 yes 許可する （初期値）/ no 許可しない*/
メディアクエリによるレスポンシブデザイン
メディアクエリによるレスポンシブデザインもよく行われています。
メディアクエリはCSSの機能で、画面の種類やサイズによって画面の表示方法を分けることができます。
メディアクエエリを利用することで、さまざまな画面サイズに柔軟に対応することが可能で、また印刷時には別の画面表示にすることもできます。
例）
/* pcの場合 */
@media screen and (min-width: 800px) {
/*ここにpc用スタイルを記述*/
}
/* タブレットの場合 */
@media screen and (min-width: 641px) and (max-width: 800px) {
/*ここにタブレット用スタイルを記述*/
}
/* smartPhone */
@media screen and (max-width: 640px) {
/*ここにスマホ用スタイルを記述*/
}メディアクエリのタイプは次のようなものがあり、上の例のように「and（）」のカッコ内にブレイクポイント（切り替えの基準になる点）を設定します。
- screen：一般的なディスプレイ
- braille：点字ディスプレイなど
- print：印刷用のプリンタ
- tv：テレビでの表示用
レスポンシブデザイン作成の注意点
レスポンシブデザインは使用感を高めるために便利ですが、次の点に注意する必要があります。
管理を考えて設計する
レスポンシブデザインは、方法によって多くのhtmlファイルやcssファイルを作ることになります。
その場合、制作の手間はもちろん、ちょっとした更新のために多くのファイルを更新する必要が出る場合があります。
管理まで含め、最適な方法を選ぶことが大切です。
ブレイクポイントは定期的に見直す
主流のデバイスの変化や、PC、スマホなどの画面サイズの変化によってメディアクエリの適切なサイズは変化する可能性があります。
定期的にブレイクポイントを見直し、表示が最適になっているか確認することが大切です。
ファイルサイズに注意する
レスポンシブデザインでは、さまざまな状況に合わせたCSSファイルを作ることになりますが、ブレイクポイントが多くなると読み込む情報量も多くなり、表示が遅くなってしまうことがあります。
これはユーザーにとって益が少ないため、表示速度が遅いサイトは検索エンジンの評価も下がります。
凝ったレイアウトがより望ましいのか、シンプルなレイアウトの方が使いやすいのか、よく考えてCSSを作成しましょう。
Webサイトのレスポンシブデザインまとめ
Webサイトを作る上で、レスポンシブデザインでの制作は必須となりつつありますが、その方法はさまざまです。
Web制作に携わる人は、ひとつの方法だけでなく複数の方法で実際に作成してみて、その違いや手間などをよく確認しておくことが大切です。