デバイス利用の変遷から、レスポンシブデザインが広がった背景を知ろう

Webに携わる方であれば、一度は「レスポンシブデザイン」という言葉を聞いたことがあるのではないでしょうか。

ただ、聞いたことはあるものの、どのようなデザインを指すのか、どのような背景で生まれたのかまで知っている方は少ないのではないでしょうか。
デザイン面だけでなくデバイスの変遷を知ることで、レスポンシブデザインの理解をより深められます。

今回は、レスポンシブデザインができた背景を解説します。

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

レスポンシブデザインは、Googleが推奨し始めたのをきっかけに認知が広まりました。
Googleはレスポンシブデザインを以下のように定義しています。

レスポンシブ ウェブ デザイン（RWD）は、サーバーからどのデバイスに対しても常に同じ HTML コードを配信し、CSS を使用して各デバイスでのページのレンダリングを変える設定方法です。

引用:
　https://developers.google.com/webmasters/mobile-sites/mobile-seo/responsive-design?hl=ja

PCやスマホ、タブレットなど、画面のサイズがことなる多様なデバイスに合わせて、デザインを柔軟に対応させるために生まれたのがレスポンシブデザインです。

では、デバイスがどのように多様化していったのか、レスポンシブデザインが生まれるまでの背景をおさらいしてみましょう。

レスポンシブデザインが生まれるまでの背景

PCを使ってインターネットを利用するのが一般的

スマホが登場する以前や発売して間もないころは、インターネットを利用するときにPCを使う人が圧倒的な数を占めました。

スマホ、タブレットの普及

引用:　https://www.live-commerce.com/ecommerce-blog/pc-smartphone/#.WL-mDxLyiYU

iPhoneをはじめとしたスマホが日本国内に登場したのは2007年からです。
その後スマホ、タブレットの世帯保有率が徐々に伸びました。

総務省がおこなった「平成26年度通信利用動向調査」によると、PC保有率は2010年が83.4%、2014年は78.0%であるのに比べ、スマホ保有率は2010年が9.7%、2014年が64.2%と急増し、さらにタブレット端末の保有率も増加傾向にありました。

スマホを使ってインターネットを利用する人が増加

引用:　インテージ　マルチデバイス利用調査によるデバイス利用動向

スマホ保有率が急増したことで、インターネットを使用するときのデバイスもPCだけでなく、スマホやタブレット端末の割合が増加しました。
さらに年代別のデバイス別一日の利用率は、10代から40代まではスマホが一番多い結果になりました。

デバイスごとにデザインを変化できるレスポンシブデザイン

PCだけではなくスマホやタブレット端末を使ったインターネット利用者が増えたことで、デバイスごとにデザインを最適化することが求められるようになりました。

Googleがレスポンシブデザインを推奨

Googleが2015年にデバイスの多様化の流れに合わせて、モバイル検索結果のランキングの判断基準の一つに、モバイルフレンドリー（スマートフォン、パソコン、タブレットのどれを使用していても、検索結果が的確で見やすいものかどうか）を採用すると発表しました。そこで推奨されたのがレスポンシブデザインです。

参照:　https://webmaster-ja.googleblog.com/2016/03/continuing-to-make-web-more-mobile.html

レスポンシブデザインによってURLが統一されるので、スマホでPC用のページを開いてしまい、表示エラーがおこる可能性を下げられます。

ユーザーはサイトのページをシェア、リンクしやすくなりページ読み込みの時間も短くなるので、ストレスなくサイトを利用できます。サイト運営者にとっても、リダイレクトのミスが発生する可能性を下げられます。

さらにGoogleは、検索クローラーで一つにまとめられたHTMLファイルを巡回すればいいので、デバイスごとにことなるファイルを巡回するよりも手間を省くことができます。

モバイルフレンドリーかテストできるツール

https://search.google.com/search-console/mobile-friendly?hl=ja
Googleは自社のサイトがモバイルフレンドリーかどうかを確かめられる、モバイルフレンドリーテストツールを提供しています。

調べたいサイトのURLを入力して、テストを実行のボタンを押します。

数秒後にはモバイルフレンドリーかどうかを知ることができます。

まとめ

このようにデバイスの多様化という背景によって広く知られるようになったのが、レスポンシブデザインです。

今後はスマホやタブレット端末にくわえて、ウェアラブル端末やまだ世に出てない新たなデバイスが登場することが考えられます。ユーザーにとってどのようなデザインが最適なのか、その背景をふまえた上で常に吟味することが重要です。