レスポンシブWebデザインのメリット・デメリット

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

レスポンシブWebデザインとはパソコン、タブレット、スマートフォンなどの画面サイズの異なるデバイスに応じて、それぞれに最適化されたWebレイアウトを行うための制作手法です。

1つのHTMLで構成できると言うことは、Webサイトの内容に変更や追加があった場合などのメンテナンスの負担が少なくてすみます。

1つのHTMLで構成できるので、URLもひとつですみます。
そのため、検索エンジンによる認識の問題やアクセス解析の課題も生じません。
また、Googleが公開しているモバイルガイドでもレスポンシブデザインを推奨しています。

レスポンシブの手法は、各画面サイズを基準にしてCSSでレイアウトを切り替えているため、今後、新しいデバイスが登場しても、HTMLを修正する必要もありません。

レスポンシブの手法は、PC向けもスマホ向けも1つのHTMLで制作するため、すでにあるPCサイトを活かしながらレスポンシブを取り入れることが難しいです。

レスポンシブの手法は、PC向け・スマホ向けの両立を考えながらサイトを組んでいくことになります。

このため、デザイン性の高いサイトや最新の機能を駆使したサイトを制作したい場合には不向きであると言えます。

この場合は、PC向け、スマホ向けに別々に制作した方が良い場合もあります。

それぞれのデバイスで表示させるページを1つのHTMLで制作するため、読み込みの際に、そのデバイスには必要ない要素も読み込んでしまい、ブラウザに無駄な処理を強いる場合があります。

そのため、HTMLやCSSの記述を工夫したり、無駄に高画質な画像ファイルを使用しないよう考慮する必要があります。

レスポンシブの手法で必須となるメディアクエリはCSS3から新しく採用された技術です。

IE8以前の一部の古いブラウザはCSS3に未対応なので、メディアクエリは動作せず、WEbサイトを正しく表示させることができません。

これらの古いブラウザへの対応策として、HTML5やCSS3に対応させるjavascriptを利用することで、ある程度は対策できます。

こちらは、講座の中で取り入れていきます。

このように「レスポンシブWebデザイン」にもメリット・デメリットがあります。

実際にWebサイトを制作する場合は、これらを充分に理解して制作方法を決めることが必要です。

[contact-form-7 id=”601″ title=”めんばー質問フォーム”]