第3回　使いやすくしようとしてハマる落とし穴に気をつける

今回は、PCサイトの感覚でスマートフォンサイトを作ろうとするとハマる落とし穴を見ていきましょう。

スマートフォンで表示に使われるのはブラウザだけではない

スマートフォンとPCでのとても大きな違いとして、ウェブにアクセスするアプリケーションの種類の多様性が挙げられます。

PCでウェブページにアクセスする手段として使われるのは、ほとんどの場合、ブラウザです。もちろん、ブラウザの種類はさまざまですし、人によってはウェブページを表示する機能を持ったアプリケーションを使っているケースもあると思います（たとえば、筆者はDashというアプリケーションを使っていますが、これはアプリ内でウェブページを表示させる機能がついています⁠）⁠。しかし、基本は数種類のブラウザからのアクセスがほとんどです。

一方、スマートフォンの場合は、アプリ間をなるべくのスイッチさせないため、アプリにブラウザ機能を組み込んでリンクを表示しているケースがかなり多く見られます。たとえばFacebookやTwitter、ニュースアプリであるSmartNewsやGunosyなど、無数のアプリケーションがアプリ内ブラウザを持ち、直接ウェブページを表示させています。

したがって、スマートフォン向けのページを公開する際には、それを表示するアプリケーションがブラウザとは限らないことを念頭に置くべきなのです。

ブラウザを念頭に置いてしまった例をひとつ見てみましょう。最近見かけなくなりましたが、iOSでは昔はかなり多く見かけた「ホーム画面への追加を促す吹き出し」です。

これは、Mobile Safariでは画面下中央にリンクをホーム画面に追加したり、メールで送信したりするボタンが付いているが故につけられている機能です。しかし、図を見てもわかるように、アプリケーションによってはそんなボタンは付いておらず、意味のわからない状態になってしまいます。こういったブラウザを前提としたUIはもはや、あまり有効ではありません。

もちろん、アクセスの際にユーザーエージェントを識別してUIを切り替えるようにすることはできます。たとえば、TwitterのiOSクライアントは以下のようなユーザーエージェントを返しますから、判別できるでしょう。

Mozilla/5.0 (iPhone; CPU iPhone OS 7_1 like Mac OS X) AppleWebKit/537.51.2 (KHTML, like Gecko) Mobile/11D167 Twitter for iPhone

しかし、ブラウザ（しかも、iOSならデフォルトであるSafari）に特化したUIを作ることがどれほど効果があるのでしょうか。上記の例で言えば、これではたしてどれくらいの人がホームにボタンを配置してくれるのかは、かなり疑問です。よほどのことがない限り、アプリケーションに特化したUIは用意する意味はなくなってきています。

スマートフォン向けページのURLはPC向けページと同じにするか、別にするか？

スマートフォンサイトを作るうえで、「⁠スマートフォンとPC向けで、同じURLを使うか、別のURLを使うか」という話を考える必要が出てきます。考え方としては、大きく分けて以下の3つがあります。

PCでもスマートフォンでも同じHTMLを用い、画面サイズによってレイアウトを切り替える（いわゆるレスポンシブウェブデザイン：RWD）
同じURLで、PCとスマートフォンで異なるHTMLを配信する
PCとスマートフォンでURLを切り替える

これについては、Googleのウェブマスター向けサイトに携帯端末に最適化されたウェブサイトの構築方法というコンテンツがあり、それを読むと参考になります。

それぞれの方法には長所と短所があるので、重要なのは「どの方法が最も自分たちの現在の目的や割けるリソース量、今後のサイトの運用方針などに適しているか？」を考えることです。

それぞれについて、かんたんに陥りやすい罠というか、ユーザビリティを損ねる原因となりそうなポイントを見ておきましょう。

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

レスポンシブウェブデザインのメリットは、なんといっても1つのコードで複数のサイズをサポートできることです。ほかにも、今ならまだレスポンシブウェブデザインにしているだけで「技術トレンドをちゃんと追ってる感」を演出できるというメリットもあります。

一方で、レスポンシブウェブデザインには、以下のような問題もあります。

すでに存在しているPCサイトにも手を入れなければならない
コンテンツが多いと、スマートフォンで見たときに非常に縦に長いサイトになってしまったり、読み込みに非常に時間がかかるページになってしまう
逆にスマートフォンに合わせてページをシンプルにすると、今度はPCでみたときにすかすかになってしまう可能性がある

したがって、各ページのコンテンツ量がレスポンシブウェブデザインを選ぶうえでのひとつの基準になると思います。たとえば、スターバックスはレスポンシブウェブデザインでいけると思うのですが、しかし、もしこれが楽天やAmazonのようにページ内の要素が非常に多いページだったら、要素が多すぎて、スマートフォンで見るにはちょっと辛くなってしまうでしょう。

同じURLでPCとスマートフォンで異なるHTMLを配信する

これは、アクセス時にユーザーエージェントをチェックして、動的にPCサイトとスマートフォンサイトを切り替えるという方法です。同じリソースであれば同じURLを利用できるうえに、PCとスマートフォン向けのページを完全に独立させることもできる、というメリットもあります。

ただしその場合は、携帯端末に最適化されたウェブサイトの構築方法にも書かれているとおり、以下のようにVaryというHTTPヘッダを付け、「⁠内容がユーザーエージェントごとに異なる場合がある」ということをクライアントにきちんと知らせる必要があります。そうしないと、どこかのキャッシュサーバがユーザーエージェントに無関係にキャッシュをしてしまい、正しく振り分けが機能しない危険があるためです。

Vary: User-Agent

また、上記で例に上げたPCサイトで公開されているコンテンツ・機能がスマートフォン向けページで用意されていないケースなどのためには、「⁠スマートフォンだけどPCページにアクセスしたい」というニーズを満たせるようになっていたほうがいいかもしれません。具体的には、スマートフォン向けのページに「スマートフォン向けのページを見るか、PC向けのページを見るか」を切り替える機能が用意することです。

しかも「PC向けのページを表示するように切り替えたのに、リンクをたどったらまたスマートフォン向けのページに戻ってしまう」というケースもユーザーをイライラさせますので、その設定はページをまたいで引き継ぐようにしたほうがいいでしょう。

PCとスマートフォンでURLを切り替える

この手法は一番シンプルでいいのですが、気をつけたいのは「PCのページにスマートフォンでアクセスした場合にどうなるのか」逆に「スマートフォンのページにPCでアクセスした場合にどうなるのか」をきちんと整理しておくことです。

最近は、ウェブサイトへの流入は検索エンジンだけでなく、FacebookやTwitterなどでシェアされたリンクが多くなっています。しかし筆者は、FacebookやTwitterでシェアされたスマートフォン向けリンクをクリックした結果、PCなのにスマートフォン向けのページが表示されてしまう（しかも、PCページヘのリンクがない）ケースによく遭遇しています。

これは、あまり気持ちのいいものではないですよね。読めないことはないのですが、PCにはPCなりの読みやすさがあるので、スマートフォン向けのページはちょっとPCで見るには向いていないでしょう。画像がすごく大きく表示されてしまったりしますし。

「PC向けのページにスマートフォンでアクセスしたら、スマートフォン向けのページにリダイレクトする」というのは比較的きちんと行われている気がするのですが、その逆は案外忘れられがちなのかもしれません。

また、こちらのケースでも、PCページからスマートフォンページヘリダイレクトされた場合は「スマートフォンだけど、PCページにアクセスしたい、というニーズがやはり存在するサイトもありますから、そうした必要があるかどうか、必要があるならどのように実現できるかは考えたほうがいいでしょう。

たとえばFacebookやその他のOGP（OpenGraph Protocol）に対応したサービスでは、property属性で指定したMETA要素にogで始まる名前を使うことで、リンク表示時のメタ情報を指定できます。同じように、og:urlで、正規化されたURLを指定できます。

<meta property="og:title" content="Title" />
<meta property="og:url" content="URL" />
<meta property="og:image" content="Image" />

og:urlには、スマートフォン用のページであっても、PC用のページを指定すべきです。そうすれば、リンクはPC向けのサイトになりますし、同じコンテンツのPC向けページとモバイルページが同じURLとしてFacebookに認識してもらえるからです。

次回は、モバイルでインターネットにアクセスする際の速度などに注目してみます。