レスポンシブウェブデザイン

レスポンシブウェブデザイン

端末によるデザインの違い

レスポンシブウェブデザイン（responsive web design）とは、閲覧するブラウザーやモニターのサイズに合わせて画面レイアウトが最適に変化していくWEBサイトの設計方法です。スマートフォンやタブレット端末の普及とともに、インターネットの閲覧デバイスの多様化も進んでいます。その分、WEBサイト自体がユーザーの様々な環境に対応できるようにマルチデバイス化されていくことが求められています。そこで、近年積極的に取り入れられているのが、レスポンシブウェブデザインという考え方です。

レスポンシブウェブデザイン

従来、モバイルサイトを作る場合、PCサイトとは別のHTMLが用意され、ユーザーの環境（ユーザーエージェント）を判断した上でどちらのページを表示させるかを決定していました。ところがレスポンシブウェブデザインでは、同一のhtmlを使ったまま、閲覧ブラウザの横幅に合わせてレイアウトを変更することが可能です。これは、メディアクエリという、ユーザーのOSやブラウザサイズごとにどの様に表示を行うかをCSS上で細かく指定を行うことで実現しています。

見るほうがストレスの無いように

同じWEBサイトでも、スマホかパソコンか閲覧するデバイスによって、1画面で得られる情報量も違えば、ユーザーの目線の動きも変わるため、同じレイアウトだからといって必ずしも同じ使い勝手とは限りません。サイトに来たユーザーを逃さないためにも、上手くレスポンシブ化を取り入れて、どんな環境でもストレスなく閲覧できるサイト作りを心がけていく必要があるかもしれません。