タッチデバイスの特性#1タップ領域を確保するタッチデバイスでは、指を使って直感的に操作できる一方、正確さではピクセル単位を扱うマウスカーソルには到底及びません。ユーザーのタップ操作をより楽にしてあげるためには、対象となる要素の周りに十分な余白を取り、それ自体がきちんとタップできるぐらいに大きくすることを忘れないようにしましょう。アップルのiOSヒューマンインターフェイスガイドラインでは、人間の指で快適にタップするためには、44ピクセル×44ピクセルのタップ領域を割り当てることを推奨しています。これは当たり前のことですが、タップ領域が大きいほど、ユーザーが間違ったボタンを押す可能性は減ります。最低でも44ピクセル×44ピクセルのタップ領域を設けましょう。marginよりもpaddingの使用を薦めます。marginでは周辺に白いエリアを追加するだけですが、paddingではタップできる領域が広がります。#2タッチしやすいように設計するデスクトップサイトをタブレットに最適化するうえで最も重要なことは、ユーザーがタッチしやすいような仕様にすることです。サイト上にタップやスワイプ、ピンチ、もしくはプルできそうに見えて、実際にはできない要素はないでしょうか?ユーザーは、タブレットで使用する当たり前のジェスチャーにより、思ったとおりに動くことを期待しています。そのため、このような要素には適切な機能が実装されるよう設計しましょう。「カルーセル」「アコーディオン」「ドロワー」「パネル」といった機能を積極的に使用しましょう。#3タブレットでのタイピングは最小限に抑える入力モードに合わせてソフトウェアキーボードは変化しますが、実際のキーボードに比べると、操作は楽ではないし、速くも打てません。ソフトウェアキーボードでは入力が難しいので、必要なタイピング数を極力抑えるようにしましょう。ユーザーは、タイピング以外の作業に集中できるほうが、快適に感じます。Flightsでは、目的地の最初の数文字を入力するだけで、フライトの予約が取れるようになっています。#4状況に合わせたキーボードを出すソフトウェアキーボードが、物理キーボードに比べて有利な点が1つあります。それは、ダイナミック(動的)にキー配列を変えられる点です。状況に応じてキー配列を変更できる点に注目して、入力フォームのフィールドに、次の入力タイプを使用してみてください。使いやすいキー配列で入力支援することが可能になります。/>#5フォームでは「自動修正機能」を切るスマートフォンやタブレットのOSは、PCのOSと比べて、自動修正機能がより強力にかかります。これはタップ入力の不正確さ、ソフトウェアキーボードの触感的反応の無さから、タイプミスが頻発することを想定して開発されているからです。フォームフィールドでは、自動修正や自動大文字化機能はオフにしましょう。それを行うためには、次のHTMLを使用します。タブレットとPCとの機能の違い#6マウスオーバーアクションは使わないマウスオーバーは、追加で情報を掲載するうえで非常に効果的です。タブレットではマウスオーバーという概念がないので、予期せぬ動作をしたり、まったく効かなかったりします。マウスオーバーで表示される情報は、別の場所でも必ず見つかるようにして、タブレットユーザー向けにはこの機能をオフにしましょう。MENU」ボタンでサブナビゲーションが表示されるようになっています。#7リキッドレイアウトを採用するフレキシブルなグリッドは、コンテンツがさまざまなデバイスやスクリーンの向きに応じて、正しく表示されるようにしてくれます。通常タブレットでは、メディアクエリーを使用しますが、エレメントの幅を固定幅で宣言するのではなく、割合(%)で宣言しましょう。すれば、サイズの違うデバイス上でも適切に伸縮して表示されるようになります。●スマホ表示ランドスケープ(横向き・左図)のときは3列、ポートレート(縦向き・中央図)のときは2列、スマートフォン(右図)では1列のようにレイアウトするといいでしょう。#8縦・横両方にデザインするリキッドレイアウトとは別に、タブレットは縦向きと横向きの両方で使用できることから、この2つの向きそれぞれに対して適切なユーザビリティを提供できるようにデザインする必要があります。これは、それぞれの向きがどのような状況で使われているのかを考える、いい機会にもなります。●ランドスケープ表示ポートレートモード(縦向き・左図)のときには、ナビゲーションはスペースの節約のために隠し、ランドスケープモード(横向き・右図)では、ナビゲーションが常に表示されアクセスを簡単にする方法もあります。#9パフォーマンスもデザインの一部と考える実験的でモダンなウェブデザインでは(最も顕著なものはレスポンシブデザイン)、パフォーマンスに悪影響を及ぼすこともあります。ウェブサイトのロードに3秒以上かかった場合には、57%のユーザーが直帰してしまいます。パフォーマンスをデザインの一部として考えることは、非常に重要です。画像を圧縮したり、CSSやJavaScriptを単一ファイル化すると、HTTPリクエストの数やページサイズを減らすことができます。このような工夫で、ユーザーの体感としてのページが表示されるまでの時間を短縮し、コンバージョン率の向上を図ることができます。Uglify、Sass、Compass、Mobify.jsといったツールは、こうしたパフォーマンス向上を自動的に行ってくれます。タブレット独自の機能の実装#10画像だけピンチできるようにするもしウェブサイトがタッチデバイスに最適化されていれば、ユーザーはコンテンツを閲覧するのにズームする必要はありません。高解像度向けの画像や写真があるのならば、ぜひ、それを上手く見せるべきです。ユーザーがページ全体のサイズを変えることなく画像をピンチしてズームすることができれば、それはユーザーにとって嬉しいことです。#11「気づき」を与えるタブレットでのユーザー・インタラクションは、PCやスマートフォンの場合と異なります。PCサイトにはないナビゲーションやコンテンツの構造をタブレット向けに導入しているのならば、その使い方をユーザーにわかりやすく伝える必要があります。Googleニュースでは、初回アクセス時に右側に矢印のアイコンが表示され、「スワイプできる」という気づきを与えています。#12カメラを使えるようにするタブレットユーザーは、デスクトップでできるすべてのことをタブレットでもできることを期待します。ウェブサイトにユーザーアカウントの管理機能があれば、タブレットからも同じように使えるようにしましょう。ユーザーアカウントにプロフィール写真を設定できるようになっているならば、写真を変えたいと思ったユーザーが、新しいプロフィール写真をカメラで撮影して設定できるようにします。ページからカメラにアクセスするには、次のコードを使います。capture="camera">Google+では、プロフィール写真をiPadのカメラから撮影して設定できます。タブレットデザインを考えるよろしければこちらもご覧くださいこの記事の元となる資料を作った株式会社ドーモでは、Web担当者さん向けのEbookをほかにも提供しています。興味をもたれた方は、こちらもチェックしてみてください。Practices」をもとに、日本語に翻訳し、日本におけるデザインベースの違いを踏まえて株式会社ドーモの大賀匠竜が加筆・修正し再構成したものです。代表取締役)モビファイは、世界各国でモバイルサイト最適化サービスを提供するカナダ・バンクーバーを拠点とする会社です。このプラットフォームは、米グーグルにもマルチスクリーンベンダーとして推奨されたもので、安定かつ高いパフォーマンスが定評で、日本でも60サイトのマルチデバイス対応を裏側から支えています(2013年12月現在)。最近(過去90日間)の記事で、Facebookの「いいね!」が多かった記事をお見逃し無く。ネット広告への強い嫌悪感、テレビや新聞の倍以上に。いいね!伝説のTwitter企業アカウント“中の人”の先駆け。いいね!私は変人コレクター。・2019年】フリマアプリは、新品購入の意欲も上昇させる。#10「おもてなし」は思考停止ワード。各週の人気記事ランキング記事を見るはてなブックマークですべての人気記事を見る今日の用語CTR広告がクリックされた頻度を表す。「おもてなし」は思考停止ワード。2/24~2/28のマーケティング、インサイドセールス、データ分析、EC、SEOなど他社セミナー情報52件Web担編集部がゼロから学ぶ、Tableau「BI講座」。Patterns』を3名様にプレゼント!【受付終了】企業がDXに向かう取り組み方を考える『デジタルファースト・ソサエティ』を3名様にプレゼント!すべて見るインフォメーションWeb担のメルマガを購読しませんか?Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。編集後記サイトマップFAQ(よくある質問とその答)Web担に広告を掲載しませんか?購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。