webデザインを学んでいくと、必ず耳にするレスポンシブデザインとViewport。
現在のWebサイトがレスポンシブ対応でない場合、早めにサイトリニューアルを考えたほうが良いかもしれません。
この記事は、
- レスポンシブって何？
- レスポンシブにはどんなメリットがある？
- レスポンシブデザインはどのように作ればいい？
など、webサイト制作・サイトリニューアルの際に必要となるレスポンシブデザインについて解説していきます。
目次
レスポンシブデザインとは
レスポンシブデザインとは、ユーザーの端末画面サイズに合わせてwebサイトが自動で最適化するデザインのことです。
レスポンシブを実装すれば、1つのhtmlだけで自動的に画面が切り替わるので、パソコン用・タブレット用・スマホ用と複数のwebサイトを作成する必要がなくなります。
Viewportとは
PCやスマホ、タブレットなど端末ごとに表示領域を変化させる為のHTMLのmeta要素のことです。
レスポンシブデザインにするメリット
①ユーザビリティの向上
近年、パソコンだけでなく、スマホやタブレットなど多様なデバイスからユーザーがインターネットを利用しています。
レスポンシブデザインは、ユーザーが快適にコンテンツを利用する為の必須条件と言えるでしょう。
②検索順位の向上
現在GoogleはWebサイトを評価するにあたり、パソコンではなくモバイルの表示を基準にしています。これは「モバイルファーストインデックス（Mobile First Index. MFI）」と呼ばれ、Googleが明確に定義している判断基準です。パソコンのみでしか表示されないコンテンツはGoogleに評価されず、検索しても表示されずらくなってしまいます。
SEOの観点からも、レスポンシブの実装は非常に重要です。
レスポンシブデザインにするデメリット
①デザインに制限がある
レスポンシブを導入すると、デザインに制限が起こってしまうことがあります。すべてのデバイスで1つのHTMLを使用するため、PCやスマホ、タブレットなどでレイアウトを大幅に変えることが出来ないからです。また、特定のデザインやフォントが使用できない場合もある為、デザインが制限されてしまう点はデメリットとなるかもしれません。
②スマホの表示速度が遅くなることがある
レスポンシブデザインは、1つのHTMLを各デバイスで読み込みます。その為、スマートフォンやタブレットで閲覧する際も、PC向けのHTMLやCSSの情報を読み込んでしまうので表示完了に時間がかかってしまうのです。
表示までどれくらい時間がかかるかは、下記サイトで測定が可能です。
https://digitalidentity.co.jp/blog/creative/responsive-web-design.html
レスポンシブの実装方法
早速レスポンシブの設定を行っていきましょう。ここでは超基本の3STEPをご紹介していきます。
step1 ブレイクポイントの設定
「ブレイクポイント」とは、各デバイスに応じて表示内容を切り替える為の画面サイズの基準のことです。CSSにブレイクポイントを記述すれば、ブレイクポイントを基準に自動で画面が切り替わります。デバイスごとにおけるブレイクポイントの目安は、下記の表のとおりです。
| PC | 960～1290px |
|---|---|
| スマホ | 390～500px |
| タブレット | 768～1280px |
step2 Viewpointタグの記述
Viewportを設定するには、はじめにHTMLファイルのheadタグ内にmeta要素を記述します。そのあと、meta要素のname属性の属性値のところにmeta viewportを記述します。
さらに、content属性の属性値にwidth=device-width, initial-scale=1.0の記述が入ります。
上記がgoogle推奨の、基本的なmeta Viewportの記述方法です。
step3 CSSの設定
設定したブレイクポイントをCSSスタイルシートに記述します。ここでは、
- スマートフォン：480px以下
- タブレット：768px以上1,024px以下
- PC：1,024px以上
としました。
CSSファイルに「メディアクエリ（media query）」でPC・スマホ・タブレット用のスタイルシートを記述します。
以上で基本的な設定は完了です。
レスポンシブデザインの確認方法
設定が完了したら、きちんとデバイスごとに反映されているか確認を行いましょう。確認方法は下記の通りです。
- ブラウザの検証ツールを使って、各デバイスごとの見え方を確認する
- googleが提供しているモバイルフレンドリーフレンドリーテストを使用する
Googleが提供している「モバイルフレンドリーテスト」は、WebサイトのURLを記載するだけで、モバイル端末に対応しているかどうかを確認できるサイトです。viewportの設定やフォントサイズ、レスポンシブデザインが正しく実装されているかなどが、手軽に確認ができるのでおすすめです。
リンク
https://search.google.com/test/mobile-friendly?hl=JA
まとめ
以上、レスポンシブデザインの説明から基本設定方法についてご紹介しました。
以下まとめです。
- レスポンシブデザインはこれからの時代必須の条件
- viewportとは、デバイスごとに表示領域を変化させる為のHTMLのmeta要素
- レスポンシブデザインを実装するには、CSSファイルにメディアクエリを記述する
- レスポンシブデザインはHTMLとcssが連携することで初めて動作する
参考リンク
今回は基本の3stepのご紹介となりましたが、より詳しく学びたい方は、下記のリンクもチェックしてみて下さいね。
https://web.dev/responsive-web-design-basics/#viewport
https://developer.mozilla.org/en-US/docs/Web/CSS/Viewport_concepts
