マルチデバイス時代のWebページ

Posted :

レスポンシブ・ウェブデザインという言葉が多くの Web 制作者に認知されるようになり、”端末に合わせたコンテンツの出し分け” は古いなどという意見も出てきていますが、果たして本当にそうなのでしょうか。この記事では、それについてちょっと考えて見たことをまとめています。

さて、最近、日本国内でもスマートフォンやタブレットといった PC 以外で Web ブラウジングできる端末が増えてきました。これにより、


  • Web ページは様々なサイズの画面で閲覧される

  • マウス / キーボード以外の入力が利用される (主にタッチ入力)

という、これまでの大きな画面でマウスを主体とした入力から大きく変わりつつあります。それにより、Web 制作者は、これらのデバイスへの対応が仕事の一つとなりました。

こういった、マルチデバイスへの対応には主に 3 つの方法があると考えています。


  • メディアクエリー採用によるいわゆるレスポンシブ・ウェブデザイン

  • 端末ごとにリソース (テンプレート) を出し分ける

  • PC 用画面に対してすこしだけメディアクエリーを利用する

  • なにもしない

それぞれが一長一短でどれも完璧なわけではありません。それぞれの特徴は以下に。

##いわゆるレスポンシブ・ウェブデザイン


  • リソースを一つにまとめることができる

  • 未知のデバイスが登場しても特性 (画面サイズなど) がマッチすれば自動的に適用される

  • かなり高度な HTML / CSS 設計知識が必要 (大規模サイトであればあるほど)

  • イニシャルコストは高い。ランニングコストは運用次第で2倍にならない程度に抑えることができる。

  • ワンソースであるため事前のコンテンツ量の調整が必要

  • 画像など、共通のコンテンツを最適化できない (近い将来解決する見込み)

  • 変形してクライアントへのウケがいい

##端末ごとの出し分け


  • ターゲットの端末に特化したコンテンツ量、クオリティーを保つことができ、最大限パフォーマンス調整ができる

  • 同内容のリソースが分散してしまう

    • 機械に向けては link@rel=”canonical” や link@rel=”alternate” で軽減できる



  • 未知の UserAgentString を持つブラウザーが登場する都度に調整が必要

##すこしだけメディアクエリーを利用する

フォントサイズが少し小さい場合などにメディア特性にあわせて調整する方法


  • 後付けで導入できる

##なにもしない


  • 変形が起こらないため、以前から利用しているユーザーに新たな学習を強いることがない

  • 主なユーザーが PC と想定している場合、スモールスクリーンのユーザーは情報の発見に学習が多く必要となる

  • ただし、apple コンピューターの Web サイトのように情報量が整理されている場合は自然

繰り返しになりますが、どの方法も一長一短であるわけです。Web の作り手がやるべきは自分たちの満足のために技術主体で考えるのではなく、Web ページの特性、つまり、閲覧者の利益やクライアントの要望を汲み取った結果、どの実装が最適化なのかを判断し、その上で長寿命で堅牢な Web サイトを作ることだと考えています。

知識不足により不安定な技術を使ってしえば、それはすぐに矛盾が現れ、Web サイトとしての寿命を縮めることになってしまいます。バズワードとなりつつあるレスポンシブ・ウェブデザイン。たしかに本来の理想的な Web ページの姿ではあります。しかし選択はほかにもあることを忘れないことも大切です。

でも個人的にはいわゆるレスポンシブ・ウェブデザインも面白いので、機会があったらメディアクエリー採用におけるコードの書き方的な記事をそのうち…。