レスポンシブデザインについて勉強

大きな勘違い

僕はレスポンシブデザインについて大きな勘違いをしていました。ホームページを一つ制作しているわけですが、その時はレスポンシブデザインはデバイスが違っても同じように見えるということだと思っていました。ですが、レスポンシブデザインとは画面サイズに合わせて表示を変えていくというものです。僕はとてつもない勘違いでCSSにwidthを％表記で行うことでどのデバイスでも同じように見えると思い込んでいました(笑)。正直笑えないレベルのバカですが、CSSでコンテンツそのものの表示の有無や画面での指定が行えるという発想がなかったです。今や大手のホームページはほとんどがレスポンシブデザインということで少しレスポンシブデザインについて勉強しました。(参照：必読5分でわかるレスポンシブWebデザインまとめ)

レスポンシブが台頭してきた訳

レスポンシブデザインが台頭してきたわけですが、まず一つ目の理由として個人で使用するデバイスの種類が増えてきたことが挙げられます。タブレットやスマートフォン、PC、ノートPC等多くのデバイスがラインナップされたことにより、必然的にどのデバイスでも最適な調整をする必要性が出てきました。更にパソコンよりも後に出てきたスマートフォンからのアクセス数というのが年々増加しており、それ他の端末に合わせたデザインが求められるようになったのも一つの理由です。更に後ほど詳細を書いていきますが、制作の効率化においても革命的な変化をもたらして作業工数の削減に貢献したのも広まった一つの要因だと考えられます。(参照：レスポンシブWebデザインについて知っておきたいこと【作り方入門編】 )

良いところや悪いところ

メリットやデメリットは多くのサイトで書かれているのですが、大体同じことが書かれています。なんなのかというとメリットがひとつのHTMLで済むため作業工数が減ること、小さな変更ならすぐに直せること、最後が一番重要でグーグルさんのアルゴリズムで同一URL推奨したり、モバイルファーストインデックス(スマホ最適化されているサイト優遇)しますよというものに対応できます。メリットもあればデメリットもあるよねということですｗ。デメリットはこだわったデザインにするとすごく複雑になってしまうこと、CSSで見えなくしているだけなのでソースそのものが多い場合に読み込みに負荷をかける場合があること、等が挙げられます。(参照：レスポンシブWebデザインのメリット・デメリットをわかりやすく！解説)

実際レスポンシブデザインは非常に便利なもので制作側にとってもユーザー側にとっても良いものだと思います。ですが、読み込みの速度が遅くなってしまうと離脱率は跳ね上がってしまうので、そこが一番の懸念点になると思います。僕自身は次にホームページを作るときはレスポンシブデザインにしようと思ってます(笑)。