モバイルフレンドリーテスト3(20150203)

このページの内容

以前作成したホームページの中で、今回は年に一度更新して毎年使用するもの（※１）があり、作成方法が似ている2つについてRWD化改造し、Googleのモバイルフレンドリーテスト（※２）に合格しました。

◆年1回の更新で毎年使うページを「RWD化」した

「モバイルフレンドリーテストがNGからOKへ」

 ◆ 図はクリックするとlightboxで拡大されます。「次へボタン」ボタンをクリックで連続表示できます。

画像1

画像1 ①NG。

画像2

画像2 ①OK。

画像1

画像1 ①NG。

画像1

画像1 ①NG。

2月1日にRWDに作り変えたとTweetしたものの、Googleのモバイルフレンドリーテストをやっていなかった事に気付き、急きょTestしました。

しかし、結果は2つのHP共予想に反しNGになってしまい、慌ててしまいました。 このページがモバイルフレンドリーでない理由として

  1. × コンテンツの幅が画面の幅を超えています。
  2. × リンク同士が近すぎます。

だった。

画面を縮小させて見た時（※３）全ての内容が、画面幅ごとに自動改行された為、従来のHPではこの様なことが無かっただけに、早とちりしてしまった事に気付き、何度も修正してみたが上記testは全てNGであった為、一時はこのTweetを取り消し手続きしようかと思ったが、更に修正し遂に2個ともtestで合格した。

（※３）

パソコン画面の原点は左上（原点0,0）の為、右上のボタンは「最大化ボタン」をクリックすると、「元に戻す（縮小）ボタン」に変わります。このボタンを押すと右端Y軸線上のマウスポインターが←→に変わるため、左へドラッグして画面幅を縮小させます。左（X軸0の方向）からの距離480pxがスマホサイズ、更に768pxがタブレットサイズ、更に769px～がPCサイズ（これらはブレークポイント（※４）と呼ばれています。）になる。但し、単位はpx(ピクセル)です。 その為この3つのデバイスの横幅は、画面サイズ等の「解像度」ごとに異なるため「アプリ」でpx表示のものさし（※５）を表示させ確認した。

とにかくtestに合格したから良かったものの、もし気づくのが遅れて未対応ページが沢山できた後の事を考えればゾットするが、今回は早く対応出来たのでホッとしました。

（※４） ブレイクポイントのまとめ 外部リンク    （※５） ものさしpix 外部リンク

Λ