Webサイトの検証とモバイルユーザビリティについて
スマートフォンの普及によってWebサイトのモバイル対応が必須となってきており、モバイルユーザビリティにどう対応すべきなのかをまとめておきます。
目次
- PageSpeed Insightsで確認
- ブラウザのキャッシュを活用する
- サーバから送られてくるファイルの圧縮を有効にする
- viewportの設定
- コンテンツのサイズを表示域に合わせる
- タップ ターゲットのサイズを適切に調整
- 備考
PageSpeed Insightsで確認
自分が作成したサイトがスマートフォンでどう表示されるのかは、実際に確認してみることで分かりますが、どういった対応を行うのがベストなのかは初めて作成する場合、わかっていないことが多いです。
それを知るためには、以下のサイトで確認するのが手っ取り早いです。
上記のサイトで検証したいページのURLを入力して分析するだけで、モバイルとパソコンの両方で表示した際の速度やユーザーエクスペリエンスのチェックを行い、修正が必要な箇所を教えてくれます。
一度作り終わってからだと対応するのが難しい場合もあるので、できれば早い段階でチェックした方がいいと思います。
チェックしてくれる項目は以下の通りです。
【速度関連】
- HTMLの縮小
- CSSの縮小
- JavaScriptの縮小
- スクロールせずに見えるコンテンツのレンダリングをブロックしているJavaScript/CSSを排除
- サーバの応答時間の短縮
- ブラウザのキャッシュ活用
- リンク先ページのリダイレクトを使用しない
- 圧縮を有効
- 画像を最適化
- 表示可能コンテンツの優先順位を決定
【ユーザーエクスペリエンス関連（モバイルのみ））】
- viewportの設定
- コンテンツのサイズを表示域に合わせる
- タップ ターゲットのサイズを適切に調整
- プラグインを使用しない
- 判読可能なフォントサイズの使用
NGとなった項目については、修正の方法を提示してくれるので、内容に沿って対応することでサイトがよりいいものになります。ただし、対応が難しいものも存在します。
例えば、共通のCSSファイルを利用しているためHTMLファイルに埋め込むことができなかったり、AngularJSを利用している場合は、外部スクリプトファイルの読み込みを非同期で行うことが難しかったり、など。
以下、指摘された内容と対応方法の例です。
ブラウザのキャッシュを活用する
サーバからのレスポンスに明示的なキャッシュ ヘッダーが含まれていない場合にチェックNGとなります。Apacheを利用している場合、「.htaccess」に以下のような内容を追記します。
ExpiresActive On
ExpiresByType image/gif "access plus 2 weeks"
ExpiresByType image/jpeg "access plus 2 weeks"
ExpiresByType image/png "access plus 2 weeks"
ExpiresByType text/css "access plus 7 days"
ExpiresByType text/javascript "access plus 7 days"
ExpiresByType application/x-javascript "access plus 7 days"
詳しくはこちらを参照。
サーバから送られてくるファイルの圧縮を有効にする
サーバからのレスポンスで送られてくるファイルが圧縮されていない場合にチェックNGとなります。Apacheを利用している場合、「.htaccess」に以下のような内容を追記します。
<IfModule mod_deflate.c>
SetOutputFilter DEFLATE
# Mozilla4系などの古いブラウザで無効、しかしMSIEは除外（未対応またはバグで動作しないブラウザの場合は圧縮しない）
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
# gifやjpgなど圧縮済みのコンテンツは再圧縮しない
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI _\.utxt$ no-gzip
# htmlやcssなどは圧縮
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/atom_xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
AddOutputFilterByType DEFLATE application/json
</IfModule>
クライアント側のブラウザでも対応している必要があるため、５～7行目はその辺りの判定です。
圧縮する分、サーバに負荷がかかりますが、最近はサーバマシンのスペックが上がっていることから、対応した方がいい結果が得られます。
詳しくはこちらを参照。
viewportの設定
viewportを設定することで携帯端末でのページ表示方法を制御してくれます。以下は設定例です。
<head>
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, maximum-scale=1.0, user-scalable=yes">
</head>
詳しくはこちらを参照。
コンテンツのサイズを表示域に合わせる
スタイルの幅に大きな値「width:960px;」などを指定しているとチェックNGになります。端末ごとに表示できる幅が異なるので、幅（width）に直接大きな値を設定しないようにします。
一つの要素の幅が「width:300px;」とかだとチェックOKだったので、その要素をウィンドウの幅によって横並びで表示させたり、パーセント指定して対応します。
タップ ターゲットのサイズを適切に調整
タップ可能なボタンが小さかったり、他ボタンとの間隔が狭かったりするとNGになります。レスポンシブデザインでサイトを作成していて、PCブラウザでばかり確認をしているとチェックNGになるので、Webサイトのデザインに修正が入る場合は、スマートフォンやタブレットでも確認しておく必要があります。
備考
ページの表示や時間のかかる処理を実行する場合、処理中の状態や進捗状況を表示するだけで、ユーザーエクスペリエンスは格段に向上します。
ページ内に複数の画像を表示する場合は、最初は表示エリアの画像のみ表示したり、一覧ではサムネイル画像を表示してページの表示速度を上げるといった対応をとるのが一般的です。
Apacheを利用する場合、KeepAliveやログ対象の設定が必要です。