スマフォやタブレットに最適なナビゲーションの考察 -見た目のレスポンシブではなく操作性で！
Post on:2012年11月9日
sponsors
スマートフォン、タブレット、ラップトップタイプのタブレットなど、タッチデバイスに最適なナビゲーションの考察を紹介します。
単に見た目のレスポンシブではなく、操作性を考慮したレスポンシブです。
Responsive Navigation: Optimizing for Touch Across Devices
下記は各ポイントを意訳したものです。
スマフォ・タブレット・ラップトップタブレットのサイズ
まずは、デバイスごとのスクリーンサイズを確認してみます。
過去2ヵ月にリリースした主要なスマートフォンのサイズ一覧です。
スマートフォンのサイズ一覧
スマートフォンのスクリーンサイズは、3.5-5.5インチがメインストリームです。
過去2ヵ月にリリースした主要なタブレットのサイズ一覧です。
タブレットのサイズ一覧
タブレットのスクリーンサイズは、7-10.1インチがメインストリームです。
ラップトップタイプのタブレットのサイズ一覧です。
ラップタイプ タブレットのサイズ一覧
ラップタイプ タブレットのスクリーンサイズは、11.6-13.3インチがメインストリームです。
スマフォ・タブレット・ラップトップタブレットのタッチ方法
スクリーンサイズにおけるタッチを考慮する場合に大切なポイントは2つです。
- タッチするターゲットの大きさ
- タッチするターゲットの位置
最初の「大きさ」は、当然大きいほどタッチするのが簡単です。タッチ損ねやエラーを妨げるために十分な大きさを確保してください。
2番目の「位置」は、実は設計する上で最も重要なポイントです。ターゲットをマウスでクリックする際には大きさや位置はそれほど気にならないかもしれませんが、なぜ重要であるかを理解するために、下記のイラストを見てください。
スマートフォンの持ち方（※右利きの例）
これらの体勢でスマフォを操作する場合、スクリーンの底のエリアは容易にタッチでき、上のエリアは指を曲げたり届かなかったりでタッチ操作が困難です。
スマートフォンでのタッチの難易度
Easy:容易、OK:可能、Hard:困難
同様に、タブレットの持ち方も見てみましょう。
タブレットの持ち方
タブレット自体を膝におくか、両手で持って操作するかに分かれます。どちらで持っても、上中央の位置に指を届かせるのは非常に難しいです。
タブレットでのタッチの難易度
ラップタイプ タブレットは底の部分を手で支え、スクリーンを親指で支えます。
ラップタイプ タブレットの持ち方
ラップタイプの方が通常のタブレットより親指が底にあるため、より上中央の位置の操作が困難になります。
ラップタイプ タブレットでのタッチの難易度
タッチデバイスに最適なナビゲーションの位置
今日のたいていのナビゲーションシステムは、マウスやキーボード操作を前提に設計されています。容易にタッチするために設計はされていません。
まずは、ありがちなレスポンシブ用のナビゲーションを見てみましょう。
よくあるナビゲーションシステム
上のナビゲーションシステムは確かによく見かけます。しかし、これはスクリーンサイズに対して最適化されているだけで、タッチすることに関して最適であるとは言えません。タッチに最適なターゲットの位置はもっとずっと底の配置です。
タッチデバイスに最適なナビゲーションの位置
このナビゲーションの位置がタッチしやすいかは、次のデモを実際に触れて見てください！
デモ
タッチデバイスに最適なナビゲーションのデモを4パターン紹介します。
Demo 1: 分割タイプのナビゲーション
Demo 2: マルチレベル対応のナビゲーション
Demo 3: バリエーション（背景付きの分割タイプ）
Demo 4: バリエーション（一行タイプ）
sponsors
