レスポンシブデザイン

スマートフォンやタブレットといったモバイル端末が普及し、好きな時間にインターネットを使う人が増えてきました。
それに伴いWEBページもパソコンだけでなく、様々な端末にも合ったサイズで公開するのが主流となっています。その中の1つの手法としてこのページではレスポンシブデザインについて紹介します。

レスポンシブデザイン

パソコン・タブレット・スマートフォンといったそれぞれ大きさの異なるデバイスに対して
「画面の大きさ」を判断基準として1つのファイルでそれぞれの画面サイズに最適化されたWEBページを表示する方法になります。

インターネット利用デバイスの変化

スマートフォンの普及はインターネットの利用する際のデバイスのひとつとして確実にシェアを伸ばしています。
もはやPCだけではなく、モバイル端末も視野に入れたWebページの作成が必要になってきます。

このグラフは「インターネットを使用した際に使うデバイス」でパソコンとスマートフォンを平成27年と令和元年でまとめたものです（※複数回答あり）。
スマートフォンの利用率はパソコンの利用率を大幅に上回り、スマートフォンからのページアクセスの機会が増えています。その際にレスポンシブ化されていないwebページが表示されてしまうと文字や画像が見えにくい、ボタンが押しづらいといった事が原因でページから離脱してしまう事も考えられる為、画面サイズに合わせたデザインに自動で変更されるレスポンシブ対応が重要となってきています。

レスポンシブ対応と非対応の比較

最後にレスポンシブに対応したものと非対応のものを比較しました。それぞれのページの作り方に利点があります。

	レスポンシブページ	非レスポンシブページ
URL	○ 1つで各デバイスを管理	× デバイスごとに必要
デザインの自由度	× 各デバイスである程度同じにする	○ それぞれのデザインに合わせて作れる
制作コスト	× 調整が難しく、工数が上がる	○ 調整しない分、工数が下がる
システムコスト	○ ワンソースで工数が下がる	× 複数ソースで工数が上がる
修正・管理	○ ワンソース修正で手間が省ける	× 各デバイスのページごとに修正が必要