指標

マルチデバイスに対応するときの指標

• 2007年にiPhoneが登場して以来、デバイスの多様化が進む中「どうやって小さい画面に対応するのか」が課題となってきました

Google モバイルガイド

• マルチデバイス対応において求められる考え方や技術的な手法がまとめられており、ページ制作の際に１つの指標として利用することができます

モバイルフレンドリーテスト

• マルチデバイス対応に問題がないかどうかをチェックすることができます

PageSpeed Insights

• ページの表示速度をチェックする

マルチデバイス対応のポイント

モバイルフレンドリー

1. ビューポートの設定を行う
2. コンテンツの幅が画面の幅を超えないようにする（デバイスにあったページの用意、デバイス判別）
3. テキストが小さくなり過ぎないようにする（マルチデバイスに対応したテキスト）
4. リンク同士が近すぎないようにする（マルチデバイスに対応したタップターゲット）
5. 互換性のないプラグインを使用しないようにする（マルチデバイスに対応したビデオ）

表示速度

1. HTML/CSS/JavaScriptを縮小する（ミニファイ処理で削減する）
2. 圧縮を有効にする（HTTP圧縮を利用する）
3. 画像を最適化する（画像のデータ量を減らす）
4. レスポンシブイメージを利用する
5. ベクター形式のデータを利用する（SVGを利用する）
6. 読み込む画像のファイル数を減らす（HTTPリクエストを減らす）
7. ブラウザのキャッシュを活用する
8. 表示可能コンテンツの優先順位を決定する
9. スクロールせずに見えるコンテンツのレンダリングをブロックしているJavaScript/CSSを排除する
10. リンク先へのリダイレクトを使用しない
11. サーバーの応答時間を短縮する

GTmetrix

• パソコン環境を基準にGoogleのPageSpeed InsightsとYahoo!のYSlowの判定結果を確認できるオンラインツールです