モバイルサイト設計の10の常識

1. タッチジェスチャーの選び方は？

選択をスワイプジェスチャーで表さないこと。ネイティブアプリでは、これは「削除」を意味するため。

OSのデフォルトジェスチャーを変更しないこと。例えば、長押しはコンテキストメニューの呼び出し、ピンチインは縮小、ダブルタップは拡大など。同様の基本機能を再実装できる場合を除いて。

2. インターフェースを「速く見せる」には？

ユーザーにタイムリーなフィードバックを行うこと。例えばプログレスバーや遷移アニメーションなど。また、画像のフェードイン効果も（実際には遅くなっているが）速く感じさせることができる。

3. メディアクエリ（media query）

IE8以前はメディアクエリをサポートしていない。モバイル環境では、少なくともIE10以上であるため、これは特に影響しない。

一般的な閾値：480px以下〜スマホブラウザ、800px以上〜デスクトップブラウザ、480pxから800px 〜タブレットブラウザ。

4. 適切なセレクター（selector）を使用する

子孫セレクターを避けること。代わりにクラス（class）を使用できる。ブラウザはCSSセレクターを右から左へ解析するため、子孫セレクターは負荷が大きいため。

5. emとpx、どちらを使うべきか？

どちらでも良い。emは一時（2005年頃）流行した。当時のブラウザにフォントサイズ変更機能が備わり、emを単位にすることでフォントの変化に対応できたため。その後、IE7でデフォルトのズーム方式がページ全体の拡大縮小に変わったことでemは忘れ去られ、現在は依然としてpxが最もシンプルで直接的な単位となっている。emを使うかpxを使うかはどちらでも良く、どちらを選んでもそれほど悪くはない。

6. viewportにはどんな役割があるか？

viewportは、ビューポート（視窓）のサイズを限定するために使用される。ビューポートとは、ブラウザがページに提供するコンテナ（タイトルバー、ツールバー、タブバー、ステータスバーなどを除いた部分）のことである。viewportには広くサポートされている以下の属性がある：

width: viewportの幅を設定する。デフォルト値は980、許容範囲は200-10000。
height: viewportの高さを設定する。デフォルト値は幅とデバイスのアスペクト比から算出される。許容範囲は223-10000。
initial-scale: viewportの初期倍率を設定する。デフォルト値はページ全体が可視領域に収まるように計算され、範囲はminimum-scaleとmaximum-scale属性によって決定される。
maximum-scale: viewportの最大倍率を設定する。デフォルト値は5.0、許容範囲は0-10.0。
user-scaleable（*後ろの単語の綴りに注意*）: ユーザーがビューを拡大縮小できるかどうかを決定する。また、テキスト入力開始時のスクロールを防止することもできる。

このようにviewport属性を使用できる：

<meta name="viewport" content="width=device-width">

デバイスの幅に自動適応させる。パーセント表示のレイアウトでよく使われる。例えば、トップのヘッダーに100%の幅が必要な場合など。

7. なぜページの読み込みが遅いのか？

HTTP接続数が多すぎる（またはCookieが大きすぎる）
総バイト数が大きすぎる
待機時のレンダリングブロック（外部CSSファイルや読み込み中に実行されるjsスクリプト）
遅延（3Gネットワークは約500msの遅延がある）
キャッシュ効率が悪い

8. なぜアニメーションがカクつくのか？

setTimeoutによるアニメーションは極力避けること。代わりにtransitionを使用すべきである。CSSアニメーションは（JSスレッドではない）別のスレッドで実行されるため。

9. なぜfixedレイアウトが正常に動作しないのか？

モバイル環境でのfixedレイアウトには、viewportのメタ情報 width=device-width と user-scaleable=no を追加する必要がある。例：

<head>
<meta name="viewport" content="width=device-width, user-scaleable=no"
</head>

ユーザーがページを拡大縮小してレイアウトが崩れるのを防ぐため。

10. ページのパフォーマンス測定ツールには何があるか？

YSlow：Yahoo!によるツール。ページをスコアリングし、各指標を評価して最適化案を提示する。
PageSpeed：上記の機能に加え、モバイル最適化もサポートしている。

上記の2つのツールには、FirefoxとChromeのプラグインがある。

参考文献

『Building Touch Interfaces with HTML5』（邦題例：『HTML5タッチインターフェース設計と開発』）