デザインを増幅させる 今使えるWeb技術

コンテンツをスマートにするには、ページの概念を取り払ったコンテンツの細分化と管理が欠かせませんが、利用者へ届けるための技術も無視できません。数年前であれば、ネイティブアプリでしかできなかったことも、Web 技術で可能になりつつあります。

マークアップの仕方がここ数年で変化したように、Web 技術も激変してきています。従来のような全ユーザーに同じコンテンツを表示するのではなく、利用者の環境・文脈に応じてきめ細かな配慮が可能になりつつあります。

Web やアプリのデザインは、技術のことを知っているか知っていないかで大きく変わります。今この瞬間のデザイン（トレンド）だけでなく、これからどうなるのかを考えながらデザインするという観点が今の Web デザインに欠けていると感じることがあります。今 Web でできることは数年前と大きく変化していて、それが新しいデザイン提案に繋がるものもあります。Ajax で動的な見せ方をするだけというのは過去の話なわけです。

以下、今すぐにでも実装できる Web 技術の一部を紹介しています。これらの技術を活用することで利用者の文脈に合わせたきめ細かなコンテンツ配信やデザインを適応することができます。サポート状況は2015年3月9日現在のものですが、最新のサポート状況が知りたい方は Can I Use? を参照してください。

Geolocation API

デバイスの位置（緯度経度）を取得できます。 IP アドレス、Wi-Fi、Blutooth などの接続方法によって正確な位置は取得できないものの、場所に応じて様々な情報を提供することが可能。IE9 以上、デスクトップ、スマートフォンと広くサポートしている。

Vibration API

Webブラウザからデバイスの振動機能にアクセスすることができる。下記で紹介している Web Notification API との連携した通知も可能。Safari と IE 以外でサポートしている。

Web Notification API

デスクトップ上など、システムレベルで通知を表示させることができる。スマートフォンでは実装できないが、デスクトップであれば Firefox, Chrome, Safari などがサポートしている。

Battery Status API

システムのバッテリー充電レベルに関する情報を取得することができる。バッテリーの消耗に応じて異なる動作を割り当てることも可能。現在 Chrome, Opera でフルサポートしている。

Device Orientation API

デバイスの向きを縦横向きだけでなく、3次元でデバイスの傾きを探知することができる。フルサポートしているブラウザはないが、部分的であれば IE11 も含めて広く利用することができる。

Page Visibility API

タブに隠れているか、見えているかを判別することができる。IE10 をはじめ、スマートフォン、デスクトップで広くサポートしている。

録音・録画

ハードウェアに組み込まれているカメラを利用して、Web ブラウザから録音や録画だけでなく、スクリーンキャプチャも可能。Android スマートフォンからでも使える。

Web Speech API

デバイスに組み込まれているマイクを利用して、フォームの音声入力を可能にします。Chrome と iOS Safari で利用可能。

Amibient Light API

光の強さを探知して見た目を変えたり、補助機能を提供することができる。現在、サポートしているブラウザは Firefox のみ。

Proximity API

デバイスとオブジェクトの距離を計測するために使います。IoT はもちろん、利用者がデバイスに近づいたり離れたりすると、アプリケーションが動作するといったことができます。現在、サポートしていうブラウザは Firefox のみ。

仕事で使うデスクトップパソコンでは動作しないものが幾つかあります。しかし、今多くの人が時間を過ごしているスマートフォンで新しい価値を提供してくれるものばかりです（忘れてはならないのは、パソコンユーザーはマイノリティだということ）。

ブラウザサポートは Web 開発者にとって永遠の課題ですが、すべての環境で同じような見た目と機能を提供することはできません（スクリーンサイズの違いが分かりやすい例です）。それぞれの環境に合わせて段階的に最適化する Progressive Enhancement の考え方はより一層重要になります。また、Web ブラウザの発展のスピードは、5 年前に比べると圧倒的に早いです。「まだ無理」と思っている間にスマートフォンの Web ブラウザでは標準になる API も増えてくるでしょう。

Chrome Experiment のような最新の Web 技術を実験する場は提供されていますが、すべての最新技術が『実験』で終わる必要はありません。多くのユーザーの役に立つ機能を、今すぐ使える状態にあるわけです。上記のような技術を活用することで、今までなかった新しいデザインを提案することができるはずです。