レスポンシブwebデザイン

レスポンシブウェブデザインとは、ホームページのデザイン手法です。画面の横幅に合わせてデザインが変化することで、様々なデバイスに対し最適な表示を可能にします。

このデザインを採用しているサイトは増加しており、スマートフォンの普及とともに定着してきました。スマートフォンのサイズは非常に多くタブレットまで含めると特定の機種に的を絞った従来の開発手法では対応できなくなったことがレスポンシブウェブデザインが普及した理由です。

テクノロジーは従来からあるブラウザの横幅に合わせて可変するデザインを拡張することで実現しています。2014年10月28日に勧告されたHTML5の機能によりメディアクエリによるブレイクポイントを授けることで特定の横幅の場合コンテンツが変化するという仕組みで対応できるようになりました。

現在最も一般的なデザインとして多くのホームページに取り入れられています。

レスポンシブウェブデザインの開発理念

1つのHTMLファイルですべてのデバイスに対応するデザインを作ることです。従来の開発方法ではPCサイトを作り、次に別途スマートフォンサイトを作るという流れでした。しかし、スマートフォンが主流になるに従いその流れは逆転しました。このようにスマートフォンからデザイン開発をすることをモバイルファーストといいます。

レスポンシブウェブデザインは全てがモバイルファーストで開発されるわけではなく、元々のPCサイトをレスポンシブウェブデザインに変更する際など、PCサイトファーストで作られたものもあります。

しかし、PCファーストのレスポンシブウェブデザインは読み込むスタイルシートファイルのサイズが大きく、閲覧者に負担をかけてしまいます。そのためスマートフォンのデザインから開発することが求められます。

また、Googleでは検索エンジンのランキングにモバイルファーストインデックスという仕組みを導入すると発表がありました。

レスポンシブウェブデザインがホームページの基本形になっていくと思われます。

  1. シェアする
  2. facebook
  3. Twitter
  4. google+
  5. はてなブックマーク
  6. pocket
  7. feedlyを購読