2015年9月1日
レスポンシブWebデザインのメリット、デメリットとその解消方法
レスポンシブWebデザインのメリットとデメリットをまとめてみました。
私はレスポンシブ信者ですので、あえてデメリットの方を詳しく書いています。
また、デメリットをどうすれば解消できるかも考えてみました。
メリット
1. リキッドレイアウト！
最も大きな特徴は可変幅レイアウトであるということでしょう。
現在無数にある端末画面サイズにおいて柔軟に表示することができます。
反対に、固定幅レイアウトで、全ての端末画面サイズのページを作成することは現実的ではありません。
例えば、iPhone6（1,334 x 750px）と、iPhone6 Plus（1,920 x 1,080px）で横幅が330pxも違います。
Androidはもっとすごいことになっています。
Android画面サイズの可視化
via Android Fragmentation Visualized
2. URLが同じ！
HTMLはワンソースでOK、URLもひとつでOKです。
記事の更新、修正もひとつでOK。CMSでもOK。動的に生成されるページでもOK。アクセス解析もシンプルでOK。
サイト運用がとにかく楽です。
3. SEOに有利！
GoogleがレスポンシブWebデザインを推奨していることもあり、SEOでは有利と言われています。
URLがひとつなので、評価が分散することがありません。被リンクやシェアされる際も、統一したURLが使用されることになります。
PCとスマホでURLが異なる場合は、alternate、canonical タグなどが必要です。
via Googleモバイルガイド
デメリット
1. 転送量が大きくなる！
ワンソースゆえのデメリットです。
一般的なレスポンシブでは、PC用サイズの画像を、半分や1/3しかない端末サイズでも使用することになります。また、スマホ用レイアウトで表示しない要素を display:none していても、リソース自体は読み込まれています。よって、ページ表示速度の低下、通信量の増加、サーバ負荷などが懸念されます。
どうすれば解消できるか？
画面サイズに合わせて画像リソースを出し分ける方法があります。
画像はワンソースではなくなりますが、転送量対策をすることができます。
HTML5のsrcsetを使用して、ウィンドウサイズに合わせて簡単に出し分けることができます。
Retinaディスプレイなら2倍サイズの方を読み込んでくれます。
via HTMLのsrcsetを使って画像をレスポンシブにRetina対応させてみよう
また、スマートフォンの画面サイズで表示できるエリアは限られているので、画像を遅延読み込みする方法があります。
スクロールして画面内に画像要素が来てから画像を読み込むものです。jQuery プラグインがあります。
LazyLoad.js
2. CSSが複雑になる！
ワンソースなのはメリットですが、CSSは画面サイズごとに記述するため複雑になります。
どうすれば解消できるか？
Sass などのスクリプト言語で記述すれば、少しは楽になる…かもしれません。
via 目指せSassマスター！デザイナーがすぐ実践できる基本テクニック12連発
3. 古いブラウザNG！
2015年現在の日本のブラウザシェアを見ると、IE8がまだ暗躍しています。
IE8は、CSS3の多くが非対応です。レスポンシブの要となる Media Queries も非対応です。
スマートフォンのブラウザは大抵対応していますが、PCで見て悪影響がある懸念があります。
via StatCounter Global Stats
via HTML5 & CSS3 Support
どうすれば解消できるか？
IE9未満でもCSS3が使用できるJSを使用すれば、対応することができます。
ちなみに、マイクロソフトは2016/1/12以降、IE9未満のサポートを打ち切るようなので、切り捨てる手もあります。#さよなら、IE。
via Internet Explorer サポートポリシー変更の重要なお知らせ
4. スマホ専用UIには勝てない！
UI/UX設計において、スマホ専用の設計に比べると、レスポンシブの方が制約が多くなります。
また、レスポンシブが苦手なものもあります。
- 文字が画像！
- 超複雑なテーブル！
- 外部リソース！
どうすれば解消できるか？
UIについては、レスポンシブ前提ではなく、ユーザーファーストでスマホに最適な設計を行う必要があります。
その上で、レスポンシブで実現可能かどうか検討することが望ましいでしょう。
CSSだけでは実現できない場合も、jQuery を併用すれば、要素の追加や変更ができるので、表現の幅が広がります。あとはスキル次第ということで…。
また、下記についても対応する方法はあります。
- 文字が画像！
→ テキストにしてWebフォントにする
→ 画像を消してaltをテキスト表示する - 超複雑なテーブル！
→ テーブルを再構成するstacktable.jsを使用する
→ テーブルだけリソースを分ける - 外部リソース！
→ どうしても無理な場合、CSS3で縮小する
外部リソースについては、例えばAdSenseの広告などはレスポンシブに対応しました。
どうしてもレスポンシブ非対応の場合は縮小表示する方法があります。
レスポンシブにできない iframe を50%に縮小する例。transform-origin で基準点を指定しておきます。
5. スマホでPC用表示できない！
スマートフォンでもPC用レイアウトで表示したいこともあるでしょう。
しかし、一般的なレスポンシブWebデザインでは、ワンソースのため表示を切り替えることはできません。よって、ユーザビリティを損ねる場合もあります。
どうすれば解消できるか？
Media Queries をPCサイズに変更すればPC用表示が可能です。bootstrap などのフレームワークでも対応することができます。このブログもレスポンシブですが、スマホで見るとページ下部から表示切り替えできます。
詳しい方法は下記をご覧ください。
レスポンシブWebデザインで、PCとスマホ表示を切り替える方法
レスポンシブ+表示切替 WordPressプラグイン
まとめ
考察してきたとおり、レスポンシブは万能ではありません。
一部リソースの振り分けなどをレスポンシブと組み合わせることで、高品質なサイトが実現できるのではないかと思います。
SNSでフォローする
関連記事
