今さらだけど、”マルチデバイス”と”レスポンシブWeb”は使い分けたいという話。




Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInEmail this to someone

Webコンサルティングみたいな事とか相談にのったりとかしていると、いろんなサイトのアクセスログを見せていただくことが多々あります。そんな時に改めて気になるのが、スマホからのアクセス増加量。一般の企業サイトでもPCと並ぶ勢いで伸びていることもあります。

個人的には昔から、デジタルサイネージも含めたデジタルデバイスに効率良くコンテンツ配信する為、「マルチデバイス化」は推奨していました。今ではデバイス幅に併せて最適なサイズで表示を切り替える「レスポンシブWeb」を、CSSフレームワークとか使ってササッと導入するのが普通になりました。

ちなみに「マルチデバイス」「レスポンシブ」、どちらも同じようで、実際の作業や得られる結果は思いのほか異なります。何も考えずに導入するならレスポンシブですが、そもそもを理解して、どちらを採用するか?は導入前に一度は考えたほうがいいかもしれない話。

まずは簡単な仕組みから

fig121015

基本的には、「レスポンシブWeb」は「マルチデバイス化」の手法の1つです。ただし、これまでのマルチデバイス化は「1つのコンテンツを、各デバ イス用に個別にUI構築して配信する」のに対し、レスポンシブWebは「1つのコンテンツを、全デバイスにUI対応させる」ようにします。

マルチデバイス化は、CMS上で同一URLでUIだけ変える場合や、モバイル用のURLは別途用意し、アクセスによって振り分ける方法などありますが、僕個人としては「UIを再構築するか、全てに対応させるか」の違いが、マルチデバイスとレスポンシブWebの違いと考えています。

双方の大きなメリット・デメリット

デバイスごとにUIを構築する場合、CMSのデータベースから抽出する情報も個別で選択ができるため、モバイルにはモバイル用、PC向けはよ りリッチに、といった事が対応しやすくなります。しかし、「PCで見た内容とモバイルの内容が違う、または探しづらい」といった事にも繋がるので注意が必要。

反対にレスポンシブWebは、デバイス間で情報の差異が基本的には無くなるものの、各デバイスに併せた情報量の制限を別途考えないと、モバイルアクセス中にPC並の情報量をダウンロードしなければいけない、といったケースも出てきます。

要するに、「各デバイスにおける必要な情報の差異がどれほどあるか?」と「その必要な情報にアクセスする為の導線をどう確保するか?」で、各デバイスへの対応は決まってくるかな、と。

企業サイトを例に考えた場合だと、スマートフォンで閲覧するコンテンツは、その企業に訪れる際の地図や会社情報がメインであれば、無理にサイト全体をレ スポンシブにする必要はないですね。ただ企業サイトと言えど、何かしらのキャンペーンでソーシャルメディアから誘導を図る場合とかだと、PCとスマートフォンでの情報格差があってはいけないし、可読性も確保したいのでレスポンシブで、とか。

最近は、モバイルでは各種設定機能が制限されてつつ、投稿だけはしやすくなってるソーシャルメディアも珍しくなくなりましたね。やっぱり利用シーンに併せてデバイスごとでどうあるべきか?をそれぞれ検証・実装できるのがベスト何じゃないかと思います。。

ちなみに、全デバイスを1つのアクセス解析ツールで解析すべきかどうか?や、クリック箇所をヒートマップで解析するかどうか?など、解析環境によっても対応方法は変わってくるので、その辺りは事前に設計しておきたいところ。

何にしろ、何でもレスポンシブにすればいいと思うよ、ってのは違うかなと思って、書いてみました。

CSSフレームワークで工数削減

実際の導入工数については、昔はどちらもそれほど変わらないイメージでしたけど、最近はBootstrapを筆頭に、レスポンシブなCSSフレームワークなかなりあるので、それらを利用すればレスポンシブの方が効率的なイメージでしょうか。実際にワイヤー書いたりも、フレームワーク上で直接作った方が早い気がして、実際にそうしてますし。

プロトタイプ構築はレスポンシブで、結果から個別で改修が必要になったらマルチデバイスで対応とかが、スピード感的にベストかなぁ、とかでしょうか。それも時代でどんどん変わっていくんでしょうけど。

Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInEmail this to someone