[翻訳] モバイル向けの CSS Media Queries は見掛け倒しである

Category : CSS

この記事は、2010年8月3日に Jason Grigsby によって書かれた CSS Media Query for Mobile is Fool’s Gold を翻訳したものです。
画像・表・リンクなどは掲載していませんし、翻訳が怪しい場所がところどころにありますので、ちゃんと読みたい方は原文を参照してください。

翻訳部分は次のセクションとなります。

CSS Media Query for Mobile is Fool’s Gold

Ethan Marcotte の記事「Responsive Web Design」はウェブ開発者たちの想像力を刺激し、いくつかの後続の記事はモバイルに最適化されたウェブサイトを構築する方法として、CSS Media Queries をもてはやしました。

私もまた「iPad Orientation CSS」という記事でこの流行に貢献した罪があります。

残念ながら、モバイルデバイスに Media Queries で対応することは fool’s gold (見掛け倒し) といえます。それは、重要な問題を見えなくしてしまい、開発者が様々なスクリーンサイズに対応するためのシンプルな方法という偽りの約束をします。

概要

Media Queries でできると言われていることについて考えれば、モバイルデバイス向けの CSS Media Queries の問題を見つけることは簡単です。

より小さな画面、パワフルでない CPU、そして低速回線なデバイス向けに、デスクトップ向けのウェブデザインを変換するのためにあなたがすべきことは、もっと多くのコードを追加することです。

モバイルへの最適化のために、コードを追加する――ダウンロード量を増加させる――アイディアは、これが良い解決策ではないということへの最初の鍵になります。

核となる前提:モバイルにおいてスピードはより重要である

私は Media Queries に関する技術的な欠陥を指摘するつもりです。欠陥のほとんどは、モバイルにおいてスピードはより重要であるという私の信念に基づくものです。

デスクトップ上でなら、より遅いウェブページを許容すると言っているわけではありません。モバイルはより多くの状況で使用される可能性があるということです。アクセス速度がより重要であったり(急いで仕事探している)、速度が最適化されない環境(回線速度、デバイスの処理能力)といった場面です。

モバイル向けのデザインをするとき、パフォーマンスは重要な考慮事項です。

画像のスケールをブラウザ任せにするのはバッドアイディアである

Ethan Marcotte の記事「Responsive Web Design」は、彼が「Fluid Images」と呼んでいるテクニックに依存しています。

Fluid Images の考え方は、画像を使用する際には最大サイズで提供するというものです。HTML 上で width と height を指定しなくとも、必要に応じて CSS の指定によって相対的なサイズにブラウザがリサイズしてくれます。

このテクニックはモバイル向けとしては、いくつから理由からバッドアイディアといえます。

最大サイズの画像=不必要に大きなファイルのダウンロード

最大サイズの画像は、モバイルデバイスにおいてそのサイズの一部しか見られないという事実があるにもかかわらず、ダウンロードされます。「Responsive Web Design example page」において、画像本来のサイズは330×345ピクセルですが、iPhone での閲覧時には約150×157ピクセルで閲覧することになります。

「Responsive Web Design example page」に含まれている、シャーロック・ホームズの登場人物の6枚の画像は合計で208キロバイトありますが、これらの画像をリサイズ・最適化すれば、 6枚で合計45キロバイトまで減らせます。つまり、ファイルサイズとダウンロードに要する時間が78%削減できるということです。
(訳注:詳細な比較表は原文参照のこと)

モバイルフォンの性能の良し悪しに関わらず、モバイルデバイスに162キロバイトを不必要にダウンロードさせることは馬鹿にできない事実です。

ブラウザによるリサイズは CPU とメモリに負荷がかかる

もちろん、デスクトップブラウザと iPhone のブラウザに画像のリサイズに関する問題があるわけではありません。しかし、大して優れていない CPU を搭載している、古い、または安価なモバイルフォンはどうでしょう? このテクニックは、より大きな画像をダウンロードし、メモリ内で完全なサイズに展開し、スクリーンの大きさに合うようにリサイズすることを求めているのです。

Apple の Mobile Safari documentation にも「画像は適切なサイズにする必要があります。ブラウザのスケーリングに依存しないでください」とあります。

Media Queries を使って、違う画像を提供することはできない

みなさんが考えるであろうことは分かります。Fluid Images のテクニックではうまくいかない。では、Media Queries を使って、スクリーンサイズごとに違う画像を出してみましょう。

これを達成するには2つの方法があります。1つ目は、CSS で非表示にされた img タグを使うことです。2つ目は、CSS の background-image を使って、背景画像を切り替えることです。それでは、両方のテクニックを見てみましょう。

img タグを CSS Media Queries で非表示にする

Rachel Andrew の「article about CSS media queries」では、例として「dConstruct’s web site」を挙げています。

The dConstruct site は美しいものです。このサイトはブラウザの表示領域が大きくなると共に大きくなります。写真はマウスホバーにより(モノクロからカラーになり)いきいきとした状態になります。これは本当に一見の価値があります。

話者の大きな顔写真は img タグを使用してページ上に配置されており、モノクロ写真は1枚のスプライト画像で、CSS を使ってカラー写真の上に重ねて表示されています。

また、このサイトをモバイルデバイスで閲覧すると、話者の大きな画像は画面から見えなくなり、画面サイズにフィットしたシンプルなリストが表示されるでしょう。

CSS Media Queries は、話者の画像が格納されている div に display:none を指定するのに使われています。

しかし、写真が表示されていないも関わらず、iPhone は画像をダウンロードしています

「Big Web Show interview with Ethan Marcotte」内にいくつかの憶測がありました。おそらく、ブラウザがダウンロードしていたものをレポートするツールが、誤って実際にダウンロードしたものより多くのファイルを報告していたというものです。

CSS Media Queries を使用しているにも関わらずダウンロードされた画像を確認するために、私は2つのテストを行いました。まず、Responsive Design で使用されているページのコピーをローカルに作り、iPhone でロードし、ダウンロードされたファイルのログを見ました。2つ目は、プロキシサーバーにした Mac に iPhone をセットし、dConstruct’s site への全てのリクエストを記録しました。

どちらの場合でも、Media Queries で display:none しているという事実にも関わらず、画像ファイルはダウンロードされていました。これが意味するのは、ユーザーが決して見ることのない、余分な 172キロバイトもの画像を iPhone はダウンロードしているということです

CSS background images を非表示にする

きっと CSS background images は img タグを使うより良く動作するに違いないと言うんでしょう? 違いますよ。

私は CSS background images と Media Queries のいくつかの異なる組み合わせをテストしました。それで私が見つけたものは……。

  • 背景画像を持つ、ある要素に display:none を指定する Media Queries の使用は、Mobile Safari がそれをダウンロードするのを防ぐものではない
  • モバイル向けの画像で背景画像を上書きする Media Queries の指定では、デスクトップ用、モバイル用の両方の画像がダウンロードされた

動作すると思われる2つの方法があります。

  • 背景画像を持つ要素の親要素に display:none を指定する。
  • デスクトップ向けの画像に最小サイズのブラウザ幅のみを min-width で指定し、Mobile Safari 内にダウンロードされたモバイル向けの画像のみに max-width を指定する Mediq Qeuries を使用する。

これら2つのオプションは、CSS Media Queries を使用することは完全に不可能ではないということを意味しています。ですが、背景画像を非表示にするために親要素を使ったり、min-width の指定のためにデスクトップ向けの既存の CSS を変更することは、現在の CSS にとって重大な変更となります。CSS Media Queries をモバイル用に追加して、それで作業が終わりというほど簡単ではないでしょう。

それはそれとして、表示されていなくても画像をダウンロードする振る舞いは、画像をダウンロードしてしまいますが、それにより遅延することなく、プルダウンメニューや他のホバーイベントでの画像を表示させられるようになります。これは一般によいことです。

CSS Media Queries では HTML や JavaScript の最適化はできない

私が初めて Media Queries を導入したのは、Google マップが埋め込まれているデスクトップ向けのページを作っていたウェブ開発者を手伝ったときでしたが、モバイル向けのページではマップが含まれている div は Media Queries によって非表示にされていました。

残念ながら、マップは決して表示されることがないにも関わらず、180キロバイトもの JavaScript ライブラリをブラウザにダウンロードさせてしまっていました

CSS Media Queries は不必要な HTML を削除することはできませんし、モバイルブラウザを遅くするであろう JavaScript を削除することもできません。

CSS Media Queries は十分にサポートされていない

もし、私が上記に示した課題を全て克服したとしても、CSS Media Queries は多くのモバイルブラウザでサポートされていないということを、あなたは知ることになるでしょう。

Peter-Paul Koch の「compatibility table」によると、モダンスマートフォンでも CSS Media Queries をサポートしていないブラウザがあることが分かります。サポート状況はバラバラで支離滅裂な状態です。

古いブラウザをサポートしようと決める際には、画像はなおいっそう悪いものとなります。

モバイル向けのウェブサイトに Media Queries を使うことを選択した場合、下手な解決方法を選択したつもりではなくとも、大多数のモバイルユーザーを切り捨てることとなります。

モダンスマートフォンを持っているユーザー人口はあなたが思っている通りかもしれませんが、サポートするデバイスの種類を決定しなければなりません。

モバイル事情の軽視

CSS Media Queries の約束とは、既存のデスクトップ向けサイトの HTML にモバイル向けのプレゼンテーションレイヤーを追加することができるというものです。これにより、モバイルユーザーはデスクトップユーザーよりも非常に多様性にとんだニーズを持っている可能性があるという事実が軽視されます。

以下の文は Brian Fling の「book on mobile design」からの引用です。

プロダクトを生み出すとき、小さなスクリーン向けに再利用してはいけません。よいモバイルプロダクトは移植ではなく、創られたものです。

あなたのデスクトップ向けホームページは位置情報検索を使っていますか? おそらく使っていないでしょう。モバイルサイトはそうすべき? かなりの確率で。

モバイルユーザーにデスクトップユーザーと同じ HTML と JavaScript を提供する場合、スクリーンサイズに合うようにしたとしても、おそらくは、デバイスの能力とモバイルユーザーの事情に基づくすばらしいユーザーエクスペリエンスを提供する機会を逃していることになります。

モバイル用サイトを分離するのは良いことである

モバイルサイトを分離することが開発において苦痛であることは分かっています。モバイルサイトを設計するのに多くのインフラが用意されていますので、それについては近々書くつもりです。しかし、なぜモバイルサイトを分離する必要があるのかについては、正当な理由があります。

The Big Web Show での Ethan のインタビュー中では、New York Times からの共有リンクが望みどおり動かないことについての議論にしばらく時間が使われました。モバイルサイトからリンクを誰かに送ったときに、相手がデスクトップブラウザでリンク先に行くと、そこはモバイルに最適化されたサイトのままなのです。

このポッドキャストから導き出された結論は、CSS Media Queries はよりよい解決方法であるかもしれない、なぜなら、たった1つの URL がデスクトップとモバイルの両方で動作するからだ、というものでした。

New York Times のデスクトップとモバイルのホームページを YSlow で見た、具体的な数字は以下のようになります。
(訳注:原文には詳細なデータが掲載されています)

デスクトップ
 - HTTP リクエスト:107
 - ダウンロード総数:637.4キロバイト

モバイル
 - HTTP リクエスト:23
 - ダウンロード総数:54.0キロバイト

ご覧のとおり、モバイルサイトはデスクトップサイトに比べて5分の1の HTTP リクエストで済み、583キロバイトも小さなものです。それは90%以上も小さく、モバイルデバイス上ではより大幅に速いものです。

(余談ですが、多くの HTTP リクエストは、ワイヤレスネットワークの遅延のため、デスクトップに比べてモバイルデバイスではより費用がかかります)

New York Times のリンクが正しく動作するべきという意見には賛成ですが、肥大化したデスクトップ用ホームページを取得し、モバイルに(非)友好的な CSS コードを追加することが解決方法とは言えません。

CSS Media Queries の良い使用方法

CSS Media Queries の良い使用方法があります。より多くコントロールでき、デスクトップ向けのサイトが肥大化していないことを確認可能な離散的ウェブアプリケーションを構築しているなら、それは理にかなった方法です。

また、キャンペーンモニターの Ros Hodgekiss は、モバイルに最適化されたレイアウトの HTML メールを提供するための Media Queris の使用方法という記事を書きました。これは理想的な使用方法かもしれません。HTML メールを送信するときには、受信者がどのデバイスを使っていようと、選択の余地なく単一の HTML ドキュメントを使用しなければならないからです。

Responsive Web Design はまだ揺らいでいる

ちょっと待って、Responsive Web Design はまだ揺らいでいるでしょうか? 私が書いた全文を読んだあとでは信じにくい、そうなんじゃないですか?

私は CSS Media Queries についてではなく、グリッド周りの構築、異なる画面サイズへのデザインの計画、モジュールブロックの構築、それらが画面サイズに応じて配置可能になる方法について話しているのです。

それが Ethan の記事にある本物の宝石です。彼の「Responsive Web Design」から2つの事柄を得ることを私は望んでいます。

  • 多くのデスクトップ向けサイトは、複数のスクリーンサイズに最適化する Media Queries と fluid grids のアドバンテージを得るでしょう。Media Queries はデスクトップ向けのウェブデザインにおいて、理にかなったものです。
  • Media Queries が実装されていない場合でも、もっと多くのデザイナーや開発者がモジュールとしてのデザインについて考えること。

魅力的な responsive architecture と、今まで見てきたテクニックとの彼の比較は無視できないと気づきました。しかし、モバイル開発に関しては、それら CSS Media Queries が使われたコアメカニズムは役に立つものではありません。
(訳注:ここの部分は上手く訳せませんでした)

確実な方法などない

モバイルサイトの開発は難しいものです。モバイルに最適化された素晴らしいユーザーエクスペリエンスを提供するための簡単でシンプルな解決方法はありません。CSS Media Queries はツールであり、確実な方法ではないのです。

これは特に驚くべきことではありません。今では CMS を当然のように使っていますが、それがデスクトップサイトにとって簡単な方法とは限りません。単に Apache を適切に動作させることがどれだけ難しかったか、私達は忘れています。

最近の大きな技術の波の中で、デスクトップブラウザに品質の保証されたエクスペリエンスを提供するためのインフラが数多くありました。それがモバイルにも来るとき、私達は同様のものを持っています。

それがどんなに困難であっても、モバイルにはそれだけの価値があります。人々の手の中にある情報の力には――彼らが世界中のどこにいようとも――より多くの時間と労力を注ぎ込むだけの価値があるのです。

Copyright

Copyright © 2011 Cloud Four, Inc. All Rights Reserved.

後書き

翻訳元の記事には続きがあります。

この記事の補足、質問への返答などが書かれていますので、目を通すことをおすすめします。。
また、関連記事として ajaxian による以下の記事も読んでほしいと思います。

最後に、翻訳の際にアドバイスを下さった Jun Sugimoto (@understandard) さん、ありがとうございました。

Trackbacks & Pingbacks

Comments

菊池 崇

記事の翻訳、すばらしいですね。お疲れ様でした。
途中に 「the Big Web Show での During Ethan のインタビューでは、」という部分がありますが、「The Big Web Show での Ethan のインタビュー中では、」の訳のほうがいいかもしれません。このあたり、他のフォローアップの記事などあればお待ちしていますね。

まとり

@菊池 崇 さん
そう言っていただけると嬉しいです!
翻訳のご指摘ありがとうございます。確かにそちらの方が分かりやすいと思いましたので修正しました。
フォローアップはしたいところですが、やる気が出たら、ということでw
どうもありがとうございました!

Leave a Reply