利用者視点で見るレスポンシブウェブデザイン

最近、個人的に不便に感じているのが、同じコンテンツにも関わらずアクセスするデバイスに応じてURLを変えているコンテンツだ。スマートフォンからのアクセスだと、"m"*1などの文字が前後いずれかに付与されたURLなどにリダイレクトされる。

そのデバイスからのみコンテンツをアクセスしている分にはさほど不便を感じないのだが、私はChromeのデバイス間タブ同期機能のヘビーユーザーであるため、頻繁に同じコンテンツをMacやWindows、そしてAndroidデバイスで見る機会に遭遇する。結果、何が起こるかというと、Androidからアクセスしていたスマートフォンに最適化されたコンテンツをMacやWindowsで見ることになり、なんとも不恰好なデザインで見させられることになる。

悪い例として出すことになってしまい申し訳なく思うが、このブログを再配信しているBLOGOSというブログメディアがある。このBLOGOSにスマートフォンからアクセスすると、lite.blogos.comというサブドメインにリダイレクトされる。スマートフォンから読む記事もすべてこのサブドメインで展開される。通勤時などにスマートフォンで読み途中となった記事をオフィスや自宅でMacやWindowsで読むと、スマートフォンに最適化されたページで読むことになる。例えば、「デジタルとアナログと思いやりとかかる手間と 〜 手書きと電子メールをめぐって*2という記事は下のようなデザインで表示される。

右上にわずかに見える「PC」というアイコンをクリックすれば、通常のURLで読むことができるが、利用者に余計な負担を強いてしまっている。

ー*ー*ー*ー

レスポンシブウェブデザイン、すなわち、「すべてのデバイスに単一のURLで同じ HTML を提供し、CSSを使用してデバイスごとにデザインを変更するサイト」*3の利点はすでにあらゆるところで言われている。

Googleウェブマスター向け公式ブログでも「Google がお勧めするスマートフォンに最適化されたウェブサイトの構築方法」という記事でも、レスポンシブウェブデザインを検索の観点からも推奨している。

マルチデバイス時代の今日、異なるデバイスであっても、「同じコンテンツ」がデバイスに「最適化されたデザイン」(すなわち、読みやすい、利用しやすいデザインである)でアクセスできることが、利用者視点で見た場合に重要であるが、それに加えて、同じURLでという点も是非強調させてもらいたい。

上で私が説明したような、デバイス間のタブ同期だけでなく、今日ではあらゆるところでURLがデバイスを超えて共有される。TwitterFacebookGoogle+などでコンテンツが共有されるが、MacやWindowsからクリックして見た先がスマートフォン用に最適化されたものであったら、利用者に最善の形でそのコンテンツを提供していることにはならないだろう。はてなブックマークのようなソーシャルブックマークも同じだ。

MacやWindowsからスマートフォン向けのコンテンツにアクセスしたら、リダイレクトすれば良いではないかと思われるかもしれないが、リダイレクトにかかる余計な時間も本来ならば避けるべきである。

レスポンシブウェブデザインについては、すでに多くの所で解説もされており、利点と欠点*4なども論じられている。しかし、製作者視点でなく、利用者視点で考えた場合には、結論は自ずと明らかだろう。多様なデバイスによる多様な使われ方が一般的となった今、是非ともコンテンツ制作者には、本来のパーマリンクの意味を良く考え、適切なデザインを心がけてもらいたい。

参照:

[2012/12/24 16:18 更新 : BLOGOSの例などを出すまでもなく、このはてなダイアリー自身が別URLでスマートフォン対応をしていた。/touch というパスが付加される。うーん…]

*1:おそらくモバイルなどの略

*2:スマートフォン版は[http://lite.blogos.com/article/43578/:title=こちら]

*3:「[http://googlewebmastercentral-ja.blogspot.jp/2012/06/google.html:title=Google がお勧めするスマートフォンに最適化されたウェブサイトの構築方法]」より

*4:制約だったり、コスト面での負担だったり