QUOIT Blog

レスポンシブWebデザインへの疑念

この記事は5年以上前の記事です。情報が古い場合がありますのでお気を付け下さい。

最近すっかりコードを書くことが少なくなってしまったのですが、たまには気になる話題について書いてみます。

「レスポンシブWebデザイン」について。
どうもこの技術、考えれば考えるほど、その存在意義が分からない。

そもそもレスポンシブWebデザインって何?

レスポンシブWebデザイン(略してRWDというらしい)についての説明は下記の記事を参照。

ASCII.jp:レスポンシブWebデザインとは|ゼロから始めるレスポンシブWebデザイン入門

一部引用させて頂くが、この記事では「“振り分け”型スマートフォン対応の課題」として、4つの問題点を挙げている。

(1)開発コストの増加
あらゆる端末の解像度、スクリーンサイズ、OS、UAを調査して、それぞれに適したHTMLやCSSを用意する必要があります。
(中略)
(2)煩雑なファイルの更新
たとえば、HTMLファイルが振り分けのため端末ごとに5種類あった場合、画像を1つ更新するたびに5つのHTMLを更新しなければなりません。
(中略)
(3)CMSの対応
CMSの機能を使ってページを振り分けている場合、CMSが新しい端末に対応するまで待たなければなりません。
(4)URLの問題
ソーシャルメディアなどで紹介されたリンクが、“ipn”や“mobile.サブドメイン”といったスマートフォン用のドメイン、“/m/ディレクトリ”のようなスマートフォン用のディレクトリであった場合、PCから適切にアクセスできないかもしれません。
(略)

この問題点に関する解決策としてのレスポンシブWebデザインとは、こうだ。

レスポンシブWebデザインでは、あらゆるデバイスに対して単一のWebページ(HTML)を使い、スクリーンサイズ(画面幅)を基準にCSSだけを切り替えてレイアウトを調整します。
(中略)
レスポンシブWebデザインが注目されるのは、「シンプリシティ(simplicity=簡潔さ)」にあります。単一のHTMLを用意すればいいのでメンテナンスの負担が少なく、スクリーンサイズだけを基準にしてレイアウトを変更するため、新しいOSやデバイスが登場してもHTMLを修正する必要はありません。

たしかに、上述の問題点に対する解決策としては適切かもしれない。
しかし、何とまあ技術者のオナニーであることか。
「HTMLを修正する必要はありません」って、目的意識を見失ってないか?

レスポンシブWebデザインの問題点

この浅はかな目的のために作られたレスポンシブWebデザインの問題を挙げてみよう。

1.見づらい

僕が考える問題点はまずこれだ。
見やすいと思ったレスポンシブWebデザインに出会ったことが無い。

レスポンシブWebデザインでは通常、PC版の要素をそのままレイアウト変更して使う。

上述したアスキーの記事中画像を参照すると分かりやすい。)

しかし、ボタンなどの要素をそのまま小さくしてしまい、視認性が悪くなることがある。
逆に、スマートフォン版を意識しすぎるためにPC版のボタンが小さくて分かりづらい、なんてことも起こる。

当然、全てのデバイスに対する見やすさを考慮したデザインを考える必要はあるわけだが、
そんな基本的なことが考慮されているレスポンシブWebデザインのなんと少ないことか。

2.使いづらい

上と同じようなことだが、ちょっと違う。
主にスマートフォン版でのことだ。

PCを使ってWebを見る状況と、スマートフォンを使ってWebを見る状況は違う。
それは想像に難くないだろう。

それなのに、スマートフォンで閲覧するWebに、PC版の全てを詰め込む必要があるだろうか?

下記は、いろいろなレスポンシブWebデザインを集めたブログ記事だ。

Features of the Perfect Responsive Web Design – DesignModo

これを見ても分かるように、多くのサイトが要素をそのままスマートフォンサイズにしたものばかりだ。
(僕がいいな、と思ったのは「Golden Isles」ってサイトだけだった)

こんなもの、誰が使いやすいと思うだろうか?

レスポンシブWebデザインを作るときに考慮して欲しいこと

僕だったらユーザエージェントによってHTMLテンプレートを切り替えるサイトを作るだろうけど、
どうしてもレスポンシブWebデザインにしたいのだったら、以下のことに気をつけたほうがいいと思う。

      デバイスごとのレイアウト構成
      デバイスごとのデザイン構築
      デバイスごとの画像最適化

あと、最も大切なこと。

「エンドユーザやクライアントにとってそれは良いものか?」

それを見失えば、どんな技術も陳腐なものにしかならない。

11 comments for “レスポンシブWebデザインへの疑念

  1. 菊池崇
    2012年10月1日 at 4:38 PM

    記事を拝見いたしました。様々な意見がありまして非常に参考になりました。是非、貴重な考えでありますので数年後にもずっと変更することなく大切にしてください。

  2. yakumo
    2012年10月1日 at 4:55 PM

    引用記事の著者の方ですね。ありがとうございます。
    今後の流れがどうなるかについてはあまり興味がありませんが、技術革新に囚われすぎず、エンドユーザやクライアントにとって良いものになることを切に願います。

  3. shkd
    2012年10月2日 at 7:51 AM

    レスポンシブWEBデザイン自体、まだまだこれからの印象です。今、時流にのって対応して話題をさらうのもある意味では大事なことです。
    ただ、夏に発売された端末の画面サイズが大きすぎるので、この春までとは状況が変わっています。現状のレスポンシブWEBデザインは、CSSで画面サイズなどを判別してCSSをスイッチする技術ですが、大事なのはHTMLが1つであることなので、モバイルファーストに向かう中でHTMLを1つにしようとする流れは止まらないと思いますよ。

  4. yakumo
    2012年10月2日 at 8:18 AM

    コメントありがとうございます。
    なぜHTMLが一つであることにこだわるのか、私にはあまり利点が見出せませんが、モバイルファーストの考え方が広がる可能性については同意です。

  5. 菊池崇
    2012年10月2日 at 1:36 PM

    HTMLが1つであることは非常に大切です。これは特にクライアントさんにとってですね。お金のあるなしの会社に限らず、昨今のクライアントさんは予算を無駄につかうことはないです。となると振り分けをしてコンテンツを調整するのは理想論に聞こえますが、運用の際には逆に大きな負担になることが多いのです。事実、振り分けをしてコンテンツをスマホ用、タブレット用、PC用、テレビ用に用意することは難しい会社さんが多いとおもいます。クライアントがプレスリリースや新製品、新サービスの度に同時に社内の稟議を複数とおして公開?は厳しいとおもいます。特にコンテンツを紙でやり取りしている会社はA4デフォルトで文書がまわりますから、スマホのコンテンツ??????な状況です。それだったら、モバイルファーストから考えたHTML1つがあれば大丈夫なのです。

  6. yakumo
    2012年10月2日 at 1:59 PM

    私はワンソースマルチデバイスの考え方は推奨しております。しかし、その解決策としてRWDは効率の良いものではないと考えております。
    RWDは(組み方にも寄りますが)レイアウトに制限が生まれるため、デバイスに特化したデザインに制約が発生します。
    また、ワンソースマルチデバイスの解決法はHTMLを1つにすることではありません。
    リクエストヘッダによって別のテンプレートを適用するプログラムは難しいものではありませんので、CMSで解決するほうが現状ではベターなのではないでしょうか?
    CMS化したとして、予算もそこまで莫大に変わるものではないと思いますが、何故HTMLを1つにすることにこだわるのでしょうか?

  7. 菊池崇
    2012年11月12日 at 11:27 PM

    ご無沙汰しております。すいません、リクエストヘッダですがUAのことではないですよね。またCMS化ではなくて運用予算ですが、本当に莫大になりませんか?人件費が1人増えたとして、会社の負担はどのくらいでしょうか?レイアウトに制限ができますでしょうか?これまで10件以上の大手OS会社の案件もこなしておりますが、レイアウト制限を考えたことがありません。本当に、レスポンシブで案件をこなしたことはありますか?

  8. yakumo
    2012年11月12日 at 11:58 PM

    リクエストヘッダはUA部分を指してそう言っています。
    CMS化についての運用予算は、案件によるのではないでしょうか?
    また、人件費が増加する前提なのは何故ですか?
    そんなに使うのが難しいCMSしか採用されないのですか?

    1つのHTMLであることを考えたときに、既に配置の順序が決定されていることは制限の一つと捉えることが出来ると考え、そう発言しております。
    レスポンシブWebデザインについて現時点ではメリットを感じられないのでこうした記事も書きますし、私は案件に採用しようとは思いません。
    現状では私はCMSを選択する、と申し上げております。

    当然、私がシステム寄りの考え方であるからCMS化に偏った意見になるのだと思いますが、レスポンシブこそが正義、とは思いません。
    そのため、その発想に対する疑念を書いております。

    まだまだ走りの技術だとも理解しておりますので、今後の情勢は知る由もありません。
    先のコメントにも記載しておりますが、エンドユーザやクライアントにとって良いものになればそれで良いのではないでしょうか?

    余計なお世話かもしれませんが、相手の経験を問う文面はあまり得にならないことが多いので、おすすめしませんよ。

  9. 菊池崇
    2012年11月13日 at 2:24 PM

    ご返信ありがとうございます。

    UAについて、信頼できない情報と経験から考えています。手短な例ですとFirefoxのUAスイッチャーのようなUA偽装ツールもあります。また、端末によって偽装の情報を吐き出しますし、端末によってはUAに判定の為のキーワードもふくまれません。最近の例としてはWindows8のスナップモードでは、UAの判定はできません。UAが駄目だとして、画面サイズを取得することも最近ではできません。Android4以上では、スクロール部分を画面サイズとして値を返す端末があります。結果として、残念ながらUAは利用できないのが現状です。サーバーサイドに詳しい方とお見受けしたので、このあたりは承知かと思います。

    CMSだろうが他の手法でも異なるHTMLが生まれた場合、私の少ないディレクターしての経験からも、管理が発生すると考えています。多少なりとも異なる2つが発生すれば、ステークホルダーが部署によって異なれば管理が発生します。1人増えないとしても、手間は必ず発生します。ただCMSを否定するものではありません、レスポンシブを利用しつつもCMSを組み込む場合も私はあります。

    HTMLの並びの順序ですが、今はCSSで順序を変えることは容易にできます。CSS3のFLEX BOXを利用しなくてもできることです。もし順序だけのことをご指摘されているのであれば、問題にならないと考えてください。レスポンシブのデザイン手法も2年が経ち、発展いるのが現状です。http://mediaqueri.es/ を参考までにご覧になっていただければ幸いです。

    yakumoさんの経験を問うたのは、文面において本当に検証をされているのかというのが疑問だったのです。一般論として「言葉を知っていること」と「実際に行うこと」は違うことです。レスポンシブの事を批判するのはレスポンシブを自身で体験してから批判、賛同を行うべきなのです。試行されてもないことを詭弁になることが非常に高いと考えています。yakumoさん既に試されて実際に経験された上での文面でしたら申し訳ありません。

    ユーザーの為にというのは誰でも目指しているものであり、それは私も同意しております。これは正論であり論及するに値しないと考えていますが、いかがでしょう。

    レスポンシブは過渡期の技術ですので、様々な意見があることも理解しております。yakumoさんの仰ることも当然、私の記事中の説明不足や努力がないことが原因とも考えています。ディレクターまわりや、コストなどの技術手法からでは解決出来ない部分も今後は説明して、少しでも理解をしてもらえるようにと考えています。

    yakumoさんからすると、私の投稿ですが面倒だなと思われているかもしれません。すいません。ただ、積極的に意見を交換していければと思います。宜しくお願いいたします。