2013年1月9日

レスポンシブ・ウェブデザイン(RWD)まとめ



■ レスポンシブ・ウェブデザイン(RWD)とは

レスポンシブ・ウェブデザインは、CSS3のメディアクエリを使用して見た目を変更するWEB ページの構築手法です。つまり、デバイスに関わらず共通の1つのHTMLを用意し、CSS メディアクエリを使用して、そのページを表示する画面サイズからデバイスを判断しCSSを選択し、そのデザインを変更します。
(引用元：Google がお勧めするスマートフォンに最適化されたウェブサイトの構築方法)

パソコン、タブレット、スマートフォンなどのデバイスをWEBサイト表示の判断基準にするのではなく、ブラウザの横幅サイズをWEBサイト表示の判断基準にしているのでデザインを柔軟に調整できるのが特徴。


■ RWDのメリット

□ RWDでしか実現できないメリット
  1. ユーザーエージェントを判別せずにレイアウトを調整できる
    • デバイス判定の技術・知識が必要がない
  2. サーバーサイドプログラムに頼らず、CSSだけで実現できる
    • プログラムの技術・知識がなくても実装できる。
    • 何らかの理由でサーバーサイドプログラムが使用できないときにも有効。

□ 代替手段はあるが、RWDでも実現できるメリット
  1. 各デバイスのURL統一化
    • URL統一化にはSEO面でもメリットあり

■ RWDのデメリット

  1. WEBサイトの容量が大きくなり、表示速度に影響がでやすい
    • RWDは仕組み上どうしても最適化されたWEBサイトより表示速度が遅くなる。
  2. デバイスごとのWEBサイトの最適化ができない
    • ユーザビリティの面でもマーケティングの面でも「最適化」にはならない
    • 不可能ではないけれど、デバイスごとに細かい配慮をすることが難しい。
□ ビジネスシーンでのデメリット
  1. 制作＆管理コストが安いわけではない
    • モバイル用とPC用サイトを別に作っても制作＆管理コストが安くなる場合もある。(もちろん作り方次第だが・・・)
    • 手法自体が古いブラウザに対応していないので、場合によってはコスト増
  2. ユーザにとってのメリットが見えにくい
    • ユーザが求めているのはコンテンツであって、作り手のテクニックではない
    • お客さんの理解が得られないことが多々ある


■ RWDの導入を考える前に

レスポンシブWebデザインはあくまでマルチデバイス対応の一手法です。導入ありきで話を進めてしまうと、誰も幸せにならない結果となりかねません。
サイトの目的やターゲットユーザーから必要とされる要件を洗い出し、見込まれる効果とコストを他の手法と比較した上で、導入を検討していくべきと考えています。
(引用元：レスポンシブWebデザインのメリット／デメリットをできるだけ中立的に検証してみた)


■ RWDは検索順位的に有利なのか？

先に引用したGoogle がお勧めするスマートフォンに最適化されたウェブサイトの構築方法にも記載されているように、SEOの面でもメリットがある手法の1つです。

ただし、あくまでオプションの1つで「RWDにしないと、順位が上がらなくなる」などの宣伝文句は大嘘。そんなことを言ってる人や会社は正しい知識をつけていないものとして対応したほうがいい。




■ まとめるきっかけ

今年初めての仕事がある会社で一時的にやるイベント用のモバイルサイト製作だったのだが、1つ妙な条件が付随していた。
それが「RWDで作れ」とのこと。PC用のデザインがあるのかと思いきや、「見れればOKレベルでいい」のにRWDで作れという。モバイルサイトなのに？RWDの必要性は？一時的なイベント用のサイトでしょ？などなど・・・正直なところ、？マークが飛びまくりだった(苦)


■ RWDに対する個人的なコメント

RWDという手法（というか概念かな？）それ自体新しいものじゃない。
可変長のサイトに毛が生えたものだと思ったほうがいいんじゃないだろうか。
この手法の唯一のメリットはプログラムの知識がほとんどいらないことだよね。HTML+CSSでURL統一化ができるのはRWD導入の敷居を下げているのは否めない。

ただ上述のメリットは別の方法で実現できるものばかりだし、プログラマとしてはあまり使う必要性を感じないというのが本音。サイトはできる限り最適化する方がいい自分としてはデメリットが多すぎてあまり推奨できない。

結論としては
- モバイルがメインでPCからの閲覧は見れればOKというなら有効性はあると思う。
- Wikiとかブログのような画像を多用しないテキストベースのサイトも大丈夫かな。
- 反対にPC閲覧用の凝ったサイトをモバイルに対応させる際にはオススメしない。

CONDENSEのようなサイトこそRWDにするべきだよね。


△ちょっとだけ批判
  • HTMLが1つのファイルに全部入っているからといって管理が楽かと言えば、そうでもないんじゃないか？「条件分岐が一箇所にまとめてあるから全体像が把握しやすいし管理しやすい」とか言われたら俺なら苦笑いだけどな・・・
  • リンク項最後のページにある「メンテナンスが楽」「一貫性のあるデザイン」「親切、安心設計の操作性」とか、正直なところデタラメもいいところ。きちんと作れば実際そういうメリットはあるかもしれないけど、それは別にRWDがもともと持ってるメリットじゃない。
  • 古いブラウザに対応してない時点でレスポンシブじゃないよね？

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)