Re: レスポンシブデザインって本当に使える？レスポンシブを避けるべき3つの理由

2015年2月27日 著

レスポンシブデザインって本当に使える？レスポンシブを避けるべき3つの理由という記事を読みました。冒頭の最近では、新規にウェブサイトを構築する場合、避けた方が良い＝PCとスマホのページは分けて作った方が良いと考えられていますというくだりにしろ、末尾にある手間もコストもかかるわりに表示の不具合が多発するレスポンシブデザインは、導入を検討される企業はまだまだ多いものの、現在は下火になってきていますというくだりにしろ、自分の経験や認識とはだいぶ乖離しているように感じるのですが、それはさておき、挙げられていたレスポンシブを避けるべき3つの理由のどれ一つとっても、賛同できるものではありませんでした。

コストが増える？

1つのファイルでPCとスマホのサイトをうまく表示させるのは、非常に複雑な作業です。CSSで調整を行っていくことになりますが、これは別々のサイトを作るよりも手間のかかる方法で、制作コストが高くなってしまいます。

レスポンシブWebデザイン（以下「RWD」）登場前の、PC専用（ないしスマホ専用）サイトと、必要なフロントエンド設計・実装コストを物凄く単純に比べるなら、確かにコストは高くなるかもしれません。RWD登場前はメディアクエリーを使うこと自体、稀でしたからね。

しかしRWDという手法が登場したのは2010年、つまり5年も前のこと。以来、RWDを実現するためのノウハウや便利なツール、ライブラリなどが多く開発され、またWebや書籍を通じ広く共有されてきました。その結果として、かかる制作コストというのは5年前と比べればだいぶ減ってきている、というのが自分の認識です。

採用したい表示方法があっても、端末によっては表示できないため、機能の制約も大きくなります。

具体例が書かれていれば理解しやすいと思うのですが、上記のくだりは内容をまったく理解できませんでした。

完成した後も表示の不具合が多いのが現状です。実際テストしてみると、「これは割にあわない」となる場合が多くあります。

このくだりも、具体例が無いためにいまひとつ理解に苦しむといいますか、説得力に欠けるように感じます。RWDのショーケース（例：Responsive Web Design JP、Media Queries）を見れば、RWDを採用しているWebサイトは少なからずありますし、また網羅的な確認こそしていないものの、それらを眺めても表示の不具合が多い状況とは決して感じられません。これはRWDという手法そのもののお話ではなく、それを実現するための技術力の高低についてのお話なのでしょうか？

新しい規格に対応するため、サイト全体のデザインを見直す必要に迫られることもあるでしょう。その際はまた、同様のコストをかけてデザインを整える必要があり、コストパフォーマンスが悪くなってしまいます。

新しい規格が具体的に何を指しているのかわからないのですが、日進月歩の勢いで進化し続けるWeb技術を活用しデザインをする以上、一般論として上記は少なからず発生し得る状況だと思います。ことRWDに関して論ずるなら、いったんRWDを採用し、さまざまなサイズのスクリーンに対する表示上の柔軟さを獲得してしまえば、サイト運営上のコストパフォーマンスはむしろ良くなる（将来どんなサイズのスクリーンを持つデバイスが主流になろうと、都度の改修は基本、不要になる）部分もあると思うのですけど、いかがでしょうか。

IE8への対応が大変？

HTML5やCSS3が反映されないIE8以下のブラウザは、他のブラウザとは違う記述が必要になるため、手間もコストも余計にかかってしまいます。かといってIE8以下のブラウザを切り捨てるというわけにもいきません。企業など、IE8を運用されているケースはまだまだ多くあるからです。

まず、RWDを採用するためにマークアップ言語としてHTML5を使わなければいけないということはありません。HTML 4.01だろうとXHTML 1.0だろうと、表示上の手法としてRWDを採用することはできます。

そしてCSS3、というかメディアクエリーについては、そもそもIE8で機能する必要は無いでしょう。IE8が動作するデバイスの大半は、ある程度の広さのスクリーンが期待できるデスクトップないしノートPCなのであって、メディアクエリーを使ってレイアウトを変化させる必要性は無いと思います。

RWDをマルチデバイス対応の一環としてではなく、スクリーンサイズに応じてレイアウトを可変させたいだけ（＝水平スクロールバーを消すためだけ）のテクニックとして認識されているなら、Respond.jsのようなスクリプトに頼るのも選択肢の一つでしょうけれど、表示パフォーマンスを犠牲にしてまでIE8のような古いブラウザ向けにレイアウトを可変させる意義がどれだけあるか、非常に疑問です。

「Googleが推奨しているから、レスポンシブデザインはSEOに有利だ」という説もありますが、HTML5に対応していないサイトはSEO的にもよくないため、手間と工数をかけるわりにうまみが少なくなってしまいます。

どうも、RWDとHTML5を一緒くたにされている傾向を強く感じますが......両者はあくまで別物ですので、そこはきっちり分けて書いていただいたほうが良いと思います。

SEOに関して言えば、ちょうどGoogleが4 月 21 日より、ウェブサイトがモバイル フレンドリーかどうかをランキング要素として使用し始めますと宣言しました（Google ウェブマスター向け公式ブログ: 検索結果をもっとモバイル フレンドリーに参照）。これが意味するところは、RWDを採用するかどうかはさておき、「モバイル フレンドリーな」デザインを採用しなければ間違いなくSEO上の不利を被る、ということです。そしてその「モバイル フレンドリーな」デザインを実現するにあたり、RWDを採用すべきか、PC専用サイトとスマホ専用サイトを作り分けたうえでrel="canonical"やリダイレクトを適切に設定すべきかは、コスト云々よりもまずコンテンツや対象とするコアユーザーを第一の拠り所として判断すべきでしょう。

コンバージョンが良くない？

スマホサイトとPCサイトでそれを見越した別々のデザイン・コンテンツ内容にしたほうが、ユーザビリティが向上します。しかし、レスポンシブデザインではこの要求に応えることが困難です。

ユーザビリティという評価軸でRWDを批判するのは妥当ではない、と思います。なぜなら、RWDが目指すところは見た目も使い勝手も中庸な、「そこそこ」のレベルなのであって、PC「専用」やスマホ「専用」に作り込まれたサイトと比べれば、ユーザビリティで劣ってしまうのは不可避と考えるからです（そのような状況とてRWD誕生以来、5年の間にかなり改善されてきていると思いますが）。

RWDの最大のメリットは、デバイスやスクリーンサイズを問わず一定の見やすさ、使いやすさを提供できる点にあり、特定のデバイスなり特定のスクリーンサイズに最適化するのとはある意味「真逆の」アプローチになります。しかし、そのアプローチのおかげで獲得できるコンバージョンというのもあるでしょうから、一概にRWDを採用するとコンバージョンが下がる、とは言えないはずです。

少なくとも、RWDを採用したことでコンバージョンが採用前よりも上がった、という記事はそこそこ見かける気がします（例：14 brands that increased conversion rates via responsive designとか、最近ではMTV's Responsive Design Boosts Metrics on Mobile & Beyond）。