1-1 タッチデバイスの特性
#1タップ領域を確保する
タッチデバイスでは、指を使って直感的に操作できる一方、正確さではピクセル単位を扱うマウスカーソルには到底及びません。ユーザーのタップ操作をより楽にしてあげるためには、対象となる要素の周りに十分な余白を取り、それ自体がきちんとタップできるぐらいに大きくすることを忘れないようにしましょう。
アップルのiOSヒューマンインターフェイスガイドラインでは、人間の指で快適にタップするためには、44ピクセル×44ピクセルのタップ領域を割り当てることを推奨しています。これは当たり前のことですが、タップ領域が大きいほど、ユーザーが間違ったボタンを押す可能性は減ります。
#2タッチしやすいように設計する
デスクトップサイトをタブレットに最適化するうえで最も重要なことは、ユーザーがタッチしやすいような仕様にすることです。
サイト上にタップやスワイプ、ピンチ、もしくはプルできそうに見えて、実際にはできない要素はないでしょうか？
ユーザーは、タブレットで使用する当たり前のジェスチャーにより、思ったとおりに動くことを期待しています。そのため、このような要素には適切な機能が実装されるよう設計しましょう。また、「カルーセル」「アコーディオン」「ドロワー」「パネル」といった機能を積極的に使用しましょう。
#3タブレットでのタイピングは最小限に抑える
入力モードに合わせてソフトウェアキーボードは変化しますが、実際のキーボードに比べると、操作は楽ではないし、速くも打てません。
ソフトウェアキーボードでは入力が難しいので、必要なタイピング数を極力抑えるようにしましょう。ユーザーは、タイピング以外の作業に集中できるほうが、快適に感じます。
#4状況に合わせたキーボードを出す
ソフトウェアキーボードが、物理キーボードに比べて有利な点が1つあります。それは、ダイナミック（動的）にキー配列を変えられる点です。
状況に応じてキー配列を変更できる点に注目して、入力フォームのフィールドに、次の入力タイプを使用してみてください。より使いやすいキー配列で入力支援することが可能になります。
| 通常 | <input type="text" /> |
|---|---|
| URL | <input type="url" /> |
| メールアドレス | <input type="email" /> |
| 数字 | <input type="text" pattern="[09]*" /> |
#5フォームでは「自動修正機能」を切る
スマートフォンやタブレットのOSは、PCのOSと比べて、自動修正機能がより強力にかかります。これはタップ入力の不正確さ、ソフトウェアキーボードの触感的反応の無さから、タイプミスが頻発することを想定して開発されているからです。
しかし、Eメールアドレスや住所、ユーザー名が自動的に修正されてしまうと、いらだつことはありませんか？ フォームフィールドでは、自動修正や自動大文字化機能はオフにしましょう。それを行うためには、次のHTMLを使用します。
<input "text" autocapitalize="off" autocorrect="off" />1-2 タブレットとPCとの機能の違い
#6マウスオーバーアクションは使わない
マウスオーバーは、追加で情報を掲載するうえで非常に効果的です。しかし、タブレットではマウスオーバーという概念がないので、予期せぬ動作をしたり、まったく効かなかったりします。
マウスオーバーで表示される情報は、別の場所でも必ず見つかるようにして、タブレットユーザー向けにはこの機能をオフにしましょう。
#7リキッドレイアウトを採用する
フレキシブルなグリッドは、コンテンツがさまざまなデバイスやスクリーンの向きに応じて、正しく表示されるようにしてくれます。
通常タブレットでは、メディアクエリーを使用しますが、エレメントの幅を固定幅で宣言するのではなく、割合（%）で宣言しましょう。そうすれば、サイズの違うデバイス上でも適切に伸縮して表示されるようになります。
#8縦・横両方にデザインする
リキッドレイアウトとは別に、タブレットは縦向きと横向きの両方で使用できることから、この2つの向きそれぞれに対して適切なユーザビリティを提供できるようにデザインする必要があります。
これは、それぞれの向きがどのような状況で使われているのかを考える、いい機会にもなります。
#9パフォーマンスもデザインの一部と考える
実験的でモダンなウェブデザインでは（最も顕著なものはレスポンシブデザイン）、パフォーマンスに悪影響を及ぼすこともあります。ウェブサイトのロードに3秒以上かかった場合には、57%のユーザーが直帰してしまいます。パフォーマンスをデザインの一部として考えることは、非常に重要です。
画像を圧縮したり、CSSやJavaScriptを単一ファイル化すると、HTTPリクエストの数やページサイズを減らすことができます。このような工夫で、ユーザーの体感としてのページが表示されるまでの時間を短縮し、コンバージョン率の向上を図ることができます。Uglify、Sass、Compass、Mobify.jsといったツールは、こうしたパフォーマンス向上を自動的に行ってくれます。
1-3 タブレット独自の機能の実装
#10画像だけピンチできるようにする
もしウェブサイトがタッチデバイスに最適化されていれば、ユーザーはコンテンツを閲覧するのにズームする必要はありません。
しかし、もし高解像度向けの画像や写真があるのならば、ぜひ、それを上手く見せるべきです。ユーザーがページ全体のサイズを変えることなく画像をピンチしてズームすることができれば、それはユーザーにとって嬉しいことです。
#11「気づき」を与える
タブレットでのユーザー・インタラクションは、PCやスマートフォンの場合と異なります。
もし、PCサイトにはないナビゲーションやコンテンツの構造をタブレット向けに導入しているのならば、その使い方をユーザーにわかりやすく伝える必要があります。
#12カメラを使えるようにする
タブレットユーザーは、デスクトップでできるすべてのことをタブレットでもできることを期待します。もし、ウェブサイトにユーザーアカウントの管理機能があれば、タブレットからも同じように使えるようにしましょう。
ユーザーアカウントにプロフィール写真を設定できるようになっているならば、写真を変えたいと思ったユーザーが、新しいプロフィール写真をカメラで撮影して設定できるようにします。
ページからカメラにアクセスするには、次のコードを使います。
<input type="file" accept="image/*" capture="camera">
この記事の元となる資料を作った株式会社ドーモでは、Web担当者さん向けのEbookをほかにも提供しています。興味をもたれた方は、こちらもチェックしてみてください。
マルチスクリーン時代にむけた
タブレット向けWeb構築のノウハウ40選
この記事は、企業Webサイトのタブレット対応における戦略および制作対応のノウハウをまとめた資料として、モビファイ社の「Tablet Web Design Best Practices」をもとに、日本語に翻訳し、日本におけるデザインベースの違いを踏まえて株式会社ドーモの大賀匠竜が加筆・修正し再構成したものです。
オリジナル：
Tablet Web Design Best Practices:
30 Ways to Create Amazing Web Experiences on Tablets
(by Mobify)
- オリジナル原稿： モビファイ
- 日本版原稿： 大賀匠竜（ドーモ 技術担当責任 兼 デザイナー）
- 監修・編集： 占部雅一（ドーモ 代表取締役）
モビファイは、世界各国でモバイルサイト最適化サービスを提供するカナダ・バンクーバーを拠点とする会社です。このプラットフォームは、米グーグルにもマルチスクリーンベンダーとして推奨されたもので、安定かつ高いパフォーマンスが定評で、日本でも60サイトのマルチデバイス対応を裏側から支えています（2013年12月現在）。
- 内容カテゴリ：サイト企画／制作／デザイン
- コーナー：タブレット向けWebデザインのノウハウ40選
※このコンテンツはWebサイト「Web担当者Forum - 企業ホームページとネットマーケティングの実践情報サイト - SEO/SEM アクセス解析 CMS ユーザビリティなど」で公開されている記事のフィードに含まれているものです。
オリジナル記事：タブレット向けWebデザインのノウハウ40選 ―― 第1章 タブレットの機能を知る [タブレット向けWebデザインのノウハウ40選] | Web担当者Forum
Copyright (C) IMPRESS BUSINESS MEDIA CORPORATION, an Impress Group company. All rights reserved.