スマートフォン対応後の確認

ホームページをスマートフォン対応させた後の確認方法について説明しています。

パソコンのブラウザで確認

 レスポンシブウェブデザイン等でスマートフォン対応したサイトは、FireFoxの開発ツールやGoogle Chromeのデベロッパーツールで、スマートフォンから見た時の画面を簡単にチェック出来ます。

 フォント等が異なるため全く同じではありませんが、横にはみ出していないか、デザインが崩れていないか等最低限の確認が出来ます。

ブラウザと実機での見た目の違い

 HTMLやCSSファイルをサーバーにアップロードしなくても、パソコンに保存しているファイルで確認出来るため、作成途中に何度もチェックする時に便利です。

 尚、FireFox開発ツールの詳細は「Firefoxの要素を調査」をご参照下さい。又、Google Chromeデベロッパーツールの詳細は「Google Chromeの要素を検証」をご参照下さい。

実機で確認

 やはり実機で確認する必要がありますが、スマートフォンも機種が多くて全て確認する事は不可能です。それでも、最低限はAndroidとiPhoneの1機種ずつ位で確認しておいた方が良いと思います。

iPhoneとAndroidでの見た目の違い

 両方持っている人は少ないと思いますが、友人に見て貰う等で、1度はチェックする事をお奨めします。その際、テスト的にサーバーにアップロードして、インターネット経由でチェックするのが一番簡単です。

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

 Googleが提供しているサイトに「モバイルフレンドリーテスト」があります。

 URLを入力して「分析」ボタンをクリックするだけで、スマートフォン対応出来ているかチェックしてくれます。又、スマートフォンからどのように見えるか画面も表示してくれます。

 モバイルフレンドリーでない場合は、以下から該当する項目が表示されます。

  1. テキストが小さすぎて読めません
  2. モバイル用 viewport が設定されていません
  3. コンテンツの幅が画面の幅を超えています
  4. リンク同士が近すぎます
  5. 互換性のないプラグインを使用しています

 1.〜3.は、基本的なスマートフォン対応が出来ていない時に表示されます。「簡単!スマートフォン対応」を参考に対応して下さい。

 4.は、スマートフォンの小さな画面で間違ってタップしないよう配慮されていない事を示すため、「タップターゲットのサイズ調整」で対応出来ます。

 5.は、動画のフラッシュを使っているのであれば「動画のスマートフォン対応」で対応出来ます。

 モバイルフレンドリーテストで「問題ありません。 このページはモバイル フレンドリーです。」と表示されれば上記はクリア出来ています。

サイト関連1

ホームページ作成「簡単!スマートフォン対応
ホームページ作成「画像のスマートフォン対応
ホームページ作成「画像のRetinaディスプレイ対応
ホームページ作成「表のスマートフォン対応
ホームページ作成「動画のスマートフォン対応
ホームページ作成「タップターゲットのサイズ調整
ホームページ作成「スマホとパソコンで表示を変える
  • このエントリーをはてなブックマークに追加