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

レスポンシブWebデザインとは、同一のページについて同一のHTMLファイルであらゆる端末（デバイス）に最適化した表示を実現する技術を取り入れたWebデザインのことです。ページのデザインを指定するCSS（スタイルシート）がCSS3に進化し、いろいろな画面サイズに適したデザインやレイアウトを単一のファイルに記述することが可能になり、一気にシェアを増やしました。

検索エンジンのGoogleが、モバイル向けサイトのコンテンツを優先して評価するモバイルファーストインデックス（Mobile First Index、MFI）に方針転換し、レスポンシブWebデザインを推奨したことが大きな節目になりました。モバイルに対応していないサイトでは検索順位が落ちる可能性があります。PC向けにデザインされたページでも、スマホで閲覧すること自体は可能ですが、フォントや画像が小さくなりすぎたり、ページのプログラムが動作しなかったりするなど使い勝手が悪くなります。

レスポンシブWebデザインが普及する以前は各種のデバイス向けに別々のHTMLファイルやCSSファイルを用意し、ユーザーに使用デバイスを選択させたり、端末情報を読み込んで該当のページに振り分けたりしていました。

しかしこの方法では、あらゆる大きさのデバイスに対応しようとすると、膨大なファイル数を作成して管理する必要があり、コンテンツの内容を修正したい場合は、すべてのファイルを修正することになり大変な労力がかかります。また、モバイル閲覧用のファイルを別に作った場合には、モバイル・PCユーザーそれぞれが別々のURL、PVに分かれるため、SEO対策上不利になることも考えられます。加えて、各種SNSが普及してURLのシェアが頻繁に行われるようになっているため、URLを統一しておいたほうが訪問ユーザーにとって利便性が高いと言えます。

レスポンシブWebデザインのページなら、画面のサイズごとに複数のデザインに振り分けることができます。PCで閲覧した場合、ブラウザのウィンドウの横幅を広くしたり狭くしたりすれば、それに合わせて自動でデザインが切り替わります。スマホの向きを縦から横に切り替えた時にも、ユーザー側で操作をすることなく自動でデザインが切り替わり、最適な見え方を確保することができます。

レスポンシブWebデザインのデメリットとしては、サイト全体の設計や個々のページの作り込みに比較的高度な作業が必要で、その分コストがかかることが挙げられます。HTMLやCSSのコーディングの精度が足りずに特定のサイズの画面でレイアウトが崩れてしまい、コーディングが複雑になりすぎて、ページの表示に時間がかかりすぎてしまうこともあります。また、表示の崩れを避けようとしてデザインが簡素になりすぎることもあります。特にモバイル端末への対応ページから作り始めた場合、PCで閲覧した時に情報量が少なすぎてスカスカだった、ということがよくある失敗です。