ニートワークエンジニア

浪人、留年、休学、中退、ニート、エンジニア。回り道人生を謳歌中

レスポンシブデザインは貧乏人の敵

Kinds of responsive layoutsphoto by Jeffrey Zeldman

レスポンシブデザインってのはウィンドウサイズに応じてウェブサイトのレイアウトを変更できる仕組みのこと。同じHTMLでも閲覧するデバイスがスマホとPCでは配置やデザインが変わったりする、あれである。

Media Queriesが実装される前(CSSバージョン3以前)は、サーバ側のCGIがUser Agentなどでデバイスを判断し、個別に用意されたPCページやモバイル専用ページのファイルを返していた。つまり1つのサイトをモバイル端末にも対応させようとすると、実質的に2サイト分のコーディングが必要であったのだ。

一方レスポンシブデザインでは1ページ分のHTMLを使い回してPC用とモバイル(スマホ)用を生成するので、開発や運用にかかるコストを削減できるという開発者にとってメリットがある。

しかしサイト利用者、特に僕のような低スペ環境で頑張っている貧乏人にとってはデメリットしかないような気がしている。

物理的についていけない

以前のモバイルサイトなんかは、ガラケー小さい画面細い通信帯域を考慮して、転送し表示させるデータは本当に最小限であった。

しかし、レスポンシブデザインを採用している最近のサイトでは、PCで開いてもスマホで開いても全く同じファイルを送りつけようとしてくる。更にMedia Queriesの構文がぎっしり詰まったCSSだったり無駄なUIを構成するJavaScriptも一緒に投げてくる。

このように、レスポンシブでは必然的にデータ量が多くなってしまうのだ。

「PC用の構成もモバイル用の構成も全部一緒に渡すから、あとはデバイス側で上手く組み立ててね」ってスタンスだから仕方がない。

そりゃ高スペデバイスならその程度のテキスト処理なんて大した事ないが、貧乏人が使う旧世代のおんぼろスマホや欠陥だらけの中華タブレットだと話が違う。全然上手く(スムーズに)組み立てられない。

低スペerにとってレスポンシブデザインは物理的(ハードウェアのスペック的)にとても厳しい。

Demo Cell Phonesphoto by Michael Hanscom
サーバー負荷を痛み分け

トラフィック増え過ぎたらサーバ死ぬじゃん。だから端末もっと頑張れ」

みたいな意見も十分理解できるのだが、だったらもっと通信量削減する努力しろよ、とも思う。

例えばPC用とスマホ用のCSSを別で用意してるなら、両方ともHTMLファイル内でlinkタグで読ませるのでは無く、@importでデバイスサイズ毎に振り分ければ数kb分のデータは削れる。

他にも、閲覧しているデバイスによっては全く不要なUIの為にjQueryプラグインをてんこ盛りしたりとかも本当にやめて欲しい。

名ばかりレスポンシブが酷い

クラウドワークスでコーディングの修正とかの作業をしていると文句を言いたくなるようなレスポンシブサイトをよくみかける。

例えば、

<div id="pc-wrapper"> 〜 </div>

<div id="sp-wrapper"> 〜 </div>

という構造で、CSSの@mediaでウィンドウサイズによってどちらかのdiv要素をdisplay:none;とするサイトがあった。

これはつまりPC用とモバイル用の2つのサイトを同じファイルに無理やり押し込んでるだけで、片方のdivブロックは完全に無駄である。

僕としては、PCサイトの構造をそのままスマホ向けに無駄なく流用することがレスポンシブの本質だと思っているので、これを「新時代のWebデザイン」と呼ぶならレスポンシブってやつは本当にクソだと思う。