ヨコハマとともに生きるクリエイティブ研究サイト
このebookは、今からタブレットも視野に入れたサイトを作るためにどのように考えればいいのか、その40ものノウハウをまとめたものです。2013年米国のサイバーマンデーでは、タブレットからの購入が増加しました。今後は日本でも増加することを踏まえ、コンバージョン、売上、顧客満足度をよりアップできるタブレット最適化の準備をしましょう！
ユーザーに手間をかけてダブルタップ（さらにはピンチ）を強いるよりも、フォントサイズを最初から16ピクセル程度に大きくして可読性を高くしておきましょう。
また、行間も1.5程度は空けておくようにしましょう。ユーザーがどのようにデバイスを持っていたとしても、コンテンツを容易に読めることが重要です。
ユーザーはさまざまな方法・姿勢でタブレットを持って使うため、いろいろなシチュエーションに合わせてフォントサイズを変えられるようにしましょう。これはブログなどの、記事を扱うテキストの多いサイトにおいては特に有効です。
body（または特定のコンテンツエレメント）で基準となるフォントサイズを規定しておき、個々の要素のフォントサイズはemで指定しましょう。
ほとんどのタブレット解像度やピクセル密度は、デスクトップPCやノートPCのモニターよりも高いものです。その結果、タブレットの美しいスクリーン向けにデザインされていないグラフィックは、画像がぼやけたように見えてしまいます。
そのため、小さなアイコンなどはフォントベースで表現することで、タブレットデザインにおいていくつかの利点が出てきます。高解像度のディスプレイでも綺麗なままサイズを変更でき、さらにCSSを用いて色や影を付けるなどが簡単にできます。
1ページに複数のアイコンがある場合でも、ダウンロードは1回のHTTPリクエストで済み、スプライト画像の設定に頭を悩ます必要もありません。
アイコンフォントやSVGのようなベクターは、画像よりもサイズの変更に融通が利きやすくなっています。
アイコンフォントセットは自分でも簡単に作ることができますが、既存のFont Awesome、glyphish、iconsweets、symbolset、icnfntなど、さまざまなものが使えます。
[参考]フォント作成サイト
IcoMoon：https://icomoon.io
IconVault：https://iconvau.lt
先述のように、高DPIを持つスクリーンにおいては、特にアイキャッチとなるような部分には精彩な画像を用意しましょう。超高解像度の画像は、ユーザーに驚きと喜びを提供する手段として有効です（実際、ウェブ用のほとんどの画像は、Retinaディスプレイではぼやけてしまいます）。
もし、インパクトの強い画像があるのならば、細かく区切って他の要素を詰め込むよりも、その画像1枚を大きく見せましょう。ユーザーはクオリティの高い画像に、より魅き付けられます。
たとえばECサイトでは、製品画像を大きめにすれば、コンバージョン率を最大で9%ほど高めることができます。そのため、いい画像にはできるだけ多くのスペースを与えましょう。
PCサイトでは、情報を多く詰め込むために小さなサムネイル画像を使うことがあります。
マウスであれば小さな画像にカーソルを合わせる事はそれほど難しくないですが、タッチデバイスでは、タップしづらかったり違うアイテムを選択してしまったり、ユーザーはフラストレーションを感じてしまいます。
できるだけサムネイルは大きく見やすくするか、他のアイテムとの間隔をきちんと取って、ユーザーが意図したとおりの操作ができるようにしましょう。
PCサイト（右）では1画面に収まるように小さく配置しているサムネイルを、タブレット（左）では大きくすることでタップしやすくします。
特に日本語を扱う場合には、Webで使用できるフォントが貧弱だったため、キャッチコピーなどの文字を画像として作ることが多いですが、マルチスクリーンではさまざまなサイズにリサイズされるため、時として小さくなりすぎて文字の可読性が下がったり、逆に大きくなったときに文字がぼやけてしまう場合もあります。
最近は、日本語のWebフォントも種類が増えてきたので、キャッチコピーなどインパクトの大きいテキストに関しては、Webフォントを利用するのも1つの手段です。
画像で用意する場合でも、極力文字を詰め込まずに、リサイズを考慮したサイズで作るようにしましょう。
ページ上部などに固定されるナビゲーションは、実装を間違うと動きがぎこちなくなってしまい、かえってユーザーエクスペリエンスの妨げとなります。
ideeliのヘッダーは固定ナビゲーションとなっています。
しかし、最近の調査では、常にアクセスできる状態のナビゲーションがあると、ブラウジングのスピードが最大で22%も高速化する効果が出ており、ユーザーにも好まれていることが判明しました。
固定ナビゲーションをうまく使うと、ユーザーがページ内の移動を減らして、ページ間をスムーズに移動できるようになります。
YouTubeではお馴染みの、画面端に表示される大きなアコーディオンのようなパネルは、ページのコンテンツからユーザーの注意を逸らすことなく、他のコーナーへのナビゲーションとして、回遊性を高める良い方法です。
既存のナビゲーションを無理やりでも新しいレイアウトに合わせるのではなく、タブレットユーザー向けによりシンプルで魅力的なものに変えてみましょう。
これは、既存のものを捨てて、まったく新しいものを作ることでもあります。
(左図)このナビゲーションは商品画像に最大のゆとりを与えるように作られています。また、ユーザーが行う3つの行動（戻る、ホームへ、ショッピングカートへ）に絞ってシンプルにしています。
＜無料＞「タブレット向けWebデザインのノウハウ40選」をいますぐ全て読む！
＜文／カナダ・Mobify社、翻訳・編集／ドーモ＞
Mobify（モビファイ）とは
Googleが認定しているマルチスクリーン対応のための最適化サービス。
デバイスに応じ、専用にデザインされたサイトを表示することができます。
ページの表示を高速化させる仕組みも持ち合せており、ユーザーの離脱を防ぐことが可能です。
