突然ですが、レスポンシブデザインという言葉を聞いたことはありますでしょうか？
今回はプログラミングやデザインの初心者の方に向けて、近年重要視されている「レスポンシブデザイン」についてご紹介します。
そもそも「レスポンシブ」とは？
レスポンシブとは、サーバーからどのデバイスに対しても常に同じHTMLコードを配信し、CSSを使用して各デバイスでのページのレンダリングを変える設定方法です。
すべてのGooglebotユーザーエージェントがページとそのアセット（CSS、JavaScript、画像）をクロールできる状態であれば、Googleのアルゴリズムによってこの設定が自動的に検出されます。（Google Developersより）
つまり、パソコンやタブレット、スマホなどの複数の異なる画面サイズでも外観や操作方法を最適化したWebサイトを制作するためのWebデザインの手法です。
Google検索エンジンは、3種類のモバイルサイトを認識しています。
- レスポンシブデザイン
- PHPなどで作られ、実際のHTMLは存在していない動的な配信
- PC向けのHTMLとモバイル向けのHTMLを別々に用意してURLが分けられている状態
また、Googleでは、レスポンシブデザインの使用を推奨されています。
レスポンシブデザインの場合は、どのデバイスに対しても同じURL、HTML、CSSを使用するため表示エラーが起こりにくいです。
これによって、ユーザビリティが向上し、Google検索エンジンのクローラーの巡回の手間が少なくなります。
そのため、Googleはレスポンシブデザインの使用を推奨しています。
レスポンシブ対応をするメリット3つ
続いて、レスポンシブデザインに対応するメリットとデメリットについて紹介します。まずは、レスポンシブ対応するメリットです。
デザインが表示端末に合った大きさに変えられる
最近は、インターネットを見る際に、パソコンやスマホ、タブレットなど閲覧デバイスが増えてきました。
実際のところ、この記事をスマホで読んでいるという方も多いのではないでしょうか？
このように、レスポンシブ対応させることで、どのデバイスでも見やすいように表示してくれます。
レスポンシブは端末の画面サイズに依存しないため、今後新たに登場する端末に対しても対応することができます。
1つのソースで管理できる
また、レスポンシブを導入することによって、PCサイトとスマホサイトでHTMLが別構築されていません。
それによって、サイトのメンテナンス工数を削減することができます。
さらに、1つのHTMLを更新するだけでどのデバイスでも同じ状態になります。そのため、ミスが少なくなり、修正も簡単にできるようになります。
SEOに有利
最後に、検索エンジンによる被リンク数の評価は、検索順位に影響を及ぼします。
仮に、デバイスごとにWebページを用意した場合、そのページごとに評価されてしまいます。そのため、検索エンジンによる被リンク数の評価が低くなることがあります。
一方、レスポンシブにすることによって、1つのファイルで複数のデバイスに対応することができます。
そのため、デバイスごとにページを用意する場合に比べ、被リンクの分散を防ぐことができます。
レスポンシブ対応をするデメリット2つ
一方、レスポンシブ対応するデメリットには下記が挙げられます
CSSのデザインが複雑
レスポンシブは、自動で複数の端末に対応できます。しかし、デザインを考える際には、デバイスごとの特徴を考慮しなければなりません。
複数の端末に対応してくれますが、縦向きと横向きのそれぞれの向きでデザインが崩れないように考えることが必要になります。
そのため、対応させる端末ごとにデザインを用意し、HTMLのコーディングが複雑になり、チェックすることが必要になります。
そうするとCSSのデザインが複雑になり、初心者には構築に時間がかかってしまいます。
Webサイトが重くなることがある
レスポンシブでは、ページを表示する際に見えていないタグの部分も読み込まれます。
例えば、横幅1200pxの場合は画像を表示するが、横幅480pxの場合は画像を表示しないというようにHTMLを構築したとします。
仮に、480pxで画像を表示しないようになっていたとしても、一度そのタグを読み込もうとします。
そのため、サイズが大きい画像をサイト上で使用する場合、スマホサイト上では表示速度が落ちてしまい、動作が重くなってしまうことがあります。
レスポンシブデザインに関するまとめ
以上になりますが、いかがでしたでしょうか？
レスポンシブデザインには確かにデメリットもありますが、世の中の多くの人がスマホでインターネットのサイトを閲覧する機会は今後も増えていくことは間違いありません。
WordPressでレスポンシブデザインに対応する方法は、自分でコードを書いたり、プラグインを用いる方法もありますが、一番簡単なのはすでにレスポンシブ対応しているテーマを利用することです。
有料テーマにはなりますが、ブロガーに人気のOpenCageのテーマを利用したりするのが、その後の時間削減も考えるともっともコスパが良いかもしれません。
また、レスポンシブデザインに興味が湧いた方は、こちらの記事も参考にしてみてくださいね。
