レスポンシブWebデザインの現状と課題

Webユーザエクスペリエンスとして、レスポンシブデザインの技術は最近普通になってきた。
以下、情報をリンクしておく。

レスポンシブWebデザインの基礎 from Hiroyuki Ogawa

レスポンシブデザインとは 【 responsive design 】 〔 レスポンシブWebデザイン 〕 - 意味/解説/説明/定義 ： IT用語辞典

レスポンシブWebデザインがユーザー体験に最適化できていない5つの実例 | SEO Japan

ASCII.jp：レスポンシブWebデザインとは (1/5)｜ゼロから始めるレスポンシブWebデザイン入門

スマートフォンからのアクセスでCSSを切り替える方法。レスポンシブwebデザインの作り方。 | Web制作会社スタイル

レスポンシブ・ウェブデザインでの CSS コードの書き方

Google ウェブマスター向け公式ブログ: Google がお勧めするスマートフォンに最適化されたウェブサイトの構築方法

Rails 4.1 の新機能 - rochefort's blog

【1】デスクトップPC以外に、スマフォやタブレットなどのクライアント端末の種類が爆発的に増えてきたために、Webデザインがすごく難しくなっている。
PCなら広いディスプレイでいろんな操作ができるのに、スマフォのような小さな画面では、PCで表示できるWebページのサイズでは読みにくい。
タブレットは、Androidなら星の数ほど色んなサイズが必要になる。
Android端末の開発者が一番困っているのではないだろうか？

レスポンシブWebデザインの最大の特徴は、ワンソースで各デバイスの画面サイズに対応したレイアウトを実現できること。
最近の企業のWebページでは、レスポンシブルなデザインになっているのが普通だろう。

一つのHTMLで、スマフォ・タブレット・PCからアクセスして普通に読めるようにすれば、ソースの更新作業コストがかなり楽になる。
デバイスごとに、似たようなソースを修正して履歴管理していくのは、とても面倒だし、回帰テストの工数も大きい。
Webページは更新頻度が高いので、たった1行のソース変更でも、デバイスごとにソースを反映していくのはとても大変だ。
特に、CMSでWebページを作っているならば、新しいデバイスが増えるごとに、スクラッチで機能追加しなければならない。

また、一つのURLでPC・スマフォ・タブレットからアクセスできるので、SEO対策やアクセス解析する作業も減る。
デバイスごとのURLがある場合、PCからスマフォや携帯端末にはアクセスできないから、そこでアクセスがロストしてしまうことで、機会損失にもなる。

【2】レスポンシブのデザインにするには、CSSのviewportやmediaタグで制御するのが普通だろう。
CSS修正は、デザイナーの担当というイメージが強かったけれども、最近は、開発者も理解する必要が出てきたように思う。

でも、レスポンシブWebデザインが全ての問題を解決してくれるわけではない。
スマフォやタブレットの回線速度はPCに比べると遅いために、画像サイズや情報量を減らすなどのチューニングも必要。
また、PCでもスマフォでも似たようなレイアウトにするには、そもそものWebページの構成をきちんと設計して、画面遷移も考えないといけない。
PCでの導線とスマフォでの導線は違うのが普通だから、全画面を含めた設計を練り直す必要も出てくる。

レスポンシブWebデザインは、最近バズワードになっているWebユーザエクスペリエンスやアジャイルUXとも絡んでくるだろうと思う。
顧客のフィードバックを頻繁に反映しながら、Webデザインをより良いものへ頻繁にVerUpしていく。
つまり、アジャイル開発ととても相性が良いだろうと思う。

【3】レスポンシブWebデザインの解説本としては、レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック」が良いらしいので、読んでみたいと思う。

RWDの入門書「レスポンシブWebデザイン」(菊池崇氏著) を読んだよ | [M] mbdb

「レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック」レビュー | AIRLife.net

【書評】「レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック」菊池崇 著 | ねんざブログ