タッチ操作向けサイト構築のガイドライン
Windows 8 Consumer Preview の IE10 では、高速で滑らかなマルチタッチ対応の Web エクスペリエンスが実現されています (例 1、例 2、いずれも英語)。Most sites work fine with touch in IE10 with no changes to the site.
大部分のサイトは、そのサイト構造を変更することなく IE10 のタッチ操作で快適に動作します。この記事では、タッチ操作による顧客のサイト利用を最大限に効率化するための、4 つのシンプルなガイドラインを紹介します。
新たな入力デバイスとタッチ画面によって Web がいかに楽しく、インタラクティブで、没入できるものになるかについては以前説明いたしました。また、実際の Web をタッチを使って自由に操作できるようになるという点で、IE10 で妥協のないブラウジング エクスペリエンスを実現することがいかに重要かということもお伝えしました。
今回の 4 つのガイドラインのうち、最初の 2 つはタッチを使うユーザーにサイトの全機能を確実に提供するためのもので、残りの 2 つは、タッチを使ったより快適なサイト操作を実現するためのヒントです。
「ポイントしてクリック」を使わない
マウスの場合、コンテンツを有効に (クリック) しないホバー (ポイント) が可能です。しかしタッチの場合は、タップ操作 1 つでホバーと有効化を兼ねています。このため、有効化なしのホバーを必要とする機能は、タッチを使用するユーザーに対して適切に動作しません。この機能を使わず、すべての動作をクリック (タップ) ベースにすることを検討してください。
ブラウザーの既定のタッチ動作を、サイトに最適な内容で構成する
ユーザーは、タッチを使ってサイトをパン/ズームできることを想定しています。このため IE10 は、タッチによる移動、ピンチ、およびダブルタップを既定で使用し、これらの対話操作のためのイベントを送信しません。開発するサイトでこれらの対話操作に特別な機能を割り当てたい場合は、必要な既定の動作だけを提供するよう IE10 を構成する必要があります。
ユーザーが要素をタッチすると、IE10 が提供する既定の動作を CSS プロパティ -ms-touch-action が決定します。
-ms-touch-action: auto | none | manipulation | double-tap-zoom | inherit;
有効な 5 つの値の説明を次の表に示します。
| 値 | 説明 |
|---|---|
auto |
要素の動作はブラウザーが決定します。-ms-touch-action の既定値です。 |
none |
既定の動作は許可されません。 |
manipulation |
パン、ピンチによるズーム、およびスワイプによる前/次ページへの移動だけが許可されます。 |
double-tap-zoom |
ダブルタップによるズームだけが許可されます。 |
inherit |
要素は -ms-touch-action の値を親から継承します。 |
たとえば、Canvas 描画アプリケーションは次の値を使うことができます。
canvas {
-ms-touch-action: double-tap-zoom;
}
この構成の場合、ユーザーはダブルタップで Canvas 要素をズームできますが、Canvas 要素上で指をスライドすると、ページがパンされずにイベントが送信されます。
HTML5 フォームを使う際に入力の用途を指定する
IE10 は、すべてタッチに最適化 (英語) された HTML5 の入力コントロールに対応しています。開発者は、テキスト入力を行うユーザーに今まで以上に快適なタッチ エクスペリエンスを提供できます。当てはまる入力の用途を指定することで、Internet Explorer は、Windows 8 上の用途に合わせてレイアウトが最適化されたタッチ キーボードを表示します。
<input type="email">
![電子メール アドレス用の [@] および [.com] ボタンが表示されたタッチ キーボード。](https://msdntnarchive.blob.core.windows.net/media/MSDNBlogsFS/prod.evol.blogs.msdn.com/CommunityServer.Blogs.Components.WeblogFiles/00/00/00/38/71/metablogapi/8463.gfbtfs-image1-2.png)
電子メール アドレス用の [@] および [.com] ボタンが表示されたタッチ キーボード。
<input type="tel">
電話番号用のテンキーが表示されたタッチ キーボード。
<input type="url">
![URL 用のスラッシュおよび [.com] が表示されたタッチ キーボード。](https://msdntnarchive.blob.core.windows.net/media/MSDNBlogsFS/prod.evol.blogs.msdn.com/CommunityServer.Blogs.Components.WeblogFiles/00/00/00/38/71/metablogapi/4747.gfbtfs-image3-2.png)
URL 用のスラッシュおよび [.com] が表示されたタッチ キーボード。
ユーザーの指先のために十分な面積を確保する
私たちは、Windows 8 のタッチ主導のエクスペリエンス構築に向けて数え切れないほどの調査を実施し、それらを開発者向けの役に立つガイドライン (英語) をまとめました。ここでは平均的な指先の幅を 11 mm としています。このとき、タップする対象を大きくするほど、タップ ミスの可能性を簡単に減らすことができます。
対象の幅は 11 mm (約 40 ピクセル) 四方を確保し、並べる場合は周囲に 2 mm のスペースを確保できることが理想です。
| 対象のサイズ: 40 ピクセル以上 | |||
| 対象どうしのスペース: 10 ピクセル以上 | |||
タッチ ハードウェアのユーザーに限定してスペースを調整する場合は、機能検出を使ってください。
タッチ ハードウェア使用ユーザーを検出するには、次のコードを追加します。
if (navigator.msMaxTouchPoints && navigator.msMaxTouchPoints > 1) {
// Supports multi-touch
}
今回の基礎知識を応用する
その他数多くの手法を使って、タッチ主導のエクスペリエンスをさらに快適なものにすることができます。たとえば、カスタムのマルチタッチ対話操作またはジェスチャをサポートすることでタッチ用の最適化を実装できます。次に示すリンクを参照して、こうした開発にも着手してみてください。
- IE10 開発者向けガイド
- タッチによるズームとパン (英語)
- ポインターとジェスチャのイベント (英語)
- IE10 および Metro スタイル アプリケーションでのタッチ入力新
- すべてのブラウザーにおけるマルチタッチとマウス入力の処理 (英語)
これらの手法については将来の記事でもさらに取り上げていく予定です。IE10 のタッチ操作による快適なサイト動作を保証する、今回のガイドラインをぜひ取り入れてみてください。
— Internet Explorer 担当グループ プログラム マネージャー Jacob Rossi