レスポンシブWebデザインは「分けて考えない」でうまくいく

2013年4月7日 著

レスポンシブWebデザインにおけるコーダーの役割という記事を読みました。冒頭、自分では思ってもいないところでリツイートされましたとありますが、何を隠そう僕もリツイートした一人であります。記事に書かれている内容については基本的に賛同できるのですが、これを機に以前から思っていたことを二点ほど、まとめておこうかと（既にTwitter上でつぶやいたことと重複しますが）。

一点目は、レスポンシブWebデザインの場合、スクリーンサイズなりスクリーン幅ごとに「分けて」考えないほうが、うまくデザインできるのではないか？ということ。逆に言えば、分けて考えれば考えるほど、うまくデザインできないように思います。たとえばスマートフォン、タブレット、デスクトップPCそれぞれに完全に「分けて」デザインされたものをメディアクエリーで合体させたところで、それが優れたレスポンシブWebデザインと言えるかは微妙ではないか、と。

見た目上であれ何であれ、個々のデザイン間にあるギャップが大きくなればなるほど、そのしわ寄せをマークアップ上で吸収せざるを得ず、同時に読み込むべきリソース（画像、スタイルシート、etc.）も増えがちでしょう。その結果、ワンソースでデザインを実装することのメリットは薄れ、スクリーンサイズ個別に最適化のうえページを出し分けたほうが良い可能性が相対的に高まります。

敢えて極論するなら、レスポンシブWebデザインなんざ、リキッドデザインに毛が生えた程度という捉え方でちょうど良いのではないでしょうか。レスポンシブWebデザインを採用する場合であっても、リキッドデザインの考え方を基本とし、スクリーンサイズに対し線形的/連続的でない変化は、できるだけ避けるように考える......いくらメディアクエリーが使えるからといって、必要もなくインターフェイスやレイアウトを変化させることは無いのですから。それによって、一貫したトーン＆マナーを提供しやすくなりますし、また同じユーザーが異なるデバイスで使う際の違和感なり混乱を最小化できるように思います。重要なのは、あらゆるスクリーンサイズを想定、俯瞰したうえでビジュアルデザインを考えることなのかなぁと。

二点目は、制作進行上の業務分担について。レスポンシブWebデザインでは設計、実装、検証あたりのプロセスがウォータフォールよりはアジャイルっぽくなりがちというか、そうせざるを得なくなるというのは、よく言われることです。それと同じことが業務分担についても当てはまると思っていて、つまり従来ほどきっちりとした線引きに基づく分業制でもってレスポンシブの案件をこなすなんて無理。そのためにもPhotoshopでビジュアルデザインを起こしてばかりだった人は今まで以上にHTML/CSS/JavaScriptの知識を得て、またこれまでHTML/CSS/JavaScriptばかりを書いてきた人は益々、レイアウトなりタイポグラフィなりビジュアルデザインを学び、双方の「のりしろ」を増やしたなかで密に連携・共同する必要があります。

一点目と二点目に共通しているのは、「分けて考えない」ということ。それこそは、レスポンシブWebデザインをうまく実現させるためのコツではないかと思っています。もちろん言うは易く行うは難し、ではあるのですけどね。あぁまた釣りっぽいタイトルの記事を書いてしまった。