はじめに
もうすぐ12月ですね。年末は忙しくなりがちですが、体調に気を付けて過ごしていきましょう。
今回は「レスポンシブ対応」について前編と後編に分けて説明します。
前編は、レスポンシブ対応の説明と、考慮するべき点についてです。
そして、レイアウト編はこれで今回が最後となります。
最後までお付き合いいただけますと幸いです。
→前回記事：【HP作成】Webデザインの基礎！【レイアウト編④】
レスポンシブ対応とは
レスポンシブ対応とは、異なるデバイスでもページのレイアウトやデザインを調整して表示する手法のことで以下2つのメリットがあります
メリット1.デバイス毎にHTMLファイルをつくらないため、1つのHTMLを修正することでどのデバイスで見ても修正が反映されている
これによって、各種デバイスでのHTMLを修正しなければならなかったり、修正もれが発生してしまうといった事態を防ぐことができます。
メリット2.同一のHTMLを利用することからURLが変わらないため、SEO的にもメリットがある
Googleもデザインパターンとしてレスポンシブ対応を推奨しています。
参考：Google検索セントラル,モバイル設定を選択する（https://developers.google.com/search/mobile-sites/mobile-seo/）
レスポンシブ対応を採用する際に考慮するべきこと
様々なメリットもあり、Googleも推奨しておりますが、考慮するべきこともあります。
- 画像サイズは、PC画面でも綺麗に見えるように、大きなサイズを利用する
画像の容量が大きくなるため、スマートフォンでの閲覧時に表示速度が遅くなってしまうことがある - デザインや実装を行う前に、全てのデバイスでの表示を考慮する
各種デバイスでのブラウザチェック、各デバイス固有のバグ対応や適したレイアウト調整が必要になるため、工数がかかる
おわりに
レスポンシブ対応には良い点はあります。
しかし、何が何でもレスポンシブ対応と決めつけるのではなく、サイト全体のデザインやどのデバイスを使うユーザーに向けてデザインすることが重要になります。
次回は後編、レスポンシブ対応に適したレイアウトについて説明します。