レスポンシブWebデ...|独学でWebデザインの勉強をする人のためのまとめサイトです。


  • レスポンシブWebデザイン講座 レスポンシブ予備知識編(無料公開中)

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

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

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

レスポンシブWebデザインの特徴

レスポンシブWebのメリット・デメリットまとめ

メリット

1つのHTMLで構成できる

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

サイトのURLは一つに統一できる

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

⇒ Googleモバイルガイド
https://developers.google.com/webmasters/mobile-sites/mobile-seo/overview/select-config?hl=ja

新しいデバイスに柔軟に対応できる。

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

デメリット

既存のPCサイトがある場合、レスポンシブ化が難しい。

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

デザイン面では見劣りすることもある。

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

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

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

無駄な処理が生じる可能性がある。

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

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

IE8以前の古いブラウザをサポートできない。

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

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

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

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

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

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

ご質問・メッセージは以下のフォームよりどうそ!

*
*
*
*


レスポンシブWebデザイン動画講座受講について

【初級編】【応用編】【練習問題】を受講するには、講座へのお申し込みが必要となります。


レスポンシブWebデザイン使い方講座詳細・お申し込みはこちら



Pagetop