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

・タブレットも視野に入れたサイトづくりの考え方、ノウハウ満載！
・タブレット向けサイトが標準的な仕様となる将来が、すぐそこに！
・まずは、タブレットの重要な５つの機能を理解しよう！

はじめに・タブレットに最適化されたWebサイトは、ほとんど存在しない現状
スマホの普及率が高まり、最近ではスマホに最適化されたWebサイトも珍しくなくなってきました。

「他のデバイスで、PCサイトを表示させても問題ない」

ということは、スマホが出たばかりの頃も同じように言われていました。

その根拠は次のようなものでした。

“ピンチアウトすれば拡大表示ができるし、iOSでサポートされないFlashを置き換えれば対応する必要はない”。

しかし今、そのような意見は少数派になっているのではないでしょうか？

「今のところ不要だ」と言われているタブレット向けサイトも、いずれは標準的な仕様となる将来もそう遠くはないかと思います。

Webサイトの利用が直接収益に結びつくECサイトでは、タブレット対応が今後、重要になってくるでしょう。
そのようなサイトが増えてくれば、他のサイトもタブレットの存在を無視できなくなってくるはずです。

未経験から6ヶ月でWebデザイナーへ
始めてみるなら、未経験からでもWebデザイナーや動画クリエイターを目指せるスクールがデジハリのスタジオ横浜です。またより一歩ステップアップを目指すフリーランスやWeb担当者にも適したコースを用意しています。

タブレットの機能を知る　タッチデバイスの特性

[1]タップ領域を確保する

タッチデバイスでは、指を使って直感的に操作できる一方、正確さではピクセル単位を扱うマウスカーソルには到底及びません。

ユーザーのタップ操作をより楽にしてあげるためには、対象となる要素の周りに十分な余白を取り、それ自体がきちんとタップできるぐらいに大きくすることを忘れないようにしましょう。

アップルのiOSヒューマンインターフェイスガイドラインでは、人間の指で快適にタップするためには、44ピクセル×44ピクセルのタップ領域を割り当てることを推奨しています。

これは当たり前のことですが、タップ領域が大きいほどユーザーが間違ったボタンを押す可能性は減ります。

これを踏まえ、最低でも44ピクセル×44ピクセルのタップ領域を設けましょう。

また、CSSはmarginよりもpaddingの使用を薦めます。

marginでは周辺に白いエリアを追加するだけですが、paddingではタップできる領域が広がります。

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

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

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

ユーザーは、タブレットで使用する当たり前のジェスチャーにより、思ったとおりに動くことを期待しています。

そのため、このような要素には適切な機能が実装されるよう設計しましょう。

また、「カルーセル」「アコーディオン」「ドロワー」「パネル」といった機能を積極的に使用しましょう。

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

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

ソフトウェアキーボードでは入力が難しいので、必要なタイピング数を極力抑えるようにしましょう。

ユーザーは、タイピング以外の作業に集中できるほうが、快適に感じます。

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

Webデザイナーになると、今日決めた！
AIが敵わない仕事はデザイナーだといいます。デジタル時代の生き方なら、まずはWebデザイナーから

[4]状況に合わせたキーボードを出す

ソフトウェアキーボードが、物理キーボードに比べて有利な点が1つあります。

それは、ダイナミック（動的）にキー配列を変えられる点です。

[5]フォームでは「自動修正機能」を切る

スマホやタブレットのOSはPCと比べて、自動修正機能がより強力にかかります。

これはタップ入力の不正確さ、ソフトウェアキーボードの触感的反応の無さから、タイプミスが頻発することを想定して開発されているからです。

しかし、Eメールアドレスや住所、ユーザー名が自動的に修正されてしまうと、苛立つことはありませんか？

フォームフィールドでは、自動修正や自動大文字化機能はオフにしましょう。

この記事を書いた人

モバイルラボ 編集部
ヨコハマ・モバイルラボとは？ モバイルならではの表現ってなんだろう？ 一瞬のひらめきや感動は手のひらから始まっています。 新しいクリエイティブのカタチをここから探してみましょう。