Media Queries – 使うべき？使わないべき？そもそも使えるのか？

どうやらアメリカでMedia QueriesやResponsive Webについての議論がヒートアップしているようなので、Media Queriesについてじっくり考えてみた。

1. Media Queriesが必要なわけ (理由)
2. スマフォ対応に使うべき？
3. そんなに簡単ではない
4. もっともな異論
5. まとめ

Media Queriesが必要なわけ (理由)

ひと昔まえ（5年前とか…）だったら 800 x 600px か 1024 x 768px のどちらかを選べば、たいていのユーザ環境をカバーすることができました。しかし、昨今のユーザが使うデバイスのスクリーンサイズは様々になっています。

たとえば、デスクトップ版のMacだけ見ても幅のサイズは以下のように大きく違ってきます。

• iMacの27インチ → 2,560ピクセル
• MacBookの15インチ → 1,440ピクセル
• MacBook Airの11インチ → 1,366ピクセル
• MacBookの13インチ → 1,280ピクセル

また、最近ではiPadのようなタブレットPC、画面サイズがちょっと小さめなネットブックなど、ユーザはそれぞれスクリーンサイズの違ったデバイスを使ってウェブサイトにアクセスしています。それに加えて、iPhoneやAndroid携帯のようなスマートフォン、はたまた、日本のガラケーなども含めるともっと多岐にわたります。（タッチインターフェイスのことも考えるともっと複雑ですが、ここではサイズのみにとどめておきます）

ウェブサイトは様々なスクリーンサイズのデバイスで見られるのに、1つのサイズだけに最適化されたデザインで対応するのには違和感がではじめている。ここ半年〜1年くらい、いろいろなウェブサイトを見ていて、そんな雰囲気を感じはじめています。

去年ころからアメリカで注目されはじめたMedia Queries

そこで注目されているのが前回の記事で基本についてまとめた「Media Queries」というCSS3の機能です。この「Media Queries」を使えば各デバイスのスクリーンサイズに合わせてレイアウトを変更することができます。スクリーンサイズに応じた細かい最適化で、ユーザにより良い体験を提供できる機能です。

どんなことが可能なのかは、以下のサイトを見て実際にブラウザサイズを変更してみてください：

• Web Designer Wall
  ウィンドウサイズによって、ナビゲーションの位置やバナーの表示・非表示、画像サイズなどが変更します。
• Mediaqueri.es
  Media Queriesを使って作成されたウェブサイト集

では、このMedia Queriesを使ってPC版ウェブサイトをスマートフォン向けサイトに最適化させるべきなのか？もしくは、できるのか？

スマフォ対応に使うべき？

個人的には、以下のように考えています。

個別サイトがベスト

スマフォ向けに個別サイトを作成できるリソース（人、金、時間）がある場合、スマフォ向けサイトを、デザイン、レイアウト、コンテンツを最適化して作るべきだと思います。

なにもしないよりはMedia Queriesで対応させたほうが良い

逆に、スマフォ向けに別サイトを制作・運営するリソース（人、金、時間）がない場合、PC版サイトをMedia Queriesで、できるところまでスマフォに対応させるのもありだと思います。ベストではないが、なにもしないでPCサイトをそのままユーザに小さい画面で見せるよりはましだと思います。

下記「もっともな異論」のセクションで「ファイルサイズの問題」が指摘されていますが、「なにもしない場合」と「Media Queriesで策を施した場合」のファイルサイズの差は、スマフォ向けCSSの追加分程度です。対応あり・なしで同じサイズのファイルをダウンロードする必要があるのなら、スマフォ向けに最適化されていたほうが断然良いはずです。

ただし…

そんなに簡単ではない

Media Queriesを使ってスマフォ対応させることは、そんなに簡単にはできないと思います。対応するためには、未対応のサイトを制作するときよりもコストも増えてしまうと思います。

また、技術的な視点からも、対応させるには以下が必要になると考えています：

• サイトの構造設計をゼロから考え直す
• デザイン、レイアウト、コンテンツのモジュール化
• HTML、CSSのモジュール化

逆に、この3つができていないと、効果の出ることはできないと思います。

また、以下のような技術的な問題点も指摘されています。

もっともな異論

ウェブ業界では有名な「A List Apart」というウェブサイトに2010年5月25日に掲載された「Responsive Web Design」という記事で紹介されたMedia Queriesについての考え方に対して異論を唱えた「CloudFour」のJason Grigsby氏は2010年8月3日の「CSS Media Query for Mobile is Fool’s Gold」というブログ記事で、スマートフォン向けのサイトは、そもそもコンテンツ自体が最適化されるべきだし、Media Queriesの以下のような技術的な問題点があると指摘しています：

1. Media Queriesは、すべての問題を解決できるツールではない
   → まったくもってそのとおりだと思います。ケースバイケースで、適切な場合に使用するべき
2. モバイル版のネット接続速度は遅い。遅い接続で、PC向けの大きなファイルをそのまま読み込ませるのはいただけない
   → こちらもそのとおり
3. 画像サイズをモバイル版に最適化すれば、大きな割合（検証例では78%）でファイルサイズを小さくできる
   → モバイル版には画像を小さくしてくれるサーバ技術などが発展すれば、これも問題なくなるのですが。たしかOpera MiniやOpera Mobileでは、すでにサーバサイドとブラウザ側で最適化をしているそうです。
4. 古いPCではブラウザに画像をリサイズさせるとCPUやメモリに負担をかける
   → 古いPCを使っているユーザが多いと想定される場合は心配する必要もあるかと思いますが、実際問題、これに関してはそれほど問題ではないように思います。
5. Media Queriesで特定のデバイスに特定のサイズの画像を指定したりdisplay: hiddenで表示を隠したりしても、結局すべて読み込まれてしまう。iPhoneでは画像の親要素を隠せば読み込まれなくなるが、現実的な対応方法ではない。
   → ブラウザのバグの可能性もあるとの指摘もあるが、著者は画像の読み込みをスムーズにさせ、点滅させるなどの不具合をなくすためブラウザの認識は正しいとしている。この辺は、モバイルブラウザが対応してくれるとすごく嬉しいんですが。。。CSS3もまだ勧告候補ですし、これからの動きに期待したいです。
6. 必要のないHTMLやJavaScriptも読み込まれてしまう
   → たしかに、その可能性はありますが、サイト全体の設計次第ではある程度回避できるのでは？ここに関しては調べてみないと分からないです。PCでは普通のjQuery、モバイルではjQuery Mobileを読み込むようにするとか？まだ読めていないですが、Media QueriesはJavaScriptと連動して使用されるべきといった旨の「Combining media queries and JavaScript」という記事もあります。
7. サポートされていないブラウザがある
   → これに関しては、JavaScriptでIEに対応することで、近代ブラウザのほとんど100%に対応することになる。あとは、未対応のブラウザを使っているユーザの割合やコンバージョンなどのパフォーマンスを比較して、検証する必要がある。サポートブラウザに関しては前回の記事をご参照ください。
8. PCでの体験と、モバイルでの体験は違うもの。文脈が違ってくる。
   → これもケースバイケースのような気がします。PCでウェブサイトを見ているときはこういう情報をこういうふうに欲していて、モバイルのときはこう、といった差がどれだけあるのか？実は、そんなに違ってなかったというケースが多い気もしなくはないのですが… 例えば、Amazonのサイトを見るとき、PC版で求めるものとモバイル版で求めるものはそんなに違っているのでしょうか？PCサイトにはあるのに、なんでモバイル版にはないの？と思うことも結構あります。これは別途考えてまとめる必要がありそうです…
9. モバイル版を別に作成したほうが良い。たとえば、NYTimesのモバイル版サイトは54Kでダウンロードできるのに対し、PC版は637.4Kだ。HTTPリクエストの数も約5倍
   → たしかに、iPhone 4でもPC版サイトを見るときは遅いと感じるときは多いですね。ただ、これもサーバサイドやモバイルブラウザの技術の進歩によって近いうちに解決されてくるような気がします。

ただ、彼はこのブログ記事の最後に「デスクトップの複数の画面サイズに最適化するにはMedia Queriesは良い。」また、「デザイナーやデベロッパーがデザインのモジュール化を考えはじめるきっかけになって良い。」とまとめています。Media Queriesの可能性を否定しているわけではなく、完璧ではないし、モバイルには最適ではないのでは？と訴えているようです。そして、その次に書かれた記事では使い方次第でMedia Queriesは使えるツールだともしています。

まとめ

以下、Media Queriesを使うことについて、今の自分の考えをまとめてみます。

Media Queriesについて

• Media Queriesは使える技術だと思う。そして、利用されるべきだと思います。
• ただ、クリアされるべき技術的な問題も多くある
• また、既存のサイトにMedia Queriesを追加すれば実現できるといった簡単なものではない
• レスポンシブ・デザインの一環として使われるべきで、単体での使用には限界がある
  ※レスポンシブ・ウェブについてはまたこんどまとめます…
• 複数デバイスを想定した綿密な設計が必要
• いままでの制作とは違った発想が必要
• Media Queriesでの対応が最適かどうかはプロジェクトごとに異なる。ケースバイケースでしっかり判断すべき
• Media Queriesを導入するにもコストと時間がかかる。複数画面に対して設計するので、その分の追加作業が発生する
• レスポンシブ・ウェブ的な発想の設計やデザインに対応できる制作チームが必要

モバイルについて

これからはモバイルの時代です。そして、スマートフォンの時代です。
PC版ウェブサイトの重要性は変わらないと思いますが、スマートフォン向けモバイルサイトもそれと同じくらい、またはそれ以上に重要なものになってきています。

個別にスマフォ向けモバイルサイトが作れたら、それがベストですが、Media Queriesやこれから新しく出てくる技術を使って、より効率的・効果的に複数デバイスに最適化されたウェブサイトが提供できるようになれば良いなと心から思っています。

2011年5月14日に公開され、2012年4月28日に更新された記事です。

この記事をシェアする

• ツイート
• シェアする
• ブックマーク
• Pocketに保存