レスポンシブWebデザインのサイトに「デスクトップ表示」ボタンが必要な2つの理由

Advertisement

レスポンシブWebデザイン(RWD)で作ったウェブサイトを運営しはじめてから気になっていたことが一つあります。それは、RWDで作られたウェブサイトでもデスクトップ版のレイアウトが見られるようにする機能が必要かという疑問です。僕が書いた本でもp.176のコラム「レスポンシブWebサイトでも『PCサイト』ボタンが必要?」で触れた内容ですが、先日のBruce Lawson氏のブログ記事を読んでいて、再び気になったので自分の考えをまとめてみました。

モバイル版ブラウザの「デスクトップ表示」機能

たとえばDolphinやChromeといったモバイル向けブラウザにはデスクトップ版を表示するための機能が用意されています(FirefoxやMobile Operaにもついてるそうです)。わざわざこういうった機能が装備されているということは、これがユーザに求められる機能だからだと思います。(以下はiPhone版のDolphinとChromeのメニュー画面)

しかし、これらの機能はメディアクエリでレイアウトを変更しているレスポンシブWebデザインで作られたウェブサイトでは動作しません。では、レスポンシブWebデザインで作ったサイトには、サイト自体に「デスクトップ表示」のようなボタンを設けたほうが良いのでしょうか?たとえば、Amazon Japanのモバイル版サイトが「Amazon PCサイト」というボタンを用意しているように。。。

「デスクトップ表示」ボタンが必要な2つの理由

レスポンシブWebデザインで作られたウェブサイトにも「デスクトップ表示」というボタンが必要だと思われる理由には、以下の2つが考えられます。

  1. ユーザがモバイル・サイトは情報が制限された別のサイトだと思ってしまう
  2. PCサイトに慣れているスマホ初心者にはデスクトップ表示のほうが安心

1. ユーザがモバイル・サイトは情報が制限された別のサイトだと思ってしまう

僕が書いた本「レスポンシブWebデザイン 制作の実践的なワークフローとテクニック」でもコラム(p.176)で紹介したのですが、海外で行われたあるユーザテストでは、ユーザは「モバイル・サイト」に対する以下のような認識を持っていたとしています。

  1. 個別のデスクトップ・サイト、モバイル・サイトが存在すると思った
  2. それぞれのサイトで違うコンテンツが掲載されていると思った
  3. どちらを使うかはユーザに委ねられていると思った

モバイル・サイトはPCサイトの情報や機能が制限されたもの、または特定の機能に特化した別のサイトであることが多いと思います。そのため、デスクトップのレイアウトとは見た目が違うモバイル・サイトにユーザがアクセスした際、違う情報またはデスクトップ版の情報や機能が制限されたものが掲載された個別のモバイル・サイトだという認識をしてしまう可能性があります。

2. PCサイトに慣れているスマホ初心者にはデスクトップ表示のほうが安心

ページを閲覧するためにズームやスクロールを多くしなくてはならなくても、使い慣れたデスクトップサイトの方が安心という方もいるかもしれません。Bruce Lawson氏の記事「Turning off responsive web design」では、彼の父の話を例に取り上げています。彼の父がクリスマスに手に入れたAndroid携帯でウェブサイトを閲覧した際に、モバイル版で表示されるウェブサイトがデスクトップ版のそれとまったく違う見た目であることに困惑したそうです。PCで見慣れているサイトをスマホで閲覧した際に、いつも見慣れたものではないため、違うサイトにたどり着いてしまったと思って不安になったそうです。見た目が違い過ぎると、URLが合っているかどうか確認をしたそうです。

この他にも、たとえば、急いでいる時で、「さっき家のPCで見た情報を探したい!」場合、違った見た目のモバイル・レイアウトより、見慣れたデスクトップ・レイアウトのほうが探しやすい可能性はありそうです。そう考えると、モバイル向けに勝手にレイアウトを変更するのはユーザにとっては迷惑なケースも(少ないかもしれませんが)あるかもしれません。

実装が悪いだけでは?

たしかに。レスポンシブWebデザイン(RWD)で作られたウェブサイトが、どのデバイスで見ても同じサイトであるとわかるようにビジュアルのヒントをちりばめて、ユーザを安心させられる工夫が施されていれば、そんな問題は起こらないかもしれません。

しかし、スマホを購入して間もない、スマホでのウェブサイト閲覧に慣れていないユーザの場合、RWDサイトの仕上がり具合に関係なくユーザを困惑させる可能性はありそうです。どの端末でアクセスしても、ベースとなる基本体験が同様に提供されているモバイル・サイト(またはRWDサイト)が一般化して、「モバイル・サイトはデスクトップとは違ったサイト」という認識が薄れるまで、このような状況は多かれ少なかれ起こりそうです。

考えられる3つの対策

簡単に解決できる問題ではなさそうですが、中長期の対策を中心に、僕は以下の3つを行うのが良いと考えています。

  1. デバイスに関係なく同じ情報が閲覧できるサイトにする
  2. デスクトップ・サイトでRWDサイトであることを宣伝する
  3. 「デスクトップ表示」、「モバイル表示」というボタンを設置する

a. デバイスに関係なく同じ情報が閲覧できるサイトにする

拙著や「レスポンシブWebデザイン談義」の記事でも書いていますが、ユーザがスマホやタブレットをはじめ、デスクトップPCなど、複数の端末をシームレスに使って同じウェブサイトにアクセスするようになりはじめている昨今、ウェブサイトはどの端末で閲覧しても同じコンテンツに到達でき、最低限の同じ機能が提供されているべきだと考えています。

もちろん、端末によってはレイアウトや表示方法を工夫する必要があります(たとえば、画面の小さいスマホでは、初期表示では内容を表示せずに、「詳しく読む」や「+」ボタンを設けて、すぐに同じ情報に到達できるように工夫するなど)。単にデスクトップで表示していたものを隠すだけの対応では、ユーザを困らせるものになるのではと考えています。

さらに、機能に関しては、たとえば、モバイルのコンテキストにあわせてモバイル端末にしかない機能を便利な追加機能として提供するのは良いと思います。が、どの端末に対してもできるだけユニバーサルな体験の提供を心がけるのが、最終的にはユーザにとって一番親切な方法だと考えています。

b. デスクトップ・サイトでRWDサイトであることを宣伝する

デスクトップ版を閲覧しているユーザに、スマホやタブレットなどの端末でも同じ内容・同じ機能を閲覧できますよ、ということを、地道に宣伝するべきだと思います。たとえば、僕が運営に携わるテンプル大学の生涯教育プログラムのウェブサイトでは、デスクトップ表示の際に、以下のような宣伝を表示しています。


※ここでは、スマホで見られるとしか宣伝していないですが、「同じ内容を見られます」ということを一言加えてもいいかもしれません。

c. 「デスクトップ表示」、「モバイル表示」というボタンを設置する

これはアクセス解析データと相談しながらの実装になると思いますが、モバイル端末からアクセスしたユーザの直帰率が高い場合は、「デスクトップ表示」ボタンの設置を考えてみても良いかもしれません。

でも、それってRWDにした意味ないんじゃないの?

たしかに、その通りかもしれません。ジレンマですね〜。RWDの実装が悪く、モバイル端末で良いユーザ体験を提供できていないケースもありそうです。

しかし、ユーザの行動はユーザにしかわかりません。まだまだスマホの普及は始まったばかりで、ユーザにとっての携帯サイト・スマホサイトのイメージ(情報が制限された、または、別の情報が掲載された別のサイトというイメージ)は、しばらくは根強く生き残っていきそうです。

レスポンシブWebデザイン(RWD)について知っているのは制作者の方々のみで、一般的なユーザは、その名前や存在すらまったく知らない方がほとんどだと思います。仕組みを知っている方なんてごく稀な存在ではないでしょういか?また、ウェブ制作者の間でもRWDはまだまだ普及し始めて間もない手法です。たとえば、いままでの個別モバイルサイトのようにコンテンツや機能を制限したモバイル表示にしているRWDサイトも多いかもしれません。

「デスクトップ表示」ボタンの実装案

まだ実装を試したわけではないですが、「ReView」のようなjQueryプラグインを使えば、効率よく実装できるのかなぁと想像しています。以下は、Adrian Roselli氏のブログで紹介されていたものとCSS-TricksのChris Coyier氏のアイディアをベースとした、実装方法の概要案です。

  1. メディアクエリを使って、モバイル向けのレイアウトに「デスクトップ表示」ボタンを表示する
  2. ユーザがボタンをクリックした際にViewportメタタグを無効にする
  3. クッキーやサーバサイドの技術を使って、その状態を保持する
  4. モバイル・レイアウトに戻れるように、「モバイル表示」ボタンを表示する
  5. 通常のデスクトップ表示では、このボタンは表示しない

デスクトップファーストのほうが実装しやすい?

Chris氏も書いていますが、Viewportメタタグをなんらかの方法で無効化するのが一番シンプルな実装方法だと想定すると、デスクトップファーストのアプローチで作られたサイトの方が、このボタンの実装はしやすいんだろうなぁと思います。

デスクトップでも「モバイル表示」を見たい?

デスクトップPCでサイトを閲覧していて、「モバイル表示」にしたいと思うユーザはいるでしょうか?いまのところ想像できないので、デスクトップのデフォルトでは「モバイル表示」ボタンは必要ないように思います。

ボタンの名称のアイディア

ボタンのラベルの候補を考えてみました。ちなみに、iPhone版のChromeでは「PC版サイトをリクエスト」、Dolphinでは「Desktop Mode」となっています。

おもにモバイル端末での表示に使うボタンのラベリング案

  • デスクトップ表示
  • PCサイト
  • フルサイト
  • デスクトップサイト
  • デスクトップ・モード

デスクトップサイズの画面で表示するボタンのラベリング案

  • モバイル表示
  • モバイルサイト
  • スマホサイト
  • モバイル・モード

レスポンシブWebデザインで作られたウェブサイトでは、個別のサイトが存在するわけではないので、なんとなく「○○サイト」というラベリングには違和感があります。なので、個人的には「デスクトップ表示」「モバイル表示」というのがしっくり来ています。ただ、これらがユーザに受け入れられるかどうかは、実際にテストしてみないとわからないですね。

設置場所

あと、設置する場所はAmazon Japanのモバイルサイトのように、ページの一番下、フッターあたりにするのが良いんだろうなと考えています。ヘッダーの目立つ位置に置いても、大半のユーザには邪魔になってしまう気がしますし。このあたり、「Amazon PCサイト」ボタンがどのくらいクリックされているのか、興味深いですね。

削除されていないということは、それだけクリックされていることなんでしょうね。

まとめ

こればっかりは試してみなければわからなそうなので、たとえばA/Bテストができるように実装できたらと思うんですが。。。クッキーやサーバサイドの技術を使って、表示するモードを保持したり、スイッチしたりすることを考えると、そんなに簡単ではなさそうだなぁという印象です。まずは「ReView」を使って、デモを作って実験してみますかね。

参考・参照リンク

About the author

Rriverのステッカーが貼られたMacBookの向こうにいる自分のMemojiの似顔絵

「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、ボストン近郊のウェブ制作会社に勤務。帰国後、東京のウェブ制作会社に勤務した後、ウェブ担当者として日英バイリンガルのサイト運営に携わる。詳しくはこちら

ウェブ制作・ディレクション、ビデオを含むコンテンツ制作のお手伝い、執筆・翻訳のご依頼など、お気軽にご相談ください。いずれも日本語と英語で対応可能です。まずは、Mastodon @rriver@vivaldi.net Twitter @rriver 、またはFacebook までご連絡ください。

“レスポンシブWebデザインのサイトに「デスクトップ表示」ボタンが必要な2つの理由” への3件のフィードバック

  1. […] レスポンシブWebデザインのサイトに「デスクトップ表示」ボタンが必要な2… […]

  2. […] 同じページに見えないので困るユーザがいるからPCと同じ表示に戻すボタンを置くべきだとか、 […]