「マルチデバイス」と「レスポンシブ」の使い分けどころ

MarTech
この記事は約3分で読めます。

現在、Webサイトは既にBtoBであってもスマートフォンからのアクセスのほうが多いことは珍しくなくなりました。

デジタルサイネージも含めたデジタルデバイスに効率良くコンテンツ配信する要なシステムの場合であれば、かねてより「ワンソース・マルチデバイス」な環境を推奨することは多々ありました。そして今では、デバイス幅に併せて最適なサイズで表示を切り替える「レスポンシブWeb」を、CSSフレームワークとか使って導入する事も一般的となりました。Googleが推奨する「モバイルファーストインデックス (Mobile First Index:MFI)」に対応する手段としてもよく用いられます。

ちなみに「マルチデバイス」「レスポンシブ」、どちらも同じようで、実際の作業や得られる結果は思いほか異なります。何も考えずに導入するならレスポンシブ、と判断される方もいらっしゃいますが、それは本当に「ユーザーフレンドリー」と言えるのでしょうか?

マルチデバイスとレスポンシブの違い

fig121015

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

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

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

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

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

要するに、「各デバイスにおける必要な情報の差異がどれほどあるか?」と「その必要な情報にアクセスする為の導線をどう確保するか?」をユーザー行動を軸として整理しないと、各デバイスへの対応としては不十分ということになります。

コンテンツマーケティングを軸とした一般的なメディアの場合、関連するコンテンツの出し方や量によっては、レスポンシブよりもPCとスマートフォンで校正を分ける必要があります。転職サイト金融系サイトなど、「まずはスマホで調べて申込みはPCからじっくり行なう」といったユーザー行動の場合も、レスポンシブよりもマルチデバイスでUI設計するほうが良いケースもあります。

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

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

実際の導入工数については、Bootstrapを筆頭に、レスポンシブCSSフレームワークも多く見られるようになりました。昨今はモバイルとPC双方のワイヤーフレームを効率よく制作できるツールもありますが、CSSフレームワークによる直接制作もラピッドプロトタイピングの手法の1つでもあります。

プロトタイプ構築はレスポンシブで行い、結果から個別で改修が必要になったらマルチデバイスで対応なども、サイト運用時の改善方法として必要な時もあるでしょう。どちらにしろ、ユーザー行動とUI構築の両面から判断するようにしましょう。

タイトルとURLをコピーしました