Smartphone スマホ

 
スマホレスポンシブ

どれが最適?ユーザーの期待に応えるモバイルサイト対応方法4つを比較!

モバイル対応方法

企業がマーケティングを展開する際に欠かすことのできないwebサイト、その中でも情報接点の中心となるスマートフォンサイト(ページ)の重要性は、もはや言うまでもない事実です。コンシューマー向けのブランドサイト、サービスサイト、通販サイトを運営している企業は、当然ながらその多くがすでにスマートフォン用のwebサイト(ページ)を用意しています。ただ、サイトの運用(構築)方法は非常にさまざまです。そして、そのサイトは本当にユーザーが使いやすいサイトになっているのでしょうか?

少し前になりますが、アドビ システムズ 株式会社が発表した、“企業のWebサイトなどのデジタルメディアが消費者の購買行動にどのような影響を与えているかに関する調査結果「Adobe Marketing Discovery」”によると、
ユーザーが商品やサービスに興味を持った際、約9割がwebへアクセスして、商品・サービスの検討・購入を行うと答えているそうです。

興味関心時のwebアクセス
 

これはある程度イメージできる数値ではないかと思います。
では次のデータはいかがでしょうか?こちらはWebサイトの体験と購買の関係性についての調査データです。
アクセスしたWebサイトがユーザーの期待に応えていない場合、実に6割以上が検討・購入活動を中断してしまうそうです。
 

問題サイトが与える影響

※アドビ システムズ株式会社発表(2015年2月2日)
参考リンク:「Adobe Marketing Discovery」

“ユーザーの期待に応えていない”という理由はいくつかありますが、次のようなことです。

◆ページによって矛盾が生じている
◆ほかのメディアと情報差がある
◆詳細情報がないもしくは古い情報しかない

これ以外にも外部要因として考えられるものに接続環境があり、これも中断の大きな原因となります。特にスマートフォンは移動中やちょっとした隙間時間の利用が多いため、そのちょっとした瞬間にすぐにページが表示されないと、離脱(中断)の大きな理由となってしまいます。
情報はたくさん提供したいけど、データ量が大きすぎてそもそも見られない…ということはぜひ避けたいところです。

当社ではデバイス最適化のサービスを提供しており、これまでにも同じテーマで記事を掲載していますが、改めてユーザーの期待に応えるモバイルサイトの構築方法についておさらいしていきたいと思います。

4つの構築方法とそのメリット、デメリット

スマートフォンサイトの構築方法は、細かい違いを取り上げると非常に多くありますが、大きく分類すると次の4つの手法があります。

・スクラッチ(モバイル専用サイトを構築)
・レスポンシブウェブデザイン(RWD)
・動的配信(サーバーサイドHTML振り分け)
・外部ツールによる最適化・変換

ひとつずつ解説していきたいと思います

スクラッチ(モバイル専用サイトの構築)

スクラッチとは、既存のPCサイトとは別のサイトとして作成する方法です。日本では一番多く採用されている方法ではないでしょうか。URLもPCサイトとは異なり、サブドメイ ン(sp.yoursite.com)やディレクトリを分け(yoursite.com/sp/) 展開するケースが一般的です。 メリットは、モバイルに特化したサイトを作るため、最も高い 自由度でコンテンツを配信することができます。また、変更や 更新も容易です。デメリットは、運用工数が掛かり、領域が異なるため、SEOや リンクの共有などで不都合が起きるケースが多いこと。また、 サーバーのリダイレクト設定も必要です。

レスポンシブウェブデザイン(RWD)

レスポンシブウェブデザインとは、1つのHTMLで、デバイスの スクリーンサイズを判別し、そのスクリーンにあったレイアウ トを表示させるデザイン手法です。 メリットは、1つのHTML(URL)で完結するため、リダイレクト が不要、リンクの共有が容易、検索エンジンによるインデック ス処理もスムーズです。また、スクリーンサイズに応じた表示 の最適化であるため、機能の同一性を保つことができます。デメリットは、既存PCサイトのリニューアルが必要となり 制作工数が掛かること。またデバイス毎に必要な要素を設定して も全てのコードを読み込み、1ページあたりの容量が膨れてしまうため、コンテンツの表示の遅さに繋がり、ユーザビリティにおける最大の課題となります。

動的配信(サーバーサイドHTML振り分け)

動的配信とは、サーバー側でPC・スマートフォン・タブレットを検出し、 それぞれのテンプレートを配信する手法です。メリットはPC・スマートフォン・タブレットそれぞれのカスタムテンプレートを作成することができるので、どのデバイスでも最適 なコンテンツやレイアウトを利用することが可能です。デメリットは、対応している高度なCMSの導入やシステム上での設計が必要となることです。また、それぞれのデバイスに対 して別々のHTMLを配信するため、SEO対策のためにはVary HTTPヘッダーの設定というものが重要です。これがきちんとできていないと、Googleに“モバイルフレンドリー”と認識されないことがあります。

外部ツールによる最適化・変換

当社で提供しているサービスもこの分類に入りますが、仕組みとしては既存のPCサイトのHTMLを活用し、スマートフォン・タブレットにコンテンツを最適化していきます。

メリットは現在の資産=既存のwebサイトのソースを活用してデバイス対応ができること。リニューアルやシステム導入には大きなコストとスケジュールを必要としますが、この手法は比較的導入しやすい点があります。デメリットは、あくまでも既存のwebサイトありきなので、“元”がないと対応できないことや、サイト構造が古いと工夫が必要になりコスト増になるケースも。

国内で提供されている変換と呼ばれるサービスは非常に多くあり、サイトの規模や目的に合わせた選択が必要となります。

ちなみに、当社が提供しているMobify(モビファイ)は、レスポンシブウェブデザインと同様に1つのHTMLでサイト運用が可能で、さらにスマートフォン・タブレット用にはページ容量を軽くし、コンテンツ表示のパフォーマンスを上げる仕組みも持ち合わせています。

モバイル対応方法といっても、内容はさまざまです。サイトの目的、予算、体制など多くの観点から検討が必要になりますが、忘れてはいけないことが、「ユーザーの期待に応えるサイトであるか」ということです。
それぞれの特徴を把握したうえで、自社のサイト運用に最適な方法を選択できるとよいですね。

この記事を書いた人
山崎 明日花
タグ

記事mobifyロゴ
Mobify(モビファイ)とは

Googleが認定しているマルチスクリーン対応のための最適化サービス。
デバイスに応じ、専用にデザインされたサイトを表示することができます。
ページの表示を高速化させる仕組みも持ち合せており、ユーザーの離脱を防ぐことが可能です。

▸Mobify(モビファイ)についてさらに詳しく

 最新記事