特集：HTML5 + UX開設記念

もう、Webはブラウザという制約に縛られなくていい

えーじ
2012/7/10

10年前、旅行先で道に迷わず目的地に辿り着くのがこんなに簡単になるなんて思わなかった。スマホとHTML5が、Webを自由に解き放つ

　まずは、食事のシチュエーションというUXの話から

　唐突ですが、あなたはレストランでアルバイトをしたことがありますか？

　経験のある方なら、分かるかもしれませんが、レストランでアルバイトしていると、賄いで食事を出してもらえる場合があります。もちろん、お店によるので、一概にいえませんが、ちょっとしたファミレスでも、通常、顧客に出すものとほぼ同じ料理を食べられます。

　そのとき、味はどうだったでしょう？ 1000円以上の価値があるものを無料で食べられるのだから、店によっては、実にうらやましい話だろうと思いきや、筆者の場合、そうでもないという感想を持った経験があります。

　確かに、同じ料理なのですが、いわゆるバックヤードと呼ばれる従業員専用の、お世辞にも料理を食べるには不向きと思える場所で、自分で準備した料理を、スプーンやフォークまで用意して食べるのです。ありがたみがなくなってしまった、というのが正直な感想でした。筆者でなくても、無料で出された料理は、客として自分でお金を払って食べる場合とは違う感想を持つであろうことは、想像に難くありません。

誰とどこで食べるかのシチュエーションがユーザーエクスペリエンス？

　ここで注目したいのは、その感想が状況そのものだけでなく、料理に対しても同様に感じられてしまう可能性があることです。

　別の例で考えてみましょう。あなたは音楽を聞きたいと思ったとき、店舗でCDを買いますか？ iTunesでデータを買いますか？ これを読んでいる人なら、きっと、iTunesで買う人が多いのではないでしょうか？ しかし、果たしてあなたが聞く音楽は、CDで買った場合とまったく同じ感想を持つ、といい切れるでしょうか？

　どちらが優れているかを比較したいわけではありませんし、しょせんは主観ですので、「まったく同じだろう」という人がいてもおかしくはありません。ただ、まったく同じコンテンツで、まったく同じ行動で消費していても、そのときの状況や気分によって、コンテンツに対する感想が変わってしまうことはあり得るのです。同じコンテンツをどのような体験から誘導して、ユーザーに届けるのか。いわゆるユーザーエクスペリエンスは、ここに存在しているのではないか、と筆者は考えています。（ユーザーエクスペリエンス参照記事：ユーザーにとって“インターフェイス”が製品そのもの、 多くのユーザーは一度に1本しかジュースを買わない）

　Webサービスにおけるユーザーエクスペリエンス

　「では、どういうレイアウトやデザインのサイトを作れば、理想のエクスペリエンスになるのだろう？」もし、そう思った方がいたら、この機会にもう少し広い視点で考えてみましょう。このサービスを見る人は、どんな人でしょうか？ どんな場面で、どんな場所で、どんな気分で、誰と一緒に、何をしたあとで、このあと何をするのか。仮にそこまで含めてデザインできるとしたら、さらに面白いユーザーエクスペリエンスが提供できるとは思いませんか？

　確かに、サービス提供者としてコントロールできる範囲は、限定されています。従来だと、Webサービスは、コンピュータの、さらにブラウザという狭い空間だけ、という制約の中でしか考えられませんでした。

　しかし幸いなことに、いま、Webは大きな転換期を迎えています。サービス提供者側にとって、ユーザーのエクスペリエンスをコントロールするための手段が、従来より格段に幅広くなろうとしています。それをけん引しているものが大きく2つあります。スマートフォンとHTML5です。

　スマートフォンとHTML5で変わるWebとの接し方

　ユビキタスという言葉が使われるようになって久しいですが、スマートフォンの登場によって、まさに、いつでもどこでもネットに接続し、Webを閲覧できるようになったのは、いまさら、説明するまでもないでしょう。いまや電車の中でも、布団の中でも、トイレの中でさえ、Webを見られます。10年前、旅行先で、道に迷わず目的地にたどり着くのが、こんなに簡単になるなんて、誰が予想したでしょう？ スマートフォンで、複数の友達と、メッセンジャーで話しながら、別々に行動できるなんて、思っていましたか？

　もはやスマートフォンが、現実社会とWebをつなぐためのインターフェイスになりつつあることは、疑いの余地もない事実です。

　そして、HTML5。ここでは細かい定義は抜きにして、Open Web Platform全般の最新動向をまとめて、HTML5と呼んでしまいます。HTML5ではCanvasやWebGLなど、プラグインなしで派手なビジュアルにする機能、新しいタグや属性で、アクセシビリティやセマンティクスを向上する機能、双方向通信やドメインをまたいで通信できる機能、ハードウェア連携をする機能など、実にさまざまな機能が提案され、実際にその多くがブラウザに実装されてきています。

　その中でも、特にここで注目したいのが、ハードウェア連携を実現する機能です。ハードウェア連携は、ユーザーエクスペリエンスに分かりやすく影響を与え、身体的動作を含むので、ユーザーの心に残りやすいという特徴があります。HTML5関連のハードウェア連携機能の中でも、注目すべきものをいくつか紹介しましょう。

■　Geolocation API

　まずは分かりやすい例ですが、デバイスの位置情報を利用できるGeolocation APIです。ネイティブアプリケーションであれば、すでに事例があるようですが、例えば、すぐそばにいる友達を検出して、コミュニケーションを取れるようなアプリは、HTML5でもすぐに実現できますし、比較的簡単に実装できるはずです。

■　Device Orientation API

　Device Orientation APIは端末の傾きや加速度、向いている方角を取得できます。ノートパソコンでこれを使っても滑稽なだけですが、スマートフォンで使うと、例えば端末を振ることでアクションを起こすようなサービスを作れます。例えば、以下のデモではソーダ缶を振って、背景が赤くなったところで、プルタブをタップすると爆発できます（要iPhone4以降）。

iPhone4以降で振ってみてください（筆者の作ったデモ）

■　WebRTC

　WebRTCは、ブラウザからカメラやマイクが、直接、利用できるようになり、PtoPによる双方向通信を実現する機能です。未完成ではありますが、一部のブラウザではすでに、カメラからの映像取り込みが実現されていて、先日開催されたGoogle I/Oでは、シルク・ドゥ・ソレイユをテーマにしたMovi・Kanti・Revoというユニークなデモが公開されました。カメラの前にいる人間の動きに応じて、ブラウザに表示される画像の角度を3Dで傾けるというものです。単純にカメラが使えるだけでなく、工夫1つで、こんなこともできてしまうという好例ではないでしょうか。

■ Sensor API

　最後に紹介するのはSensor APIです。まだ、どのブラウザにも実装されていないので、理屈の話しかできませんが、これが使えるようになると、例えば、端末のセンサーから気温や湿度、気圧や騒音の度合いなどが取得できるようになります。スマートフォンであれば、そこからどんな場所にいるのか推測して、適したサービスを提供できるようになるかもしれません。

　HTML5で変わるユーザーエクスペリエンス

　このように、スマートフォンとHTML5を組み合わせることで、ユーザーの現実の状況までも考慮に入れたサービスを設計できるようになりました。もうコンピュータ・スクリーンの、さらにブラウザの中という制約に縛られる必要はないのです。

　もちろんHTML5を使うことで、上記で紹介したハードウェア機能のほかにも、さまざまな機能が実現できますので、ユーザーエクスペリエンスまで考慮に入れたユーザーインターフェイスの設計も、当然、重要になってくるでしょう。例えばドラッグ＆ドロップを使えば、以前よりも手軽に画像をアップロードできますし、WebSocketを使えば、リアルタイムにWebを挟んでコミュニケーションできるようになります。そのほかの細かいことも、すべてがユーザーエクスペリエンスに影響を与えることは、みなさんが、すでにご存知のとおりです。

　ユーザーエクスペリエンスに優劣はありません。高級レストランやブランド物だけが必要とされるわけではないのと同様です。ただし、ユーザーにサービス提供側が意図したとおりの感想を持ってもらえないとしたら、それは何かしら失敗しているのが原因かもしれません。

　HTML5は、いまだに新たな選択肢を増やしながら、発展しています。幸いなことに、主力スマートフォンは、同じWebkit系のブラウザがシェアの多くを占めており、すでにさまざまなHTML5機能使えます。今後も、しばらくは大きく変化していくでしょう。

　みなさんもHTML5の最新動向にキャッチアップしつつ、ユーザーがこれまで見たこともないような体験をデザインしてみませんか？

著者プロフィール えーじ（＠agektmr） 作曲家 > スタートアップのアルバイト > 中小企業社員 > 大手通信事業者社員 > 外資系企業社員（イマココ）HTML5の啓蒙活動などを行っている

 

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）