マルチスクリーン対応サイトを構築するための手法

スマートフォンやタブレット、PC からテレビに至るまで、今日のメディアとの接点は、その 90% がスクリーンを通したものとなっています。このため企業側は、あらゆるプラットフォーム、あらゆるデバイスを通じて、消費者が企業との関わりを持つための接点を提供することで、より多くのエンゲージメントを引き出すことができます。では、まず何から始めればよいのでしょうか?

モバイル対応に向けて準備する

マルチスクリーン戦略は、消費者と企業の両方のニーズを満足させるものでなければなりません。企業が消費者に提供するもの、消費者が企業に望むもの、そして消費者が企業のサイトでできること、このすべてをバランスよく実現させる必要があります。

まず、マルチスクリーン化したユーザーに表示される現在のサイトの状態と、ユーザーがサイトに望んでいるものを正しく理解します。ここで理解した内容が、マルチスクリーン対応の設計図を描く際の基礎となります。たとえば、スマートフォン ユーザーからサイトへのアクセスが特定のコンテンツに集中している場合は、モバイル サイトでそのコンテンツを前面に押し出し、中心に据えるようにします。また、サイトの中で特にモバイル ユーザーの直帰率(アクセスしてすぐに離脱する割合)が高いページがある場合は、新しいモバイル サイトでその問題点を解決するようにします。

次に、マルチスクリーン化したあらゆるユーザーを満足させながら、企業の価値やブランドを表現する方法ご紹介します。

  • 使用感に統一性をもたせる
    PC のスクリーンに慣れたユーザーは、他のスクリーンでも基本的に PC と同じコンテンツや利便性を期待します。そこで、PC でよく使われる機能を維持しながら、モバイルやタブレットでの利便性にも配慮して、両方のバランスを取るよう心がけます。
  • ユーザーの置かれた状況に配慮する
    個々のデバイスの種類に応じて、サイトで必要とされる個別の機能は何かを検討します。外出先でスマートフォンを使用するユーザーであれば、店舗検索や電話番号を使う可能性があるため、モバイル サイトではそうした機能が簡単に見つかるようにします。また、店先でレビューを探すユーザーにも、適切なレビュー ページがすぐに見つかるようにします。
  • モバイルの機能を活用する
    デバイス固有の機能を使って企業の価値提案を押し出す方法を考えましょう。たとえば、チェーン展開する映画館であれば、スマートフォンの GPS 情報に基づいてユーザーの現在地を見極め、最寄りの映画館の場所と上映スケジュールを表示することができます。また、プロ野球チームであれば、ファンがスマートフォンで撮影した動画をアップロードする機能を提供することもできます。モバイルの機能をフル活用して、ユーザーに喜んでもらいましょう。

導入する対応方法を選ぶ

マルチスクリーン対応のウェブサイトを構築するには、さまざまな手法があります。導入する手法を決める際には、開発にかかる費用と期間、利用できる人材とインフラストラクチャ、ユーザーのニーズなどを考慮します。

どのような手法を選んだ場合でも、基本的な原則として 1 つのドメインですべてのサイトをホストするようにします(例: example.com)。特に、PC サイトをホストするドメイン(example.com など)に対して、モバイル サイトをホストするドメインを別のもの(a.com/example など)に変えないようにしてください。

すべてのサイトを 1 つの同じドメインに統一することで、ユーザーに対するブランドと URL の一貫性を保ちます。この原則を頭に入れたうえで、モバイル サイトを構築するための 3 つの手法として、レスポンシブ ウェブデザイン動的配信モバイル専用サイトのそれぞれの特徴をご確認ください。

レスポンシブ ウェブデザイン

レスポンシブ ウェブデザインは、1 種類の HTML コードであらゆるプラットフォームに対応する高度な設計手法です。具体的には、表示先がどのデバイスであっても、同じ URL の同じコードからページが読み込まれ、既定のブレイクポイントとフルードグリッドに基づいて、表示先のスクリーンに合わせてコンテンツのサイズが自動的に調整されます。

レスポンシブ ウェブデザインを導入する場合は、事前に綿密なプランを立てる必要があります。初期投資は高くなりますが、個々のデバイスへの対応を一度実現してしまえば、メンテナンスにかかるリソースは少なくてすみます。

長所:

  • デバイスを問わず 1 つの URL でコンテンツを提供: 個々のコンテンツをデバイスを問わず 1 つの URL で提供できるため、ユーザーによるコンテンツの閲覧、共有、リンクが簡単になります。また、検索エンジンによるコンテンツの検出とインデックス登録も促進されます。
  • 自動的に優れたユーザー エクスペリエンスを提供: スクリーンの種類に応じてコンテンツの表示が自動的に調整されるうえ、デバイス固有の機能も活かすことができます。
  • スクリーンの向きに柔軟に対応: デバイスの向きが縦になっても横になっても、表示は自動的に調整されます。
  • リダイレクトなし: 読み込み時間が低減され、サイトのパフォーマンスが向上します。

短所:

  • 綿密なプランニングが必要: レスポンシブ ウェブデザインでは、あらゆる HTML が全デバイスで共有されるため、個々のデバイスやユーザーごとに利便性を徹底的にカスタマイズして最適なパフォーマンスを実現するには、綿密なプランニングが必要になります。

回避すべきよくある間違い:

  • データ量が過大: モバイル ユーザーにはフルサイズ画像(高速処理が可能なスクリーンの大きいデバイス向けの画像)を表示しないようにします。また、HTTP リクエストを減らし、CSS と JavaScript も最小限にします。スクリーンに表示されるコンテンツを先に読み込み、他の要素は後から読み込みます。

利用に適した企業:

あらゆるデバイスで一貫した利便性を提供することを重視し、1 つのウェブ チームですべてのデバイスを網羅する包括的な戦略を構築できる企業(Starbucks.com、BostonGlobe.com、Time.com は、いずれもこの手法を採用しています)。レスポンシブ ウェブデザインは新たに出現するデバイスにも拡張可能です。また、全デバイスに 1 つの URL で対応できるため、リンクや共有が簡単で、複数の URL を管理する煩わしさもなく、リダイレクトも不要です。

動的配信

この手法では、ユーザーが使っているデバイスの種類をウェブ サーバーで検出し、そのデバイス専用にカスタマイズされたページを表示します。スマートフォンからタブレット、スマート テレビまで、あらゆる種類のデバイスに対応できます。

長所:

  • カスタマイズされたユーザー エクスペリエンス: ユーザーは、個々のデバイス専用に作られたコンテンツとレイアウトを利用できます。
  • 変更が容易: 1 つのスクリーンのサイズに合わせてコンテンツやレイアウトの調整が可能で、他のデバイスのバージョンに影響が出る心配がありません。
  • 読み込みが速い: デバイスごとにコンテンツの読み込み時間を最小限に短縮できます。
  • 単一の URL: レスポンシブ ウェブデザインの場合と同様に、動的配信では常に単一の URL で、あらゆるユーザーにコンテンツを供給できます。

短所:

  • 同じコンテンツに複数のバージョンが派生: カスタム ページが複数あるということは、同じコンテンツに複数のバージョンがあるということです。デバイスごとに固有のページをすべて最新の状態に保つには、高度な CMS を利用する必要があります。

よくある間違い:

  • デバイス検出に不備がある: あらゆる種類のデバイスを識別するには、サーバーでスクリプトを実行する必要があります。これにより、タブレット ユーザーにモバイル サイトが表示されてしまうような問題を回避できます。自動検出の誤りや配信停止を回避するには、サーバーのディレクトリを常に最新の状態にして、スムーズに稼働させる必要があります。また、これとは別に、デバイスの向きを縦向きと決めつけているために問題が発生する例も少なくありません。モバイル端末は縦向きで使われることが多いですが、横向きで使われる場合もあります。
  • 使用感が異なる: デバイスごとにサイトの使用感が大幅に異なると、ユーザーは使いにくく感じます。スクリーン サイズに合わせて利便性をカスタマイズすることは重要ですが、どのデバイスでもデザインなどの使用感は統一する必要があります。

利用に適した企業:

動的配信は手間のかかるソリューションであるため、ウェブサイトの頻繁な変更に対応できるリソースがある企業で、特定のデバイス用のサイト(モバイル サイトなど)に限って表示を調整するような手直しが頻繁に発生する企業におすすめです。この場合、デバイスごとのウェブサイトの複雑なバージョン管理を任せることができる IT 担当者(または IT ベンダー)が必須です。

モバイル専用サイト

3 つ目の手法は、元の PC サイトとはまったく別にモバイル専用サイトを作成し、社内システムでモバイル ユーザーを検知して、モバイル向けのサイト(m.yourname.com といったサブドメインなど)にリダイレクトする方法です。

モバイル専用サイトはモバイル ユーザーにのみ表示し、その他のデバイス(タブレットやウェブ対応テレビなど)のユーザーには、引き続き元の PC サイトを表示します。

長所:

  • モバイル専用のユーザー エクスペリエンス: モバイル ユーザーに特化したモバイル専用サイトを自由に構築できます。
  • 変更が容易: コンテンツやデザインを変更しても、適用範囲がモバイル バージョンに限られるため、他のデバイスへの影響を考慮する必要がありません。

短所:

  • URL が複数に: モバイル サイトとモバイル以外のサイトでウェブページをリダイレクトしたり統合したりする際に注意が必要です。また、リダイレクトによってページの読み込み時間が長くなります。
  • 同じコンテンツに複数のバージョンが派生: どのコンテンツにも 2 つのバージョンができるため、管理が複雑になります。

よくある間違い:

  • リダイレクトの誤り: PC サイトの奥のページにアクセスしたモバイル ユーザーに対して、リダイレクトでモバイル サイトのホームページを表示してはいけません。また、スマートフォン特有の失敗として、PC サイトからのリダイレクトでモバイル サイトに存在しないページを表示しないように注意してください。
  • アノテーションがない: 双方向アノテーションを使うことで、Googlebot でのコンテンツの検出と、システムによる PC ページとモバイル ページの関係性の把握が促進され、両方のページが適切に処理されるようになります。
  • 一貫性の欠如: 企業の一貫性を維持するため、モバイル サイトのユーザーにも PC サイトと同じ使用感を提供するようにします。これにより、ユーザーに戸惑いを与えたり、全体的なユーザー エクスペリエンスに悪い影響を与えないようにします。

利用に適した企業:

何らかの理由で完全にモバイル専用サイトを必要とする企業。たとえば、従来とは別のベンダーを使ってモバイル サイトを開発する場合や、レスポンシブ ウェブデザインでは不可能な、シンプルな構成のモバイル サイトを希望する場合などに適しています。また、他の手法と比べて設定が容易で費用対効果が極めて高いため、ベーシックなモバイル サイトをご希望の小規模企業にもおすすめです。

優れたユーザー エクスペリエンスを実現する

優れたユーザー エクスペリエンスを実現するための要素としては、基本的な設定や構成以外に、レイアウトコンテンツ表示速度が重要です。ユーザーにサイトを何度も利用してもらうには、これら 3 つの要素をすべて満たすようにします。

レイアウト

  • タッチ操作に配慮: 人の指によるタッチ操作の対象には、最低 48 dp(density-independent pixel: 密度非依存ピクセル)の面積が必要で、その周辺には最低 8 dp のスペースが必要です。タッチ操作の対象が小さすぎると操作ミスが誘発され、モバイル ユーザーの離脱が促進されてしまいます。
  • 適切なフォントを選択: 12 ピクセルを下回るフォント サイズは見えづらいため使わないようにします。また、明確で読みやすい書体を選びます。さらに、画像をベースとするテキストはできるだけ使わないようにします。
  • 横幅は適切に: ユーザーはページを上下にスクロールする操作には慣れていますが、左右にスクロールする操作には慣れていないため、こうした操作が必要になるとユーザー エクスペリエンスが低下し、サイトがモバイル向けに作られていないと思われてしまいます。
  • マウスオーバーを使わない: マウスオーバーは PC 画面で隠れたコンテンツを表示する際には効果的な手法ですが、この操作にはマウスが必要です。タブレットやスマートフォンなどのタッチ スクリーンでは指を使うため、マウスオーバーのような操作はできません。このため、マウスオーバーは使わず、詳細なメニューをタップして表示するためのボタンを用意するようにします。
  • ポップアップを使わない: ポップアップは PC サイトでもモバイル サイトでも煩わしいものです。また、アプリのダウンロードにはインタースティシャルを使わずに、ダウンロードのためのプロンプトをサイトに埋め込みます。
  • ボタンに明確な説明を付ける: ボタンをクリックするとどうなるのかが明確にわかるよう、ボタンにはわかりやすいラベルをつけます。また、現在のサイトでの位置がわかるように、パンくずリストと明確なカテゴリ名(「ステップ 2: お支払い」など)を表示します。

コンテンツ

  • 情報を詰め込みすぎない: モバイル サイトでは、情報が多いほどよいとは限りません。PC ページの情報を小さくするだけで、そっくりそのまま持ってくることは避けましょう。ただし...
  • 切り捨てではなく、カスタマイズする: 動画を見る、商品を購入するといった基本的な機能については、モバイル サイトでも PC サイトと同じ利便性が求められます。その場合には、コンテンツを切り捨てるのではなく、モバイル画面に合わせて再構築します。
  • メイン機能は非表示にしない: サイトのメイン機能は、いつでもすぐにアクセス可能な状態にします。たとえば小売業者のサイトであれば、商品検索やショッピング カートといったメイン機能や、モバイル向けの店舗検索機能などは常に目立つ場所に表示しておきます。また、PC サイトへのリンクも表示するようにします。
  • メディア ファイルをよく確認する: たとえば、Flash 動画などは、ほとんどの携帯端末で再生されません。マルチスクリーン対応サイトでは、使用しているメディア ファイルがどのデバイスでも確実に機能することをご確認ください。
  • 決済手続きは簡単に: モバイル サイトで長いフォームに入力したり、タッチ操作で住所や情報を何度も入力したりすることは面倒な作業です。コンバージョン率を上げるには、何らかの方法で決済手続きを簡略化してください。それには、Google ウォレット即時購入などのサービスを利用して、クラウドで自動的に生成されるお支払い情報と配送情報を使って決済が簡単にできるようにします。

表示速度

最も重要な要素は表示速度を上げることです。特にモバイル サイトでは、ユーザー エクスペリエンスを改善するうえで表示速度の向上は欠かせない要素です。Google 検索におけるサイトのランキングでもサイトの表示速度は考慮されます。また、表示速度の向上に力を入れた企業では、ほとんどの場合最終損益にプラスの効果が表れます。

表示速度の向上に関するよくある間違いには、次の 3 つがあります。

  • HTTP リクエストが多すぎる: モバイルでも PC と同じことを試みるユーザーがいますが、モバイルの処理能力は限られており、帯域幅も当てになりません。このため、表示速度を上げるには、余分な HTTP リクエストにつながるページの要素を削除します。
  • 画像が大きすぎる: スマートフォンの画質が上がるにつれて、できるだけ大きな画像を載せてデバイス側で適切なサイズに直してもらおうと考えがちですが、これは誤りです。こうしたデバイスでの処理には時間がかかるうえ、処理能力も消費されます。このため、サイトにはデバイスごとに適切なサイズの画像を載せるようにします。
  • ファイルが大きすぎる: JavaScript コードや CSS スタイルシートのモバイル ユーザーに対する有効性を検討します。JavaScript や CSS が多すぎると、ページの表示速度の低下につながります。コードはできる限り最小限に圧縮し、同時に CSS についても見直します。ブラウザでコンテンツがきちんと読み込まれ、ユーザーが毎回ページを更新しなくても済むようにします。

表示速度についての詳しい情報や、サイトのパフォーマンスを改善するうえで役立つツールの情報については、Google の「Make the Web Faster(ウェブの処理速度を改善)」ページ(developers.google.com/speed)をご覧ください。

効果を測定する

継続的に分析レポートを確認し、サイトのコンテンツや構成に関して A/B テストを実施しましょう。そうすることで、サイトと戦略に関する次のような疑問点を解決できます。

  • モバイル サイトのユーザー層は?- モバイル レポートで分析します。
  • モバイル ユーザーの求めている情報は?- モバイル ユーザーがアクセスしたコンテンツやサイト内検索の検索語句から分析します。
  • 求める情報が見つけられているか?- 直帰率と平均ページ滞在時間から分析します。
  • PC よりもモバイルで成果が上がっている広告キャンペーンやページはあるか?- モバイルと PC のコンバージョン数を比較します。
  • モバイル向けのサイト構造になっているか?- サイト内検索、ゴールフロー、ページ閲覧深度、サイトの速度に関するレポートを作成します。
  • ユーザーを直帰させない程度の読み込み速度があるか?- サイトの速度をテストします。
  • 携帯端末で簡単に操作できるように作られているか?- リンク先ページの直帰率を確認します。
  • PC サイトでの行動を促すフレーズはモバイル サイトでも効果を上げているか?- モバイルと PC でのコンバージョン数を比較して調べます。レスポンシブ クリック トラッキングをお試しください。

PC サイトの場合と同様に、新しいデバイスや新たな利用習慣が生まれるたびにモバイル サイトのテスト、分析、調整を行って、常に適切に対応できるようにします。

ホワイト ペーパーマルチスクリーン対応サイトの構築

ホワイト ペーパー: マルチスクリーン化する消費者に対応するウェブサイトの構築

マルチスクリーン対応サイトについて理解し、優れたユーザー エクスペリエンスを実現する方法と、よくある間違いを回避する方法をご確認ください。全文をダウンロード