タブレット向けWebデザインのノウハウ40選

タブレット向けWebデザインのノウハウ40選 ―― 第1章 タブレットの機能を知る

「タッチデバイスの特性」「タブレットとPCとの機能の違い」「タブレット独自の機能の実装」に関する12ノウハウ

1-1 タッチデバイスの特性

#1タップ領域を確保する

タッチデバイスでは、指を使って直感的に操作できる一方、正確さではピクセル単位を扱うマウスカーソルには到底及びません。ユーザーのタップ操作をより楽にしてあげるためには、対象となる要素の周りに十分な余白を取り、それ自体がきちんとタップできるぐらいに大きくすることを忘れないようにしましょう。

アップルのiOSヒューマンインターフェイスガイドラインでは、人間の指で快適にタップするためには、44ピクセル×44ピクセルのタップ領域を割り当てることを推奨しています。これは当たり前のことですが、タップ領域が大きいほど、ユーザーが間違ったボタンを押す可能性は減ります。

最低でも44ピクセル×44ピクセルのタップ領域を設けましょう。また、marginよりもpaddingの使用を薦めます。marginでは周辺に白いエリアを追加するだけですが、paddingではタップできる領域が広がります。

#2タッチしやすいように設計する

デスクトップサイトをタブレットに最適化するうえで最も重要なことは、ユーザーがタッチしやすいような仕様にすることです。

サイト上にタップやスワイプ、ピンチ、もしくはプルできそうに見えて、実際にはできない要素はないでしょうか?

ユーザーは、タブレットで使用する当たり前のジェスチャーにより、思ったとおりに動くことを期待しています。そのため、このような要素には適切な機能が実装されるよう設計しましょう。また、「カルーセル」「アコーディオン」「ドロワー」「パネル」といった機能を積極的に使用しましょう。

#3タブレットでのタイピングは最小限に抑える

入力モードに合わせてソフトウェアキーボードは変化しますが、実際のキーボードに比べると、操作は楽ではないし、速くも打てません。

ソフトウェアキーボードでは入力が難しいので、必要なタイピング数を極力抑えるようにしましょう。ユーザーは、タイピング以外の作業に集中できるほうが、快適に感じます。

Google Flightsでは、目的地の最初の数文字を入力するだけで、フライトの予約が取れるようになっています。

#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マウスオーバーアクションは使わない

マウスオーバーは、追加で情報を掲載するうえで非常に効果的です。しかし、タブレットではマウスオーバーという概念がないので、予期せぬ動作をしたり、まったく効かなかったりします。

マウスオーバーで表示される情報は、別の場所でも必ず見つかるようにして、タブレットユーザー向けにはこの機能をオフにしましょう。

Tommy BahamaのPCサイトではグローバルナビにマウスオーバーするとサブナビゲーションが表示されますが、タブレットでは「VIEW MENU」ボタンでサブナビゲーションが表示されるようになっています。

#7リキッドレイアウトを採用する

フレキシブルなグリッドは、コンテンツがさまざまなデバイスやスクリーンの向きに応じて、正しく表示されるようにしてくれます。

通常タブレットでは、メディアクエリーを使用しますが、エレメントの幅を固定幅で宣言するのではなく、割合(%)で宣言しましょう。そうすれば、サイズの違うデバイス上でも適切に伸縮して表示されるようになります。

●ランドスケープ表示
●ポートレート表示
●スマホ表示
ランドスケープ(横向き・左図)のときは3列、ポートレート(縦向き・中央図)のときは2列、スマートフォン(右図)では1列のようにレイアウトするといいでしょう。

#8縦・横両方にデザインする

リキッドレイアウトとは別に、タブレットは縦向きと横向きの両方で使用できることから、この2つの向きそれぞれに対して適切なユーザビリティを提供できるようにデザインする必要があります。

これは、それぞれの向きがどのような状況で使われているのかを考える、いい機会にもなります。

●ポートレート表示
●ランドスケープ表示
ポートレートモード(縦向き・左図)のときには、ナビゲーションはスペースの節約のために隠し、ランドスケープモード(横向き・右図)では、ナビゲーションが常に表示されアクセスを簡単にする方法もあります。

#9パフォーマンスもデザインの一部と考える

実験的でモダンなウェブデザインでは(最も顕著なものはレスポンシブデザイン)、パフォーマンスに悪影響を及ぼすこともあります。ウェブサイトのロードに3秒以上かかった場合には、57%のユーザーが直帰してしまいます。パフォーマンスをデザインの一部として考えることは、非常に重要です。

画像を圧縮したり、CSSやJavaScriptを単一ファイル化すると、HTTPリクエストの数やページサイズを減らすことができます。このような工夫で、ユーザーの体感としてのページが表示されるまでの時間を短縮し、コンバージョン率の向上を図ることができます。Uglify、Sass、Compass、Mobify.jsといったツールは、こうしたパフォーマンス向上を自動的に行ってくれます。

1-3 タブレット独自の機能の実装

#10画像だけピンチできるようにする

もしウェブサイトがタッチデバイスに最適化されていれば、ユーザーはコンテンツを閲覧するのにズームする必要はありません。

しかし、もし高解像度向けの画像や写真があるのならば、ぜひ、それを上手く見せるべきです。ユーザーがページ全体のサイズを変えることなく画像をピンチしてズームすることができれば、それはユーザーにとって嬉しいことです。

#11「気づき」を与える

タブレットでのユーザー・インタラクションは、PCやスマートフォンの場合と異なります。

もし、PCサイトにはないナビゲーションやコンテンツの構造をタブレット向けに導入しているのならば、その使い方をユーザーにわかりやすく伝える必要があります。

Googleニュースでは、初回アクセス時に右側に矢印のアイコンが表示され、「スワイプできる」という気づきを与えています。

#12カメラを使えるようにする

タブレットユーザーは、デスクトップでできるすべてのことをタブレットでもできることを期待します。もし、ウェブサイトにユーザーアカウントの管理機能があれば、タブレットからも同じように使えるようにしましょう。

ユーザーアカウントにプロフィール写真を設定できるようになっているならば、写真を変えたいと思ったユーザーが、新しいプロフィール写真をカメラで撮影して設定できるようにします。

ページからカメラにアクセスするには、次のコードを使います。

<input type="file" accept="image/*" capture="camera">
Google+では、プロフィール写真をiPadのカメラから撮影して設定できます。

この記事の元となる資料を作った株式会社ドーモでは、Web担当者さん向けのEbookをほかにも提供しています。興味をもたれた方は、こちらもチェックしてみてください。

「スマートフォン・タブレットサイト研究」Facebookも公開中!!

用語集
CSS / HTML / JavaScript / コンバージョン率 / スマートフォン / ナビゲーション / ユーザビリティ / 直帰
この記事が役に立ったらシェア!
メルマガの登録はこちら Web担当者に役立つ情報をサクッとゲット!

人気記事トップ10(過去7日間)

今日の用語

インデックス
検索エンジンがWebページをデータベースに保存しているデータベース。データベース ...→用語集へ

インフォメーション

RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]